sry im to tired to continue :p

This commit is contained in:
Steffen Vogel 2010-10-06 06:34:36 +02:00
parent 473f998fb8
commit 863b86252c
6 changed files with 180 additions and 117 deletions

View file

@ -85,6 +85,13 @@
<td><input type="checkbox" name="refresh" /></td>
<td><div class="slider"></div></td>
</tr>
<tr id="rendering">
<td><label for="rendering">Darstellung</label></td>
<td>
<input type="radio" name="rendering" value="points" /> Punkte
<input type="radio" name="rendering" value="lines" /> Linien
</td>
</tr>
<tr id="trendline">
<td><label for="trendline"><img src="images/chart_line.png" alt="trendline" /> Trendline anzeigen</label></td>
<td><input type="checkbox" name="trendline" /></td>

View file

@ -24,6 +24,26 @@
* volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
*/
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

View file

@ -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 = $('<tr>')
.addClass((parent) ? 'child-of-entity-' + parent.uuid : '')
.attr('id', 'entity-' + entity.uuid)
.append($('<td>')
.css('background-color', entity.color)
.css('width', 19)
.append($('<input>')
.attr('type', 'checkbox')
.attr('checked', entity.active)
.bind('change', entity, function(event) {
event.data.active = $(this).attr('checked');
vz.plot.data.load();
})
)
)
.append($('<td>')
.css('width', 20)
)
.append($('<td>')
.append($('<span>')
.text(entity.title)
.addClass('indicator')
.addClass((entity.type == 'group') ? 'group' : 'channel')
)
)
.append($('<td>').text(entity.type))
.append($('<td>')) // min
.append($('<td>')) // max
.append($('<td>')) // avg
.append($('<td>') // operations
.addClass('ops')
/*.append($('<input>')
.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($('<input>')
.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 = $('<tr>')
.addClass((parent) ? 'child-of-entity-' + parent.uuid : '')
.attr('id', 'entity-' + entity.uuid)
.append($('<td>')
.css('background-color', entity.color)
.css('width', 19)
.append($('<input>')
.attr('type', 'checkbox')
.attr('checked', entity.active)
.bind('change', entity, function(event) {
event.data.active = $(this).attr('checked');
vz.plot.data.load();
})
);
}
)
)
.append($('<td>')
.css('width', 20)
)
.append($('<td>')
.append($('<span>')
.text(entity.title)
.addClass('indicator')
.addClass((entity.type == 'group') ? 'group' : 'channel')
)
)
.append($('<td>').text(entity.type))
.append($('<td>')) // min
.append($('<td>')) // max
.append($('<td>')) // avg
.append($('<td>') // operations
.addClass('ops')
/*.append($('<input>')
.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($('<input>')
.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('<div id="loading">loading...</div>'); // 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);
};

View file

@ -24,21 +24,25 @@
* volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
*/
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;

View file

@ -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();
});

View file

@ -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;
};