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

fixed smaller incompabilities and issues

Browse source
This commit is contained in:
Steffen Vogel 2010-10-04 03:29:12 +02:00
parent 2350f62992
commit 60bb758774
7 changed files with 128 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/index.html
View file

@ -22,9 +22,8 @@
<script type="text/javascript" src="javascripts/frontend.js"></script>
<script type="text/javascript" src="javascripts/init.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.jqplot.min.css">
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.treeTable.css">
<link rel="stylesheet" type="text/css" href="stylesheets/ui-lightness/jquery-ui-1.8.5.css" rel="Stylesheet" />
<link rel="stylesheet" type="text/css" href="stylesheets/ui-lightness/jquery-ui-1.8.5.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>

153
frontend/javascripts/backend.js
View file

@ -46,53 +46,59 @@ function showEntities() {
eachRecursive(vz.entities, function(entity, parent) {
entity.active = true; // TODO active by default or via backend property?
entity.color = vz.options.plot.colors[i++ % vz.options.plot.colors.length];
var row = $('<tr>')
.addClass((parent) ? 'child-of-entity-' + parent.uuid : '')
.attr('id', 'entity-' + entity.uuid)
.append($('<td>')
.css('background-color', entity.color)
.css('width', 19)
.append($('<input>')
.attr('type', 'checkbox')
.attr('checked', entity.active)
.bind('change', entity, function(event) {
event.data.active = $(this).attr('checked');
loadData();
})
)
)
.append($('<td>')
.css('width', 20)
)
.append($('<td>')
.append($('<span>')
.text(entity.title)
.addClass('indicator')
.addClass((entity.type == 'group') ? 'group' : 'channel')
)
)
.append($('<td>').text(entity.type))
.append($('<td>')) // min
.append($('<td>')) // max
.append($('<td>')) // avg
.append($('<td>') // operations
.addClass('ops')
.append($('<input>')
.attr('type', 'image')
.attr('src', 'images/information.png')
.attr('alt', 'details')
.bind('click', entity, function(event) { showEntityDetails(event.data); })
)
);
if (parent == null) {
$('td.ops', row).prepend($('<input>')
.attr('type', 'image')
.attr('src', 'images/delete.png')
.attr('alt', 'delete')
.bind('click', entity, function(event) {
removeUUID(event.data.uuid);
loadEntities();
})
);
}
$('#entities tbody').append(
$('<tr>')
.addClass((parent) ? 'child-of-entity-' + parent.uuid : '')
.attr('id', 'entity-' + entity.uuid)
.append($('<td>')
.css('background-color', entity.color)
.css('width', 19)
.append($('<input>')
.attr('type', 'checkbox')
.attr('checked', entity.active)
.bind('change', entity, function(event) {
event.data.active = $(this).attr('checked');
loadData();
})
)
)
.append($('<td>')
.css('width', 20)
)
.append($('<td>')
.append($('<span>')
.text(entity.title)
.addClass('indicator')
.addClass((entity.type == 'group') ? 'group' : 'channel')
)
)
.append($('<td>').text(entity.type))
.append($('<td>')) // min
.append($('<td>')) // max
.append($('<td>')) // avg
.append($('<td>') // operations
.css('text-align', 'right')
.append($('<input>')
.attr('type', 'image')
.attr('src', 'images/information.png')
.attr('alt', 'details')
.bind('click', entity, function(event) { showEntityDetails(event.data); })
)
.append($('<input>')
.attr('type', 'image')
.attr('src', 'images/delete.png')
.attr('alt', 'delete')
.bind('click', entity, function(event) { removeUUID(event.data.uuid); })
)
)
);
$('#entities tbody').append(row);
});
// http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/index.html
@ -134,11 +140,11 @@ function showEntityDetails(entity) {
});
}
function validateEntity(form) {
var entity = getDefinition(entities, form.type.value);
function validateEntity(entity) {
var def = getDefinition(vz.definitions.entities, entity.type);
$.each(entity.required, function(index, property) {
var property = getDefinition(properties, property);
$.each(def.required, function(index, property) {
var property = getDefinition(vz.definitions.properties, property);
if (!validateProperty(property, form.elements[property.name].value)) {
alert('Error: invalid property: ' + property.name + ' = ' + form.elements[property.name].value);
return false;
@ -195,17 +201,22 @@ function getEntityDOM(type) {
var property = getDefinition(properties, property);
if (property) {
$('#properties').append('<tr class="required"><td><label for="' + property.name + '">' + property.translation.de + ':</label></td><td>' + getPropertyForm(property) + '</td><td>(*)</td></tr>');
$('#properties')
.append($('<tr>')
.addClass('required')
.append($('<td>')
.append($('<label>')
.attr('for', property.name)
.text(property.translation.de + ':')
)
)
.append($('<td>').append(getPropertyDOM(property)))
.append($('<td>').text('(*)'))
);
}
});
$.each(entity.optional, function(index, property) {
var property = getDefinition(properties, property);
if (property) {
$('#properties').append('<tr class="optional"><td><label for="' + property.name + '">' + property.translation.de + ':</label></td><td>' + getPropertyForm(property) + '</td></tr>');
}
});
// TODO optional properties
}
function getPropertyDOM(property) {
@ -213,21 +224,35 @@ function getPropertyDOM(property) {
case 'string':
case 'float':
case 'integer':
return '<input type="text" name="' + property.name + '" ' + ((property.type == 'string') ? 'maxlength="' + property.max + '" ' : '') + '/>';
return $('<input>')
.attr('type', 'text')
.attr('name=', property.name)
.attr('maxlength', (property.type == 'string') ? property.max : 0);
case 'text':
return '<textarea name="' + property.name + '"></textarea>';
return $('<textarea>')
.attr('name', property.name);
case 'boolean':
return '<input type="checkbox" name="' + property.name + '" value="1" />';
return $('<input>')
.attr('type', 'checkbox')
.attr('name', property.name)
.value(1);
case 'multiple':
var dom = $('<select>').attr('name', property.name)
$.each(property.options, function(index, option) {
options.push('<option value="' + option + '">' + option + '<\option>');
dom.append($('<option>')
.value(option)
.text(option)
);
});
return '<select name="' + property.name + '">' + options.join() + '</select>';
return dom;
default:
alert('Error: unknown property!');
throw {
type: 'PropertyException',
message: 'Unknown property type'
};
}
}

37
frontend/javascripts/frontend.js
View file

@ -32,6 +32,7 @@
* Initialize the WUI (Web User Interface)
*/
function initInterface() {
// make the whole frontend resizable
/*$('#content').resizable({
alsoResize: $('#plot'),
//ghost: true,
@ -39,13 +40,16 @@ function initInterface() {
autoHide: true
});*/
// initialize dropdown accordion
$('#accordion h3').click(function() {
$(this).next().toggle('fast');
return false;
}).next().hide();
$('button').button();
// make buttons fancy
$('button, input[type=button]').button();
// open UUID dialog
$('button[name=addUUID]').click(function() {
$('#addUUID').dialog({
title: 'UUID hinzufügen',
@ -53,6 +57,7 @@ function initInterface() {
});
});
// open new entity dialog
$('button[name=newEntity]').click(function() {
$('#newEntity').dialog({
title: 'Entity erstellen',
@ -60,8 +65,15 @@ function initInterface() {
});
});
// bind controls
$('#move input').click(handleControl);
// add UUID
$('#addUUID input[type=button]').click(function() {
addUUID($('#addUUID input[type=text]').val());
$('#addUUID').dialog('close');
loadEntities();
})
// bind plot actions
$('#move input').click(handleControls);
// options
/*$('input[name=trendline]').attr('checked', vz.options.plot.seriesDefaults.trendline.show).change(function() {
@ -105,7 +117,7 @@ function refreshWindow() {
/**
* Move & zoom in the plotting area
*/
function handleControl() {
function handleControls() {
var delta = vz.to - vz.from;
var middle = Math.round(vz.from + delta/2);
@ -153,26 +165,19 @@ function loadData() {
eachRecursive(vz.entities, function(entity, parent) {
if (entity.active && entity.type != 'group') {
$.getJSON(vz.options.backendUrl + '/data/' + entity.uuid + '.json', { from: vz.from, to: vz.to, tuples: vz.options.tuples }, ajaxWait(function(json) {
entity.data = json.data[0]; // TODO filter for correct uuid
vz.data.push({
data: json.data[0].tuples, // TODO check uuid
color: entity.color
});
}, drawPlot, 'data'));
}
});
}
function drawPlot() {
var data = new Array;
eachRecursive(vz.entities, function(entity, parent) {
if (entity.active && entity.type != 'group') {
data.push({
data: entity.data.tuples,
color: entity.color
});
}
});
vz.options.plot.xaxis.min = vz.from;
vz.options.plot.xaxis.max = vz.to;
vz.plot = $.plot($('#plot'), data, vz.options.plot);
vz.plot = $.plot($('#plot'), vz.data, vz.options.plot);
}

18
frontend/javascripts/init.js
View file

@ -1,5 +1,5 @@
/**
* Main javascript file
* Initialization and configuration of frontend
*
* @author Florian Ziegler <fz@f10-home.de>
* @author Justin Otherguy <justin@justinotherguy.org>
@ -31,14 +31,12 @@ const defaultInterval = 7*24*60*60*1000; // 1 week
// volkszaehler.org object
// holds all data and options for the frontend
var vz = {
// storing entities
entities: new Array,
uuids: new Array,
data: new Array,
// parameter for json server
// timeinterval to request
to: new Date().getTime(),
//parameter for json server (last week)
from: new Date().getTime() - defaultInterval,
options: {
@ -90,6 +88,7 @@ $(document).ready(function() {
// parse uuids from cookie
vz.uuids = getUUIDs();
console.log(vz.uuids);
// add optional uuid from url
if($.getUrlVar('uuid')) {
@ -100,22 +99,21 @@ $(document).ready(function() {
window.setInterval(refreshWindow, 5000);
// handle zooming & panning
var plot = $('#plot');
plot
$('#plot')
.bind("plotselected", function (event, ranges) {
vz.from = Math.floor(ranges.xaxis.from);
vz.to = Math.ceil(ranges.xaxis.to);
loadData();
})
/*.bind('plotpan', function (event, plot) {
var axes = plot.getAxes();
var axes = vz.plot.getAxes();
vz.from = Math.floor(axes.xaxis.min);
vz.to = Math.ceil(axes.xaxis.max);
vz.options.plot.yaxis.min = axes.yaxis.min;
vz.options.plot.yaxis.max = axes.yaxis.max;
})*/
.bind('plotzoom', function (event, plot) {
var axes = plot.getAxes();
var axes = vz.plot.getAxes();
vz.from = Math.floor(axes.xaxis.min);
vz.to = Math.ceil(axes.xaxis.max);
//vz.options.plot.yaxis.min = axes.yaxis.min;
@ -125,7 +123,7 @@ $(document).ready(function() {
loadData();
})
.bind('mouseup', function(event) {
loadData();
//loadData();
});
loadEntities();

12
frontend/javascripts/uuid.js
View file

@ -32,7 +32,7 @@ function getUUIDs() {
return JSON.parse($.getCookie('uuids'));
}
else {
return new Array();
return new Array;
}
}
@ -44,11 +44,9 @@ function addUUID(uuid) {
}
function removeUUID(uuid) {
if (uuids.contains(uuid)) {
uuids.filter(function(value) {
return value != uuid;
});
$.setCookie('uuids', JSON.stringify(uuids));
if (vz.uuids.contains(uuid)) {
vz.uuids.remove(uuid);
$.setCookie('uuids', JSON.stringify(vz.uuids));
}
}
@ -57,7 +55,7 @@ function removeUUID(uuid) {
*
* @todo remove after got backend handling working
*/
function randomUUID() {
function getRandomUUID() {
var s = [], itoh = '0123456789ABCDEF';
// make array of random hex digits. The UUID only has 32 digits in it, but we

1
frontend/stylesheets/jquery.jqplot.min.css vendored
View file

@ -1 +0,0 @@
.jqplot-target{position:relative;color:#666;font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;font-size:1em;}.jqplot-axis{font-size:.75em;}.jqplot-xaxis{margin-top:10px;}.jqplot-x2axis{margin-bottom:10px;}.jqplot-yaxis{margin-right:10px;}.jqplot-y2axis,.jqplot-y3axis,.jqplot-y4axis,.jqplot-y5axis,.jqplot-y6axis,.jqplot-y7axis,.jqplot-y8axis,.jqplot-y9axis{margin-left:10px;margin-right:10px;}.jqplot-axis-tick,.jqplot-xaxis-tick,.jqplot-yaxis-tick,.jqplot-x2axis-tick,.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{position:absolute;}.jqplot-xaxis-tick{top:0;left:15px;vertical-align:top;}.jqplot-x2axis-tick{bottom:0;left:15px;vertical-align:bottom;}.jqplot-yaxis-tick{right:0;top:15px;text-align:right;}.jqplot-y2axis-tick,.jqplot-y3axis-tick,.jqplot-y4axis-tick,.jqplot-y5axis-tick,.jqplot-y6axis-tick,.jqplot-y7axis-tick,.jqplot-y8axis-tick,.jqplot-y9axis-tick{left:0;top:15px;text-align:left;}.jqplot-xaxis-label{margin-top:10px;font-size:11pt;position:absolute;}.jqplot-x2axis-label{margin-bottom:10px;font-size:11pt;position:absolute;}.jqplot-yaxis-label{margin-right:10px;font-size:11pt;position:absolute;}.jqplot-y2axis-label,.jqplot-y3axis-label,.jqplot-y4axis-label,.jqplot-y5axis-label,.jqplot-y6axis-label,.jqplot-y7axis-label,.jqplot-y8axis-label,.jqplot-y9axis-label{font-size:11pt;position:absolute;}table.jqplot-table-legend,table.jqplot-cursor-legend{background-color:rgba(255,255,255,0.6);border:1px solid #ccc;position:absolute;font-size:.75em;}td.jqplot-table-legend{vertical-align:middle;}td.jqplot-table-legend>div{border:1px solid #ccc;padding:.2em;}div.jqplot-table-legend-swatch{width:0;height:0;border-top-width:.35em;border-bottom-width:.35em;border-left-width:.6em;border-right-width:.6em;border-top-style:solid;border-bottom-style:solid;border-left-style:solid;border-right-style:solid;}.jqplot-title{top:0;left:0;padding-bottom:.5em;font-size:1.2em;}table.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;}.jqplot-cursor-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px;}.jqplot-highlighter-tooltip{border:1px solid #ccc;font-size:.75em;white-space:nowrap;background:rgba(208,208,208,0.5);padding:1px;}.jqplot-point-label{font-size:.75em;}td.jqplot-cursor-legend-swatch{vertical-align:middle;text-align:center;}div.jqplot-cursor-legend-swatch{width:1.2em;height:.7em;}

4
frontend/stylesheets/style.css
View file

@ -110,4 +110,8 @@ tbody tr td {
.dialog {
display: none;
}
.ops {
text-align: right;
}