stv0g/vzlogger
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

simplified frontend

Browse source
This commit is contained in:
Steffen Vogel 2010-09-27 01:33:49 +02:00
parent 105b547cbe
commit 4c499f7424
4 changed files with 118 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
frontend/index.html
View file

@ -22,63 +22,29 @@
</head>
<body style="background-color:#9ACC67;">
<form action="" method="POST" name="formular">
<body style="background-color: #9ACC67;">
<div>
<div id="options">
<!--list of available channels - loaded via json-->
<b>Kan&auml;le:</b><br>
<table id="channelList" style="font-size:7pt;">
<tr>
<td></td>
</tr>
</table>
<button id="addChannel">add channel</button>
<br>
<div style="font-size:8pt;">
<input type="checkbox" name="stackChannels" /> Kan&auml;le addieren<br>
<input type="checkbox" name="autoReload" /> auto reload (5s)<br>
<button type="button" onclick="JavaScript:return getData();">anzeigen</button>
</div>
<div id="loading"></div>
</div>
<div id="Chart">
<div id="vz">
<div id="chart">
<!-- keep some space free for the chart -->
<div id="ChartPlot" style="height:100%">
<div class="moveArrow" style="left:0px;">
<table cellpadding="0" cellspacing="0" height="100%">
<tr>
<td><a id="moveBack" href="#" onclick="JavaScript:moveWindow('back');">&laquo;</a></td>
</tr>
</table>
</div>
<!-- jqplot draws the chart into the following DIV -->
<div id="ChartDIV" style="height:100%;width:100%;"></div>
<div class="moveArrow" style="right:0px;">
<table cellpadding="0" cellspacing="0" height="100%">
<tr>
<td>
<a id="moveForward" href="#" onclick="JavaScript:moveWindow('forward');">&raquo;</a><br><br />
<a id="moveNow" href="#" onclick="JavaScript:moveWindow('last');">&raquo;&raquo;</a>
</td>
</tr>
</table>
</div>
</div>
<div id="ChartInfo" style="display:none;">
<!-- jqplot draws the chart into the following DIV -->
<div id="ChartDIV" style="height:100%;width:100%;"></div>
</div>
<div id="ChartInfo" style="display:none;"></div>
</div>
<table id="move">
<tr>
<td><a id="moveBack" href="#" onclick="moveWindow('back');">&laquo;</a></td>
<td><a id="moveNow" href="#" onclick="moveWindow('last');">&raquo;&raquo;</a></td>
<td><a id="moveForward" href="#" onclick="moveWindow('forward');">&raquo;</a></td>
</tr>
</table>
</div>
</form>
<div id="json"></div>
<!-- uncomment the following line to activate debugging -->
<!--<div id="debug"></div>-->
<div id="debug"></div>
</body>
</html>

116
frontend/javascript/functions.js
View file

