summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
authorKaarle Ritvanen <kaarle.ritvanen@datakunkku.fi>2013-05-20 18:45:58 +0300
committerKaarle Ritvanen <kaarle.ritvanen@datakunkku.fi>2013-05-20 20:35:34 +0300
commit89827951582ddc0157c8bf89606c61218aece215 (patch)
tree6af9284c1f66000fd140a035bb6cbf62fcc2df85 /web
parent1480d39187e4552ea0f71c94c90638a29777a663 (diff)
downloadaconf-89827951582ddc0157c8bf89606c61218aece215.tar.bz2
aconf-89827951582ddc0157c8bf89606c61218aece215.tar.xz
web client: stylesheet, highlight changed and invalid parameters
Diffstat (limited to 'web')
-rw-r--r--web/client.css38
-rw-r--r--web/client.html1
-rw-r--r--web/client.js146
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);
}