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

Timestamp:

07/23/2019 05:08:29 PM (7 years ago)

Author:

jdalbey

Message:

Update cms monitor with enhancements #156

File:

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

trunk/webapps/cmsmonitor/index.html

@@ -43 +43 @@
   padding-right: 5%;
 }
+#har_info{
+  font-size: 20px;
+  font-family: Arial;
+  font-weight:lighter;
+  color: white;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+.har_content{
+  font-size: 20px;
+  padding: 8px;
+  font-family: "Calibri";
+  color: white;
+  margin: 5px 10% 20px 10%;
+  background-color: rgb(29, 21, 21);
+  white-space:nowrap;
+  overflow:hidden;
+}
+
 .cms_content{
   font-size: 34px;
@@ -67 +87 @@
   clear: both;
 }
+
+#page {
+  margin-left: 46%;
+}
+
 </style>
 </head>
@@ -73 +98 @@
   <div class="column left" >
     <h2>Active CMS Messages</h2>
+    <h3 id="page">Pg 1 of 1</h3>
     <p id="msgs"></p>
+  </div>
+</div>
+<div class="row">
+    <div class="column left" >
+      <h2>Active HAR Messages</h2>
+      <p id="har"></p>
+    </div>
   </div>
 </div>
@@ -83 +116 @@
    <script>
     showRevision();
+        var msgsPerPage = 8; // constant: number of CMS msgs per display page
+    var loaded = false;
     var cmsLocations = {};
+    var harLocations = {};
+    var phase = {one: [], two: [], header:[]}; //Phase1 and Phase2 messages, and location info each stored in a different array 
+    var pageNumber = 0; //Current page index
+    var messages = {}; //Container to hold arrays for pagination
+
     // Load the CMS locations from the geojson file
     function loadCMSlocations()
@@ -99 +139 @@
         });
     }
+    // Load the HAR locations from the geojson file
+    function loadHARLocations()
+    {
+      loadJSON("../cptms/data_layers/har_locations_D12.gjson", function(response)
+        {
+            // Parse JSON string into object
+            var harjson = JSON.parse(response);
+            for (var i = 0; i < harjson.features.length; i++)
+            {
+                var item = harjson.features[i];
+                // Add each item to a lookup dictionary
+                harLocations[item.id] = item;
+            }
+        });
+    }
+    // Load the file of HAR messages
+    function loadAllHARMessages()
+    {
+      var cnt = 1;
+      var display = document.getElementById("har");
+      display.innerHTML = "";
+      loadJSON("../dynamicdata/har_messages.json", function(response)
+        {
+            // Parse JSON string into object
+            messagejson = JSON.parse(response);
+            // Consider each message 
+            for (var i = 0; i < messagejson.data.length; i++)
+            {
+              var item = messagejson.data[i];
+              var harLoc = harLocations[item.har.index];
+              var phase1 = item.har.message.phase1.Line1;
+              if (phase1 != "" && cnt <= 3) //limit to 3 messages
+              {
+                display.innerHTML += "<div id=\"har_info\">" + item.har.index + ": " + 
+                        harLoc.properties.location + " " + harLoc.properties.street + "</div>";
+                display.innerHTML += "<div class=\"har_content\">" + phase1 + "</div>" ;
+                cnt++;
+              }
+            }
+        });
+    }
     // Load the file of CMS messages
     function loadAllcmsMessages()
@@ -105 +186 @@
         var cnt = 0;
         var display = document.getElementById("msgs");
-        display.innerHTML = ""
+        display.innerHTML = "";
         loadJSON("../dynamicdata/cms_messages.json", function(response)
         {
@@ -124 +205 @@
                 var phase2 = item.cms.message.phase2.Line1.toUpperCase() +  "<br>" +
                     item.cms.message.phase2.Line2.toUpperCase() + "<br>" +
-                    item.cms.message.phase2.Line3.toUpperCase();
-      
+                    item.cms.message.phase2.Line3.toUpperCase() + "<br>";
                 // If the message isn't blank, append it to the list
                 // adding a seperate dotted line between phase1 and phase2
-                if (phase1 != "<br><br><br>" || phase2 != "<br><br>")
+                if (phase1 != "<br><br><br>" || phase2 != "<br><br><br>")
                 {
+                    // store phase 1 and phase 2 messages in arrays
+                    phase.one[cnt] = phase1;
+                    phase.two[cnt] = phase2;
                     // 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) {
+                    if (cnt%2==0) 
+                                        {
                       bg = "even";
-                    } else {
+                    } else 
+                                        {
                       bg = "odd";
                     }
-                    display.innerHTML += "<div id=\"cms_info\" class=\"" + bg + "\">" + item.cms.index + ": " + 
+                    // Store location info in array
+                    phase.header[cnt-1] = "<div id=\"cms_info\" class=\"" + bg + "\">" + item.cms.index + ": " + 
                         cmsLoc.properties.location + " " + cmsLoc.properties.street + "</div>";
-                    display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1 + "</div>" +
-                      "<div class=\"divider " + bg + "\"> -----------------------------------------------</div>" +
-                      "<div class=\"cms_content " + bg + "\">" + phase2 + "</div>";
+
+                    // Only come here initially where page is loaded 
+                   /* if (i <= messagejson.data.length - 1 && loaded === false) {
+                      display.innerHTML += phase.header[cnt-1];
+                      display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1 + "</div>" ;
+                      if (i == messagejson.data.length - 1)
+                        loaded = true;
+                   }*/
                 }
-            }
+            }            
         });