@ -1,22 +1,29 @@
/**
* Javascript functions for the frontend
*
* @author Florian Ziegler <fz@f10-home.de>
* @author Justin Otherguy <justin@justinotherguy.org>
* @author Steffen Vogel <info@steffenvogel.de>
* @copyright Copyright (c) 2010, The volkszaehler.org project
* @package default
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*/
/*
* Copyright (c) 2010 by Florian Ziegler <fz@f10-home.de>
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License (either version 2 or
* version 3) as published by the Free Software Foundation.
*
* This program 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 this program; if not, write to the Free Software
* Foundation, Inc., 675 Mass Ave, Cambridge, MA 02139, USA.
*
* For more information on the GPL, please go to:
* http://www.gnu.org/copyleft/gpl.html
*/
* 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/>.
*/
function calcMyWindowStart() {
var myWindowStart = new Date(myWindowEnd);
@ -27,9 +34,9 @@ function calcMyWindowStart() {
var hours = myWindowStart.getHours();
var minutes = myWindowStart.getMinutes();
//var windowSize = f.window.value.substring(0,1);
// var windowSize = f.window.value.substring(0,1);
var windowSize = "1";
//var windowInterval = f.window.value.substring(1);
// var windowInterval = f.window.value.substring(1);
var windowInterval = "MONTH"; // we want to display 1 day (for now)
myWindowStart.setMonth(myWindowStart.getMonth()-windowSize);
@ -53,18 +60,14 @@ function getGroupedTimestamp(timestamp) {
}
function loadChannelList() {
$('#debug').append('<a href="../backend/index.php/data/"' + myUUID + '"/channel">json</a>');
$('#debug').append('<a href="../backend/index.php/data/"' + myUUID + '"/channel">json</a><br />');
// load json data
$.getJSON("../backend/index.php/data/" + myUUID + {format: 'json'});
}
function autoReload() {
// call getData if autoReload checkbox is active
if(f.autoReload.checked == true) {
if (false) {
myWindowEnd = getGroupedTimestamp((new Date()).getTime());
getData();
}
@ -88,34 +91,26 @@ function moveWindow(mode) {
function getData() {
/*
if(f.ids.length>0)
$('#loading').empty().html('<img src="images/ladebild.gif" />');
// list of channel ids, comma separated
ids_parameter = "";
if(typeof f.ids.length == 'undefined') { // only one channel
ids_parameter = f.ids.value;
}
else { // more than one channel
for(i=0;i<f.ids.length;i++) {
if(f.ids[i].checked == 1) {
ids_parameter += f.ids[i].value + ",";
}
}
}*/
* if(f.ids.length>0) $('#loading').empty().html('<img
* src="images/ladebild.gif" />');
* // list of channel ids, comma separated ids_parameter = "";
*
* if(typeof f.ids.length == 'undefined') { // only one channel
* ids_parameter = f.ids.value; } else { // more than one channel for(i=0;i<f.ids.length;i++) {
* if(f.ids[i].checked == 1) { ids_parameter += f.ids[i].value + ","; } } }
*/
// calcMyWindowStart
myWindowStart = calcMyWindowStart();
$('#debug').append('<a href="../backend/index.php/data/'+myUUID+'/format/json/from/'+myWindowStart+'/to/'+myWindowEnd+'">json</a>');
$('#debug').append('<a href="../backend/index.php/data/' + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd+'&resolution=500">JSON</a><br />');
// load json data with given time window
//$.getJSON("../backend/index.php/data/" + myUUID + '/format/json/from/'+myWindowStart+'/to/'+myWindowEnd, function(j){
$.getJSON("../backend/index.php/data/" + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd, function(j){
// $.getJSON("../backend/index.php/data/" + myUUID +
// '/format/json/from/'+myWindowStart+'/to/'+myWindowEnd, function(j){
$.getJSON("../backend/index.php/data/" + myUUID + '.json?from='+myWindowStart+'&to='+myWindowEnd+'&resolution=500', function(j){
data = j;
$('#debug').empty().append(data.toSource());
// then show/reload the chart
//if(data.channels.length > 0 && data.channels[0].pulses.length > 0)
// if(data.channels.length > 0 && data.channels[0].pulses.length > 0)
showChart();
$('#loading').empty();
});
@ -137,13 +132,6 @@ function showChart() {
cursor:{zoom:true, showTooltip:true,constrainZoomTo:'x'},
seriesDefaults:{lineWidth:1,showMarker:false}}
// stack plot seiries if add channels is active
if(f.stackChannels.checked == true) {
jqOptions.stackSeries = true;
jqOptions.seriesDefaults.fill = true;
jqOptions.seriesDefaults.showShadow = false;
}
// legend entries
for( uuid in data.channels ) {
jqOptions.series.push({label:data.channels[uuid]['description']});
@ -167,3 +155,23 @@ function showChart() {
chart.replot();
}
/*
* jQuery extensions
*/
$.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++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});

65
frontend/javascript/script.js
View file

@ -1,23 +1,33 @@
HTTP_GET_VARS = new Array();
strGET = document.location.search.substr(1,document.location.search.length);
if(strGET != '') {
gArr=strGET.split('&');
for(i=0;i<gArr.length;++i) {
v='';vArr=gArr[i].split('=');
if(vArr.length>1) {
v=vArr[1];
}
HTTP_GET_VARS[unescape(vArr[0])] = unescape(v);
}
}
/**
* Main javascript file
*
* @author Florian Ziegler <fz@f10-home.de>
* @author Justin Otherguy <justin@justinotherguy.org>
* @author Steffen Vogel <info@steffenvogel.de>
* @copyright Copyright (c) 2010, The volkszaehler.org project
* @package default
* @license http://opensource.org/licenses/gpl-license.php GNU Public License
*/
/*
* 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/>.
*/
var myUUID = '';
if(HTTP_GET_VARS['uuid'])
myUUID = HTTP_GET_VARS['uuid'];
// easy access to formular with f
var f;
if($.getUrlVar('uuid'))
myUUID = $.getUrlVar('uuid');
// storing json data
var data;
@ -34,23 +44,19 @@ 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() {
f = document.formular;
// 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({
width:$(window).width()-40,
height:$(window).height()-3,
if($(window).width() < 800) {
$("#chart").animate({
width:$(window).width() - 40,
height:$(window).height() - 3,
},0);
$("#options").animate({
height:$(window).height()-3,
height:$(window).height() - 3,
},0);
}
@ -60,10 +66,5 @@ $(document).ready(function() {
// start autoReload timer
window.setInterval("autoReload()",5000);
// code for adding a channel
var uuid = $("#uuid"),
allFields = $([]).add(uuid),
tips = $(".validateTips");
getData();
});

72
frontend/style.css
View file

@ -7,72 +7,16 @@ body {
padding: 0;
}
#options {
width: 165px;
height: 450px;
border: 1px solid #555555;
background-color: white;
}
#Chart {
border: 1px solid #555555;
background-color: white;
#vz {
margin: 150px auto;
width: 800px;
height: 450px;
padding-left: 20px;
padding-right: 20px;
left: 165px;
top: 0px;
position: absolute;
overflow: hidden;
padding: 10px;
-moz-border-radius: 10px;
background-color: white;
border: 1px solid black;
}
.moveArrow {
position: absolute;
height: 100%;
top: 0;
}
/* styles for jQuery-UI */
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 350px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
#move {
width: 100%;
}
div#users-contain table td,div#users-contain table th {
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
text-align: center;
}