simplified frontend
This commit is contained in:
parent
105b547cbe
commit
4c499f7424
4 changed files with 118 additions and 199 deletions
|
@ -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ä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ä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');">«</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');">»</a><br><br />
|
||||
<a id="moveNow" href="#" onclick="JavaScript:moveWindow('last');">»»</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');">«</a></td>
|
||||
<td><a id="moveNow" href="#" onclick="moveWindow('last');">»»</a></td>
|
||||
<td><a id="moveForward" href="#" onclick="moveWindow('forward');">»</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>
|
||||
|
|
|
@ -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];
|
||||
}
|
||||
});
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
Loading…
Add table
Reference in a new issue