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

beautified controls

Browse source
This commit is contained in:
Steffen Vogel 2010-11-01 17:43:57 +01:00
parent beca165c24
commit 69a2e4754e
3 changed files with 53 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/index.html
View file

@ -38,19 +38,21 @@
<div id="content">
<div id="plot"></div>
<div id="accordion">
<div id="controls">
<input type="image" src="images/control_rewind_blue.png" value="move_back" title="move back" />
<input type="image" src="images/zoom_in.png" value="zoom_in" title="zoom in" />
<input type="image" src="images/zoom_out.png" value="zoom_out" title="zoom out" />
<button value="move_back"><img src="images/control_rewind_blue.png" title="move back" /></button>
<button value="zoom_in"><img src="images/zoom_in.png" title="zoom in" /></button>
<button value="zoom_out"><img src="images/zoom_out.png" title="zoom out" /></button>
<button value="zoom_hour">Stunde</button>
<button value="zoom_day">Tag</button>
<button value="zoom_week">Woche</button>
<button value="zoom_month">Monat</button>
<input type="image" src="images/control_end_blue.png" value="move_last" title="move to present" />
<input type="image" src="images/control_fastforward_blue.png" value="move_forward" title="move forward" />
<button value="zoom_year">Jahr</button>
<button value="move_last"><img src="images/control_end_blue.png" title="move to present" /></button>
<button value="move_forward"><img src="images/control_fastforward_blue.png" title="move forward" /></button>
</div>
<div id="accordion">
<h3><img src="images/table.png" alt="" /> Kanäle</h3>
<div id="entities">
<table>

36
frontend/javascripts/frontend.js
View file

@ -128,7 +128,7 @@ vz.wui.dialogs.init = function() {
*/
vz.wui.initEvents = function() {
// bind plot actions
$('#controls input[type=image]').button().click(vz.wui.handleControls);
$('#controls button').button().click(vz.wui.handleControls);
$('#controls').buttonset();
@ -178,8 +178,8 @@ vz.wui.refresh = function() {
vz.wui.handleControls = function () {
var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min;
var middle = vz.options.plot.xaxis.min + delta/2;
switch(this.value) {
switch($(this).val()) {
case 'move_last':
vz.options.plot.xaxis.max = new Date().getTime();
vz.options.plot.xaxis.min = new Date().getTime() - delta;
@ -208,6 +208,36 @@ vz.wui.handleControls = function () {
vz.options.plot.xaxis.min -= delta;
vz.options.plot.xaxis.max += delta;
break;
case 'zoom_hour':
hour = 60*60*1000;
vz.options.plot.xaxis.min = middle - hour/2;
vz.options.plot.xaxis.max = middle + hour/2;
break;
case 'zoom_day':
var day = 24*60*60*1000;
vz.options.plot.xaxis.min = middle - day/2;
vz.options.plot.xaxis.max = middle + day/2;
break;
case 'zoom_week':
var week = 7*24*60*60*1000;
vz.options.plot.xaxis.min = middle - week/2;
vz.options.plot.xaxis.max = middle + week/2;
break;
case 'zoom_month':
var month = 30*24*60*60*1000;
vz.options.plot.xaxis.min = middle - month/2;
vz.options.plot.xaxis.max = middle + month/2;
break;
case 'zoom_year':
var year = 30*24*60*60*1000;
vz.options.plot.xaxis.min = middle - year/2;
vz.options.plot.xaxis.max = middle + year/2;
break;
}
// update delta after zoom

19
frontend/stylesheets/style.css
View file

@ -44,16 +44,21 @@ tbody tr td {
margin: 10px;
}
#controls {
width: 100%;
text-align: center;
#controls button {
width: 10%;
}
#controls button {
font-size: 1em;
#controls span.ui-button-text {
font-size: 0.85em;
height: 16px;
}
#controls {
padding: 0 !important;
}
#accordion {
margin-top: 10px;
background-color: lightgrey;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
@ -63,7 +68,7 @@ tbody tr td {
#accordion h3 {
background-color: grey;
padding: 4px;
margin: 2px 0px;
margin: 2px 0;
color: white;
cursor: pointer;
font-size: 0.9em;
@ -73,7 +78,7 @@ tbody tr td {
}
#accordion div {
padding: 5px;
padding: 4px;
}
/* treeTable for entities */