Front + api: Fix parsing of JSON-fields for switches

Sort of.

It's two issues at once, related:

1. API: The problem here was that the old way of updating tags simply didn't
   use actual JSON, but just sent "'foo','bar','baz'" as a text string. This
   seems dumb so I've made it send actual JSON now - just like the "placement"
   field. This meant updating the API. And it's not pretty, but it works.
2. Front: I've simplified nms-types a bit (hopefully to provide to simple
   methods: either get/set the raw value, or get/set strings. There was a bug
   where we sent text-encoded json instead of real json, and the reason
   was a confusion between when we're dealing with JSON and when we're
   dealing with strings. Now we are explicit.

This makes the nmsEditRow-thing slightly uglier, but it needs to be fixed
properly either way. In the future, we should provide renderers and editors
based on types, e.g.: Placement-editor could start as a general-purpose
JSON-editor, and the "switch reference" should be a drop-down.... etc.

Fixes #202

3 files changed, 34 insertions, 38 deletions

diff --git a/web/api/write/switches b/web/api/write/switches
index e42c4b3..1f91d48 100755
--- a/web/api/write/switches
+++ b/web/api/write/switches
@@ -97,7 +97,9 @@ foreach my $tmp2 (@tmp) {
 			push @dups, "not really, but: " . $switch{'placement'};
 		}
 		if (defined($switch{'tags'})) {
-			$switch{'tags'} =~ s/'/"/g;
+			# MY GOD I HATE THIS
+			# But I'm too lazy to improve it more for now.
+			$switch{'tags'} = "[". join(",", map { "\"".$_."\"" } @{$switch{'tags'}})."]";
 		}
 		my @set;
 		map {
diff --git a/web/js/nms-types.js b/web/js/nms-types.js
index 769bd32..308475f 100644
--- a/web/js/nms-types.js
+++ b/web/js/nms-types.js
@@ -36,6 +36,8 @@ class nmsType {
 	validate(input) {
 		return true;
 	}
+	// Always return text-representation
+	// Should be matched by fromString()
 	toString() {
 		if (this._value == null || this._value == undefined) {
 			return ""
@@ -43,8 +45,16 @@ class nmsType {
 			return this._value.toString();
 		}
 	}
+	// Set value from string-input
+	fromString(input) {
+		if (this.validate(input)) {
+			this._value = input;
+		} else {
+			throw "Invalid input. Use .validate() before setting stuff please. I am " + this + " and my input is " + input
+		}
+	}
 	initial(v) {
-		this._value = this._valueParse(v);
+		this.value = v;
 		if(this.priority == nmsPriority.newOnly) {
 			this.ro = true;
 		}
@@ -52,15 +62,8 @@ class nmsType {
 	get value() {
 		return this._value;
 	}
-	_valueParse(input) {
-		return input;
-	}
 	set value(input) {
-		if (this.validate(input)) {
-			this._value = this._valueParse(input);
-		} else {
-			throw "Invalid input. Use .validate() before setting stuff please. I am " + this + " and my input is " + input
-		}
+		this._value = input;
 	}
 	get _defaultPriority() {
 		return nmsPriority.optional;
@@ -125,21 +128,9 @@ class nmsTypeNetwork extends nmsType {
 	}
 }
 class nmsTypeJSON extends nmsType {
-	get value() {
-		if (this._value == null || this._value == undefined) {
-			return "";
-		}
-		return JSON.stringify(this._value)
-	}
-	set value(input) {
-		super.value = input;
-	}
-	/* This should probably actually know the basic template
-	 * for a placement-object...
-	 */
 	validate(input) {
 		try {
-			this._valueParse(input);
+			JSON.parse(input);
 			this.validationReason = "OK"
 			return true;
 		} catch(e) {
@@ -147,11 +138,14 @@ class nmsTypeJSON extends nmsType {
 			return false;
 		}
 	}
-	_valueParse(input) { 
-		if (input instanceof Object) {
-			return input;
-		} else {
-			return JSON.parse(input);
+	toString() {
+		return JSON.stringify(this._value);
+	}
+	fromString(input) {
+		try {
+			this.value = JSON.parse(input);
+		} catch(e) {
+			throw "Invalid input. Use .validate() before setting stuff please. I am " + this + " and my input is " + input
 		}
 	}
 }
diff --git a/web/js/nms-ui-switch.js b/web/js/nms-ui-switch.js
index b7cbc7c..0919534 100644
--- a/web/js/nms-ui-switch.js
+++ b/web/js/nms-ui-switch.js
@@ -126,15 +126,15 @@ class nmsModThing extends nmsBox {
 		var ret = {};
 		var changed = 0;
 		for (var idx in this.rows) {
-			if (this.rows[idx].value != this.rows[idx].original) {
-				ret[idx] = this.rows[idx].value;
+			if (this.rows[idx].value.toString() != this.rows[idx].original) {
+				ret[idx] = this.rows[idx].value.value;
 				changed++;
 			}
 		}
 		if (!changed) {
 			return undefined;
 		}
-		ret[this.identifier] = this.rows[this.identifier].value;
+		ret[this.identifier] = this.rows[this.identifier].value.value;
 		return ret;
 	}
 }
@@ -146,7 +146,7 @@ class nmsEditRow extends nmsBox {
 		console.assert(value instanceof nmsType)
 		this.name = text;
 		this._value = value;
-		this.original = value.value;
+		this.original = value.toString();
 		var td1 = new nmsBox("td")
 		var name = new nmsString(text+" ");
 		name.html.title = value.description;
@@ -161,7 +161,7 @@ class nmsEditRow extends nmsBox {
 		this.changed(false)
 		var content = new nmsBox("td")
 		var input = new nmsBox("input")
-		input.html.value = value.value;
+		input.html.value = value.toString();
 		input.html.className = "form-control";
 		input.html.type = "text";
 		input.row = this;
@@ -188,7 +188,7 @@ class nmsEditRow extends nmsBox {
 		this.add(content)
 	}
 	get value() {
-		return this._value.value;
+		return this._value;
 	}
 	changed(val) {
 		if (val) {
@@ -224,12 +224,12 @@ class nmsEditRow extends nmsBox {
 		} else {
 			this.valid(true)
 			this._content.html.classList.remove("has-error");
-			this._value.value = value;
+			this._value.fromString(value);
 		}
-		if (this._input.html.value != this._value.value) {
-			this._input.html.value = this._value.value
+		if (this._input.html.value != this._value.toString()) {
+			this._input.html.value = this._value.toString()
 		}
-		if (this._value.value != this.original) {
+		if (this._value.toString() != this.original) {
 			this.changed(true)
 			this._content.html.classList.add("has-success");
 		} else {