diff --git a/frontend/index.html b/frontend/index.html index b8252be..304ee3e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -45,20 +45,20 @@
- - - - - - - - - - + + + + + + + + + +

Kanäle

-
+
@@ -74,7 +74,7 @@
-
+

Optionen

@@ -82,29 +82,25 @@ Option - Wert + Wert - - - - Darstellung - - - - - + Darstellung + + + + + - @@ -116,27 +112,27 @@
-
-

Hier können Sie einen existierenden Kanal über seine UUID hinzufügen

-

- -
+
+
+ +
+

Hier können Sie einen existierenden Kanal über seine UUID hinzufügen

+

+ +
+
+

Hier können Sie einen neuen Kanal erstellen

-
-

Hier können sie einen neuen Kanal hinzufügen:

-
Allgemeine Eigenschaften - - - -
-
- -
- Spezifische Eigenschaften -
-

(*) required

-
- + +
+
+

Hier können Sie demnächst öffentliche Kanäle abonnieren.

+
+
diff --git a/frontend/javascripts/entity.js b/frontend/javascripts/entity.js index 7a9e194..0825a29 100644 --- a/frontend/javascripts/entity.js +++ b/frontend/javascripts/entity.js @@ -58,8 +58,9 @@ Entity.prototype.showDetails = function() { .addClass('details') .append(this.getDOM()) .dialog({ - title: 'Entity Details', - width: 450 + title: 'Details für ' + this.title, + width: 450, + resizable: false }); }; diff --git a/frontend/javascripts/frontend.js b/frontend/javascripts/frontend.js index fbba40e..08edcaa 100644 --- a/frontend/javascripts/frontend.js +++ b/frontend/javascripts/frontend.js @@ -55,7 +55,7 @@ vz.wui.init = function() { vz.entities.loadData(); }); - $('#backendUrl') + $('#backend-url') .val(vz.options.backendUrl) .change(function() { vz.options.backendUrl = $(this).val(); @@ -68,7 +68,7 @@ vz.wui.init = function() { }); // plot rendering - $('#rendering_lines') + $('#render-lines') .attr('checked', vz.options.plot.series.lines.show) .change(function() { vz.options.plot.series.lines.show = $(this).attr('checked'); @@ -76,7 +76,7 @@ vz.wui.init = function() { vz.drawPlot(); }); - $('#rendering_points') + $('#render-points') .attr('checked', vz.options.plot.series.points.show) .change(function() { vz.options.plot.series.lines.show = !$(this).attr('checked'); @@ -90,35 +90,25 @@ vz.wui.init = function() { */ vz.wui.dialogs.init = function() { // initialize dialogs - $('#addUUID').dialog({ + $('#entity-add.dialog').dialog({ autoOpen: false, - title: 'UUID hinzufügen', - width: 450, + title: 'Kanal hinzufügen', + width: 600, resizable: false }); + $('#entity-add.dialog > div').tabs(); - $('#newEntity').dialog({ - autoOpen: false, - title: 'Entity erstellen', - width: 400 + // open entity dialogs + $('button[name=entity-add]').click(function() { + $('#entity-add').dialog('open'); }); - // open uuid dialog - $('button[name=addUUID]').click(function() { - $('#addUUID').dialog('open'); - }); - - // open entity dialog - $('button[name=newEntity]').click(function() { - $('#newEntity').dialog('open'); - }); - - // add UUID - $('#addUUID input[type=button]').click(function() { + // subscribe UUID + $('#entity-subscribe input[type=button]').click(function() { try { - vz.uuids.add($('#addUUID input[type=text]').val()); - $('#addUUID input[type=text]').val(''); - $('#addUUID').dialog('close'); + vz.uuids.add($('#entity-subscribe input[type=text]').val()); + $('#entity-subscribe input[type=text]').val(''); + $('#entity-add').dialog('close'); vz.entities.loadDetails(); } catch (exception) { @@ -179,60 +169,60 @@ vz.wui.handleControls = function () { var middle = vz.options.plot.xaxis.min + delta/2; switch($(this).val()) { - case 'move_last': + case 'move-last': vz.options.plot.xaxis.max = new Date().getTime(); vz.options.plot.xaxis.min = new Date().getTime() - delta; break; - case 'move_back': + case 'move-back': vz.options.plot.xaxis.min -= delta; vz.options.plot.xaxis.max -= delta; break; - case 'move_forward': + case 'move-forward': vz.options.plot.xaxis.min += delta; vz.options.plot.xaxis.max += delta; break; - case 'zoom_reset': + case 'zoom-reset': vz.options.plot.xaxis.min = middle - vz.options.defaultInterval/2; vz.options.plot.xaxis.max = middle + vz.options.defaultInterval/2; break; - case 'zoom_in': + case 'zoom-in': vz.options.plot.xaxis.min += delta/4; vz.options.plot.xaxis.max -= delta/4; break; - case 'zoom_out': + case 'zoom-out': vz.options.plot.xaxis.min -= delta; vz.options.plot.xaxis.max += delta; break; - case 'zoom_hour': + case 'zoom-hour': hour = 60*60*1000; vz.options.plot.xaxis.min = middle - hour/2; vz.options.plot.xaxis.max = middle + hour/2; break; - case 'zoom_day': + case 'zoom-day': var day = 24*60*60*1000; vz.options.plot.xaxis.min = middle - day/2; vz.options.plot.xaxis.max = middle + day/2; break; - case 'zoom_week': + case 'zoom-week': var week = 7*24*60*60*1000; vz.options.plot.xaxis.min = middle - week/2; vz.options.plot.xaxis.max = middle + week/2; break; - case 'zoom_month': + case 'zoom-month': var month = 30*24*60*60*1000; vz.options.plot.xaxis.min = middle - month/2; vz.options.plot.xaxis.max = middle + month/2; break; - case 'zoom_year': + case 'zoom-year': var year = 365*24*60*60*1000; vz.options.plot.xaxis.min = middle - year/2; vz.options.plot.xaxis.max = middle + year/2; @@ -259,6 +249,8 @@ vz.wui.handleControls = function () { */ vz.entities.loadDetails = function() { this.clear(); + $('#entity-list tbody').empty(); + vz.uuids.each(function(index, value) { vz.load('entity', value, {}, waitAsync(function(json) { vz.entities.push(new Entity(json.entity)); @@ -271,7 +263,6 @@ vz.entities.loadDetails = function() { * @param data */ vz.entities.show = function() { - $('#entities tbody').empty(); var i = 0; vz.entities.each(function(entity, parent) { @@ -336,11 +327,11 @@ vz.entities.show = function() { ); } - $('#entities tbody').append(row); + $('#entity-list tbody').append(row); }); // http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html - $('#entities table').treeTable({ + $('#entity-list table').treeTable({ treeColumn: 2, clickableNodeNames: true }); @@ -362,7 +353,7 @@ vz.entities.each = function(cb) { * Load json data from the backend */ vz.entities.loadData = function() { - $('#overlay').html('loading...

Loading...

'); + $('#overlay').html('loading...

loading...

'); this.each(function(entity, parent) { if (entity.active && entity.type != 'group') { // TODO add group data aggregation vz.load('data', entity.uuid, @@ -406,7 +397,7 @@ vz.drawPlot = function () { }); if (data.length == 0) { - $('#overlay').html('no data...

Nothing to plot...

'); + $('#overlay').html('no data...

nothing to plot...

'); data.push({}); // add empty dataset to show axes } else { diff --git a/frontend/javascripts/init.js b/frontend/javascripts/init.js index ee26c38..1424058 100644 --- a/frontend/javascripts/init.js +++ b/frontend/javascripts/init.js @@ -71,7 +71,7 @@ $(document).ready(function() { // parse uuids & options from cookie vz.uuids.load(); - //vz.options.load(); + vz.options.load(); // initialize user interface vz.wui.init(); diff --git a/frontend/javascripts/options.js b/frontend/javascripts/options.js index 4d17bc6..062088f 100644 --- a/frontend/javascripts/options.js +++ b/frontend/javascripts/options.js @@ -30,7 +30,7 @@ vz.options = { tuples: 300, refresh: false, defaultInterval: 1*24*60*60*1000, // 1 day - timezoneOffset: -(new Date().getTimezoneOffset() * 60*1000) + timezoneOffset: -(new Date().getTimezoneOffset() * 60*1000) // TODO add option with timezone dropdown }; vz.options.plot = { @@ -57,27 +57,13 @@ vz.options.plot = { monthNames: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'], tickFormatter: function(val, axis) { var date = new Date(val + vz.options.timezoneOffset); /* add timezone offset */ - - /* TODO add period dependend timeformat - var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min; - - if (delta > 3*365*24*60*60*1000) // > 3 years - vz.options.plot.xaxis.timeformat = '%b %y'; - else if (delta > 31*24*60*60*1000) // > 1 month - vz.options.plot.xaxis.timeformat = '%d. %b'; - else if (delta > 14*24*60*60*1000) // > 2 weeks - vz.options.plot.xaxis.timeformat = '%d.%m'; - else if (delta > 24*60*60*1000) // > 1 day - vz.options.plot.xaxis.timeformat = '%d.%m %h:%M'; - else if (delta > 60*60*1000) // > 1 hour - vz.options.plot.xaxis.timeformat = '%h:%M'; - else // < 1 hour - format = '%h:%M:%S';*/ - - return $.plot.formatDate(date, vz.options.plot.xaxis.timeformat, vz.options.plot.xaxis.monthNames); + return $.plot.formatDate(date, this.timeformat, this.monthNames); } }, - yaxis: { }, + yaxis: { + min: 0, + max: null + }, selection: { mode: 'x' }, crosshair: { mode: 'x' }, grid: { @@ -105,8 +91,10 @@ vz.options.save = function() { vz.options.load = function() { for (var key in this) { if (typeof this[key] == 'string' || typeof this[key] == 'number') { - this[key] = $.getCookie('vz_' + key); - //console.log('loaded option', key, this[key]); + var value = $.getCookie('vz_' + key); + if (typeof value != undefined) { + this[key] = (typeof this[key] == 'number') ? parseFloat(value) : value; + } } } }; diff --git a/frontend/javascripts/uuid.js b/frontend/javascripts/uuid.js index fee96ca..eb56737 100644 --- a/frontend/javascripts/uuid.js +++ b/frontend/javascripts/uuid.js @@ -28,9 +28,9 @@ * Add given UUID and update cookie */ vz.uuids.add = function(uuid) { - if (vz.uuids.validate(uuid)) { - if (!vz.uuids.contains(uuid)) { - vz.uuids.push(uuid); + if (this.validate(uuid)) { + if (!this.contains(uuid)) { + this.push(uuid); } else { throw new Exception('UUIDException', 'UUID already added'); @@ -45,8 +45,8 @@ vz.uuids.add = function(uuid) { * Remove UUID and update cookie */ vz.uuids.remove = function(uuid) { - if (vz.uuids.contains(uuid)) { - vz.uuids.remove(uuid); // remove uuid from array + if (this.contains(uuid)) { + this.splice(this.indexOf(uuid), 1); // remove uuid from array } else { throw new Exception('UUIDException', 'UUID unkown: ' + uuid); @@ -64,7 +64,7 @@ vz.uuids.validate = function(uuid) { * Save uuids as cookie */ vz.uuids.save = function() { - $.setCookie('vz_uuids', vz.uuids.join(';')); + $.setCookie('vz_uuids', this.join(';')); }; /** diff --git a/frontend/stylesheets/style.css b/frontend/stylesheets/style.css index f08de82..a911338 100644 --- a/frontend/stylesheets/style.css +++ b/frontend/stylesheets/style.css @@ -95,25 +95,21 @@ tbody tr td { } /* treeTable for entities */ -#entities tbody span { +#entity-list tbody span { background-position: left center; background-repeat: no-repeat; padding: 0.2em 0 0.2em 1.7em; margin: 0; } -#entities tbody span.channel { +#entity-list tbody span.channel { background-image: url("../images/chart_curve.png"); } -#entities tbody span.group { +#entity-list tbody span.group { background-image: url("../images/folder.png"); } -#addEntity { - margin-top: 10px; -} - .indicator { height: 12px; } @@ -125,11 +121,6 @@ tbody tr td { opacity: 0.3; } -.slider { - width: 170px; - height: 4px; -} - .dialog { display: none; }