aboutsummaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/nms.gathering.org/index.html1
-rw-r--r--web/nms.gathering.org/js/nms-data.js53
-rw-r--r--web/nms.gathering.org/js/nms-info-box.js197
-rw-r--r--web/nms.gathering.org/js/nms.js151
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);
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-31 17:39:06 +0000