From 89827951582ddc0157c8bf89606c61218aece215 Mon Sep 17 00:00:00 2001 From: Kaarle Ritvanen Date: Mon, 20 May 2013 18:45:58 +0300 Subject: web client: stylesheet, highlight changed and invalid parameters --- web/client.css | 38 +++++++++++++++ web/client.html | 1 + web/client.js | 146 +++++++++++++++++++++++++++++++------------------------- 3 files changed, 119 insertions(+), 66 deletions(-) create mode 100644 web/client.css (limited to 'web') 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 @@ + 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 $("
").text(value); }, - init: function(value, meta) { - this.el = $("").attr({type: "text", value: value}); + format: function(value, status) { + var el = this.staticRender(value); + this.setStatus(status, el); + return el; + }, + staticRender: function(value) { return $("
").text(value); }, + init: function(value, meta, status) { + this.el = this.render(value, meta); + this.setStatus(status); + }, + render: function(value, meta) { + return $("").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 = $("").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 = $(""); + 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 = $("
"); + 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 = $("
"); + 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 = $("").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 = $("
"); - var update = _.bind(function() { - link.html(this.format(this.get())); - }, this); - this.cbox.el.change(update); - update(); - - this.el = $("
"); - 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 = $("
  • "); - el.append(Path.format(path)); - - var statusEl = $("
    "); - setStatus(statusEl, status[path]); - - el.append(statusEl); + el.append(Path.format(path, status[path])); target.append(el); }); @@ -228,10 +245,6 @@ $(function() { var td = $(""); - var statusEl = $("
    "); - setStatus(statusEl, status[path]); - td.append(statusEl); - var msg = $("
    "); 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); } -- cgit v1.2.3