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

fixed option cookies

Browse source 
removed entity dialog
done some renaming
This commit is contained in:
Steffen Vogel 2010-12-10 17:20:50 +01:00
parent 43e3ee7480
commit d1f77b7150
7 changed files with 94 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend/index.html
View file

@ -45,20 +45,20 @@
<div id="accordion">
<div id="controls">
<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>
<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>
<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>
<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>
<h3><img src="images/table.png" alt="" /> Kanäle</h3>
<div id="entities">
<div id="entity-list">
<table>
<thead>
<tr>
@ -74,7 +74,7 @@
</thead>
<tbody></tbody>
</table>
<div><button name="addUUID"><img src="images/add.png" alt="add" /> UUID abonnieren</button> <button name="newEntity"><img src="images/star.png" alt="new" /> Entity erstellen</button></div>
<div><button name="entity-add"><img src="images/add.png" alt="add" /> Kanal hinzuf&uuml;gen</button></div>
</div>
<h3><img src="images/wrench.png" alt="" /> Optionen</h3>
<div id="options">
@ -82,29 +82,25 @@
<thead>
<tr>
<th>Option</th>
<th colspan="2">Wert</th>
<th>Wert</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="refresh"><img src="images/arrow_refresh.png" alt="" /> Automatisch aktualisieren</label></td>
<td><input type="checkbox" id="refresh" /></td>
<td></td>
</tr>
<tr id="rendering">
<td><img src="images/eye.png" alt="" /> Darstellung</td>
<td><label for="rendering_points"><input type="radio" id="rendering_points" name="rendering" value="points" /> Punkte</label></td>
<td><label for="rendering_lines"><input type="radio" id="rendering_lines" name="rendering" value="lines" /> Linien</label></td>
</tr>
<tr>
<td><label for="backendUrl"><img src="images/server.png" alt="" /> Backend-Adresse</label></td>
<td><input type="text" id="backendUrl" /></td>
<td></td>
<td><img src="images/eye.png" alt="" /> Darstellung</td>
<td><label for="render-points"><input type="radio" id="render-points" name="render" value="points" /> Punkte</label> <label for="render-lines"><input type="radio" id="render-lines" name="render" value="lines" /> Linien</label></td>
</tr>
<tr>
<td><label for="backend-url"><img src="images/server.png" alt="" /> Backend-Adresse</label></td>
<td><input type="text" id="backend-url" /></td>
</tr>
<tr>
<td><label for="tuples"><img src="images/shading.png" alt="" /> Tuples (Auflösung)</label></td>
<td><input type="text" id="tuples" size="5" /></td>
<td></td>
</tr>
</tbody>
</table>
@ -116,27 +112,27 @@
</div>
<!-- dialogs -->
<div id="addUUID" class="dialog">
<p>Hier können Sie einen existierenden Kanal über seine UUID hinzufügen</p>
<p><label for="uuid">UUID: </label><input id="uuid" type="text" size="36" maxlength="36" /></p>
<input type="button" value="hinzufügen" />
</div>
<div id="entity-add" class="dialog">
<div class="tabs">
<ul>
<li><a href="#entity-subscribe">Kanal abonnieren</a></li>
<li><a href="#entity-create">Kanal erstellen</a></li>
<li><a href="#public-entities">&ouml;ffentliche Kan&auml;le</a></li>
</ul>
<div id="entity-subscribe">
<p>Hier k&ouml;nnen Sie einen existierenden Kanal über seine UUID hinzuf&uuml;gen</p>
<p><label for="uuid">UUID: </label><input id="uuid" type="text" size="36" maxlength="36" /></p>
<input type="button" value="hinzufügen" />
</div>
<div id="entity-create">
<p>Hier können Sie einen neuen Kanal erstellen</p>
<div id="newEntity" class="dialog">
<p>Hier können sie einen neuen Kanal hinzufügen:</p>
<fieldset><legend>Allgemeine Eigenschaften</legend>
<table>
<tr><td><label for="type">Typ:</label></td><td><select name="type"></select></td></tr>
<tr><td><label for="port">Port:</label></td><td><input type="text" name="port" /></td></tr>
</table>
</fieldset>
<fieldset>
<legend>Spezifische Eigenschaften</legend>
<table id="properties"></table>
<p>(*) required</p>
</fieldset>
<input type="button" value="hinzufügen" />
<input type="button" value="erstellen" />
</div>
<div id="public-entities">
<p>Hier k&ouml;nnen Sie demn&auml;chst &ouml;ffentliche Kan&auml;le abonnieren.</p>
</div>
</div>
</div>
</body>
</html>

5
frontend/javascripts/entity.js
View file

@ -58,8 +58,9 @@ Entity.prototype.showDetails = function() {
.addClass('details')
.append(this.getDOM())
.dialog({
title: 'Entity Details',
width: 450
title: 'Details f&uuml;r ' + this.title,
width: 450,
resizable: false
});
};

