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-ui-switch.js | 126 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 126 insertions(+)
 create mode 100644 web/js/nms-ui-switch.js

(limited to 'web/js/nms-ui-switch.js')

diff --git a/web/js/nms-ui-switch.js b/web/js/nms-ui-switch.js
new file mode 100644
index 0000000..fe4bbe9
--- /dev/null
+++ b/web/js/nms-ui-switch.js
@@ -0,0 +1,126 @@
+"use strict";
+
+class nmsUiSwitch extends nmsPanel {
+	constructor(sw) {
+		var title;
+		if (sw == undefined) {
+			title = "Add new switch"
+		} else {
+			title = "Edit " + sw;
+		}
+		super(title)
+		this._sw = sw;
+		this.populate()
+	}
+	/*
+	 * We really should base this on a backend-API exposing relevant fields...
+	 */
+	getTemplate(sw) {
+		if (sw == undefined) {
+			return { 
+				mgmt_v4_addr: null, 
+				mgmt_v6_addr: null,
+				community: null,
+				placement: null,
+				mgmt_vlan: null,
+				poll_frequency: null,
+				tags: null
+			};
+		}
+		var swi = [];
+		var swm = [];
+		try {
+			swi = nmsData.switches["switches"][this._sw];
+		} catch(e) {}
+		try {
+			swm = nmsData.smanagement.switches[this._sw];
+		} catch(e) {}
+
+		var template = {}
+		for (var v in swi) {
+			template[v] = swi[v];
+		}
+		for (var v in swm) {
+			if (v == "last_updated") {
+				continue;
+			}
+			template[v] = swm[v];
+		}
+		return template;
+	}
+	populate() {
+		var template = this.getTemplate(this._sw);
+		this.table = new nmsTable();
+		var first = new Array("sysname","distro_name","distro_phy_port","traffic_vlan")
+		var sorted = new Array();
+		for (var v in template) {
+			if (!first.includes(v)) {
+				sorted.push(v);
+			}
+		}
+		sorted.sort();
+		var finals = first.concat(sorted);
+		this.rows = {}
+		for (var i in finals) {
+			var v = finals[i];
+			this.rows[v] = new nmsEditRow(v, nmsInfoBox._nullBlank(template[v]));
+			this.rows[v].parent = this;
+			this.table.add(this.rows[v]);
+		}
+		this.add(this.table);
+	}
+	changed(row) {
+		this.title = "saw row change on " + row.name + " to " + row.value;
+	}
+	get value() {
+		return this.table.value;
+	}
+}
+
+class nmsEditRow extends nmsBox {
+	constructor(text,value) {
+		super("tr")
+		// This should/could be smarter in the future.
+		if (value instanceof Object) {
+			value = JSON.stringify(value);
+		}
+		this.name = text;
+		this._value = value;
+		this.original = value;
+		var td1 = new nmsBox("td")
+		td1.add(new nmsString(text))
+		this.add(td1);
+
+		var td2 = new nmsBox("td")
+		var input = new nmsBox("input")
+		input.html.value = value;
+		input.html.className = "form-control";
+		input.html.type = "text";
+		input.row = this;
+		input.html.onchange = function() {
+			this.nmsBox.row.value = this.value
+		}
+		input.html.oninput = function() {
+			this.nmsBox.row.value = this.value
+		}
+		this._input = input;
+		this._td2 = td2;
+		td2.add(input)
+		this.add(td2)
+	}
+	get value() {
+		return this._value;
+	}
+	set value(value) {
+		this._value = value;
+		if (this._input.html.value != value) {
+			this._input.html.value = value
+		}
+		if (this._value != this.original) {
+			this._td2.html.classList.add("has-warning");
+		} else {
+			this._td2.html.classList.remove("has-warning");
+		}
+		this.parent.changed(this) 
+	}
+}
-- 
cgit v1.2.3