diff options
author | Kaarle Ritvanen <kaarle.ritvanen@datakunkku.fi> | 2013-09-04 11:49:36 +0300 |
---|---|---|
committer | Kaarle Ritvanen <kaarle.ritvanen@datakunkku.fi> | 2013-09-11 11:29:10 +0300 |
commit | 35d0195c76dff143eeb196b371cc06c0c24d623d (patch) | |
tree | abc9e087ee6aac6beb4f0b6dbd03f3b928235250 | |
parent | 9889ce84362b01c897edd03b712bfc31f3bcc8d2 (diff) | |
download | aconf-35d0195c76dff143eeb196b371cc06c0c24d623d.tar.bz2 aconf-35d0195c76dff143eeb196b371cc06c0c24d623d.tar.xz |
web client: move <tr> rendering to widget implementation
-rw-r--r-- | web/client.js | 170 |
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) { |