diff --git a/server.py b/server.py index e1cf69d..e4a2221 100755 --- a/server.py +++ b/server.py @@ -78,11 +78,12 @@ class EventMessage(): jsonMsg = { 'name': "undefined" ,'log': json.loads(msg) } self.feedName = jsonMsg['name'] + self.zmqName = jsonMsg['zmqName'] self.feed = json.loads(jsonMsg['log']) self.feed = LogItem(self.feed).get_row() def to_json(self): - to_ret = { 'log': self.feed, 'feedName': self.feedName } + to_ret = { 'log': self.feed, 'feedName': self.feedName, 'zmqName': self.zmqName } return 'data: {}\n\n'.format(json.dumps(to_ret)) @app.route("/") diff --git a/static/js/index/index.js b/static/js/index/index.js index 0d85e63..864f516 100644 --- a/static/js/index/index.js +++ b/static/js/index/index.js @@ -7,6 +7,68 @@ for(i=0; i feedStatusFreqCheck) { // no feed + htmlLed.removeClass("led_green"); + htmlLed.addClass("led_red"); + } else { + htmlLed.removeClass("led_red"); + htmlLed.addClass("led_green"); + } + } + this._feedLedsTimeout = setTimeout(function(){ ledmanager.manageColors(); }, feedStatusFreqCheck); + } + +} + class Sources { constructor() { this._sourcesArray = {}; @@ -101,6 +163,7 @@ class Sources { var sources = new Sources(); sources.addSource('global'); +var ledmanager = new LedManager(); var curNumLog = 0; var curMaxDataNumLog = 0; @@ -120,7 +183,7 @@ function connect_source_log() { source_log.onmessage = function(event) { var json = jQuery.parseJSON( event.data ); - updateLogTable(json.feedName, json.log); + updateLogTable(json.feedName, json.log, json.zmqName); }; } @@ -156,25 +219,15 @@ $(document).ready(function () { }); -function ledColorManager() { - $("#status_led").removeClass("led_orange"); - if(new Date().getTime() - keepaliveTime > feedStatusFreqCheck) { // no feed - $("#status_led").removeClass("led_green"); - $("#status_led").addClass("led_red"); - } else { - $("#status_led").removeClass("led_red"); - $("#status_led").addClass("led_green"); - } - _timeoutLed = setTimeout(function(){ ledColorManager(); }, feedStatusFreqCheck); -} -_timeoutLed = setTimeout(function(){ ledColorManager(); }, feedStatusFreqCheck); - // LOG TABLE -function updateLogTable(feedName, log) { +function updateLogTable(feedName, log, zmqName) { if (log.length == 0) return; + // update keepAlives + ledmanager.updateKeepAlive(zmqName); + // Create new row tableBody = document.getElementById('table_log_body'); @@ -200,13 +253,11 @@ function updateLogTable(feedName, log) { } } } else if (feedName == "Keepalive") { - keepaliveTime = new Date().getTime(); - clearTimeout(_timeoutLed); //cancel current led timeout - ledColorManager(); + // do nothing } else { // do nothing - return; } + } function slideAndMax(orig, newData) { diff --git a/templates/index.html b/templates/index.html index 45a1a6f..86a9aa4 100644 --- a/templates/index.html +++ b/templates/index.html @@ -30,36 +30,33 @@ table { } .led_green { - float: right; margin: auto auto; - margin-top: 12.5px; - width: 24px; - height: 24px; + margin-top: 7.5px; + width: 15px; + height: 15px; background-color: #ABFF00; border-radius: 50%; - box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px; + box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 5px; } .led_red { - float: right; margin: auto auto; - margin-top: 12.5px; - width: 24px; - height: 24px; + margin-top: 7.5px; + width: 15px; + height: 15px; background-color: #F82222; border-radius: 50%; - box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #FF0303 0 2px 12px; + box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #FF0303 0 2px 5px; } .led_orange { - float: right; margin: auto auto; - margin-top: 12.5px; - width: 24px; - height: 24px; + margin-top: 7.5px; + width: 15px; + height: 15px; background-color: #FFB400; border-radius: 50%; - box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #FF9000 0 2px 12px; + box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #FF9000 0 2px 5px; } .marker_animation { @@ -93,6 +90,13 @@ table { padding-left: 8px; } +.textTopHeader { + height: 50px; + text-align: center; + margin-left: 8px; + float: left; +} + small { font-size: 100%; font-weight: bold; @@ -108,7 +112,7 @@ small {