Expose validation and "changed or not" to end user

Starting to look seeeexy.

Also killed off some redundant stuff that should be covered by templates
instead now.

3 files changed, 64 insertions, 156 deletions

diff --git a/web/js/nms-info-box.js b/web/js/nms-info-box.js
index d364f8b..efb2d7b 100644
--- a/web/js/nms-info-box.js
+++ b/web/js/nms-info-box.js
@@ -115,28 +115,6 @@ var nmsInfoBox = nmsInfoBox || {
 		}
 	},
 	{
-		'id': 'inventoryListing',
-		'title': 'Inventory listing',
-		'views': {
-			'initial': {
-				'name': 'Distro names',
-				'panels': ['inventoryListing:distro_name']
-			},
-			'sysDescr': {
-				'name': 'System description',
-				'panels': ['inventoryListing:sysDescr']
-			},
-			'jnxBoxSerialNo': {
-				'name': 'Serial numbers',
-				'panels': ['inventoryListing:jnxBoxSerialNo']
-			},
-                        'transceiver': {
-                                'name': 'Transceivers',
-                                'panels': ['inventoryListing:transceiver']
-                        }
-		}
-	},
-	{
 		'id': 'listNetwork',
 		'title': 'Networks',
 		'views': {
@@ -849,127 +827,6 @@ var switchAddPanel = function() {
 nmsInfoBox.addPanelType("switchAdd",switchAddPanel);
 
 /*
- * Panel type: Inventory listing
- *
- * Displays a filterable table with switch data, based on a selected mode
- *
- * TODO:
- * - Add support for multiple columns with data
- * - Add sorting
- * - Add live filtering
- * - Add export options?
- *
- */
-var inventoryListingPanel = function() {
-	nmsInfoPanel.call(this,"inventoryListing");
-	this.filter = "";
-	this.init = function (mode) {
-		if(!nmsData.snmp || !nmsData.snmp.snmp) {
-			if(!this.hasHandler("snmp")) {
-				this.addHandler("snmp","init");
-				this._renderError("Waiting for SNMP data.");
-			}
-			return;
-		} else {
-			this.removeHandlers();
-			if(!!mode && this.mode == "initial")
-				this.setMode(mode);
-			this.refresh("init");
-		}
-	};
-	this.setFilter = function (filter) {
-		this.filter = filter;
-		this.refresh();
-	};
-	this.refresh = function (reason) {
-		var targetArray = [];
-		var listTitle = '';
-		var contentObj = document.createElement("div");
-		var inputObj = document.createElement("div");
-		inputObj.innerHTML = '<div class="input-group"><input type="text" class="form-control" placeholder="Filter" id="inventorylisting-filter" value="' + this.filter + '" onkeyup="if (event.keyCode == 13) {nmsInfoBox._windowHandler.doInPanel(\'' + this.id + '\',\'setFilter\',document.getElementById(\'inventorylisting-filter\').value);}"><span class=\"input-group-btn\"><button class="btn btn-default" onclick="nmsInfoBox._windowHandler.doInPanel(\'' + this.id + '\',\'setFilter\',document.getElementById(\'inventorylisting-filter\').value);">Filtrer</button></span></div>';
-		contentObj.appendChild(inputObj);
-
-		switch (this.mode) {
-			case 'distro_name':
-				listTitle = 'Distro names';
-				break;
-			case 'sysDescr':
-				listTitle = 'System description';
-				break;
-			case 'jnxBoxSerialNo':
-				listTitle = 'Serial Numbers';
-				break;
-			case 'transceiver':
-				listTitle = 'Transceivers';
-				break;
-			default:
-				listTitle = 'Distro names';
-		}
-
-		var resultArray = [];
-		for(var sw in nmsData.switches.switches) {
-			var value = '';
-			if(this.filter != '') {
-				if(sw.toLowerCase().indexOf(this.filter) == -1 && !nmsSearch.searchTest(this.filter,sw))
-					continue;
-			}
-			try {
-				switch (this.mode) {
-					case 'distro_name':
-						value = nmsData.switches.switches[sw]["distro_name"];
-						resultArray.push([sw, value]);	
-						break;
-					case 'sysDescr':
-						value = nmsData.snmp.snmp[sw]["misc"]["sysDescr"][0];
-						resultArray.push([sw, value]);
-						break;
-					case 'jnxBoxSerialNo':
-						if(testTree(nmsData,["snmp","snmp",sw,"misc","entPhysicalSerialNum"])) {
-							for (var x in nmsData.snmp.snmp[sw]["misc"]["entPhysicalSerialNum"]) {
-								value = "misc" + x + ":" + nmsData.snmp.snmp[sw]["misc"]["entPhysicalSerialNum"][x];
-								var entPhysicalDescr = nmsData.snmp.snmp[sw]["misc"]["entPhysicalDescr"][x]; 
-								resultArray.push([sw, entPhysicalDescr+': '+value]);
-							}
-						}
-						if (testTree(nmsData,["snmp","snmp",sw,"misc","jnxVirtualChassisMemberSerialnumber"])) {
-							for (var x in nmsData.snmp.snmp[sw]["misc"]["jnxVirtualChassisMemberSerialnumber"]) {
-								value = "member " + x + ":" + nmsData.snmp.snmp[sw]["misc"]["jnxVirtualChassisMemberSerialnumber"][x];
-								resultArray.push([sw, value]);
-							}
-						}
-						value = nmsData.snmp.snmp[sw]["misc"]["jnxBoxSerialNo"][0];
-						resultArray.push([sw, value]);
-						break;
-					case 'transceiver':
-                                                if(testTree(nmsData,["snmp","snmp",sw,"misc","entPhysicalSerialNum"])) {
-                                                        for (var x in nmsData.snmp.snmp[sw]["misc"]["entPhysicalSerialNum"]) {
-								var entPhysicalDescr = nmsData.snmp.snmp[sw]["misc"]["entPhysicalDescr"][x];
-								if(!entPhysicalDescr.match(/^SFP/)) {
-									continue;
-								}
-                                                                value = entPhysicalDescr  + ": " + nmsData.snmp.snmp[sw]["misc"]["entPhysicalSerialNum"][x];
-								resultArray.push([sw, entPhysicalDescr+': '+value]);
-                                                        }
-                                                }
-                                                break;
-
-				}
-			} catch (e) {console.log("sw: " + sw); console.log(e);}
-		}
-
-		resultArray.sort();
-
-		var infotable = nmsInfoBox._makeTable(resultArray,listTitle);
-		infotable.id = "inventory-table";
-
-		contentObj.appendChild(infotable);
-		this._render(contentObj);
-	};
-};
-
-nmsInfoBox.addPanelType("inventoryListing",inventoryListingPanel);
-
-/*
  * Panel type: Edit switch
  *
  * Lets you edit basic switch and switch management data through the switch-update api
diff --git a/web/js/nms-types.js b/web/js/nms-types.js
index c077505..c6471f5 100644
--- a/web/js/nms-types.js
+++ b/web/js/nms-types.js
@@ -26,6 +26,7 @@ class nmsType {
 		this._value = null;
 		this.description = description;
 		this.validationReason = "";
+		this.ro = false;
 		if (priority == undefined) {
 			priority = this._defaultPriority;
 		}
@@ -42,6 +43,12 @@ class nmsType {
 			return this._value.toString();
 		}
 	}
+	initial(v) {
+		this.value = v;
+		if(this.priority == nmsPriority.newOnly) {
+			this.ro = true;
+		}
+	}
 	get value() {
 		return this._value;
 	}
diff --git a/web/js/nms-ui-switch.js b/web/js/nms-ui-switch.js
index b15c6ac..0a9c52f 100644
--- a/web/js/nms-ui-switch.js
+++ b/web/js/nms-ui-switch.js
@@ -88,7 +88,7 @@ class nmsModSwitch extends nmsBox {
 	 */
 	generateBaseTemplate() {
 		this._template = {
-			sysname: new nmsTypeSysname("Unique systemname/switch name. Only required field." ),
+			sysname: new nmsTypeSysname("Unique systemname/switch name. Only required field.  Read/only on existing equipment." ),
 			mgmt_v4_addr: new nmsTypeIP("Management address IPv4"),
 			mgmt_v6_addr: new nmsTypeIP("Management address IPv6"),
 			mgmt_vlan: new nmsTypeNetwork("Management VLAN"),
@@ -115,7 +115,7 @@ class nmsModSwitch extends nmsBox {
 		for (var v in swi) {
 			console.assert(this._template[v] instanceof nmsType)
 			if (swi[v] != null) {
-				this._template[v].value = swi[v];
+				this._template[v].initial(swi[v]);
 			}
 		}
 		for (var v in swm) {
@@ -124,7 +124,7 @@ class nmsModSwitch extends nmsBox {
 			}
 			console.assert(this._template[v] instanceof nmsType)
 			if (swm[v] != null) {
-				this._template[v].value = swm[v];
+				this._template[v].initial(swm[v]);
 			}
 		}
 	}
@@ -177,17 +177,32 @@ class nmsEditRow extends nmsBox {
 		this._value = value;
 		this.original = value.value;
 		var td1 = new nmsBox("td")
-		var name = new nmsString(text);
+		var name = new nmsString(text+" ");
 		name.html.title = value.description;
 		td1.add(name)
 		this.add(td1);
-
-		var td2 = new nmsBox("td")
+		td1.html.width="50%"
+		this._state = new nmsBox("span",{html:{className:"label label-default",textContent:"Original"}})
+		this._valid = new nmsBox("span",{html:{className:"label label-default",textContent:"Not verified"}})
+		name.add(this._state)
+		name.add(this._valid)
+		this._valid.hide()
+		this.changed(false)
+		var content = new nmsBox("td")
 		var input = new nmsBox("input")
 		input.html.value = value.value;
 		input.html.className = "form-control";
 		input.html.type = "text";
 		input.row = this;
+		if (value.ro) {
+			input.html.disabled = true;
+		}
+		if (value instanceof nmsTypeSecret) {
+			input.html.type = "password"
+			input.html.autocomplete = "off"
+			input.html.onfocus = function f() { this.type = "text" }
+			input.html.oninput = function f() { this.type = "text" }
+		}
 		input.html.onchange = function() {
 			this.nmsBox.row.value = this.value
 		}
@@ -195,29 +210,58 @@ class nmsEditRow extends nmsBox {
 			this.nmsBox.row.value = this.value
 		}
 		this._input = input;
-		this._td2 = td2;
-		td2.add(input)
-		this.add(td2)
+		this._content = content;
+		content.add(input)
+		this.add(content)
 	}
 	get value() {
 		return this._value.value;
 	}
+	changed(val) {
+		if (val) {
+			this._state.show()
+			this._state.html.textContent = "Changed"
+			this._state.html.classList.remove("label-default")
+			this._state.html.classList.add("label-warning")
+		} else {
+			this._state.hide()
+		}
+	}
+	valid(val) {
+		this._valid.html.classList.remove("label-default")
+		this._valid.show()
+		if (val) {
+			this._valid.html.textContent = "Valid"
+			this._valid.html.classList.remove("label-danger")
+			this._valid.html.classList.add("label-success")
+		} else {
+			this._valid.html.textContent = "Invalid"
+			this._valid.html.classList.add("label-danger")
+			this._valid.html.classList.remove("label-success")
+		}
+	}
+
+
 	/* THIS IS A MESS */
 	set value(value) {
 		if (!this._value.validate(value)) {
-			this._td2.html.classList.add("has-error");
+			this.valid(false)
+			this._content.html.classList.add("has-error");
 			return;
 		} else {
-			this._td2.html.classList.remove("has-error");
+			this.valid(true)
+			this._content.html.classList.remove("has-error");
 			this._value.value = value;
 		}
 		if (this._input.html.value != this._value.value) {
 			this._input.html.value = this._value.value
 		}
 		if (this._value.value != this.original) {
-			this._td2.html.classList.add("has-success");
+			this.changed(true)
+			this._content.html.classList.add("has-success");
 		} else {
-			this._td2.html.classList.remove("has-success");
+			this.changed(false)
+			this._content.html.classList.remove("has-success");
 		}
 		this.parent.changed(this) 
 	}