web client: move field rendering to Widget, Field objects

1 files changed, 89 insertions, 94 deletions

diff --git a/web/client.js b/web/client.js
index c61e5c7..1fefaf7 100644
--- a/web/client.js
+++ b/web/client.js
@@ -353,35 +353,47 @@ $(function() {
 	    
 
 
+	    function formatError(msg, xhr) {
+		msg += " " + xhr.statusCode().status;
+		if (xhr.responseText) msg += ': ' + xhr.responseText;
+		return msg;
+	    }
+
+
 	    function href() {
 		return $("<a>").attr({href: "javascript:void(0);"});
 	    }
 
 	    var Widget = {
-		init: function(value, meta, label, level, update, remove) {
+		init: function(
+		    data, name, meta, label, level, editable, removable
+		) {
 
-		    function attachLabel(el) {
-			var row = $("<tr>");
-			row.append($("<td>").text(label));
-			row.append(el);			
-			return row;
-		    }
+		    var value = data.get(name);
 
-		    if (!update) {
+		    if (!editable) {
 			var el = this.staticRender(value, level);
 			this.setElStatus(el, status);
-			if (label) return attachLabel(el);
+			if (label) return this.attachLabel(el, label);
 			return el;
 		    }
 
 		    this.el = this.render(value, meta, level);
-		    this.el.change(update);
 
-		    var el = attachLabel(this.wrap());
-		    if (remove)
-			el.append(
-			    $("<td>").html(href().click(remove).text("Delete"))
-			);
+		    var el = this.attachLabel(this.wrap(), label);
+		    if (removable) {
+			var link = href().click(function() {
+			    data.delete(name).done(function(txnValid) {
+				statusBar.validationReady(txnValid)
+				fetchAndRender($.param.fragment());
+			    })
+			}).text("Delete");
+			if (el.is("tr")) link = $("<td>").html(link);
+			el.append(link);
+		    }
+
+		    this.setStatus(data.status(name));
+
 		    return el;
 		},
 
@@ -389,6 +401,13 @@ $(function() {
 		    el.prop("class", status);
 		},
 
+		attachLabel: function(el, label) {
+		    var row = $("<tr>");
+		    row.append($("<td>").text(label));
+		    row.append(el);			
+		    return row;
+		},
+
 		wrap: function() { return this.el; },
 
 		setStatus: function(status) {
@@ -397,11 +416,54 @@ $(function() {
 	    }
 
 	    var Field = Object.create(Widget);
-	    Field.init = function(value, meta, label, level, update, remove) {
+	    Field.init = function(
+		data, name, meta, label, level, editable, removable
+	    ) {
 		var el = _.bind(Widget.init, this)(
-		    value, meta, label, level, update, remove
+		    data, name, meta, label, level, editable, removable
 		);
-		if (!this.field) this.field = this.el;
+
+		if (editable) {
+		    if (!this.field) this.field = this.el;
+
+		    var self = this;
+
+		    function change() {
+			self.msg.text("[checking]");
+			statusBar.setError("Validating changes", "validate");
+			
+			data.set(name, self.get()).done(function(txnValid) {
+			    self.msg.empty()
+			    self.setStatus(data.status(name));
+			    statusBar.validationReady(txnValid);
+			    
+			}).fail(function(xhr) {
+			    if (_.isString(xhr)) self.msg.text(xhr);
+			    
+			    else if (xhr.statusCode().status == 422)
+				self.msg.html(
+				    _.reduce(
+					_.map(
+					    $.parseJSON(xhr.responseText),
+					    _.escape
+					),
+					function(a, b) {
+					    return a + "<br/>" + b;
+					}
+				    )
+				);
+			    
+			    else self.msg.text(formatError("Error", xhr));
+			    
+			    self.setStatus("invalid");
+			    statusBar.validationReady(false);
+			});
+		    }
+		    
+		    this.field.change(change);
+		    if (data.status(name) == "invalid") change();
+		}
+		
 		return el;
 	    };
 	    Field.staticRender = function(value, level) {
@@ -417,10 +479,6 @@ $(function() {
 		td.append(this.el);
 		return td;
 	    };
-	    Field.setMessage = function(msg, html) {
-		if (html) this.msg.html(msg);
-		else this.msg.text(msg);
-	    };
 	    Field.get = function() { return this.field.val() || null; };
 
 	    var ComboBox = Object.create(Field);
@@ -481,10 +539,7 @@ $(function() {
 		el.append(obj);
 		return el;
 	    };
-	    Inline.wrap = function(el, label, remove) {
-		if (remove) el.append(href().click(remove).text("Delete"));
-		return {row: el};
-	    };
+	    Inline.attachLabel = function(el, label) { return el; };
 	    Inline.setStatus = function(status) {};
 
 	    var Reference = Object.create(ComboBox);
@@ -495,11 +550,11 @@ $(function() {
 		ComboBox.setElStatus(el.find("select"), status);
 	    };
 	    Reference.init = function(
-		value, meta, label, level, update, remove
+		data, name, meta, label, level, editable, removable
 	    ) {
-		this.field = ComboBox.render(value, meta, level);
+		this.field = ComboBox.render(data.get(name), meta, level);
 		return _.bind(ComboBox.init, this)(
-		    value, meta, label, level, update, remove
+		    data, name, meta, label, level, editable, removable
 		);
 	    }
 	    Reference.render = function(value, meta, level) {
@@ -529,13 +584,6 @@ $(function() {
 	    }
 
 
-	    function formatError(msg, xhr) {
-		msg += " " + xhr.statusCode().status;
-		if (xhr.responseText) msg += ': ' + xhr.responseText;
-		return msg;
-	    }
-
-
 	    function renderObject(path, data, target, level) {
 		target = target || $("#content");
 		level = level || 1;
@@ -558,69 +606,16 @@ $(function() {
 		}
 		
 		function renderField(name, meta, label, editable, removable) {
-
-		    var value = data.get(name);
-		    var status = data.status(name);
-		    
-		    if (!(meta.widget in widgets))
-			return $("<tr>").html($("<td>").text(value));
-
-		    var widget = Object.create(widgets[meta.widget]);
-		    
-		    function change() {
-			if (isTreeNode(meta)) return;
-
-			widget.setMessage("[checking]");
-			statusBar.setError("Validating changes", "validate");
-			
-			data.set(name, widget.get()).done(function(txnValid) {
-			    widget.setMessage("");
-			    widget.setStatus(data.status(name));
-			    statusBar.validationReady(txnValid);
-			    
-			}).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");
-			    statusBar.validationReady(false);
-			});
-		    }
-
-		    var el = widget.init(
-			value,
+		    var el = Object.create(widgets[meta.widget]).init(
+			data,
+			name,
 			meta,
 			label,
 			level,
-			editable ? change : null,
-			removable ? function() {
-			    data.delete(name).done(function(txnValid) {
-				statusBar.validationReady(txnValid)
-				fetchAndRender(path);
-			    });
-			} : null
+			editable,
+			removable
 		    );
 
-		    if (editable) {
-			if (status == "invalid") change();
-			widget.setStatus(status);
-		    }
-
 		    if (el.is("tr")) appendRow(el);
 		    else {
 			table = null;