NMSjs: Split the info box out and clean further + tweak

4 files changed, 221 insertions, 181 deletions

diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index 929c614..7c6f2ce 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -241,6 +241,7 @@
     <script src="js/bootstrap.min.js" type="text/javascript"></script>
     <script type="text/javascript" src="js/nms-data.js"></script>
     <script type="text/javascript" src="js/nms-map.js"></script>
+    <script type="text/javascript" src="js/nms-info-box.js"></script>
     <script type="text/javascript" src="js/nms.js"></script>
     <script type="text/javascript" src="js/nms-color-util.js"></script>
     <script type="text/javascript" src="js/nms-map-handlers.js"></script>
diff --git a/web/nms.gathering.org/js/nms-data.js b/web/nms.gathering.org/js/nms-data.js
index 2d7fc01..89d93fd 100644
--- a/web/nms.gathering.org/js/nms-data.js
+++ b/web/nms.gathering.org/js/nms-data.js
@@ -1,37 +1,9 @@
 "use strict";
 
-/**************************************************************************
- *                                                                        *
- * THIS IS WORK IN PROGRESS, NOT CURRENTLY USED!                          *
- *                                                                        *
- * It WILL eventually replace large chunks of nms.js. But we're not there *
- * yet.                                                                   *
- *                                                                        *
- **************************************************************************/
-
-
-/*
- * This will obviously be moved
- */
-var nmsCore = nmsCore || {
-	stats: {
-		assertErrors:0
-	}
-}
-
-nmsCore.assert = function(cb) {
-	if (!cb) {
-		nmsCore.stats.assertErrors++;
-		throw "Assertion failed";
-	}
-}
-
 /*
  * This file/module/whatever is an attempt to gather all data collection in
  * one place.
  *
- * It is work in progress.
- *
  * The basic idea is to have all periodic data updates unified here, with
  * stats, tracking of "ajax overflows" and general-purpose error handling
  * and callbacks and whatnot, instead of all the custom stuff that we
@@ -42,11 +14,13 @@ nmsCore.assert = function(cb) {
  * nmsData.old[name]. You can use getNow / setNow() to append a 'now='
  * string.
  *
- * nmsData.data[name] - actual data
+ * nmsData[name] - actual data
+ * nmsData.old[name] - previous copy of data
  * nmsData.registerSource() - add a source, will be polled periodicall
  * nmsData.addHandler()
  * nmsData.updateSource() - issue a one-off update, outside of whatever
  * 			    periodic polling might take place
+ * nmsData.invalidate() - Invalidate browser-cache.
  */
 
 
