From 5c144571424fedbc2618ea47612ce4bf76344972 Mon Sep 17 00:00:00 2001
From: Philipp Klaus <klaus@physik.uni-frankfurt.de>
Date: Thu, 14 Sep 2017 09:53:16 +0200
Subject: [PATCH] DASH: implemented heartbeat for gviews

---
 python_suite/dashboard/static/css/style.css | 10 ++++++++++
 python_suite/dashboard/static/js/gview.js   |  4 ++++
 python_suite/dashboard/views/gview.jinja2   |  4 ++++
 3 files changed, 18 insertions(+)

diff --git a/python_suite/dashboard/static/css/style.css b/python_suite/dashboard/static/css/style.css
index e4f320b..9e5c294 100644
--- a/python_suite/dashboard/static/css/style.css
+++ b/python_suite/dashboard/static/css/style.css
@@ -182,3 +182,13 @@ div.error {
   content: attr(data-checked);
   background-color: #0099CC;
 }
+
+#heartbeat.inactive {
+  background-color: #666;
+}
+#heartbeat.ok {
+  background-color: #0d2;
+}
+#heartbeat.warning {
+  background-color: #f44;
+}
diff --git a/python_suite/dashboard/static/js/gview.js b/python_suite/dashboard/static/js/gview.js
index b8dd834..fdad8c4 100644
--- a/python_suite/dashboard/static/js/gview.js
+++ b/python_suite/dashboard/static/js/gview.js
@@ -3,6 +3,8 @@ function updateStatus() {
     .fail(function( jqxhr, textStatus, error ) {
       var err = textStatus + ", " + error;
       console.log( "Request Failed: " + err );
+      $('#heartbeat').attr('class', 'warning')
+      $('#heartbeat .cover').fadeTo(200, 1.0, function() { $(this).fadeTo(200, 0.0); });
     })
     .done(function( data ) {
       var gview = document.getElementById("gview");
@@ -25,5 +27,7 @@ function updateStatus() {
         else if (pvField == "EGU")
           el.textContent = pv.unit;
       });
+      $('#heartbeat').attr('class', 'ok')
+      $('#heartbeat .cover').fadeTo(200, 1.0, function() { $(this).fadeTo(200, 0.0); });
     });
 };
diff --git a/python_suite/dashboard/views/gview.jinja2 b/python_suite/dashboard/views/gview.jinja2
index 6502e17..9b7e806 100644
--- a/python_suite/dashboard/views/gview.jinja2
+++ b/python_suite/dashboard/views/gview.jinja2
@@ -8,6 +8,10 @@
 {% endblock %}
 
 {% block content %}
+	<div id="heartbeat" class="inactive" style="width: 10px; height: 10px; border-radius: 5px;">
+	  <div class="cover" style="width: 100%; height: 100%; radius: 5px; background-color: #ffff;">
+	  </div>
+	</div>
 	<div class="gview">
 		<object id="gview" style="margin: 2ex auto; display: block;" class="gview gview-{{ svg }}" data="/static/gview/{{ svg }}.svg" type="image/svg+xml">
 		Your browser doesn't support SVG
-- 
2.43.0