Re-introduce the use-name-box and tweak style

Turns out the style-diff was because the old implementation with hard-coded
HTML had indentation == white space, which rendered as white-space between the
elements.... This SHOULD be a CSS fix, but in the meanwhile....

3 files changed, 38 insertions, 21 deletions

diff --git a/web/js/nms-oplog.js b/web/js/nms-oplog.js
index c49a980..42452ff 100644
--- a/web/js/nms-oplog.js
+++ b/web/js/nms-oplog.js
@@ -38,30 +38,40 @@ class nmsOplog2 {
 		this.full.attach("oplog-parent")
 		this.mini.show()
 		this.full.show()
+		this._username = new nmsBox("p", {html:{className: "navbar-text navbar-right"}});
+		if (nms.user) {
+			this._username.html.textContent = nms.user
+		}
+		this._username.attach("navbar");
+		this._username.show()
 		nmsData.addHandler("oplog", "nmsOplogHandler", this.updateComments,this);
 	}
 	updateComments(x) {
+		if (nms.user && x._username.user != nms.user) {
+			x._username.user = nms.user;
+			x._username.html.textContent = nms.user
+		}
 		x.mini.update()
 		x.full.update()
 	}
 }
 class nmsOplogInput extends nmsBox {
 	constructor() {
-		super("div",{html:{className: "navbar-form", classList:["navbar-form","navbar-right","gondul-is-private"]}})
-		var systemParent = new nmsBox("div",{html:{className:"form-group",classList:["form-group"]}});
-		this._systems = new nmsBox("input", {html:{className:"form-control",classList:["form-control"],type:"text",size:"8",placeholder:"System(s)"}});
+		super("div",{html:{className:"navbar-form form-inline navbar-right gondul-is-private"}})
+		this._systems = new nmsBox("input", {html:{className:"form-control",type:"text",size:"8",placeholder:"System(s)"}});
 		this._systems.searchbox = document.getElementById("searchbox")
  		this._systems.html.oninput = function(e) {
 			this.nmsBox.searchbox.value = this.value;
 			this.nmsBox.searchbox.oninput();
 		}
-		systemParent.add(this._systems)
-		this.add(systemParent)
-		var entryParent = new nmsBox("div",{html:{className:"form-group",classList:["form-group"]}});
-		this._entry = new nmsBox("input", {html:{className:"form-control",classList:["form-control"],type:"text",size:"30",placeholder:"Log entry"}});
-		entryParent.add(this._entry)
-		this.add(entryParent)
-		var button = new nmsBox("button",{html:{classList:["btn","btn-default"],type:"button"}});
+		this.add(this._systems)
+		// This is to provide spacing.... should probably be solved in CSS.
+		// If this annoys you, then fix it.
+		this.add(new nmsBox("p",{html:{textContent:" ",style:{display: "inline"}}}))
+		this._entry = new nmsBox("input", {html:{className:"form-control",type:"text",size:"30",placeholder:"Log entry"}});
+		this.add(this._entry)
+		this.add(new nmsBox("p",{html:{textContent:" ",style:{display: "inline"}}}))
+		var button = new nmsBox("button",{html:{className:"btn btn-default",type:"button"}});
 		button.html.textContent = "Log";
 		button.container = this;
 		button.html.onclick = function(element) {
diff --git a/web/js/nms-ui-boxes.js b/web/js/nms-ui-boxes.js
index 385d601..cdb66bd 100644
--- a/web/js/nms-ui-boxes.js
+++ b/web/js/nms-ui-boxes.js
@@ -41,24 +41,32 @@ class nmsBox {
 	}
 
 	applySettings(settings) {
+		/* 
+		 * This really should go deeper, but the problem is that
+		 * I'm lazy. You can't just use Object.assign() either because
+		 * stuff like html.style isn't just any element and we want
+		 * to be able to do html:{style:{display:"none"}} instead
+		 * of html:{style:new (style object thing with display:none)}
+		 *
+		 * So far this works.
+		 *
+		 * Note that this breaks forr classList: This is because 
+		 * classList is just an accessor for className, so you 
+		 * should set className instead initially.
+		 */
 		if (settings.html) {
 			for (var x in settings.html) {
-				if (settings.html[x] instanceof Array) {
-					/* If you just sett classList = array it will end up being
-					 * classList = "panel,panel-default,foo", instead of
-					 * classList = ["panel","panel-default","foo"] ...
-					 * Not sure if this applies to all arrays in a html
-					 * object, but we'll see.
-					 */
-					for (var y in settings.html[x]) {
-						this.html[x].add(settings.html[x][y]);
-					}
+				if(settings.html[x] instanceof Object) {
+					Object.assign(this.html[x],settings.html[x])
 				} else {
 					this.html[x] = settings.html[x];
 				}
 			}
 		}
 	}
+	/* Should rename these to push() and unshift(), really, to be
+	 * more consistent.
+	 */
 	add(box) {
 		this._boxes.push(box);
 		box.attach(this.html)
diff --git a/web/js/nms.js b/web/js/nms.js
index a0f2ee9..8213537 100644
--- a/web/js/nms.js
+++ b/web/js/nms.js
@@ -404,7 +404,6 @@ function initNMS() {
 		nmsData.registerSource("networks","/api/read/networks");
 		nmsOplog.init();
 	}
-
 	restoreSettings();
 	nmsMap.init();
 	detectHandler();