@@ -103,8 +77,6 @@ var nmsData = nmsData || {
 
 
 nmsData._dropData = function (name) {
-	nmsCore.assert(name);
-	nmsCore.assert(this[name]);
 	delete this[name];
 	delete this.old[name];
 }
@@ -148,6 +120,12 @@ nmsData.registerSource = function(name, target) {
 	this.stats.pollSets++;
 }
 
+/*
+ * Add a handler (callback) for a source, using an id.
+ *
+ * This is idempotent: if the id is the same, it will just overwrite the
+ * old id, not add a copy.
+ */
 nmsData.addHandler = function(name, id, cb, cbdata) {
 	var cbob = {
 		id: id,
@@ -187,9 +165,12 @@ nmsData.unregisterHandler = function(name, id) {
  * after a comment is posted).
  */
 nmsData.updateSource = function(name) {
-	this._genericUpdater(name);
+	this._genericUpdater(name, true);
 }
 
+nmsData.invalidate = function(name) {
+	this._genericUpdater(name, false);
+}
 /*
  * Reset a source, deleting all data, including old.
  *
@@ -208,7 +189,7 @@ nmsData.resetSource = function(name) {
  * Do not use this directly. Use updateSource().
  *
  */
-nmsData._genericUpdater = function(name) {
+nmsData._genericUpdater = function(name, cacheok) {
 	if (this.stats.outstandingAjaxRequests++ > this._ajaxThreshold) {
 		this.stats.outstandingAjaxRequests--;
 		this.stats.ajaxOverflow++;
@@ -223,8 +204,14 @@ nmsData._genericUpdater = function(name) {
 		else
 			now = "?" + now;
 	}
+	var heads = {};
+	if (cacheok == false) {
+		heads['Cache-Control'] = "max-age=0, no-cache, stale-while-revalidate=0";
+	}
+
 	$.ajax({
 		type: "GET",
+		headers: heads,
 		url: this._sources[name].target + now,
 		dataType: "json",
 		success: function (data, textStatus, jqXHR) {
diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js
new file mode 100644
index 0000000..cf77d1e
--- /dev/null
+++ b/web/nms.gathering.org/js/nms-info-box.js
@@ -0,0 +1,197 @@
+"use strict";
+
+/*
+ * Handle the info-box for switches (e.g.: what's shown when a switch is
+ * clicked).
+ *
+ * Interfaces: show(switch), hide(), click(switch).
+ */
+
+
+var nmsInfoBox = nmsInfoBox || {
+	stats: {},
+	_showing:"" // Which switch we are displaying (if any).
+}
+
+/*
+ * Show the infobox for a switch.
+ *
+ * Just a wrapper for _show, but adds a handler for comments. Could easily
+ * add a handler for other events too. E.g.: switches.
+ */
+nmsInfoBox.show = function(x) {
+	nmsData.addHandler("comments","switchshower",nmsInfoBox._show,x);
+	nmsInfoBox._show(x);
+}
+
+/*
+ * Hide switch info-box and remove handler.
+ */
+nmsInfoBox.hide = function() {
+	nmsInfoBox._hide();
+	nmsData.unregisterHandler("comments","switchshower");
+}
+
+/*
+ * Click a switch: If it's currently showing: hide it, otherwise display
+ * it.
+ */
+nmsInfoBox.click = function(sw)
+{
+	if (nmsInfoBox._showing == sw)
+		nmsInfoBox.hide();
+	else
+		nmsInfoBox.show(sw);
+}
+
+nmsInfoBox._hide = function()
+{
+	var swtop = document.getElementById("info-switch-parent");
+	var switchele = document.getElementById("info-switch-table");
+	var comments = document.getElementById("info-switch-comments-table");
+	var commentbox;
+	if (switchele != undefined)
+		switchele.parentNode.removeChild(switchele);
+	if (comments != undefined)
+		comments.parentNode.removeChild(comments);
+	commentbox = document.getElementById("commentbox");
+	if (commentbox != undefined)
+		commentbox.parentNode.removeChild(commentbox);
+	swtop.style.display = 'none';
+	nmsInfoBox._showing = "";
+}
+
+/*
+ * General-purpose table-maker?
+ *
+ * Takes an array of arrays as input, and an optional caption.
+ *
+ * E.g.: _makeTable([["name","Kjell"],["Age","five"]], "Age list");
+ */
+nmsInfoBox._makeTable = function(content, caption) {
+	var table = document.createElement("table");
+	var tr;
+	var td1;
+	var td2;
+	table.className = "table";
+	table.classList.add("table");
+	table.classList.add("table-condensed");
+	if (caption != undefined) {
+		var cap = document.createElement("caption");
+		cap.textContent = caption;
+		table.appendChild(cap);
+	}
+	for (var v in content) { 
+		tr = table.insertRow(-1);
+		td1 = tr.insertCell(0);
+		td2 = tr.insertCell(1);
+		td1.innerHTML = content[v][0];
+		td2.innerHTML = content[v][1];
+	}
+	return table;
+}
+
+/*
+ * Create and return a table for comments.
+ *
+ * Input is an array of comments.
+ */
+nmsInfoBox._makeCommentTable = function(content) {
+	var table = document.createElement("table");
+	table.className = "table";
+	table.classList.add("table");
+	table.classList.add("table-condensed");
+	var cap = document.createElement("caption");
+	cap.textContent = "Comments"
+	table.appendChild(cap);
+	for (var commentid in content) { 
+		var tr;
+		var td1;
+		var td2;
+		var comment = content[commentid];
+		var col;
+		if (comment["state"] == "active")
+			col = "danger";
+		else if (comment["state"] == "inactive")
+			col = false;
+		else
+			col = "info";
+		tr = table.insertRow(-1);
+		tr.id = "commentRow" + comment["id"];
+		tr.className = col;
+
+		td1 = tr.insertCell(0);
+		td1.style.whiteSpace = "nowrap";
+		td1.style.width = "8em";
+		td2 = tr.insertCell(1);
+		var txt =  '<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-xs btn-default" data-trigger="focus" data-toggle="popover" title="Info" data-content="Comment added ' + comment["time"] + " by user " + comment["username"] + ' and listed as ' + comment["state"] + '"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button>';
+		txt += '<button type="button" class="btn btn-xs btn-danger" data-trigger="focus" data-toggle="tooltip" title="Mark as deleted" onclick="commentDelete(' + comment["id"] + ');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>';
+		txt += '<button type="button" class="btn btn-xs btn-success" data-trigger="focus" data-toggle="tooltip" title="Mark as inactive/fixed" onclick="commentInactive(' + comment["id"] + ');"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>';
+		txt += '<button type="button" class="btn btn-xs btn-info" data-trigger="focus" data-toggle="tooltip" title="Mark as persistent" onclick="commentPersist(' + comment["id"] + ');"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></button></div>';
+		td1.innerHTML = txt;
+		td2.innerHTML = comment["comment"];
+	}
+	return table;
+}
+
+/*
+ * Display info on switch "x" in the info-box
+ *
+ * Use nmsInfoBox.show(), otherwise changes wont be picked up.
+ */
+nmsInfoBox._show = function(x)
+{
+	var sw = nmsData.switches["switches"][x];
+	var swm = nmsData.smanagement.switches[x];
+	var swtop = document.getElementById("info-switch-parent");
+	var swpanel = document.getElementById("info-switch-panel-body");
+	var swtitle = document.getElementById("info-switch-title");
+	var content = [];
+	
+	nmsInfoBox._hide();	
+	nmsInfoBox._showing = x;
+	
+	swtitle.innerHTML = x + '<button type="button" class="close" aria-labe="Close" onclick="nmsInfoBox.hide();" style="float: right;"><span aria-hidden="true">&times;</span></button>';
+
+	for (var v in sw) { 
+		if (v == "placement") {
+			var place = JSON.stringify(sw[v]);
+			content.push([v,place]);
+			continue;
+		}
+		content.push([v, sw[v]]);
+	}
+
+	for (var v in swm) { 
+		content.push([v, swm[v]]);
+	}
+	content.sort();
+
+	var comments = [];
+	if (nmsData.comments.comments != undefined && nmsData.comments.comments[x] != undefined) {
+		for (var c in nmsData.comments.comments[x]["comments"]) {
+			var comment = nmsData.comments.comments[x]["comments"][c];
+			if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") {
+				comments.push(comment);
+			}
+		}
+	}
+
+	var infotable = nmsInfoBox._makeTable(content);
+	infotable.id = "info-switch-table";
+	swtop.appendChild(infotable);
+	if (comments.length > 0) {
+		var commenttable = nmsInfoBox._makeCommentTable(comments);
+		commenttable.id = "info-switch-comments-table";
+		swtop.appendChild(commenttable);
+		$(function () { $('[data-toggle="popover"]').popover({placement:"top",continer:'body'}) })
+	}
+	var commentbox = document.createElement("div");
+	commentbox.id = "commentbox";
+	commentbox.className = "panel-body";
+	commentbox.style.width = "100%";
+	commentbox.innerHTML = '<div class="input-group"><input type="text" class="form-control" placeholder="Comment" id="' + x + '-comment"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="addComment(\'' + x + '\',document.getElementById(\'' + x + '-comment\').value); document.getElementById(\'' + x + '-comment\').value = \'\'; document.getElementById(\'' + x + '-comment\').placeholder = \'Comment added. Wait for next refresh.\';">Add comment</button></span></div>';
+	swtop.appendChild(commentbox);
+	swtop.style.display = 'block';
+}
+
diff --git a/web/nms.gathering.org/js/nms.js b/web/nms.gathering.org/js/nms.js
index 9bf4196..52bea9a 100644
--- a/web/nms.gathering.org/js/nms.js
+++ b/web/nms.gathering.org/js/nms.js
@@ -1,7 +1,6 @@
 "use strict";
 var nms = {
 	stats:{}, // Various internal stats
-	switch_showing:"", // Which switch we are displaying (if any).
 	get nightMode() { return this._nightMode; },
 	set nightMode(val) { if (val != this._nightMode) { this._nightMode = val; setNightMode(val); } },
 	/*
@@ -299,134 +298,6 @@ function getNowEpoch() {
 		return parseInt(Date.now() / 1000);
 }
 
-
-function hideSwitch()
-{
-	_hideSwitch();
-	nmsData.unregisterHandler("comments","switchshower");
-}
-
-/*
- * Hide switch info-box
- */
-function _hideSwitch()
-{
-	var swtop = document.getElementById("info-switch-parent");
-	var switchele = document.getElementById("info-switch-table");
-	var comments = document.getElementById("info-switch-comments-table");
-	var commentbox;
-	if (switchele != undefined)
-		switchele.parentNode.removeChild(switchele);
-	if (comments != undefined)
-		comments.parentNode.removeChild(comments);
-	commentbox = document.getElementById("commentbox");
-	if (commentbox != undefined)
-		commentbox.parentNode.removeChild(commentbox);
-	swtop.style.display = 'none';
-	nms.switch_showing = "";
-}
-
-function showSwitch(x) {
-	nmsData.addHandler("comments","switchshower",_showSwitch,x);
-	_showSwitch(x);
-}
-
-/*
- * Display info on switch "x" in the info-box
- *
- * FIXME: THIS IS A MONSTROSITY.
- */
-function _showSwitch(x)
-{
-	var sw = nmsData.switches["switches"][x];
-	var swm = nmsData.smanagement.switches[x];
-	var swtop = document.getElementById("info-switch-parent");
-	var swpanel = document.getElementById("info-switch-panel-body");
-	var swtitle = document.getElementById("info-switch-title");
-	var tr;
-	var td1;
-	var td2;
-	
-	_hideSwitch();	
-	nms.switch_showing = x;
-	var switchele = document.createElement("table");
-	switchele.id = "info-switch-table";
-	switchele.className = "table";
-	switchele.classList.add("table");
-	switchele.classList.add("table-condensed");
-	
-	swtitle.innerHTML = x + '<button type="button" class="close" aria-labe="Close" onclick="hideSwitch();" style="float: right;"><span aria-hidden="true">&times;</span></button>';
-
-	for (var v in sw) { 
-		if (v == "placement") {
-			continue;
-		}
-		tr = switchele.insertRow(-1);
-		td1 = tr.insertCell(0);
-		td2 = tr.insertCell(1);
-		td1.innerHTML = v;
-		td2.innerHTML = sw[v];
-	}
-	for (var v in swm) { 
-		tr = switchele.insertRow(-1);
-		td1 = tr.insertCell(0);
-		td2 = tr.insertCell(1);
-		td1.innerHTML = v;
-		td2.innerHTML = swm[v];
-	}
-
-	var comments = document.createElement("table");
-	comments.id = "info-switch-comments-table";
-	comments.className = "table table-condensed";
-	var cap = document.createElement("caption");
-	cap.textContent = "Comments";
-	comments.appendChild(cap);
-
-	var has_comment = false;
-	if (nmsData.comments.comments == undefined || nmsData.comments.comments[x] == undefined) {
-	} else {
-		for (var c in nmsData.comments.comments[x]["comments"]) {
-			var comment = nmsData.comments.comments[x]["comments"][c];
-			has_comment = true;
-			if (comment["state"] == "active" || comment["state"] == "persist" || comment["state"] == "inactive") {
-				tr = comments.insertRow(-1);
-				var col;
-				if (comment["state"] == "active")
-					col = "danger";
-				else if (comment["state"] == "inactive")
-					col = false;
-				else
-					col = "info";
-				tr.className = col;
-				tr.id = "commentRow" + comment["id"];
-				td1 = tr.insertCell(0);
-				td2 = tr.insertCell(1);
-				td1.style.whiteSpace = "nowrap";
-				td1.style.width = "8em";
-				var txt =  '<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-xs btn-default" data-trigger="focus" data-toggle="popover" title="Info" data-content="Comment added ' + epochToString(comment["time"]) + " by user " + comment["username"] + ' and listed as ' + comment["state"] + '"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button>';
-				txt += '<button type="button" class="btn btn-xs btn-danger" data-trigger="focus" data-toggle="tooltip" title="Mark as deleted" onclick="commentDelete(' + comment["id"] + ');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>';
-				txt += '<button type="button" class="btn btn-xs btn-success" data-trigger="focus" data-toggle="tooltip" title="Mark as inactive/fixed" onclick="commentInactive(' + comment["id"] + ');"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>';
-				txt += '<button type="button" class="btn btn-xs btn-info" data-trigger="focus" data-toggle="tooltip" title="Mark as persistent" onclick="commentPersist(' + comment["id"] + ');"><span class="glyphicon glyphicon-star" aria-hidden="true"></span></button></div>';
-				td1.innerHTML = txt;
-				td2.textContent = comment['comment'];
-			}
-		}
-	}
-
-	swtop.appendChild(switchele);
-	if (has_comment) {
-		swtop.appendChild(comments);
-		$(function () { $('[data-toggle="popover"]').popover({placement:"top",continer:'body'}) })
-	}
-	var commentbox = document.createElement("div");
-	commentbox.id = "commentbox";
-	commentbox.className = "panel-body";
-	commentbox.style.width = "100%";
-	commentbox.innerHTML = '<div class="input-group"><input type="text" class="form-control" placeholder="Comment" id="' + x + '-comment"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="addComment(\'' + x + '\',document.getElementById(\'' + x + '-comment\').value); document.getElementById(\'' + x + '-comment\').value = \'\'; document.getElementById(\'' + x + '-comment\').placeholder = \'Comment added. Wait for next refresh.\';">Add comment</button></span></div>';
-	swtop.appendChild(commentbox);
-	swtop.style.display = 'block';
-}
-
 /*
  * There are 4 legend-bars. This is a helper-function to set the color and
  * description/name for each one. Used from handler init-functions.
@@ -492,18 +363,13 @@ function commentChange(id,state)
 		state:state
 	};
 	myData = JSON.stringify(myData);
-	var foo = document.getElementById("commentRow" + id);
-	if (foo) {
-		foo.className = '';
-		foo.style.backgroundColor = "silver";
-	}
 	$.ajax({
 		type: "POST",
 		url: "/api/private/comment-change",
 		dataType: "text",
 		data:myData,
 		success: function (data, textStatus, jqXHR) {
-			nmsData.updateSource("comments");
+			nmsData.invalidate("comments");
 		}
 	});
 }
@@ -521,7 +387,7 @@ function addComment(sw,comment)
 		dataType: "text",
 		data:myData,
 		success: function (data, textStatus, jqXHR) {
-			nmsData.updateSource("comments");
+			nmsData.invalidate("comments");
 		}
 	});
 }
@@ -558,17 +424,6 @@ function findSwitch(x,y) {
 }
 
 /*
- * Called when a switch is clicked
- */
-function switchClick(sw)
-{
-	if (nms.switch_showing == sw)
-		hideSwitch();
-	else
-		showSwitch(sw);
-}
-
-/*
  * onclick handler for the canvas.
  *
  * Currently just shows info for a switch.
@@ -577,7 +432,7 @@ function canvasClick(e)
 {
 	var sw = findSwitch(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
 	if (sw != undefined) {
-		switchClick(sw);
+		nmsInfoBox.click(sw);
 	}
 }