frontend is processing..
This commit is contained in:
Steffen Vogel
parent
abad63d9fc
commit
e6bf6952d9
4 changed files with 161 additions and 87 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
73
frontend/javascript/jquery-extensions.js
vendored
73
frontend/javascript/jquery-extensions.js
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue