diff options
author | Kaarle Ritvanen <kaarle.ritvanen@datakunkku.fi> | 2013-05-20 18:45:58 +0300 |
---|---|---|
committer | Kaarle Ritvanen <kaarle.ritvanen@datakunkku.fi> | 2013-05-20 20:35:34 +0300 |
commit | 89827951582ddc0157c8bf89606c61218aece215 (patch) | |
tree | 6af9284c1f66000fd140a035bb6cbf62fcc2df85 /web | |
parent | 1480d39187e4552ea0f71c94c90638a29777a663 (diff) | |
download | aconf-89827951582ddc0157c8bf89606c61218aece215.tar.bz2 aconf-89827951582ddc0157c8bf89606c61218aece215.tar.xz |
web client: stylesheet, highlight changed and invalid parameters
Diffstat (limited to 'web')
-rw-r--r-- | web/client.css | 38 | ||||
-rw-r--r-- | web/client.html | 1 | ||||
-rw-r--r-- | web/client.js | 146 |
3 files changed, 119 insertions, 66 deletions
diff --git a/web/client.css b/web/client.css new file mode 100644 index 0000000..16d810c --- /dev/null +++ b/web/client.css @@ -0,0 +1,38 @@ +/* + * Copyright (c) 2012-2013 Kaarle Ritvanen + * See LICENSE file for license details + */ + + +#status { min-height: 40px; } + + +.invalid { + background-color: red; + color: white; +} + +.changed { + background-color: lime; + color: black; +} + +.current { + background-color: grey; + color: white; +} + + +#modules { position: absolute; } + +#modules li { list-style-type: none; } + + +#tabs, #content { margin-left: 150px; } + +#tabs { padding: 0; } + +#tabs li { + display: inline-block; + padding: 5px; +} diff --git a/web/client.html b/web/client.html index 9433de7..3c57e57 100644 --- a/web/client.html +++ b/web/client.html @@ -8,6 +8,7 @@ <html xmlns="http://www.w3.org/1999/xhtml"> <head> + <link rel="stylesheet" type="text/css" href="client.css"></link> <script type="text/javascript" src="underscore.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-bbq.js"></script> diff --git a/web/client.js b/web/client.js index f5a50c3..9b47bec 100644 --- a/web/client.js +++ b/web/client.js @@ -40,17 +40,29 @@ $(function() { var Field = { - format: function(value) { return $("<div>").text(value); }, - init: function(value, meta) { - this.el = $("<input>").attr({type: "text", value: value}); + format: function(value, status) { + var el = this.staticRender(value); + this.setStatus(status, el); + return el; + }, + staticRender: function(value) { return $("<div>").text(value); }, + init: function(value, meta, status) { + this.el = this.render(value, meta); + this.setStatus(status); + }, + render: function(value, meta) { + return $("<input>").attr({type: "text", value: value}); + }, + setStatus: function(status, el) { + if (!el) el = this.el; + el.prop("class", 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( @@ -67,55 +79,70 @@ $(function() { opt(choice[0], choice[1], value == choice[0]); } ); + + return el; } - var Path = { - format: function(value) { - var el = $("<a>"); - if (value) { - el.attr({href: "javascript:void(0);"}).click(function() { - $.bbq.pushState("#" + value); - }).text(value); - } - return el; - }, - init: function(value, meta) { this.el = this.format(value); } + var CheckBox = Object.create(Field); + CheckBox.staticRender = function(value) { + return $("<div>").text(value ? "Yes" : "No"); + }; + CheckBox.render = function(value, meta) { + return $("<input>").attr({type: "checkbox", checked: value}); + }; + CheckBox.setStatus = function(status) { + Field.setStatus(status, this.el.parent()); + } + CheckBox.get = function() { return this.el.is(":checked"); }; + + var Path = Object.create(Field); + Path.staticRender = function(value) { + var el = $("<a>"); + if (value) { + el.attr({href: "javascript:void(0);"}).click(function() { + $.bbq.pushState("#" + value); + }).text(value); + } + return el; + }; + Path.render = function(value, meta) { + return this.staticRender(value); + }; + + var Reference = Object.create(Path); + Reference.init = function(value, meta, status) { + this.cbox = Object.create(ComboBox) + this.cbox.init(value, meta); + + this.link = $("<div>"); + var update = _.bind(function() { + this.link.html(this.staticRender(this.get())); + }, this); + this.cbox.el.change(update); + update(); + + _.bind(Path.init, this)(value, meta, status); + } + Reference.render = function(value, meta) { + var el = $("<div>"); + el.append(this.cbox.el); + el.append(" "); + el.append(this.link); + return el; + }; + Reference.setStatus = function(status) { + ComboBox.setStatus(status, this.cbox.el); } + Reference.get = function() { return this.cbox.get(); }; + var widgets = { - boolean: { - format: function(value) { return value ? "Yes" : "No"; }, - init: function(value, meta) { - this.el = $("<input>").attr( - {type: "checkbox", checked: value} - ); - }, - get: function() { return this.el.is(":checked"); } - }, + boolean: CheckBox, collection: Path, combobox: ComboBox, field: Field, model: Path, - reference: { - format: Path.format, - init: function(value, meta) { - this.cbox = Object.create(ComboBox) - this.cbox.init(value, meta); - - var link = $("<div>"); - var update = _.bind(function() { - link.html(this.format(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); - }, - get: function() { return this.cbox.get(); } - } + reference: Reference } @@ -140,7 +167,7 @@ $(function() { if (path == "/") path = ""; var res = {}; - _.map(data.data, function(path) { res[path] = null; }); + _.map(data.data, function(path) { res[path] = ""; }); function scan(objs, label) { var level = split(path).length; @@ -157,11 +184,6 @@ $(function() { return res; } - function setStatus(el, status) { - if (status) el.text("[" + status + "]"); - else el.empty(); - } - function renderMenu(target, path, current, selectFirst) { var def = $.Deferred(); @@ -185,12 +207,7 @@ $(function() { _.each(data.data, function(path) { var el = $("<li>"); - el.append(Path.format(path)); - - var statusEl = $("<div>"); - setStatus(statusEl, status[path]); - - el.append(statusEl); + el.append(Path.format(path, status[path])); target.append(el); }); @@ -228,10 +245,6 @@ $(function() { var td = $("<td>"); - var statusEl = $("<div>"); - setStatus(statusEl, status[path]); - td.append(statusEl); - var msg = $("<div>"); td.append(msg); @@ -242,7 +255,9 @@ $(function() { if (editable) { var widget = Object.create(widget); widget.init( - path in invalid ? invalid[path] : value, meta + path in invalid ? invalid[path] : value, + meta, + status[path] ); el = widget.el; el.change(function() { @@ -322,8 +337,7 @@ $(function() { task.done(function() { msg.empty(); - setStatus( - statusEl, + widget.setStatus( path in changed ? "changed" : null ); @@ -333,14 +347,14 @@ $(function() { }).fail(function(xhr) { showError(msg, "Error", xhr); - setStatus(statusEl, "invalid"); + widget.setStatus("invalid"); }); }); if (path in invalid) el.trigger("change"); } - else el = widget.format(value); + else el = widget.format(value, status[path]); td.append(el); } |