From 8d63fa675264ae0d809f86ee036e081519b88299 Mon Sep 17 00:00:00 2001
From: Kristian Lyngstol <kly@kly.no>
Date: Sun, 6 Jan 2019 01:51:17 +0100
Subject: Introduce nms-ui-boxes, a big step for GUI

nmsBox is a new class for generic HTML-based elements, and will eventually be
used to replace nms-info-box.

The idea is simple: a generic way to deal with containers that are usually
represented in HTML too.

To test it, I've re-implemented the GUI for the oplog. This rewrite didn't
really utilize the new benefits of the framework, but was a small step.

I've also added nms-ui-switch, which isn't exposed anywhere yet and isn't
done, but is a good start.

nms-ui-switch will be the new way to add and edit switches in the future, it
will probably be made more generic over time and thus can be reused for
networks too.

Note how x = nmsUiSwitch() will allow you to do x.row["community"].value
to both get and set the value, and setting will visually update and run
any verifier that will be relevant, and alert the parent. This can then
be used for simple stuff like json-verification, but also for stuff like
auto-complete or whatnot. God only knows.

Obviously I will continue to work on this over the next few days...
---
 web/js/nms-oplog.js | 44 +++++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

(limited to 'web/js/nms-oplog.js')

diff --git a/web/js/nms-oplog.js b/web/js/nms-oplog.js
index 7ac11c4..cea75ca 100644
--- a/web/js/nms-oplog.js
+++ b/web/js/nms-oplog.js
@@ -1,7 +1,7 @@
 "use strict";
 
 var nmsOplog = nmsOplog || {
-
+	table: {}
 }
 
 nmsOplog.init = function() {
@@ -78,42 +78,43 @@ nmsOplog.getSwitchLogs = function(sw) {
 	return logs;
 }
 
+/*
+ * This can be re-written now that it uses nmsBox... That rewrite was just a short
+ * test of nmsBox...
+ */
 nmsOplog._updateComments = function(limit,prefix,timefield,cutoff) {
-	var table = document.createElement("table");
-	var tr;
-	var td1;
-	var td2;
-	var td3;
-	table.className = "table";
-	table.classList.add("table");
-	table.classList.add("table-condensed");
+	var table = new nmsTable([]);
 	var i = 0;
 	for (var v in nmsData['oplog']['oplog']) {
 		if (cutoff && nmsData.oplog.oplog[v]['username'] == "system") {
 			continue;
 		}
-		tr = table.insertRow(-1);
-		td1 = tr.insertCell(0);
-		td2 = tr.insertCell(1);
+		var col1;
 		var date = new Date(nmsData.oplog.oplog[v]['timestamp'].replace(" ","T").replace("+00",""));
 		if (timefield == "time") {
-			td1.textContent = date.toTimeString().replace(/:\d\d .*$/,"");
+			col1 = date.toTimeString().replace(/:\d\d .*$/,"");
 		} else {
 			var month = date.getMonth() + 1;
 			var day = date.getDate();
 			var tmp = (date.getYear() + 1900) + "-" + (month < 10 ? "0": "") + month + "-" + (day < 10 ? "0" : "") + day + " " + date.toTimeString().replace(/:\d\d .*$/,"");
-			td1.textContent = tmp;
+			col1 = tmp;
 		}
-		td1.classList.add("left");
 		var data = nmsData['oplog']['oplog'][v]['log'];
+		var col2 = new nmsBox("p");
 		if (cutoff && data.length > cutoff) {
-			td2.title = data;
+			col2.html.title = data;
 			data = data.slice(0,cutoff);
 			data = data + "(...)";
 		}
-		td2.textContent = nmsData['oplog']['oplog'][v]['systems'] + " [" + nmsData['oplog']['oplog'][v]['username'] + "] " + data;
-		td2.hiddenthing = v;
-		td2.onclick = function(e){ var x = document.getElementById("searchbox"); var v = e.path[0].hiddenthing; x.value = nmsData['oplog']['oplog'][v]['systems']; x.oninput(); }
+		col2.html.textContent = nmsData['oplog']['oplog'][v]['systems'] + " [" + nmsData['oplog']['oplog'][v]['username'] + "] " + data;
+		col2.html.hiddenthing = v;
+		col2.html.onclick = function(e) { 
+			var x = document.getElementById("searchbox");
+			var v = e.path[0].hiddenthing;
+			x.value = nmsData['oplog']['oplog'][v]['systems'];
+			x.oninput();
+		}
+		table.add([col1,col2]);
 		if (++i == limit)
 			break;
 	}
@@ -122,7 +123,8 @@ nmsOplog._updateComments = function(limit,prefix,timefield,cutoff) {
 		old.parentElement.removeChild(old);
 	} catch(e) {}
 	var par = document.getElementById("oplog-parent" + prefix);
-	table.id = "oplog-table" + prefix;
-	par.appendChild(table);
+	table.html.id = "oplog-table" + prefix;
+	par.appendChild(table.html);
+	nmsOplog.table["x" + prefix] = table;
 };
 
-- 
cgit v1.2.3