source: tmcsimulator/trunk/webapps/unifiedlogmonitor.html @ 512

Revision 512, 2.8 KB checked in by jdalbey, 6 years ago (diff)

unifiedlogmonitor.html implement ticket #190: add color coding

Line 
1<!DOCTYPE html>
2<html>
3  <head>
4  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5    <title>Unified Logger v</title> 
6<style>
7* {
8  box-sizing: border-box;
9}
10body {
11   background-color: #000033;
12   color: goldenrod
13}
14
15/* Color Code for unified logger */ 
16.CAD-log{
17    color: #00FFFF;
18}
19.Activity-log{
20    color: #32CD32;
21}
22.CMS-Activated{
23    color: #FFFF00;
24}
25
26/* Padding for table cells */
27td { padding-top:2px; padding-right:10px; padding-bottom:2px; padding-left:10px; }
28/* styling for messages */
29#msgs{
30  padding: 15px 10% 15px 10%;
31  font-size: 20px;
32  font-family: monospace;
33  font-weight:lighter;
34  color: white;
35  padding-left: 2%;
36  padding-right: 2%;
37}
38</style>
39</head>
40<body>
41<div class="row">
42    <p id="msgs"></p>
43</div>
44    <script  src="common/js/fileutils.js"></script>
45    <script  src="common/js/revision_number.dat"></script>
46    <script  src="common/js/displayutils.js"></script> 
47   <script>
48// Load the unified log
49function loadLog()
50{
51    var display = document.getElementById("msgs");
52    display.innerHTML = ""
53    // Asynchronous file read of unified log data
54    loadJSON("dynamicdata/unifiedlog.csv", function(response)
55    {
56        // Format the csv data into an HTML table
57        var allRows = response.split(/\r?\n|\r/);
58        var table = '<table>';
59        // Put the last log entry at the TOP of the table
60        for (var singleRow = allRows.length-1; singleRow >= 0; singleRow--)
61        {
62            var rowCells = allRows[singleRow].split(',');
63            var msg_type = "";
64
65            // trimming white space in the type of messages
66            // ingore the emtpy line
67            if (rowCells.length > 1) {
68                console.log("row cell " , rowCells[1]);
69                rowCells[1] = rowCells[1].trim();
70            }
71            // Implement ticket #190
72            // Checking for the type of logging information
73            if (rowCells[1] == "CAD log") {
74                msg_type = "class=\"CAD-log\"";
75            } else if (rowCells[1] == "Activity Log.") {
76                msg_type = "class=\"Activity-log\"";
77            } else if (rowCells[1] == "CMS Activated.") {
78                msg_type = "class=\"CMS-Activated\"";
79            } 
80            // add the message type class to that row
81            table += '<tr ' + msg_type + '>';
82            for (var rowCell = 0; rowCell < rowCells.length; rowCell++)
83            {
84                table += '<td>';
85                table += rowCells[rowCell];
86                table += '</td>';
87            }
88            table += '</tr>';
89        }
90        table += '</table>';
91        // Add the table to the messages div
92        display.innerHTML += table;
93    }
94    );
95}
96// Start
97showRevision();
98loadLog();
99// start an interval timer to refresh the log every 5 seconds
100var displayTimer = setInterval(loadLog, 5000);
101   </script>
102  </body>
103</html>
Note: See TracBrowser for help on using the repository browser.