fixed smaller incompabilities and issues
This commit is contained in:
parent
2350f62992
commit
60bb758774
7 changed files with 128 additions and 100 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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'
|
||||
};
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
1
frontend/stylesheets/jquery.jqplot.min.css
vendored
|
@ -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;}
|
|
@ -110,4 +110,8 @@ tbody tr td {
|
|||
|
||||
.dialog {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ops {
|
||||
text-align: right;
|
||||
}
|
Loading…
Add table
Reference in a new issue