diff options
| -rw-r--r-- | web/client.js | 204 |
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); }); }); } |