web client: move <tr> rendering to widget implementation

1 files changed, 88 insertions, 82 deletions

diff --git a/web/client.js b/web/client.js
index 5ba3fa6..0bed053 100644
--- a/web/client.js
+++ b/web/client.js
@@ -298,24 +298,45 @@ $(function() {
 
 
 	var Field = {
-	    format: function(value, status) {
+	    format: function(value, status, label) {
 		var el = this.staticRender(value);
 		this.setElStatus(el, status);
+		if (label) return this.wrap(el, label).row;
 		return el;
 	    },
 	    staticRender: function(value) { return $("<div>").text(value); },
 	    setElStatus: function(el, status) { el.prop("class", status); },
-	    init: function(value, meta) {
-		this.el = $("<input>").attr({type: "text", value: value});
+	    wrap: function(el, label) {
+		var row = $("<tr>");
+		row.append($("<td>").text(label));
+		var td = $("<td>");
+		var msg = $("<div>");
+		td.append(msg);
+		td.append(el);
+		row.append(td);
+		return {row: row, msg: msg};
+	    },
+	    init: function(value, meta, callback, label) {
+		this.el = this.render(value, meta);
+		this.el.change(callback);
+		if (!label) return this.el;
+		this.els = this.wrap(this.el, label);
+		return this.els.row;
+	    },
+	    render: function(value, meta) {
+		return $("<input>").attr({type: "text", value: value});
+	    },
+	    setMessage: function(msg, html) {
+		if (html) this.els.msg.html(msg);
+		else this.els.msg.text(msg);
 	    },
 	    setStatus: function(status) { this.setElStatus(this.el, status); },
 	    get: function() { return this.el.val() || null; }
 	}
 
 	var ComboBox = Object.create(Field);
-	ComboBox.init = function(value, meta) {
+	ComboBox.render = function(value, meta) {
 	    var el = $("<select>");
-	    this.el = el;
 
 	    function opt(value, ui_value, selected) {
 		el.append($("<option>").attr(
@@ -332,6 +353,8 @@ $(function() {
 		    opt(choice[0], choice[1], value == choice[0]);
 		}
 	    );
+
+	    return el;
 	}
 
 	var CheckBox = Object.create(Field);
@@ -341,8 +364,8 @@ $(function() {
 	CheckBox.setElStatus = function(el, status) {
 	    Field.setElStatus(el.parent(), status);
 	};
-	CheckBox.init = function(value, meta) {
-	    this.el = $("<input>").attr({type: "checkbox", checked: value});
+	CheckBox.render = function(value, meta) {
+	    return $("<input>").attr({type: "checkbox", checked: value});
 	};
 	CheckBox.get = function() { return this.el.is(":checked"); };
 
@@ -356,8 +379,8 @@ $(function() {
 	    }
 	    return el;
 	};
-	Path.init = function(value, meta) {
-	    this.el = this.staticRender(value);
+	Path.render = function(value, meta) {
+	    return this.staticRender(value);
 	};
 	Path.get = function() { return {}; };
 
@@ -368,21 +391,22 @@ $(function() {
 	Reference.setElStatus = function(el, status) {
 	    ComboBox.setElStatus(el.find("select"), status);
 	};
-	Reference.init = function(value, meta) {
-	    this.cbox = Object.create(ComboBox)
-	    this.cbox.init(value, meta);
-	    
+	Reference.render = function(value, meta) {
 	    var link = $("<div>");
 	    var update = _.bind(function() {
 		link.html(Path.staticRender(this.get()));
 	    }, this);
-	    this.cbox.el.change(update);
-	    update();
 	    
-	    this.el = $("<div>");
-	    this.el.append(this.cbox.el);
-	    this.el.append(" ");
-	    this.el.append(link);
+	    this.cbox = Object.create(ComboBox);
+	    
+	    var el = $("<div>");
+	    el.append(this.cbox.init(value, meta, update));
+	    el.append(" ");
+	    el.append(link);
+
+	    update();
+
+	    return el;
 	};
 	Reference.get = function() { return this.cbox.get(); };
 
@@ -480,75 +504,57 @@ $(function() {
 		function renderField(name, value, meta, label, editable) {
 		    var status = data.status(name);
 
-		    var row = $("<tr>");
-		    row.append($("<td>").text(label));
-		    
-		    var td = $("<td>");
-
-		    var msg = $("<div>");
-		    td.append(msg);
-
-		    if (meta.widget in widgets) {
-			var widget = widgets[meta.widget];
-			var el;
-
-			if (editable) {
-			    widget = Object.create(widget);
-			    widget.init(value, meta);
-			    el = widget.el;
-
-			    el.change(function() {
-				msg.text("[checking]");
-				if (
-				    $("#status").prop("class") != "invalid"
-				) statusBar.text("Validating changes");
-
-				data.set(name, widget.get()).done(function(
-				    txnValid
-				) {
-				    msg.empty();
-				    widget.setStatus(data.status(name));
-				    validated(txnValid);
+		    if (!(meta.widget in widgets))
+			return $("<tr>").html($("<td>").text(value));
+
+		    var widget = widgets[meta.widget];
+		    if (!editable) return widget.format(value, status, label);
+
+		    widget = Object.create(widget);
+
+		    function change() {
+			widget.setMessage("[checking]");
+			if ($("#status").prop("class") != "invalid")
+			    statusBar.text("Validating changes");
+
+			data.set(name, widget.get()).done(function(txnValid) {
+			    widget.setMessage("");
+			    widget.setStatus(data.status(name));
+			    validated(txnValid);
 				    
-				}).fail(function(xhr) {
-				    if (_.isString(xhr)) msg.text(xhr);
-
-				    else if (xhr.statusCode().status == 422)
-					msg.html(_.reduce(
-					    _.map(
-						$.parseJSON(xhr.responseText),
-						_.escape
-					    ),
-					    function(a, b) {
-						return a + "<br/>" + b;
-					    }
-					));
-
-				    else msg.text(formatError("Error", xhr));
+			}).fail(function(xhr) {
+			    if (_.isString(xhr)) widget.setMessage(xhr);
+
+			    else if (xhr.statusCode().status == 422)
+				widget.setMessage(
+				    _.reduce(
+					_.map(
+					    $.parseJSON(xhr.responseText),
+					    _.escape
+					),
+					function(a, b) {
+					    return a + "<br/>" + b;
+					}
+				    ),
+				    true
+				);
+
+			    else widget.setMessage(formatError("Error", xhr));
 				    
-				    widget.setStatus("invalid");
-				    validated(false);
-				});
-			    });
+			    widget.setStatus("invalid");
+			    validated(false);
+			});
+		    }
 
-			    if (status == "invalid" && !isTreeNode(meta))
-				el.trigger("change");
-			}
+		    var el = widget.init(value, meta, change, label);
 
-			else el = widget.format(value, status);
+		    if (status == "invalid" && !isTreeNode(meta))
+			change();
 
-			td.append(el);
+		    widget.setStatus(status);
 
-			if (editable) widget.setStatus(status);
-		    }
-		    
-		    else td.text(value);
-		    
-		    row.append(td);
-		    row.append($("<td>").text(JSON.stringify(meta)));
-		    table.append(row);
-
-		    return row;
+		    table.append(el);
+		    return el;
 		}
 		
 		function renderCollectionMember(name, value, meta) {