fixed option cookies
removed entity dialog done some renaming
This commit is contained in:
parent
43e3ee7480
commit
d1f77b7150
7 changed files with 94 additions and 127 deletions
|
@ -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ü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">öffentliche Kanäle</a></li>
|
||||
</ul>
|
||||
<div id="entity-subscribe">
|
||||
<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-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önnen Sie demnächst öffentliche Kanäle abonnieren.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -58,8 +58,9 @@ Entity.prototype.showDetails = function() {
|
|||
.addClass('details')
|
||||
.append(this.getDOM())
|
||||
.dialog({
|
||||
title: 'Entity Details',
|
||||
width: 450
|
||||
title: 'Details für ' + this.title,
|
||||
width: 450,
|
||||
resizable: false
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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ü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 {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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(';'));
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue