Changeset 406 in tmcsimulator for trunk/webapps/cmsmonitor/index.html

Timestamp:

05/15/2019 03:32:34 PM (7 years ago)

Author:

jdalbey

Message:

Enhance CMS monitor with alternate row background colors. Fixes #109.

File:

• trunk/webapps/cmsmonitor/index.html (modified) (4 diffs)

trunk/webapps/cmsmonitor/index.html

@@ -49 +49 @@
   padding: 0px 20% 20px 20%;
 }
+.odd {
+  background-color: rgb(29, 21, 21);
+}
+.even {
+  background-color: #323232;
+}
 .divider {
   font-family: Scoreboard;
@@ -96 +102 @@
     function loadAllcmsMessages()
     {
+        // counter that alternate the background color of the cms message 
+        var cnt = 0;
         var display = document.getElementById("msgs");
         display.innerHTML = ""
@@ -105 +113 @@
             for (var i = 0; i < messagejson.data.length; i++)
             {
+                var bg; // variable that alternate the background color for cms message
                 var item = messagejson.data[i];
                 // Find the location for this message
@@ -121 +130 @@
                 if (phase1 != "<br><br><br>" || phase2 != "<br><br>")
                 {
-                    display.innerHTML += "<div id=\"cms_info\">" + item.cms.index + ": " + 
+                    // Keep track of the number of non-empty cms message 
+                    cnt++;
+                    // Determine odd or even cms message in order to alternate the background color
+                    if (cnt%2==0) {
+                      bg = "even";
+                    } else {
+                      bg = "odd";
+                    }
+                    display.innerHTML += "<div id=\"cms_info\" class=\"" + bg + "\">" + item.cms.index + ": " + 
                         cmsLoc.properties.location + " " + cmsLoc.properties.street + "</div>";
-                    display.innerHTML += "<div class=\"cms_content\">" + phase1 + "</div>" +
-                      "<div class=\"divider\"> -----------------------------------------------</div>" +
-                      "<div class=\"cms_content\">" + phase2 + "</div>";
+                    display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1 + "</div>" +
+                      "<div class=\"divider " + bg + "\"> -----------------------------------------------</div>" +
+                      "<div class=\"cms_content " + bg + "\">" + phase2 + "</div>";
                 }
             }