sry im to tired to continue :p
This commit is contained in:
Steffen Vogel
parent
473f998fb8
commit
863b86252c
6 changed files with 180 additions and 117 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
Loading…
Add table
Reference in a new issue