stv0g/vzlogger
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
vzlogger/frontend/index.html

287 lines
7.4 KiB
HTML
Raw Blame History

<!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">
<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>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.cursor.min.js"></script>
<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>
<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" />
<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;">
<form action="" method="POST" name="formular">
<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">
<!-- 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;">
</div>
</div>
</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;
}
}
$("#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();
});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink