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

Revision 406, 4.7 KB checked in by jdalbey, 7 years ago (diff)

Enhance CMS monitor with alternate row background colors. Fixes #109.
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.cms_content{
46  font-size: 34px;
47  font-family: Scoreboard;
48  font-weight: 550;
49  padding: 0px 20% 20px 20%;
50}
51.odd {
52  background-color: rgb(29, 21, 21);
53}
54.even {
55  background-color: #323232;
56}
57.divider {
58  font-family: Scoreboard;
59  font-weight: 550;
60  padding-left: 5%;
61  padding-right: 5%;
62}
63/* Clear floats after the columns */
64.row:after {
65  content: "";
66  display: table;
67  clear: both;
68}
69</style>
70</head>
71<body>
72<div class="row">
73  <div class="column left" >
74    <h2>Active CMS Messages</h2>
75    <p id="msgs"></p>
76  </div>
77</div>
78
79
80    <script  src="../common/js/fileutils.js"></script>
81    <script  src="../common/js/revision_number.dat"></script>
82    <script  src="../common/js/displayutils.js"></script> 
83   <script>
84    showRevision();
85    var cmsLocations = {};
86    // Load the CMS locations from the geojson file
87    function loadCMSlocations()
88    {
89        loadJSON("../cptms/data_layers/cms_locations_D12.gjson", function(response)
90        {
91            // Parse JSON string into object
92            var cmsjson = JSON.parse(response);
93            for (var i = 0; i < cmsjson.features.length; i++)
94            {
95                var item = cmsjson.features[i];
96                // Add each item to a lookup dictionary
97                cmsLocations[item.id] = item;
98            }
99        });
100    }
101    // Load the file of CMS messages
102    function loadAllcmsMessages()
103    {
104        // counter that alternate the background color of the cms message
105        var cnt = 0;
106        var display = document.getElementById("msgs");
107        display.innerHTML = ""
108        loadJSON("../dynamicdata/cms_messages.json", function(response)
109        {
110            // Parse JSON string into object
111            messagejson = JSON.parse(response);
112            // Consider each message
113            for (var i = 0; i < messagejson.data.length; i++)
114            {
115                var bg; // variable that alternate the background color for cms message
116                var item = messagejson.data[i];
117                // Find the location for this message
118                var cmsLoc = cmsLocations[item.cms.index];
119                // Build the message display
120                // divide the display message into 2 phases
121                var phase1 = item.cms.message.phase1.Line1.toUpperCase() + "<br>" +
122                    item.cms.message.phase1.Line2.toUpperCase() + "<br>" +
123                    item.cms.message.phase1.Line3.toUpperCase() + "<br>";
124                var phase2 = item.cms.message.phase2.Line1.toUpperCase() +  "<br>" +
125                    item.cms.message.phase2.Line2.toUpperCase() + "<br>" +
126                    item.cms.message.phase2.Line3.toUpperCase();
127     
128                // If the message isn't blank, append it to the list
129                // adding a seperate dotted line between phase1 and phase2
130                if (phase1 != "<br><br><br>" || phase2 != "<br><br>")
131                {
132                    // Keep track of the number of non-empty cms message
133                    cnt++;
134                    // Determine odd or even cms message in order to alternate the background color
135                    if (cnt%2==0) {
136                      bg = "even";
137                    } else {
138                      bg = "odd";
139                    }
140                    display.innerHTML += "<div id=\"cms_info\" class=\"" + bg + "\">" + item.cms.index + ": " + 
141                        cmsLoc.properties.location + " " + cmsLoc.properties.street + "</div>";
142                    display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1 + "</div>" +
143                      "<div class=\"divider " + bg + "\"> -----------------------------------------------</div>" +
144                      "<div class=\"cms_content " + bg + "\">" + phase2 + "</div>";
145                }
146            }
147        });
148    }
149
150// Start
151loadCMSlocations();
152loadAllcmsMessages();
153// start an interval timer to refresh the cms icons every 10 seconds
154var cmsTimer = setInterval(loadAllcmsMessages, 10000);
155
156   </script>
157  </body>
158</html>
Note: See TracBrowser for help on using the repository browser.