frontend is processing..

This commit is contained in:
Steffen Vogel 2010-09-28 18:17:45 +02:00
parent abad63d9fc
commit e6bf6952d9
4 changed files with 161 additions and 87 deletions

View file

@ -40,14 +40,11 @@
<div id="accordion">
<h3>Kanäle</h3>
<div id="enities">Second content</div>
<!-- uncomment the following line to activate debugging -->
<h3>Debug</h3>
<div id="debug">Third content</div>
<table id="entities"></table>
<h3>Optionen</h3>
<div id="debug">
<div id="options">
<table>
<tr><td><label for="reload">Automatisch aktualisieren</label></td><td><input type="checkbox" name="reload" /></td></tr>
<tr><td><label for="refresh">Automatisch aktualisieren</label></td><td><input type="checkbox" name="refresh" /><div id="refreshInterval"></div></td></tr>
</table>
</div>
</div>

View file

@ -1,6 +1,6 @@
/**
* Javascript functions for the frontend
*
*
* @author Florian Ziegler <fz@f10-home.de>
* @author Justin Otherguy <justin@justinotherguy.org>
* @author Steffen Vogel <info@steffenvogel.de>
@ -10,24 +10,33 @@
*/
/*
* This file is part of volkzaehler.org
*
* volkzaehler.org is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* volkzaehler.org is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
*
* volkzaehler.org is free software: you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation, either version 3 of the License, or any later version.
*
* volkzaehler.org is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more
* details.
*
* You should have received a copy of the GNU General Public License along with
* volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
*/
function loadChannelList() {
$.getJSON('../backend/index.php/entity/' + myUUID + '.json', {format: 'json'}, function(json) {
channels = json;
function refresh() {
if ($('[name=refresh]').attr('checked')) {
getData();
}
}
function loadEntities() {
$('#entities').empty();
$.each(uuids, function(index, value) {
$.getJSON(backendUrl + '/entity/' + value + '.json', function(json) {
var entity = (json.group) ? json.group : json.channel;
$('#entities').append('<tr><td><input type="checkbox" /></td><td>' + entity.uuid + '</td><td>' + entity.title + '</td><td>' + entity.type + '</td></tr>');
});
});
}
@ -52,10 +61,9 @@ function moveWindow(mode) {
function getData() {
// load json data with given time window
$.getJSON("../backend/index.php/data/" + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd+'&resolution=500', function(json){
data = json;
$.getJSON(backendUrl + '/data/' + myUUID + '.json', {from: myWindowStart, to: myWindowEnd, tuples: 500}, function(data){
json = data;
showChart();
$('#loading').empty();
});
return false;
@ -64,53 +72,11 @@ function getData() {
function showChart() {
var jqData = new Array();
EformatString = '%d.%m.%y %H:%M';
jqOptions = {
series: [],
cursor: {
zoom: true,
showTooltip: true,
constrainZoomTo: 'x'
},
seriesDefaults: {
lineWidth: 1,
showMarker: false
}
};
// legend entries
$.each(data.data, function(index, value) {
$.each(json.data, function(index, value) {
jqData.push(value.tuples);
});
jqOptions.axes = {
yaxis: {
autoscale: true,
min: 0,
label: 'Leistung (Watt)',
tickOptions: {
formatString: '%.3f'
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
xaxis: {
autoscale: true,
min: myWindowStart,
max: myWindowEnd,
tickOptions: {
formatString: EformatString,
angle: -30
},
pad: 1,
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
};
$('plot').empty();
// TODO read docs
chart = $.jqplot('plot', jqData, jqOptions);
chart.replot({
clear: true,

View file

@ -25,18 +25,81 @@
* along with volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
*/
$.extend({
getUrlVars: function(){
/**
*
*/
$.extend( {
getUrlVars : function() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
var hashes = window.location.href.slice(
window.location.href.indexOf('?') + 1).split('&');
for ( var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
getUrlVar : function(name) {
return $.getUrlVars()[name];
}
});
/**
* Cookie plugin
*
* @author Klaus Hartl <klaus.hartl@stilbuero.de>
* @author Steffen Vogel <info@steffenvogel.de>
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
$.extend({
cookie: function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires
&& (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime()
+ (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [ name, '=', encodeURIComponent(value), expires,
path, domain, secure ].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for ( var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie
.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
}
});

View file

@ -25,12 +25,62 @@
* along with volkszaehler.org. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Constants
*/
const backendUrl = '../backend/index.php';
const jqOptions = {
title: 'volkszaehler.org',
series: [],
cursor: {
zoom: true,
showTooltip: true,
constrainZoomTo: 'x'
},
seriesDefaults: {
lineWidth: 1,
showMarker: false
},
axes: {
yaxis: {
autoscale: true,
min: 0,
label: 'Leistung (Watt)',
tickOptions: {
formatString: '%.3f'
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
xaxis: {
autoscale: true,
min: myWindowStart,
max: myWindowEnd,
tickOptions: {
formatString: '%d.%m.%y %H:%M',
angle: -35
},
pad: 1,
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
}
}
}
};
/*
* Variables
*/
var myUUID = '';
if($.getUrlVar('uuid'))
var uuids = $.parseJSON($.cookie('uuids'));
if($.getUrlVar('uuid')) {
myUUID = $.getUrlVar('uuid');
uuids.push($.getUrlVar('uuid'));
}
// storing json data
var data;
var json;
//windowEnd parameter for json server
var myWindowEnd = new Date().getTime();
@ -38,34 +88,32 @@ var myWindowEnd = new Date().getTime();
// windowStart parameter for json server
var myWindowStart = myWindowEnd - 24*60*60*1000;
// windowGrouping for json server
var windowGrouping = 0;
// mouse position on mousedown (x-axis)
var moveXstart = 0;
// executed on document loaded complete
// this is where it all starts...
$(document).ready(function() {
// initialization of user interface
$('#accordion h3').click(function() {
$(this).next().toggle('slow');
$(this).next().toggle('fast');
return false;
}).next().hide();
$('#refreshInterval').slider();
// resize chart area for low resolution displays
// works fine with HTC hero
// perhaps you have to reload after display rotation
if($(window).width() < 800) {
$("#chart").animate({
$('#chart').animate({
width: $(window).width() - 40,
height: $(window).height() - 3,
}, 0);
}
// load channel list
// loadChannelList();
// load all entity information
loadEntities();
window.setInterval(refresh, 5000);
// load data and show plot
getData();