73
frontend/javascripts/frontend.js
View file

@ -55,7 +55,7 @@ vz.wui.init = function() {
vz.entities.loadData();
});
$('#backendUrl')
$('#backend-url')
.val(vz.options.backendUrl)
.change(function() {
vz.options.backendUrl = $(this).val();
@ -68,7 +68,7 @@ vz.wui.init = function() {
});
// plot rendering
$('#rendering_lines')
$('#render-lines')
.attr('checked', vz.options.plot.series.lines.show)
.change(function() {
vz.options.plot.series.lines.show = $(this).attr('checked');
@ -76,7 +76,7 @@ vz.wui.init = function() {
vz.drawPlot();
});
$('#rendering_points')
$('#render-points')
.attr('checked', vz.options.plot.series.points.show)
.change(function() {
vz.options.plot.series.lines.show = !$(this).attr('checked');
@ -90,35 +90,25 @@ vz.wui.init = function() {
*/
vz.wui.dialogs.init = function() {
// initialize dialogs
$('#addUUID').dialog({
$('#entity-add.dialog').dialog({
autoOpen: false,
title: 'UUID hinzufügen',
width: 450,
title: 'Kanal hinzuf&uuml;gen',
width: 600,
resizable: false
});
$('#entity-add.dialog > div').tabs();
$('#newEntity').dialog({
autoOpen: false,
title: 'Entity erstellen',
width: 400
// open entity dialogs
$('button[name=entity-add]').click(function() {
$('#entity-add').dialog('open');
});
// open uuid dialog
$('button[name=addUUID]').click(function() {
$('#addUUID').dialog('open');
});
// open entity dialog
$('button[name=newEntity]').click(function() {
$('#newEntity').dialog('open');
});
// add UUID
$('#addUUID input[type=button]').click(function() {
// subscribe UUID
$('#entity-subscribe input[type=button]').click(function() {
try {
vz.uuids.add($('#addUUID input[type=text]').val());
$('#addUUID input[type=text]').val('');
$('#addUUID').dialog('close');
vz.uuids.add($('#entity-subscribe input[type=text]').val());
$('#entity-subscribe input[type=text]').val('');
$('#entity-add').dialog('close');
vz.entities.loadDetails();
}
catch (exception) {
@ -179,60 +169,60 @@ vz.wui.handleControls = function () {
var middle = vz.options.plot.xaxis.min + delta/2;
switch($(this).val()) {
case 'move_last':
case 'move-last':
vz.options.plot.xaxis.max = new Date().getTime();
vz.options.plot.xaxis.min = new Date().getTime() - delta;
break;
case 'move_back':
case 'move-back':
vz.options.plot.xaxis.min -= delta;
vz.options.plot.xaxis.max -= delta;
break;
case 'move_forward':
case 'move-forward':
vz.options.plot.xaxis.min += delta;
vz.options.plot.xaxis.max += delta;
break;
case 'zoom_reset':
case 'zoom-reset':
vz.options.plot.xaxis.min = middle - vz.options.defaultInterval/2;
vz.options.plot.xaxis.max = middle + vz.options.defaultInterval/2;
break;
case 'zoom_in':
case 'zoom-in':
vz.options.plot.xaxis.min += delta/4;
vz.options.plot.xaxis.max -= delta/4;
break;
case 'zoom_out':
case 'zoom-out':
vz.options.plot.xaxis.min -= delta;
vz.options.plot.xaxis.max += delta;
break;
case 'zoom_hour':
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':
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':
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':
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':
case 'zoom-year':
var year = 365*24*60*60*1000;
vz.options.plot.xaxis.min = middle - year/2;
vz.options.plot.xaxis.max = middle + year/2;
@ -259,6 +249,8 @@ vz.wui.handleControls = function () {
*/
vz.entities.loadDetails = function() {
this.clear();
$('#entity-list tbody').empty();
vz.uuids.each(function(index, value) {
vz.load('entity', value, {}, waitAsync(function(json) {
vz.entities.push(new Entity(json.entity));
@ -271,7 +263,6 @@ vz.entities.loadDetails = function() {
* @param data
*/
vz.entities.show = function() {
$('#entities tbody').empty();
var i = 0;
vz.entities.each(function(entity, parent) {
@ -336,11 +327,11 @@ vz.entities.show = function() {
);
}
$('#entities tbody').append(row);
$('#entity-list tbody').append(row);
});
// http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html
$('#entities table').treeTable({
$('#entity-list table').treeTable({
treeColumn: 2,
clickableNodeNames: true
});
@ -362,7 +353,7 @@ vz.entities.each = function(cb) {
* Load json data from the backend
*/
vz.entities.loadData = function() {
$('#overlay').html('<img src="images/loading.gif" alt="loading..." /><p>Loading...</p>');
$('#overlay').html('<img src="images/loading.gif" alt="loading..." /><p>loading...</p>');
this.each(function(entity, parent) {
if (entity.active && entity.type != 'group') { // TODO add group data aggregation
vz.load('data', entity.uuid,
@ -406,7 +397,7 @@ vz.drawPlot = function () {
});
if (data.length == 0) {
$('#overlay').html('<img src="images/empty.png" alt="no data..." /><p>Nothing to plot...</p>');
$('#overlay').html('<img src="images/empty.png" alt="no data..." /><p>nothing to plot...</p>');
data.push({}); // add empty dataset to show axes
}
else {

2
frontend/javascripts/init.js
View file

@ -71,7 +71,7 @@ $(document).ready(function() {
// parse uuids & options from cookie
vz.uuids.load();
//vz.options.load();
vz.options.load();
// initialize user interface
vz.wui.init();

32
frontend/javascripts/options.js
View file

@ -30,7 +30,7 @@ vz.options = {
tuples: 300,
refresh: false,
defaultInterval: 1*24*60*60*1000, // 1 day
timezoneOffset: -(new Date().getTimezoneOffset() * 60*1000)
timezoneOffset: -(new Date().getTimezoneOffset() * 60*1000) // TODO add option with timezone dropdown
};
vz.options.plot = {
@ -57,27 +57,13 @@ vz.options.plot = {
monthNames: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
tickFormatter: function(val, axis) {
var date = new Date(val + vz.options.timezoneOffset); /* add timezone offset */
/* TODO add period dependend timeformat
var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min;
if (delta > 3*365*24*60*60*1000) // > 3 years
vz.options.plot.xaxis.timeformat = '%b %y';
else if (delta > 31*24*60*60*1000) // > 1 month
vz.options.plot.xaxis.timeformat = '%d. %b';
else if (delta > 14*24*60*60*1000) // > 2 weeks
vz.options.plot.xaxis.timeformat = '%d.%m';
else if (delta > 24*60*60*1000) // > 1 day
vz.options.plot.xaxis.timeformat = '%d.%m %h:%M';
else if (delta > 60*60*1000) // > 1 hour
vz.options.plot.xaxis.timeformat = '%h:%M';
else // < 1 hour
format = '%h:%M:%S';*/
return $.plot.formatDate(date, vz.options.plot.xaxis.timeformat, vz.options.plot.xaxis.monthNames);
return $.plot.formatDate(date, this.timeformat, this.monthNames);
}
},
yaxis: { },
yaxis: {
min: 0,
max: null
},
selection: { mode: 'x' },
crosshair: { mode: 'x' },
grid: {
@ -105,8 +91,10 @@ vz.options.save = function() {
vz.options.load = function() {
for (var key in this) {
if (typeof this[key] == 'string' || typeof this[key] == 'number') {
this[key] = $.getCookie('vz_' + key);
//console.log('loaded option', key, this[key]);
var value = $.getCookie('vz_' + key);
if (typeof value != undefined) {
this[key] = (typeof this[key] == 'number') ? parseFloat(value) : value;
}
}
}
};

12
frontend/javascripts/uuid.js
View file

@ -28,9 +28,9 @@
* Add given UUID and update cookie
*/
vz.uuids.add = function(uuid) {
if (vz.uuids.validate(uuid)) {
if (!vz.uuids.contains(uuid)) {
vz.uuids.push(uuid);
if (this.validate(uuid)) {
if (!this.contains(uuid)) {
this.push(uuid);
}
else {
throw new Exception('UUIDException', 'UUID already added');
@ -45,8 +45,8 @@ vz.uuids.add = function(uuid) {
* Remove UUID and update cookie
*/
vz.uuids.remove = function(uuid) {
if (vz.uuids.contains(uuid)) {
vz.uuids.remove(uuid); // remove uuid from array
if (this.contains(uuid)) {
this.splice(this.indexOf(uuid), 1); // remove uuid from array
}
else {
throw new Exception('UUIDException', 'UUID unkown: ' + uuid);
@ -64,7 +64,7 @@ vz.uuids.validate = function(uuid) {
* Save uuids as cookie
*/
vz.uuids.save = function() {
$.setCookie('vz_uuids', vz.uuids.join(';'));
$.setCookie('vz_uuids', this.join(';'));
};
/**

15
frontend/stylesheets/style.css
View file

@ -95,25 +95,21 @@ tbody tr td {
}
/* treeTable for entities */
#entities tbody span {
#entity-list tbody span {
background-position: left center;
background-repeat: no-repeat;
padding: 0.2em 0 0.2em 1.7em;
margin: 0;
}
#entities tbody span.channel {
#entity-list tbody span.channel {
background-image: url("../images/chart_curve.png");
}
#entities tbody span.group {
#entity-list tbody span.group {
background-image: url("../images/folder.png");
}
#addEntity {
margin-top: 10px;
}
.indicator {
height: 12px;
}
@ -125,11 +121,6 @@ tbody tr td {
opacity: 0.3;
}
.slider {
width: 170px;
height: 4px;
}
.dialog {
display: none;
}