-    }
-
+        // After all relevant info is stored in arrays, we can begin pagination 
+        //console.log(phase.one, phase.one.length);
+        switchPages();
+    }
+
+// Returns an array of elements to be displayed given a page_number
+function paginate (array, page_size, page_number) {
+  --page_number; // because pages logically start with 1, but technically with 0
+  return array.slice(page_number * page_size, (page_number + 1) * page_size);
+}
+
+function switchPages()
+{
+    var display = document.getElementById("msgs");
+    var finalPage = Math.ceil(phase.one.length / msgsPerPage);
+    display.innerHTML = "";
+    pageNumber++;
+    // Check if last page is reached, then cycle back to 1
+    if (pageNumber > finalPage)
+    {
+        pageNumber = 1;
+    }
+    // Change Page Number
+    var pageIndex = document.getElementById("page");
+    pageIndex.innerHTML = "Pg " + pageNumber + " of " + finalPage;
+    // Paginate all arrays
+    var phase1msgs = paginate(phase.one, msgsPerPage, pageNumber); //phase 1 messages after pagination
+    var phase2msgs = paginate(phase.two, msgsPerPage, pageNumber); //phase 2 messages after pagination
+    var header = paginate(phase.header, msgsPerPage, pageNumber); //location info after pagination
+    // Output the CMS messages and location info from the paginated arrays
+    for (var cnt = 0; cnt < phase1msgs.length; cnt++)
+    {
+        // Determine odd or even cms message in order to alternate the background color
+        if (cnt % 2 == 0)
+        {
+            bg = "odd";
+        }
+        else
+        {
+            bg = "even";
+        }
+        display.innerHTML += header[cnt];
+        display.innerHTML += "<div class=\"cms_content " + bg + "\">" + phase1msgs[cnt] + "</div>";
+    }
+    // Hold the paginated arrays in container 'messages'
+    messages.phase1msgs = phase1msgs;
+    messages.phase2msgs = phase2msgs;
+}
+
+function switchPhase()
+{
+    var cnt = 0;
+    // Do a swap between the arrays in 'messages' storing each phase 
+    var temp = messages.phase1msgs;
+    messages.phase1msgs = messages.phase2msgs;
+    messages.phase2msgs = temp;
+    if (messages.phase1msgs.length == 0)
+    {
+        messages.phase1msgs = phase.two;
+    }
+    // Get all CMS messages currently displayed
+    odd = document.getElementsByClassName('cms_content odd');
+    even = document.getElementsByClassName('cms_content even');
+    // Change each message to display messages from the swapped array instead
+    [].slice.call(odd).forEach(function(o)
+    {
+        if (messages.phase1msgs[cnt] != "<br><br><br>")
+        {
+            o.innerHTML = messages.phase1msgs[cnt] + "</div>";
+        }
+        cnt += 2;
+    });
+    cnt = 1;
+    [].slice.call(even).forEach(function(e)
+    {
+        if (messages.phase1msgs[cnt] != "<br><br><br>")
+        {
+            e.innerHTML = messages.phase1msgs[cnt] + "</div>";
+        }
+        cnt += 2;
+    });
+}
 // Start
 loadCMSlocations();
+loadHARLocations();
 loadAllcmsMessages();
+loadAllHARMessages();
+
+// start an interval timer to switch phases every 5 seconds
+var phaseTimer = setInterval(switchPhase, 2000);
 // start an interval timer to refresh the cms icons every 10 seconds
 var cmsTimer = setInterval(loadAllcmsMessages, 10000);
+// start an interval timer to refresh the har messages every 10 seconds
+var harTimer = setInterval(loadAllHARMessages, 10000);
 
    </script>