From 863b86252c1a44ac9055324235c6031328acf345 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Wed, 6 Oct 2010 06:34:36 +0200 Subject: [PATCH] sry im to tired to continue :p --- frontend/index.html | 7 + frontend/javascripts/entity.js | 20 +++ frontend/javascripts/frontend.js | 227 ++++++++++++++++++------------- frontend/javascripts/helper.js | 14 +- frontend/javascripts/init.js | 19 +-- frontend/javascripts/uuid.js | 10 +- 6 files changed, 180 insertions(+), 117 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 928da25..7cb7a24 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -85,6 +85,13 @@
+ + + + Punkte + Linien + + diff --git a/frontend/javascripts/entity.js b/frontend/javascripts/entity.js index 524f97b..75532aa 100644 --- a/frontend/javascripts/entity.js +++ b/frontend/javascripts/entity.js @@ -24,6 +24,26 @@ * volkszaehler.org. If not, see . */ +vz.definitions.load = function() { + $.ajax({ + cache: true, + dataType: 'json', + url: vz.options.backendUrl + '/capabilities/definition/entity.json', + success: function(json) { + vz.definitions.entity = json.definition.entity; + } + }); + + $.ajax({ + cache: true, + dataType: 'json', + url: vz.options.backendUrl + '/capabilities/definition/property.json', + success: function(json) { + vz.definitions.property = json.definition.property; + } + }); +}; + /** * Entity constructor * @todo add validation diff --git a/frontend/javascripts/frontend.js b/frontend/javascripts/frontend.js index 5c1bc82..4fd02b3 100644 --- a/frontend/javascripts/frontend.js +++ b/frontend/javascripts/frontend.js @@ -49,33 +49,7 @@ vz.initInterface = function() { // make buttons fancy $('button, input[type=button]').button(); - // open UUID dialog - $('button[name=addUUID]').click(function() { - $('#addUUID').dialog({ - title: 'UUID hinzufügen', - width: 400 - }); - }); - - // open new entity dialog - $('button[name=newEntity]').click(function() { - $('#newEntity').dialog({ - title: 'Entity erstellen', - width: 400 - }); - }); - - // add UUID - $('#addUUID input[type=button]').click(function() { - vz.uuids.add($('#addUUID input[type=text]').val()); - $('#addUUID').dialog('close'); - vz.entities.load(); - }); - - // bind plot actions - $('#move input').click(vz.handleControls); - - // options + // trendline /*$('input[name=trendline]').attr('checked', vz.options.plot.seriesDefaults.trendline.show).change(function() { vz.options.plot.seriesDefaults.trendline.show = $(this).attr('checked'); vz.plot.draw(); @@ -85,6 +59,7 @@ vz.initInterface = function() { vz.options.backendUrl = $(this).val(); }); + // tuple resolution $('#tuples input').val(vz.options.tuples).change(function() { vz.options.tuples = $(this).val(); }); @@ -95,6 +70,24 @@ vz.initInterface = function() { step: 10 }); + // plot rendering + $('#rendering input[type=radio][value=lines]') + .attr('checked', vz.options.plot.series.lines.show) + .change(function() { + vz.options.plot.series.lines.show = $(this).attr('checked'); + vz.options.plot.series.points.show = !$(this).attr('checked'); + vz.plot.draw(); + }); + + $('#rendering input[type=radio][value=points]') + .attr('checked', vz.options.plot.series.points.show) + .change(function() { + vz.options.plot.series.lines.show = !$(this).attr('checked'); + vz.options.plot.series.points.show = $(this).attr('checked'); + vz.plot.draw(); + }); + + // refresh interval $('#refresh .slider').slider({ min: 500, max: 60000, @@ -102,10 +95,48 @@ vz.initInterface = function() { }); }; +/** + * Initialize dialogs + */ +vz.initDialogs = function() { + // open uuid dialog + $('button[name=addUUID]').click(function() { + $('#addUUID').dialog({ + title: 'UUID hinzufügen', + width: 400 + }); + }); + + // open entity dialog + $('button[name=newEntity]').click(function() { + $('#newEntity').dialog({ + title: 'Entity erstellen', + width: 400 + }); + }); + + // add UUID + $('#addUUID input[type=button]').click(function() { + try { + vz.uuids.add($('#addUUID input[type=text]').val()); + $('#addUUID input[type=text]').val(''); + $('#addUUID').dialog('close'); + vz.entities.load(); + } + catch (e) { + alert(e); // TODO show error + } + }); +}; + /** * Bind events to handle plot zooming & panning */ vz.bindEvents = function() { + // bind plot actions + $('#move input[type=image]').click(vz.handleControls); + + $('#plot') .bind("plotselected", function (event, ranges) { vz.from = ranges.xaxis.from; @@ -197,7 +228,7 @@ vz.handleControls = function () { vz.entities.load = function() { vz.entities.clear(); vz.uuids.each(function(index, value) { - $.getJSON(vz.options.backendUrl + '/entity/' + value + '.json', ajaxWait(function(json) { + $.getJSON(vz.options.backendUrl + '/entity/' + value + '.json', waitAsync(function(json) { vz.entities.push(new Entity(json.entity)); }, vz.entities.show, 'information')); }); @@ -211,64 +242,62 @@ vz.entities.show = function() { $('#entities tbody').empty(); var i = 0; - vz.entities.each(function(index, entity) { // loop through all entities - entity.each(function(entity, parent) { // loop through all children of entities (recursive) - entity.active = true; // TODO active by default or via backend property? - entity.color = vz.options.plot.colors[i++ % vz.options.plot.colors.length]; + vz.entities.each(function(entity, parent) { // loop through all children of entities (recursive) + entity.active = true; // TODO active by default or via backend property? + entity.color = vz.options.plot.colors[i++ % vz.options.plot.colors.length]; - var row = $('') - .addClass((parent) ? 'child-of-entity-' + parent.uuid : '') - .attr('id', 'entity-' + entity.uuid) - .append($('') - .css('background-color', entity.color) - .css('width', 19) - .append($('') - .attr('type', 'checkbox') - .attr('checked', entity.active) - .bind('change', entity, function(event) { - event.data.active = $(this).attr('checked'); - vz.plot.data.load(); - }) - ) - ) - .append($('') - .css('width', 20) - ) - .append($('') - .append($('') - .text(entity.title) - .addClass('indicator') - .addClass((entity.type == 'group') ? 'group' : 'channel') - ) - ) - .append($('').text(entity.type)) - .append($('')) // min - .append($('')) // max - .append($('')) // avg - .append($('') // operations - .addClass('ops') - /*.append($('') - .attr('type', 'image') - .attr('src', 'images/information.png') - .attr('alt', 'details') - .bind('click', entity, function(event) { event.data.showDetails(); }) - )*/ - ); - - if (parent == null) { - $('td.ops', row).prepend($('') - .attr('type', 'image') - .attr('src', 'images/delete.png') - .attr('alt', 'delete') - .bind('click', entity, function(event) { - vz.uuids.remove(event.data.uuid); - vz.entities.load(); + var row = $('') + .addClass((parent) ? 'child-of-entity-' + parent.uuid : '') + .attr('id', 'entity-' + entity.uuid) + .append($('') + .css('background-color', entity.color) + .css('width', 19) + .append($('') + .attr('type', 'checkbox') + .attr('checked', entity.active) + .bind('change', entity, function(event) { + event.data.active = $(this).attr('checked'); + vz.plot.data.load(); }) - ); - } + ) + ) + .append($('') + .css('width', 20) + ) + .append($('') + .append($('') + .text(entity.title) + .addClass('indicator') + .addClass((entity.type == 'group') ? 'group' : 'channel') + ) + ) + .append($('').text(entity.type)) + .append($('')) // min + .append($('')) // max + .append($('')) // avg + .append($('') // operations + .addClass('ops') + /*.append($('') + .attr('type', 'image') + .attr('src', 'images/information.png') + .attr('alt', 'details') + .bind('click', entity, function(event) { event.data.showDetails(); }) + )*/ + ); + + if (parent == null) { + $('td.ops', row).prepend($('') + .attr('type', 'image') + .attr('src', 'images/delete.png') + .attr('alt', 'delete') + .bind('click', entity, function(event) { + vz.uuids.remove(event.data.uuid); + vz.entities.load(); + }) + ); + } - $('#entities tbody').append(row); - }); + $('#entities tbody').append(row); }); // http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html @@ -281,22 +310,30 @@ vz.entities.show = function() { vz.plot.data.load(); }; +/** + * Overwritten each iterator for entity array + */ +vz.entities.each = function(cb) { + for (var i = 0; i < vz.entities.length; i++) { + vz.entities[i].each(cb); + } +} + /** * Load json data from the backend */ vz.plot.data.load = function() { vz.plot.data.clear(); - vz.entities.each(function(index, entity) { - entity.each(function(entity, parent) { - if (entity.active && entity.type != 'group') { - $.getJSON(vz.options.backendUrl + '/data/' + entity.uuid + '.json', { from: Math.floor(vz.from), to: Math.ceil(vz.to), tuples: vz.options.tuples }, ajaxWait(function(json) { - vz.plot.data.push({ - data: json.data[0].tuples, // TODO check uuid - color: entity.color - }); - }, vz.plot.draw, 'data')); - } - }); + $('#plot').html('
loading...
'); // TODO insert loading animation + vz.entities.each(function(entity, parent) { + if (entity.active && entity.type != 'group') { + $.getJSON(vz.options.backendUrl + '/data/' + entity.uuid + '.json', { from: Math.floor(vz.from), to: Math.ceil(vz.to), tuples: vz.options.tuples }, waitAsync(function(json) { + vz.plot.data.push({ + data: json.data[0].tuples, // TODO check uuid + color: entity.color + }); + }, vz.plot.draw, 'data')); + } }); }; @@ -306,6 +343,6 @@ vz.plot.data.load = function() { vz.plot.draw = function () { vz.options.plot.xaxis.min = vz.from; vz.options.plot.xaxis.max = vz.to; - + vz.plot.flot = $.plot($('#plot'), vz.plot.data, vz.options.plot); }; diff --git a/frontend/javascripts/helper.js b/frontend/javascripts/helper.js index 00f7656..b20f706 100644 --- a/frontend/javascripts/helper.js +++ b/frontend/javascripts/helper.js @@ -24,21 +24,25 @@ * volkszaehler.org. If not, see . */ -function ajaxWait(callback, finished, identifier) { - if (!ajaxWait.counter) { ajaxWait.counter = new Array(); } - if (!ajaxWait.counter[identifier]) { ajaxWait.counter[identifier] = 0; } +function waitAsync(callback, finished, identifier) { + if (!waitAsync.counter) { waitAsync.counter = new Array(); } + if (!waitAsync.counter[identifier]) { waitAsync.counter[identifier] = 0; } - ajaxWait.counter[identifier]++; + waitAsync.counter[identifier]++; return function (data, textStatus) { callback(data, textStatus); - if (!--ajaxWait.counter[identifier]) { + if (!--waitAsync.counter[identifier]) { finished(); } }; } +/* + * Array extensions + * according to js language specification ECMA 1.6 + */ Array.prototype.indexOf = function(n) { for (var i = 0, l = this.length; i < l; i++) if (n == this[i]) return i; diff --git a/frontend/javascripts/init.js b/frontend/javascripts/init.js index dad09ab..b24053b 100644 --- a/frontend/javascripts/init.js +++ b/frontend/javascripts/init.js @@ -48,10 +48,7 @@ var vz = { // definitions of entities & properties // for validation, translation etc.. - definitions: { - properties: {}, - entities: {} - }, + definitions: { }, // timeinterval to request to: new Date().getTime(), @@ -63,9 +60,9 @@ var vz = { plot: { colors: ['#83CAFF', '#7E0021', '#579D1C', '#FFD320', '#FF420E', '#004586', '#0084D1', '#C5000B', '#FF950E', '#4B1F6F', '#AECF00', '#314004'], series: { - lines: { show: false }, + lines: { show: true }, points: { - show: true, + show: false, radius: 1, //symbol: 'square' symbol: function(ctx, x, y, radius, shadow) { @@ -100,6 +97,8 @@ var vz = { $(document).ready(function() { // initialize user interface vz.initInterface(); + vz.initDialogs(); + vz.bindEvents(); // parse uuids from cookie vz.uuids.parseCookie(); @@ -110,16 +109,12 @@ $(document).ready(function() { } if (vz.uuids.length == 0) { - $('#addUUID').dialog({ - title: 'UUID hinzufügen', - width: 400 - }); + $('#addUUID').dialog('open'); } // start auto refresh timer window.setInterval(vz.refresh, 5000); - vz.bindEvents(); - + vz.definitions.load(); vz.entities.load(); }); diff --git a/frontend/javascripts/uuid.js b/frontend/javascripts/uuid.js index 7b73834..63fe718 100644 --- a/frontend/javascripts/uuid.js +++ b/frontend/javascripts/uuid.js @@ -28,8 +28,8 @@ * Read UUIDs from cookie and add them to the array */ vz.uuids.parseCookie = function() { - if ($.getCookie('uuids')) { - $.each(JSON.parse($.getCookie('uuids')), function(index, uuid) { + if ($.getCookie('vz_uuids')) { + $.each(JSON.parse($.getCookie('vz_uuids')), function(index, uuid) { vz.uuids.push(uuid); }); } @@ -42,7 +42,7 @@ vz.uuids.add = function(uuid) { if (vz.uuids.validate(uuid)) { if (!vz.uuids.contains(uuid)) { vz.uuids.push(uuid); - $.setCookie('uuids', JSON.stringify(vz.uuids)); + $.setCookie('vz_uuids', JSON.stringify(vz.uuids)); } else { throw 'UUID already added'; @@ -60,7 +60,7 @@ vz.uuids.remove = function(uuid) { console.log(vz.uuids.contains(uuid)); if (vz.uuids.contains(uuid)) { vz.uuids.splice(this.indexOf(uuid), 1); // remove uuid from array - $.setCookie('uuids', JSON.stringify(vz.uuids)); + $.setCookie('vz_uuids', JSON.stringify(vz.uuids)); } else { throw 'UUID unkown: ' + uuid; @@ -71,5 +71,5 @@ vz.uuids.remove = function(uuid) { * Validate UUID */ vz.uuids.validate = function(uuid) { - return new Boolean(uuid.match(/^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/)); + return new uuid.match(/^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/) > 0; }; \ No newline at end of file