Warning: Can't use blame annotator: 
svn blame failed on trunk/webapps/cmsmonitor/index.html: ("Can't find a temporary directory: Internal error", 20014)

source: tmcsimulator/trunk/webapps/cmsmonitor/index.html @ 472

Revision 472, 10.7 KB checked in by jdalbey, 7 years ago (diff)

cmsmonitor/index.html Fix defect #173.
RevLine 
1<!DOCTYPE html>
2<html>
3  <head>
4<!-- Launch with  python -m CGIHTTPServer 80  -->
5  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
6    <title>CMS Monitor v0.2</title> 
7<style>
8@font-face {
9  font-family: Scoreboard;
10  src: url('../cptms/js/scoreboard.ttf');
11}
12* {
13  box-sizing: border-box;
14}
15body {
16   background-color: #000033;
17}
18/* Create three unequal columns that float next to each other */
19.column {
20  float: left;
21  padding: 10px;
22  background-color:black; 
23  color:goldenrod
24}
25
26.left {
27  width: 100%;
28}
29
30.middle, .right {
31  width: 25%;
32}
33/* styling for cms monitor */
34#msgs{
35  padding: 15px 10% 15px 10%;
36}
37#cms_info{
38  font-size: 20px;
39  font-family: Arial;
40  font-weight:lighter;
41  color: white;
42  padding-left: 5%;
43  padding-right: 5%;
44}
45#har_info{
46  font-size: 20px;
47  font-family: Arial;
48  font-weight:lighter;
49  color: white;
50  padding-left: 5%;
51  padding-right: 5%;
52}
53
54.har_content{
55  font-size: 20px;
56  padding: 8px;
57  font-family: "Calibri";
58  color: white;
59  margin: 5px 10% 20px 10%;
60  background-color: rgb(29, 21, 21);
61  white-space:nowrap;
62  overflow:hidden;
63}
64
65.cms_content{
66  font-size: 34px;
67  font-family: Scoreboard;
68  font-weight: 550;
69  padding: 0px 20% 20px 20%;
70}
71.odd {
72  background-color: rgb(29, 21, 21);
73}
74.even {
75  background-color: #323232;
76}
77.divider {
78  font-family: Scoreboard;
79  font-weight: 550;
80  padding-left: 5%;
81  padding-right: 5%;
82}
83/* Clear floats after the columns */
84.row:after {
85  content: "";
86  display: table;
87  clear: both;
88}
89
90#page {
91  margin-left: 46%;
92}
93
94</style>
95</head>
96<body>
97<div class="row">
98  <div class="column left" >
99    <h2>Active CMS Messages</h2>
100    <h3 id="page">Pg 1 of 1</h3>
101    <p id="msgs"></p>
102  </div>
103</div>
104<div class="row">
105    <div class="column left" >
106      <h2>Active HAR Messages</h2>
107      <p id="har"></p>
108    </div>
109  </div>
110</div>
111
112
113    <script  src="../common/js/fileutils.js"></script>
114    <script  src="../common/js/revision_number.dat"></script>
115    <script  src="../common/js/displayutils.js"></script> 
116   <script>
117    showRevision();
118        var msgsPerPage = 8; // constant: number of CMS msgs per display page
119    var loaded = false;
120    var cmsLocations = {};
121    var harLocations = {};
122    var phase = {one: [], two: [], header:[], len: 0}; //Phase1 and Phase2 messages, and location info each stored in a different array
123    var pageNumber = 0; //Current page index
124    var messages = {}; //Container to hold arrays for pagination
125
126    // Load the CMS locations from the geojson file
127    function loadCMSlocations()
128    {
129        loadJSON("../cptms/data_layers/cms_locations_D12.gjson", function(response)
130        {
131            // Parse JSON string into object
132            var cmsjson = JSON.parse(response);
133            for (var i = 0; i < cmsjson.features.length; i++)
134            {
135                var item = cmsjson.features[i];
136                // Add each item to a lookup dictionary
137                cmsLocations[item.id] = item;
138            }
139        });
140    }
141    // Load the HAR locations from the geojson file
142    function loadHARLocations()
143    {
144      loadJSON("../cptms/data_layers/har_locations_D12.gjson", function(response)
145        {
146            // Parse JSON string into object
147            var harjson = JSON.parse(response);
148            for (var i = 0; i < harjson.features.length; i++)
149            {
150                var item = harjson.features[i];
151                // Add each item to a lookup dictionary
152                harLocations[item.id] = item;
153            }
154        });
155    }
156    // Load the file of HAR messages
157    function loadAllHARMessages()
158    {
159      var cnt = 1;
160      var display = document.getElementById("har");
161      display.innerHTML = "";
162      loadJSON("../dynamicdata/har_messages.json", function(response)
163        {
164            // Parse JSON string into object
165            messagejson = JSON.parse(response);
166            // Consider each message
167            for (var i = 0; i < messagejson.data.length; i++)
168            {
169              var item = messagejson.data[i];
170              var harLoc = harLocations[item.har.index];
171              var phase1 = item.har.message.phase1.Line1;
172              if (phase1 != "" && cnt <= 3) //limit to 3 messages
173              {
174                display.innerHTML += "<div id=\"har_info\">" + item.har.index + ": " + 
175                        harLoc.properties.location + " " + harLoc.properties.street + "</div>";
176                display.innerHTML += "<div class=\"har_content\">" + phase1 + "</div>" ;
177                cnt++;
178              }
179            }
180        });
181    }
182    // Load the file of CMS messages
183    function loadAllcmsMessages()
184    {
185        // counter that alternate the background color of the cms message
186        var cnt = 0;
187        var display = document.getElementById("msgs");
188        display.innerHTML = "";
189        loadJSON("../dynamicdata/cms_messages.json", function(response)
190        {
191            // Parse JSON string into object
192            messagejson = JSON.parse(response);
193            // Consider each message
194            for (var i = 0; i < messagejson.data.length; i++)
195            {
196                var bg; // variable that alternate the background color for cms message
197                var item = messagejson.data[i];
198                // Find the location for this message
199                var cmsLoc = cmsLocations[item.cms.index];
200                // Build the message display
201                // divide the display message into 2 phases
202                var phase1 = item.cms.message.phase1.Line1.toUpperCase() + "<br>" +
203                    item.cms.message.phase1.Line2.toUpperCase() + "<br>" +
204                    item.cms.message.phase1.Line3.toUpperCase() + "<br>";
205                var phase2 = item.cms.message.phase2.Line1.toUpperCase() +  "<br>" +
206                    item.cms.message.phase2.Line2.toUpperCase() + "<br>" +
207                    item.cms.message.phase2.Line3.toUpperCase() + "<br>";
208                // If the message isn't blank, append it to the list
209                // adding a seperate dotted line between phase1 and phase2
210                if (phase1 != "<br><br><br>" || phase2 != "<br><br><br>")
211                {
212                    // store phase 1 and phase 2 messages in arrays
213                    phase.one[cnt] = phase1;
214                    phase.two[cnt] = phase2;
215                    // Keep track of the number of non-empty cms message
216                    cnt++;
217                    // Determine odd or even cms message in order to alternate the background color
218                    if (cnt%2==0) 
219                                        {
220                      bg = "even";
221                    } else 
222                                        {
223                      bg = "odd";
224                    }
225                    // Store location info in array
226                    phase.header[cnt-1] = "<div id=\"cms_info\" class=\"" + bg + "\">" + item.cms.index + ": " + 
227                        cmsLoc.properties.location + " " + cmsLoc.properties.street + "</div>";
228
229                    // Only come here initially where page is loaded
230                   /* if (i <= messagejson.data.length - 1 && loaded === false) {
231                      display.innerHTML += phase.header[cnt-1];
232                      display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1 + "</div>" ;
233                      if (i == messagejson.data.length - 1)
234                        loaded = true;
235                   }*/
236                }
237            } 
238                        phase.len = cnt;
239                    // After all relevant info is stored in arrays, we can begin pagination
240                        phase.one = phase.one.slice(0, phase.len);
241                        phase.two = phase.two.slice(0, phase.len);
242                        //console.log(phase.one, phase.one.length, phase.len);
243                        switchPages();
244        });
245    }
246
247// Returns an array of elements to be displayed given a page_number
248function paginate (array, page_size, page_number) {
249  --page_number; // because pages logically start with 1, but technically with 0
250  return array.slice(page_number * page_size, (page_number + 1) * page_size);
251}
252
253function switchPages()
254{
255    var display = document.getElementById("msgs");
256    var finalPage = Math.ceil(phase.one.length / msgsPerPage);
257    display.innerHTML = "";
258    pageNumber++;
259    // Check if last page is reached, then cycle back to 1
260    if (pageNumber > finalPage)
261    {
262        pageNumber = 1;
263    }
264    // Change Page Number
265    var pageIndex = document.getElementById("page");
266    pageIndex.innerHTML = "Pg " + pageNumber + " of " + finalPage;
267    // Paginate all arrays
268    var phase1msgs = paginate(phase.one, msgsPerPage, pageNumber); //phase 1 messages after pagination
269    var phase2msgs = paginate(phase.two, msgsPerPage, pageNumber); //phase 2 messages after pagination
270    var header = paginate(phase.header, msgsPerPage, pageNumber); //location info after pagination
271    // Output the CMS messages and location info from the paginated arrays
272    for (var cnt = 0; cnt < phase1msgs.length; cnt++)
273    {
274        // Determine odd or even cms message in order to alternate the background color
275        if (cnt % 2 == 0)
276        {
277            bg = "odd";
278        }
279        else
280        {
281            bg = "even";
282        }
283        display.innerHTML += header[cnt];
284        display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1msgs[cnt] + "</div>";
285    }
286    // Hold the paginated arrays in container 'messages'
287    messages.phase1msgs = phase1msgs;
288    messages.phase2msgs = phase2msgs;
289}
290
291function switchPhase()
292{
293    var cnt = 0;
294    // Do a swap between the arrays in 'messages' storing each phase
295    var temp = messages.phase1msgs;
296    messages.phase1msgs = messages.phase2msgs;
297    messages.phase2msgs = temp;
298    if (messages.phase1msgs.length == 0)
299    {
300        messages.phase1msgs = phase.two;
301    }
302    // Get all CMS messages currently displayed
303    odd = document.getElementsByClassName('cms_content odd');
304    even = document.getElementsByClassName('cms_content even');
305    // Change each message to display messages from the swapped array instead
306    [].slice.call(odd).forEach(function(o)
307    {
308        if (messages.phase1msgs[cnt] != "<br><br><br>")
309        {
310            o.innerHTML = messages.phase1msgs[cnt] + "</div>";
311        }
312        cnt += 2;
313    });
314    cnt = 1;
315    [].slice.call(even).forEach(function(e)
316    {
317        if (messages.phase1msgs[cnt] != "<br><br><br>")
318        {
319            e.innerHTML = messages.phase1msgs[cnt] + "</div>";
320        }
321        cnt += 2;
322    });
323}
324// Start
325loadCMSlocations();
326loadHARLocations();
327loadAllcmsMessages();
328loadAllHARMessages();
329
330// start an interval timer to switch phases every 5 seconds
331var phaseTimer = setInterval(switchPhase, 2000);
332// start an interval timer to refresh the cms icons every 10 seconds
333var cmsTimer = setInterval(loadAllcmsMessages, 10000);
334// start an interval timer to refresh the har messages every 10 seconds
335var harTimer = setInterval(loadAllHARMessages, 10000);
336
337   </script>
338  </body>
339</html>
Note: See TracBrowser for help on using the repository browser.