From f8482d205ea5eaaa0aac33ab3cd450b41126ef39 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 12:08:43 +0000 Subject: NMSjs: Split the info box out and clean further + tweak --- web/nms.gathering.org/js/nms-info-box.js | 197 +++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 web/nms.gathering.org/js/nms-info-box.js (limited to 'web/nms.gathering.org/js/nms-info-box.js') 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 = '
'; + txt += ''; + txt += ''; + txt += '
'; + 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 + ''; + + 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 = '
'; + swtop.appendChild(commentbox); + swtop.style.display = 'block'; +} + -- cgit v1.2.3 From 544368f68e6a55ed619b91f631b0e200ad7ed5ad Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 14:17:30 +0000 Subject: NMS: Allow editing switches in GUI It's not pretty, but it works and should cover most of the use-cases. Placement-editing is not meant to be the primary way to edit anything. --- web/nms.gathering.org/js/nms-info-box.js | 101 ++++++++++++++++++++++++++++++- 1 file changed, 100 insertions(+), 1 deletion(-) (limited to 'web/nms.gathering.org/js/nms-info-box.js') diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js index cf77d1e..94792ee 100644 --- a/web/nms.gathering.org/js/nms-info-box.js +++ b/web/nms.gathering.org/js/nms-info-box.js @@ -59,6 +59,7 @@ nmsInfoBox._hide = function() commentbox.parentNode.removeChild(commentbox); swtop.style.display = 'none'; nmsInfoBox._showing = ""; + nmsInfoBox._editHide(); } /* @@ -151,7 +152,7 @@ nmsInfoBox._show = function(x) nmsInfoBox._hide(); nmsInfoBox._showing = x; - swtitle.innerHTML = x + ''; + swtitle.innerHTML = ' ' + x + ' '; for (var v in sw) { if (v == "placement") { @@ -195,3 +196,101 @@ nmsInfoBox._show = function(x) swtop.style.display = 'block'; } +nmsInfoBox._nullBlank = function(x) { + if (x == null || x == false || x == undefined) + return ""; + return x; +} + +nmsInfoBox._editHide = function() { + var container = document.getElementById("nmsInfoBox-edit-box"); + if (container != undefined) + container.parentNode.removeChild(container); +} + +nmsInfoBox._edit = function(sw) { + var template = {}; + var place = false; + nmsInfoBox._editHide(); + var container = document.createElement("div"); + container.id = "nmsInfoBox-edit-box"; + + nmsInfoBox._editValues = {}; + if (nmsData.switches.switches[sw] != undefined) { + for (var v in nmsData.switches.switches[sw]) { + if (v == "placement") { + place = JSON.stringify(nmsData.switches.switches[sw][v]); + template[v] = ""; + continue; + } + template[v] = this._nullBlank(nmsData.switches.switches[sw][v]); + } + } + if (nmsData.smanagement.switches[sw] != undefined) { + for (var v in nmsData.smanagement.switches[sw]) { + template[v] = this._nullBlank(nmsData.smanagement.switches[sw][v]); + } + } + var content = []; + for (v in template) { + var tmpsw = '\'' + sw + '\''; + var tmpv = '\'' + v + '\''; + var tmphandler = '"nmsInfoBox._editChange(' + tmpsw + ',' + tmpv + ');"'; + var html = "'; + content.push([v, html]); + } + var table = nmsInfoBox._makeTable(content, "edit"); + var swtop = document.getElementById("info-switch-parent"); + container.appendChild(table); + var submit = document.createElement("button"); + submit.innerHTML = "Save changes"; + submit.classList.add("btn", "btn-primary"); + submit.id = "edit-submit-" + sw; + submit.onclick = function(e) { nmsInfoBox._editSave(sw, e); }; + container.appendChild(submit); + var output = document.createElement("output"); + output.id = "edit-output"; + container.appendChild(output); + swtop.appendChild(container); + if (place) { + var pval = document.getElementById("edit-" + sw + "-placement"); + if (pval) { + pval.value = place; + } + } +} + +nmsInfoBox._editChange = function(sw, v) { + var el = document.getElementById("edit-" + sw + "-" + v); + var val = el.value; + if (v == "placement") + val = JSON.parse(val); + nmsInfoBox._editValues[v] = val; + el.classList.add("bg-warning"); + var myData = nmsInfoBox._editStringify(sw); + var out = document.getElementById("edit-output"); + out.value = myData; +} + +nmsInfoBox._editStringify = function(sw) { + for (var key in nmsInfoBox._editValues) { + var val = nmsInfoBox._editValues[key]; + } + nmsInfoBox._editValues['sysname'] = sw; + var myData = JSON.stringify([nmsInfoBox._editValues]); + return myData; +} +nmsInfoBox._editSave = function(sw, e) { + var myData = nmsInfoBox._editStringify(sw); + $.ajax({ + type: "POST", + url: "/api/private/switch-add", + dataType: "text", + data:myData, + success: function (data, textStatus, jqXHR) { + nmsData.invalidate("switches"); + nmsData.invalidate("smanagement"); + } + }); + nmsInfoBox._editHide(); +} -- cgit v1.2.3 From 1f7663c55e74c7c74990f40fcc78feb49658f932 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 16:58:08 +0000 Subject: NMS: InfoBox: Catch switch changes too --- web/nms.gathering.org/js/nms-info-box.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'web/nms.gathering.org/js/nms-info-box.js') diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js index 94792ee..cd34d5e 100644 --- a/web/nms.gathering.org/js/nms-info-box.js +++ b/web/nms.gathering.org/js/nms-info-box.js @@ -21,6 +21,8 @@ var nmsInfoBox = nmsInfoBox || { */ nmsInfoBox.show = function(x) { nmsData.addHandler("comments","switchshower",nmsInfoBox._show,x); + nmsData.addHandler("switches","switchshower",nmsInfoBox._show,x); + nmsData.addHandler("smanagement","switchshower",nmsInfoBox._show,x); nmsInfoBox._show(x); } @@ -30,6 +32,8 @@ nmsInfoBox.show = function(x) { nmsInfoBox.hide = function() { nmsInfoBox._hide(); nmsData.unregisterHandler("comments","switchshower"); + nmsData.unregisterHandler("switches","switchshower"); + nmsData.unregisterHandler("smanagement","switchshower"); } /* -- cgit v1.2.3 From d79ea3095ac5da8344ab727bcb84a73043bbb533 Mon Sep 17 00:00:00 2001 From: Kristian Lyngstol Date: Sun, 13 Mar 2016 17:52:58 +0000 Subject: NMS: Add simple searching Not perfect, but not bad either. --- web/nms.gathering.org/js/nms-info-box.js | 39 +++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) (limited to 'web/nms.gathering.org/js/nms-info-box.js') diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js index cd34d5e..2ef4c3b 100644 --- a/web/nms.gathering.org/js/nms-info-box.js +++ b/web/nms.gathering.org/js/nms-info-box.js @@ -139,6 +139,30 @@ nmsInfoBox._makeCommentTable = function(content) { return table; } +/* + * FIXME: Not sure this belongs here, it's really part of the "Core" ui, + * not just the infobox. + */ +nmsInfoBox._search = function() { + var el = document.getElementById("searchbox"); + var id = false; + if (el) { + id = el.value; + } + if (id && nmsData.switches.switches[id] != undefined) { + nmsMap.setSwitchColor(id, "pink"); + el.parentElement.classList.remove("has-error"); + el.parentElement.classList.add("has-success"); + setTimeout(function(){ + nmsInfoBox.show(id); + var el = document.getElementById("searchbox"); + el.parentElement.classList.remove("has-success"); + },1000); + } else { + el.parentElement.classList.add("has-error"); + } +} + /* * Display info on switch "x" in the info-box * @@ -152,6 +176,7 @@ nmsInfoBox._show = function(x) var swpanel = document.getElementById("info-switch-panel-body"); var swtitle = document.getElementById("info-switch-title"); var content = []; + nmsInfoBox._hide(); nmsInfoBox._showing = x; @@ -267,10 +292,18 @@ nmsInfoBox._edit = function(sw) { nmsInfoBox._editChange = function(sw, v) { var el = document.getElementById("edit-" + sw + "-" + v); var val = el.value; - if (v == "placement") - val = JSON.parse(val); + if (v == "placement") { + try { + val = JSON.parse(val); + el.parentElement.classList.remove("has-error"); + el.parentElement.classList.add("has-success"); + } catch (e) { + el.parentElement.classList.add("has-error"); + return; + } + } nmsInfoBox._editValues[v] = val; - el.classList.add("bg-warning"); + el.classList.add("has-warning"); var myData = nmsInfoBox._editStringify(sw); var out = document.getElementById("edit-output"); out.value = myData; -- cgit v1.2.3