web client: object rendering moved to new widget (Form)

1 files changed, 133 insertions, 71 deletions

diff --git a/web/client.js b/web/client.js
index 1fefaf7..0e22be3 100644
--- a/web/client.js
+++ b/web/client.js
@@ -190,7 +190,7 @@ $(function() {
 					changed[mpath] = value;
 				    if (!tn && newValue == changed[mpath])
 					delete changed[mpath];
- 
+				    
 				    if (npv == null)
 					_.each(
 					    _.keys(changed),
@@ -364,6 +364,7 @@ $(function() {
 		return $("<a>").attr({href: "javascript:void(0);"});
 	    }
 
+
 	    var Widget = {
 		init: function(
 		    data, name, meta, label, level, editable, removable
@@ -372,20 +373,20 @@ $(function() {
 		    var value = data.get(name);
 
 		    if (!editable) {
-			var el = this.staticRender(value, level);
+			var el = this.staticRender(value);
 			this.setElStatus(el, status);
 			if (label) return this.attachLabel(el, label);
 			return el;
 		    }
 
-		    this.el = this.render(value, meta, level);
+		    this.el = this.render(value, meta);
 
 		    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());
+				renderObject();
 			    })
 			}).text("Delete");
 			if (el.is("tr")) link = $("<td>").html(link);
@@ -415,7 +416,9 @@ $(function() {
 		}
 	    }
 
+
 	    var Field = Object.create(Widget);
+
 	    Field.init = function(
 		data, name, meta, label, level, editable, removable
 	    ) {
@@ -466,12 +469,15 @@ $(function() {
 		
 		return el;
 	    };
-	    Field.staticRender = function(value, level) {
+
+	    Field.staticRender = function(value) {
 		return $("<div>").text(value);
 	    };
-	    Field.render = function(value, meta, level) {
+
+	    Field.render = function(value, meta) {
 		return $("<input>").attr({type: "text", value: value});
 	    };
+
 	    Field.wrap = function() {
 		var td = $("<td>");
 		this.msg = $("<div>");
@@ -479,10 +485,13 @@ $(function() {
 		td.append(this.el);
 		return td;
 	    };
+
 	    Field.get = function() { return this.field.val() || null; };
 
+
 	    var ComboBox = Object.create(Field);
-	    ComboBox.render = function(value, meta, level) {
+
+	    ComboBox.render = function(value, meta) {
 		var el = $("<select>");
 
 		function opt(value, ui_value, selected) {
@@ -505,19 +514,24 @@ $(function() {
 	    }
 
 	    var CheckBox = Object.create(Field);
-	    CheckBox.staticRender = function(value, level) {
+	    CheckBox.staticRender = function(value) {
 		return $("<div>").text(value ? "Yes" : "No");
 	    };
+
 	    CheckBox.setElStatus = function(el, status) {
 		Field.setElStatus(el.parent(), status);
 	    };
-	    CheckBox.render = function(value, meta, level) {
+
+	    CheckBox.render = function(value, meta) {
 		return $("<input>").attr({type: "checkbox", checked: value});
 	    };
+
 	    CheckBox.get = function() { return this.el.is(":checked"); };
 
+
 	    var Link = Object.create(Widget);
-	    Link.staticRender = function(value, level) {
+
+	    Link.staticRender = function(value) {
 		var el = href();
 		if (value) {
 		    el.click(function() {
@@ -526,75 +540,51 @@ $(function() {
 		}
 		return el;
 	    };
-	    Link.render = function(value, meta, level) {
-		return this.staticRender(value, level);
+
+	    Link.render = function(value, meta) {
+		return this.staticRender(value);
 	    };
+
 	    Link.get = function() { return {}; };
 
+
 	    Inline = Object.create(Link);
-	    Inline.staticRender = function(value, level) {
-		var el = $("<div>");
-		var obj = $("<div>");
-		fetchAndRender(value, obj, level == 6 ? 6 : level + 1);
-		el.append(obj);
-		return el;
-	    };
-	    Inline.attachLabel = function(el, label) { return el; };
-	    Inline.setStatus = function(status) {};
 
-	    var Reference = Object.create(ComboBox);
-	    Reference.staticRender = function(value, level) {
-		return Link.staticRender(value, level).text(value);
-	    };
-	    Reference.setElStatus = function(el, status) {
-		ComboBox.setElStatus(el.find("select"), status);
-	    };
-	    Reference.init = function(
+	    Inline.init = function(
 		data, name, meta, label, level, editable, removable
 	    ) {
-		this.field = ComboBox.render(data.get(name), meta, level);
-		return _.bind(ComboBox.init, this)(
+		var el = _.bind(Widget.init, this)(
 		    data, name, meta, label, level, editable, removable
 		);
+		this.requestData(data.get(name), Math.min(6, level + 1));
+		return el;
 	    }
-	    Reference.render = function(value, meta, level) {
-		var el = $("<div>").html(this.field);
-		el.append(" ");
-
-		var link = $("<div>");
-		var update = _.bind(function() {
-		    link.html(Link.staticRender(this.get(), level));
-		}, this);		
-		el.append(link);
 
-		this.field.change(update);
-		update();
+	    Inline.staticRender = function(value) { return $("<div>"); };
 
-		return el;
+	    Inline.attachLabel = function(el, label) {
+		return $("<div>").html(el);
 	    };
 
+	    Inline.setStatus = function(status) {};
 
-	    var widgets = {
-		boolean: CheckBox,
-		combobox: ComboBox,
-		field: Field,
-		inline: Inline,
-		link: Link,
-		reference: Reference
-	    }
-
-
-	    function renderObject(path, data, target, level) {
-		target = target || $("#content");
-		level = level || 1;
+	    Inline.requestData = function(path, level) {
+		this.task = $.Deferred();
+		var self = this;
+		txnMgr.query(path).done(function(data) {
+		    self.renderObject(data, level);
+		    self.task.resolve();
+		}).fail(function() { self.task.reject(); });
+	    };
 
-		target.html($("<h" + level + ">").text(data.meta["ui-name"]));
+	    Inline.renderObject = function(data, level) {
+		this.el.html($("<h" + level + ">").text(data.meta["ui-name"]));
 
 		if (!isTreeNode(data.meta))
-		    return target.append(JSON.stringify(data));
+		    return this.el.append(JSON.stringify(data));
 		
 		var div = $("<div>");
-		target.append(div);
+		this.el.append(div);
 		
 		var table;
 		function appendRow(row) {
@@ -697,17 +687,90 @@ $(function() {
 			    insert();
 			}
 		    });
-		    target.append($("<p>").html(button));
+		    this.el.append($("<p>").html(button));
 		}
-	    }	    
+	    };
 
-	    function fetchAndRender(path, target, level) {
-		var def = $.Deferred();
-		txnMgr.query(path).done(function(data) {
-		    renderObject(path, data, target, level);
-		    def.resolve();
-		}).fail(function() { def.reject(); });
-		return def;
+
+	    var Form = Object.create(Inline);
+
+	    Form.staticRender = function(value) { return $("#content"); };
+
+	    Form.attachLabel = function(el, label) { return el; };
+
+	    Form.requestData = function(path, level) {
+		if (this.data) this.renderObject(this.data, level);
+		else _.bind(Inline.requestData, this)(path, level);
+	    };
+
+	    function renderObject(path, data) {
+		var path = path || $.param.fragment();
+
+		var form = Object.create(Form);
+		form.data = data;
+
+		var name = split(path).pop();
+
+		form.init(
+		    {
+			get: function(name) { return path; },
+			status: function(name) { return null; }
+		    },
+		    name,
+		    null,
+		    null,
+		    0,
+		    true,
+		    false
+		);
+
+		return form.task;
+	    };
+
+
+	    var Reference = Object.create(ComboBox);
+
+	    Reference.init = function(
+		data, name, meta, label, level, editable, removable
+	    ) {
+		this.field = ComboBox.render(data.get(name), meta, level);
+		return _.bind(ComboBox.init, this)(
+		    data, name, meta, label, level, editable, removable
+		);
+	    };
+
+	    Reference.staticRender = function(value) {
+		return Link.staticRender(value).text(value);
+	    };
+
+	    Reference.setElStatus = function(el, status) {
+		ComboBox.setElStatus(el.find("select"), status);
+	    };
+
+	    Reference.render = function(value, meta, level) {
+		var el = $("<div>").html(this.field);
+		el.append(" ");
+
+		var link = $("<div>");
+		var update = _.bind(function() {
+		    link.html(Link.staticRender(this.get()));
+		}, this);		
+		el.append(link);
+
+		this.field.change(update);
+		update();
+
+		return el;
+	    };
+
+
+	    var widgets = {
+		boolean: CheckBox,
+		combobox: ComboBox,
+		field: Field,
+		inline: Inline,
+		link: Link,
+		reference: Reference
 	    }
 
 
@@ -760,7 +823,7 @@ $(function() {
 
 		    renderMenu(tabs, "/" + comps[0], comps[1], true)
 			.done(function(first) {
-			    fetchAndRender(
+			    renderObject(
 				topLevel ? join(path, first) : path
 			    ).fail(function() {
 				comps.pop();
@@ -769,8 +832,7 @@ $(function() {
 			    });
 			})
 			.fail(function(data) {
-			    if (topLevel) renderObject(path, data);
-			    else fetchAndRender(path);
+			    renderObject(path, topLevel ? data : null);
 			});
 		});
 	    }