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

Revision 463, 10.6 KB checked in by jdalbey, 7 years ago (diff)

Update cms monitor with enhancements #156
Line 
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:[]}; //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        });
239        // After all relevant info is stored in arrays, we can begin pagination
240        //console.log(phase.one, phase.one.length);
241        switchPages();
242    }
243
244// Returns an array of elements to be displayed given a page_number
245function paginate (array, page_size, page_number) {
246  --page_number; // because pages logically start with 1, but technically with 0
247  return array.slice(page_number * page_size, (page_number + 1) * page_size);
248}
249
250function switchPages()
251{
252    var display = document.getElementById("msgs");
253    var finalPage = Math.ceil(phase.one.length / msgsPerPage);
254    display.innerHTML = "";
255    pageNumber++;
256    // Check if last page is reached, then cycle back to 1
257    if (pageNumber > finalPage)
258    {
259        pageNumber = 1;
260    }
261    // Change Page Number
262    var pageIndex = document.getElementById("page");
263    pageIndex.innerHTML = "Pg " + pageNumber + " of " + finalPage;
264    // Paginate all arrays
265    var phase1msgs = paginate(phase.one, msgsPerPage, pageNumber); //phase 1 messages after pagination
266    var phase2msgs = paginate(phase.two, msgsPerPage, pageNumber); //phase 2 messages after pagination
267    var header = paginate(phase.header, msgsPerPage, pageNumber); //location info after pagination
268    // Output the CMS messages and location info from the paginated arrays
269    for (var cnt = 0; cnt < phase1msgs.length; cnt++)
270    {
271        // Determine odd or even cms message in order to alternate the background color
272        if (cnt % 2 == 0)
273        {
274            bg = "odd";
275        }
276        else
277        {
278            bg = "even";
279        }
280        display.innerHTML += header[cnt];
281        display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1msgs[cnt] + "</div>";
282    }
283    // Hold the paginated arrays in container 'messages'
284    messages.phase1msgs = phase1msgs;
285    messages.phase2msgs = phase2msgs;
286}
287
288function switchPhase()
289{
290    var cnt = 0;
291    // Do a swap between the arrays in 'messages' storing each phase
292    var temp = messages.phase1msgs;
293    messages.phase1msgs = messages.phase2msgs;
294    messages.phase2msgs = temp;
295    if (messages.phase1msgs.length == 0)
296    {
297        messages.phase1msgs = phase.two;
298    }
299    // Get all CMS messages currently displayed
300    odd = document.getElementsByClassName('cms_content odd');
301    even = document.getElementsByClassName('cms_content even');
302    // Change each message to display messages from the swapped array instead
303    [].slice.call(odd).forEach(function(o)
304    {
305        if (messages.phase1msgs[cnt] != "<br><br><br>")
306        {
307            o.innerHTML = messages.phase1msgs[cnt] + "</div>";
308        }
309        cnt += 2;
310    });
311    cnt = 1;
312    [].slice.call(even).forEach(function(e)
313    {
314        if (messages.phase1msgs[cnt] != "<br><br><br>")
315        {
316            e.innerHTML = messages.phase1msgs[cnt] + "</div>";
317        }
318        cnt += 2;
319    });
320}
321// Start
322loadCMSlocations();
323loadHARLocations();
324loadAllcmsMessages();
325loadAllHARMessages();
326
327// start an interval timer to switch phases every 5 seconds
328var phaseTimer = setInterval(switchPhase, 2000);
329// start an interval timer to refresh the cms icons every 10 seconds
330var cmsTimer = setInterval(loadAllcmsMessages, 10000);
331// start an interval timer to refresh the har messages every 10 seconds
332var harTimer = setInterval(loadAllHARMessages, 10000);
333
334   </script>
335  </body>
336</html>
Note: See TracBrowser for help on using the repository browser.