From 5222b78af21f90e230d50c075174fc84f45d4172 Mon Sep 17 00:00:00 2001
From: Kristian Lyngstol <kristian@bohemians.org>
Date: Tue, 31 May 2016 22:54:00 +0200
Subject: front: Introduce a tiny heart that pulses....

The HTML/detail should probably be tweaked, but I think we need a way to
show that Gondul is still alive now that we are hiding the time stamp by
default.

Feel free to throw the HTML/CSS away in favor of some other subtle but
noticeable "animation".
---
 web/css/nms.css    |  2 ++
 web/index.html     |  1 +
 web/js/nms-data.js | 32 +++++++++++++++++++++++++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

(limited to 'web')

diff --git a/web/css/nms.css b/web/css/nms.css
index 975aadb..ac2791c 100644
--- a/web/css/nms.css
+++ b/web/css/nms.css
@@ -92,3 +92,5 @@ div.map-mode-legend button {
 .nightmode .table > tbody > tr > td {
 	border-top: 1px solid #555;
 }
+
+.pulse-on { color: #a00; }
diff --git a/web/index.html b/web/index.html
index 6b2dda4..0dbabe8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -35,6 +35,7 @@
 	  </button>
 	</div>
 	<div id="navbar" class="navbar-collapse collapse">
+	  <p class="navbar-text"><span class="glyphicon glyphicon-heart" id="heartbeat" aria-hidden="true"></span></p>
 	  <ul class="nav navbar-nav">
 	     <li id='map-link' class="active"><a href="#" onclick="nmsUi.setActive('map');">Map<span class="sr-only">(current)</span></a></li>
 	     <li id='admin-link' class="gondul-is-private"><a href="#" onclick="nmsUi.setActive('admin');nmsAdmin.updateConfigPane();">Admin</a></li>
diff --git a/web/js/nms-data.js b/web/js/nms-data.js
index 5a219e8..37cc11c 100644
--- a/web/js/nms-data.js
+++ b/web/js/nms-data.js
@@ -36,6 +36,7 @@ var nmsData = nmsData || {
 		newSource:0,
 		oldSource:0
 	},
+	_pulseBeat: 0,
 	/*
 	 * The last time stamp of any data received, regardless of source.
 	 *
@@ -119,10 +120,38 @@ nmsData.registerSource = function(name, target) {
 	} else {
 		this.stats.oldSource++;
 	}
-
 	this.stats.pollSets++;
 };
 
+/*
+ * Show sign-of-life to the user.
+ *
+ * Now that we don't show the date field constantly it is nice to indicate
+ * to the user that things are still running in some discreet manner.
+ *
+ * The actual html might not be the best choice, but I think the general
+ * idea of some sort of heartbeat is needed.
+ */
+nmsData._pulse = function() {
+	if (nmsData._pulseElement == undefined) {
+		try {
+			nmsData._pulseElement = document.getElementById("heartbeat");
+		} catch(e) {
+			nmsData._pulseElement = null;
+		}
+	}
+	if (nmsData._pulseElement == null)
+		return;
+	if (nmsData._pulseBeat > 20) {
+		if (nmsData._pulseElement.classList.contains("pulse-on")) {
+			nmsData._pulseElement.classList.remove("pulse-on");
+		} else {
+			nmsData._pulseElement.classList.add("pulse-on");
+		}
+		nmsData._pulseBeat = 0;
+	}
+	nmsData._pulseBeat++;
+}
 /*
  * Add a handler (callback) for a source, using an id.
  *
@@ -271,6 +300,7 @@ nmsData._genericUpdater = function(name, cacheok) {
 				}
 				nmsData.stats.identicalFetches++;
 			}
+			nmsData._pulse();
 		},
 		complete: function(jqXHR, textStatus) {
 			nmsData.stats.outstandingAjaxRequests--;
-- 
cgit v1.2.3