seperated code from layout and structure
This commit is contained in:
Steffen Vogel
parent
39414ab9e2
commit
aad462c297
5 changed files with 377 additions and 429 deletions
|
|
@ -1,8 +1,7 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Volkszaehler.org</title>
|
||||
<meta name="GENERATOR" content="Quanta Plus">
|
||||
<title>volkszaehler.org - web frontend</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
|
||||
<script type="text/javascript" src="javascript/jqplot/jquery.jqplot.min.js"></script>
|
||||
|
|
@ -14,63 +13,13 @@
|
|||
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.barRenderer.min.js"></script>
|
||||
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.highlighter.min.js"></script>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
|
||||
|
||||
<script type="text/javascript" src="javascript/smartmeter.js"></script>
|
||||
<script type="text/javascript" src="javascript/functions.js"></script>
|
||||
<script type="text/javascript" src="javascript/script.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="javascript/jqplot/jquery.jqplot.css">
|
||||
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css" rel="Stylesheet" />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
|
||||
<style type="text/css">
|
||||
a {
|
||||
color:gray;
|
||||
}
|
||||
|
||||
body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
#options {
|
||||
width:165px;
|
||||
height:450px;
|
||||
border:1px solid #555555;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
#Chart {
|
||||
border:1px solid #555555;
|
||||
background-color:white;
|
||||
width:800px;
|
||||
height:450px;
|
||||
padding-left:20px;
|
||||
padding-right:20px;
|
||||
left:165px;
|
||||
top:0px;
|
||||
position:absolute;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.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; 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; }
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="background-color:#9ACC67;">
|
||||
|
|
@ -127,301 +76,10 @@
|
|||
</div>
|
||||
</form>
|
||||
|
||||
<div id="dialog-form" title="add new channel">
|
||||
<p class="validateTips">All form fields are required.</p>
|
||||
|
||||
<form>
|
||||
|
||||
<fieldset>
|
||||
<label for="uuid">uuid</label>
|
||||
<input type="text" name="uuid" id="uuid" class="text ui-widget-content ui-corner-all" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="json"></div>
|
||||
<!-- uncomment the following line to activate debugging -->
|
||||
<!--<div id="debug"></div>-->
|
||||
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
var myUUID = '';
|
||||
if(HTTP_GET_VARS['uuid'])
|
||||
myUUID = HTTP_GET_VARS['uuid'];
|
||||
|
||||
|
||||
// easy access to formular with f
|
||||
var f = document.formular;
|
||||
|
||||
// storing json data
|
||||
var data;
|
||||
|
||||
// windowStart parameter for json server
|
||||
var myWindowStart = 0;
|
||||
|
||||
// windowEnd parameter for json server
|
||||
var myWindowEnd = getGroupedTimestamp((new Date()).getTime());
|
||||
|
||||
// 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() {
|
||||
|
||||
// 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,
|
||||
},0);
|
||||
$("#options").animate({
|
||||
height:$(window).height()-3,
|
||||
},0);
|
||||
}
|
||||
|
||||
// load channel list
|
||||
// loadChannelList();
|
||||
|
||||
// start autoReload timer
|
||||
window.setInterval("autoReload()",5000);
|
||||
|
||||
// code for adding a channel
|
||||
var uuid = $("#uuid"),
|
||||
allFields = $([]).add(uuid),
|
||||
tips = $(".validateTips");
|
||||
|
||||
|
||||
function updateTips(t) {
|
||||
tips
|
||||
.text(t)
|
||||
.addClass('ui-state-highlight');
|
||||
setTimeout(function() {
|
||||
tips.removeClass('ui-state-highlight', 1500);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
function checkLength(o,n,min,max) {
|
||||
|
||||
if ( o.val().length > max || o.val().length < min ) {
|
||||
o.addClass('ui-state-error');
|
||||
updateTips("Length of " + n + " must be between "+min+" and "+max+".");
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function checkRegexp(o,regexp,n) {
|
||||
|
||||
if ( !( regexp.test( o.val() ) ) ) {
|
||||
o.addClass('ui-state-error');
|
||||
updateTips(n);
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$("#dialog-form").dialog({
|
||||
autoOpen: false,
|
||||
height: 300,
|
||||
width: 350,
|
||||
modal: true,
|
||||
buttons: {
|
||||
'add channel': function() {
|
||||
var bValid = true;
|
||||
allFields.removeClass('ui-state-error');
|
||||
|
||||
bValid = bValid && checkLength(uuid,"UUID",36,36);
|
||||
|
||||
if (bValid) {
|
||||
|
||||
$(this).dialog('close');
|
||||
|
||||
// ajax command to add the channel
|
||||
//$.getJSON("../backend/index.php",{uuid: myUUID, controller: 'channel', action: 'add', format: 'json'}, function(j){});
|
||||
|
||||
// reload the channel list
|
||||
loadChannelList();
|
||||
}
|
||||
},
|
||||
Cancel: function() {
|
||||
$(this).dialog('close');
|
||||
}
|
||||
},
|
||||
close: function() {
|
||||
allFields.val('').removeClass('ui-state-error');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('#addChannel')
|
||||
.button()
|
||||
.click(function() {
|
||||
$('#dialog-form').dialog('open');
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
getData();
|
||||
});
|
||||
|
||||
|
||||
function loadChannelList() {
|
||||
|
||||
|
||||
$('#debug').append('<a href="../backend/index.php/data/"' + myUUID + '"/channel">json</a>');
|
||||
// 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) {
|
||||
myWindowEnd = getGroupedTimestamp((new Date()).getTime());
|
||||
getData();
|
||||
}
|
||||
}
|
||||
|
||||
function moveWindow(mode) {
|
||||
|
||||
if(mode == 'last')
|
||||
myWindowEnd = (new Date()).getTime();
|
||||
if(mode == 'back') {
|
||||
myWindowEnd = myWindowStart;
|
||||
}
|
||||
if(mode == 'forward') {
|
||||
myWindowEnd += (myWindowEnd-myWindowStart);
|
||||
}
|
||||
|
||||
getData();
|
||||
}
|
||||
|
||||
|
||||
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 + ",";
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
// calcMyWindowStart
|
||||
myWindowStart = calcMyWindowStart();
|
||||
|
||||
$('#debug').append('<a href="../backend/index.php/data/'+myUUID+'/format/json/from/'+myWindowStart+'/to/'+myWindowEnd+'">json</a>');
|
||||
// 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){
|
||||
data = j;
|
||||
$('#debug').empty().append(data.toSource());
|
||||
// then show/reload the chart
|
||||
//if(data.channels.length > 0 && data.channels[0].pulses.length > 0)
|
||||
showChart();
|
||||
$('#loading').empty();
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function showChart() {
|
||||
|
||||
var jqData = new Array();
|
||||
var series_chart = new Array();
|
||||
|
||||
$('#ChartInfo').hide();
|
||||
$('#ChartPlot').show();
|
||||
|
||||
jqOptions = {
|
||||
legend:{show:true},
|
||||
series:[],
|
||||
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']});
|
||||
}
|
||||
|
||||
EformatString = '%d.%m.%y %H:%M';
|
||||
|
||||
// power (moving average) gray line
|
||||
for( uuid in data.data ) {
|
||||
jqData.push(data.data[uuid]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
jqOptions.axes = {
|
||||
yaxis:{autoscale:true, min:0, label:"Leistung (Watt)", tickOptions:{formatString:'%.3f'},labelRenderer: $.jqplot.CanvasAxisLabelRenderer},
|
||||
xaxis:{autoscale:true, min:calcMyWindowStart(), max:myWindowEnd, tickOptions:{formatString:EformatString,angle:-30},pad:1, renderer:$.jqplot.DateAxisRenderer,rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer}},
|
||||
};
|
||||
|
||||
chart = $.jqplot("ChartDIV",jqData,jqOptions);
|
||||
chart.replot();
|
||||
|
||||
}
|
||||
|
||||
function generateAxisTicks() {
|
||||
|
||||
var data_grouped_time = getEmptyGroupArray();
|
||||
var ticks = new Array();
|
||||
|
||||
for(var timestamp in data_grouped_time) {
|
||||
var time = new Date(timestamp*1000);
|
||||
ticks.push(time.getDate()+'.'+(time.getMonth()+1)+'.'+' '+time.getHours()+':00');
|
||||
}
|
||||
|
||||
return ticks;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
228
frontend/javascript/functions.js
Normal file
228
frontend/javascript/functions.js
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
/*
|
||||
* 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
|
||||
*/
|
||||
|
||||
// return an array with timestamps of e.g.
|
||||
// 2010-05-01 00:00:00, 2010-05-01 01:00, 2010-05-01 02:00 for grouping=hour
|
||||
// between windowStart and windowEnd of json response
|
||||
function getEmptyGroupArray() {
|
||||
var empty_array = new Object();
|
||||
|
||||
var iterator = getGroupedTimestamp(myWindowStart);
|
||||
//$('#debug').empty().append('start:'+myWindowStart+'end:'+myWindowEnd);
|
||||
|
||||
if(myWindowStart < myWindowEnd && iterator < myWindowEnd) {
|
||||
var i=0;
|
||||
while(iterator < myWindowEnd) {
|
||||
i++;
|
||||
|
||||
empty_array[iterator] = 0;
|
||||
|
||||
var iteratorDate = new Date(iterator);
|
||||
//$('#debug').append('#'+i+':'+iteratorDate+'<br>');
|
||||
iteratorDate.setDate(iteratorDate.getDate()+1);
|
||||
// very bad bug: infinity loop for summer winter change
|
||||
if(i==750) return empty_array;
|
||||
|
||||
iterator = iteratorDate.getTime();
|
||||
}
|
||||
}
|
||||
|
||||
return empty_array
|
||||
}
|
||||
|
||||
function calcMyWindowStart() {
|
||||
var myWindowStart = new Date(myWindowEnd);
|
||||
|
||||
var year = myWindowStart.getFullYear();
|
||||
var month = myWindowStart.getMonth();// 0 is january
|
||||
var day = myWindowStart.getDate(); // getDay() returns day of week
|
||||
var hours = myWindowStart.getHours();
|
||||
var minutes = myWindowStart.getMinutes();
|
||||
|
||||
//var windowSize = f.window.value.substring(0,1);
|
||||
var windowSize = "1";
|
||||
//var windowInterval = f.window.value.substring(1);
|
||||
var windowInterval = "MONTH"; // we want to display 1 day (for now)
|
||||
|
||||
myWindowStart.setMonth(myWindowStart.getMonth()-windowSize);
|
||||
return myWindowStart.getTime();
|
||||
}
|
||||
|
||||
// groups a timestamp depending on grouping value
|
||||
// e.g. 2010-05-01 23:23:23 will become 2010-05-01 23:00:00 vor grouping=hour
|
||||
function getGroupedTimestamp(timestamp) {
|
||||
time = new Date(timestamp);
|
||||
|
||||
var year = time.getFullYear();
|
||||
var month = time.getMonth();// 0 is january
|
||||
var day = time.getDate(); // getDay() returns day of week
|
||||
var hours = time.getHours();
|
||||
var minutes = time.getMinutes();
|
||||
|
||||
hours = 0;
|
||||
|
||||
return (new Date(year,month,day,hours,minutes)).getTime();
|
||||
}
|
||||
|
||||
function loadChannelList() {
|
||||
$('#debug').append('<a href="../backend/index.php/data/"' + myUUID + '"/channel">json</a>');
|
||||
// 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) {
|
||||
myWindowEnd = getGroupedTimestamp((new Date()).getTime());
|
||||
getData();
|
||||
}
|
||||
}
|
||||
|
||||
function moveWindow(mode) {
|
||||
if(mode == 'last')
|
||||
myWindowEnd = (new Date()).getTime();
|
||||
if(mode == 'back') {
|
||||
myWindowEnd = myWindowStart;
|
||||
}
|
||||
if(mode == 'forward') {
|
||||
myWindowEnd += (myWindowEnd-myWindowStart);
|
||||
}
|
||||
|
||||
getData();
|
||||
}
|
||||
|
||||
|
||||
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 + ","; } } }
|
||||
*/
|
||||
|
||||
// calcMyWindowStart
|
||||
myWindowStart = calcMyWindowStart();
|
||||
|
||||
$('#debug').append('<a href="../backend/index.php/data/'+myUUID+'/format/json/from/'+myWindowStart+'/to/'+myWindowEnd+'">json</a>');
|
||||
// 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){
|
||||
data = j;
|
||||
$('#debug').empty().append(data.toSource());
|
||||
// then show/reload the chart
|
||||
// if(data.channels.length > 0 && data.channels[0].pulses.length > 0)
|
||||
showChart();
|
||||
$('#loading').empty();
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function showChart() {
|
||||
var jqData = new Array();
|
||||
var series_chart = new Array();
|
||||
|
||||
$('#ChartInfo').hide();
|
||||
$('#ChartPlot').show();
|
||||
|
||||
jqOptions = {
|
||||
legend:{show:true},
|
||||
series:[],
|
||||
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']});
|
||||
}
|
||||
|
||||
EformatString = '%d.%m.%y %H:%M';
|
||||
|
||||
// power (moving average) gray line
|
||||
for( uuid in data.data ) {
|
||||
jqData.push(data.data[uuid]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
jqOptions.axes = {
|
||||
yaxis:{autoscale:true, min:0, label:"Leistung (Watt)", tickOptions:{formatString:'%.3f'},labelRenderer: $.jqplot.CanvasAxisLabelRenderer},
|
||||
xaxis:{autoscale:true, min:calcMyWindowStart(), max:myWindowEnd, tickOptions:{formatString:EformatString,angle:-30},pad:1, renderer:$.jqplot.DateAxisRenderer,rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer}},
|
||||
};
|
||||
|
||||
chart = $.jqplot("ChartDIV",jqData,jqOptions);
|
||||
chart.replot();
|
||||
|
||||
}
|
||||
|
||||
function generateAxisTicks() {
|
||||
var data_grouped_time = getEmptyGroupArray();
|
||||
var ticks = new Array();
|
||||
|
||||
for(var timestamp in data_grouped_time) {
|
||||
var time = new Date(timestamp*1000);
|
||||
ticks.push(time.getDate()+'.'+(time.getMonth()+1)+'.'+' '+time.getHours()+':00');
|
||||
}
|
||||
|
||||
return ticks;
|
||||
}
|
||||
|
||||
function updateTips(t) {
|
||||
tips
|
||||
.text(t)
|
||||
.addClass('ui-state-highlight');
|
||||
setTimeout(function() {
|
||||
tips.removeClass('ui-state-highlight', 1500);
|
||||
}, 500);
|
||||
}
|
||||
|
||||
|
||||
function checkLength(o,n,min,max) {
|
||||
|
||||
if ( o.val().length > max || o.val().length < min ) {
|
||||
o.addClass('ui-state-error');
|
||||
updateTips("Length of " + n + " must be between "+min+" and "+max+".");
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function checkRegexp(o,regexp,n) {
|
||||
if ( !( regexp.test( o.val() ) ) ) {
|
||||
o.addClass('ui-state-error');
|
||||
updateTips(n);
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
67
frontend/javascript/script.js
Normal file
67
frontend/javascript/script.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
||||
var myUUID = '';
|
||||
if(HTTP_GET_VARS['uuid'])
|
||||
myUUID = HTTP_GET_VARS['uuid'];
|
||||
|
||||
|
||||
// easy access to formular with f
|
||||
var f;
|
||||
|
||||
// storing json data
|
||||
var data;
|
||||
|
||||
// windowStart parameter for json server
|
||||
var myWindowStart = 0;
|
||||
|
||||
// windowEnd parameter for json server
|
||||
var myWindowEnd = getGroupedTimestamp((new Date()).getTime());
|
||||
|
||||
// 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() {
|
||||
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,
|
||||
},0);
|
||||
$("#options").animate({
|
||||
height:$(window).height()-3,
|
||||
},0);
|
||||
}
|
||||
|
||||
// load channel list
|
||||
// loadChannelList();
|
||||
|
||||
// start autoReload timer
|
||||
window.setInterval("autoReload()",5000);
|
||||
|
||||
// code for adding a channel
|
||||
var uuid = $("#uuid");
|
||||
var allFields = $([]).add(uuid);
|
||||
var tips = $(".validateTips");
|
||||
|
||||
getData();
|
||||
});
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
/*
|
||||
* 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
|
||||
*/
|
||||
|
||||
// return an array with timestamps of e.g.
|
||||
// 2010-05-01 00:00:00, 2010-05-01 01:00, 2010-05-01 02:00 for grouping=hour
|
||||
// between windowStart and windowEnd of json response
|
||||
function getEmptyGroupArray() {
|
||||
var empty_array = new Object();
|
||||
|
||||
var iterator = getGroupedTimestamp(myWindowStart);
|
||||
//$('#debug').empty().append('start:'+myWindowStart+'end:'+myWindowEnd);
|
||||
|
||||
if(myWindowStart < myWindowEnd && iterator < myWindowEnd) {
|
||||
var i=0;
|
||||
while(iterator < myWindowEnd) {
|
||||
i++;
|
||||
|
||||
empty_array[iterator] = 0;
|
||||
|
||||
var iteratorDate = new Date(iterator);
|
||||
//$('#debug').append('#'+i+':'+iteratorDate+'<br>');
|
||||
iteratorDate.setDate(iteratorDate.getDate()+1);
|
||||
// very bad bug: infinity loop for summer winter change
|
||||
if(i==750) return empty_array;
|
||||
|
||||
iterator = iteratorDate.getTime();
|
||||
}
|
||||
}
|
||||
|
||||
return empty_array
|
||||
}
|
||||
|
||||
function calcMyWindowStart() {
|
||||
var myWindowStart = new Date(myWindowEnd);
|
||||
|
||||
var year = myWindowStart.getFullYear();
|
||||
var month = myWindowStart.getMonth();// 0 is january
|
||||
var day = myWindowStart.getDate(); // getDay() returns day of week
|
||||
var hours = myWindowStart.getHours();
|
||||
var minutes = myWindowStart.getMinutes();
|
||||
|
||||
//var windowSize = f.window.value.substring(0,1);
|
||||
var windowSize = "1";
|
||||
//var windowInterval = f.window.value.substring(1);
|
||||
var windowInterval = "MONTH"; // we want to display 1 day (for now)
|
||||
|
||||
myWindowStart.setMonth(myWindowStart.getMonth()-windowSize);
|
||||
return myWindowStart.getTime();
|
||||
}
|
||||
|
||||
// groups a timestamp depending on grouping value
|
||||
// e.g. 2010-05-01 23:23:23 will become 2010-05-01 23:00:00 vor grouping=hour
|
||||
function getGroupedTimestamp(timestamp) {
|
||||
time = new Date(timestamp);
|
||||
|
||||
var year = time.getFullYear();
|
||||
var month = time.getMonth();// 0 is january
|
||||
var day = time.getDate(); // getDay() returns day of week
|
||||
var hours = time.getHours();
|
||||
var minutes = time.getMinutes();
|
||||
|
||||
hours = 0;
|
||||
|
||||
return (new Date(year,month,day,hours,minutes)).getTime();
|
||||
}
|
||||
|
||||
78
frontend/style.css
Normal file
78
frontend/style.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
a {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#options {
|
||||
width: 165px;
|
||||
height: 450px;
|
||||
border: 1px solid #555555;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#Chart {
|
||||
border: 1px solid #555555;
|
||||
background-color: white;
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
left: 165px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue