From 60bb75877451409f1dd4135ce9e3dda6fb353bef Mon Sep 17 00:00:00 2001
From: Steffen Vogel <info@steffenvogel.de>
Date: Mon, 4 Oct 2010 03:29:12 +0200
Subject: [PATCH] fixed smaller incompabilities and issues

---
 frontend/index.html                        |   3 +-
 frontend/javascripts/backend.js            | 153 ++++++++++++---------
 frontend/javascripts/frontend.js           |  37 ++---
 frontend/javascripts/init.js               |  18 ++-
 frontend/javascripts/uuid.js               |  12 +-
 frontend/stylesheets/jquery.jqplot.min.css |   1 -
 frontend/stylesheets/style.css             |   4 +
 7 files changed, 128 insertions(+), 100 deletions(-)
 delete mode 100644 frontend/stylesheets/jquery.jqplot.min.css

diff --git a/frontend/index.html b/frontend/index.html
index 9c03afc..92b1c4c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -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>
 
diff --git a/frontend/javascripts/backend.js b/frontend/javascripts/backend.js
index c618cb9..5982f71 100644
--- a/frontend/javascripts/backend.js
+++ b/frontend/javascripts/backend.js
@@ -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'
+			};
 	}
 }
\ No newline at end of file
diff --git a/frontend/javascripts/frontend.js b/frontend/javascripts/frontend.js
index 3c57e66..08b19c9 100644
--- a/frontend/javascripts/frontend.js
+++ b/frontend/javascripts/frontend.js
@@ -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);
 }
 
diff --git a/frontend/javascripts/init.js b/frontend/javascripts/init.js
index 40913fd..a784a08 100644
--- a/frontend/javascripts/init.js
+++ b/frontend/javascripts/init.js
@@ -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();
diff --git a/frontend/javascripts/uuid.js b/frontend/javascripts/uuid.js
index 5b89d13..4f323d9 100644
--- a/frontend/javascripts/uuid.js
+++ b/frontend/javascripts/uuid.js
@@ -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
diff --git a/frontend/stylesheets/jquery.jqplot.min.css b/frontend/stylesheets/jquery.jqplot.min.css
deleted file mode 100644
index fdcc194..0000000
--- a/frontend/stylesheets/jquery.jqplot.min.css
+++ /dev/null
@@ -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;}
\ No newline at end of file
diff --git a/frontend/stylesheets/style.css b/frontend/stylesheets/style.css
index defdb27..21097fc 100644
--- a/frontend/stylesheets/style.css
+++ b/frontend/stylesheets/style.css
@@ -110,4 +110,8 @@ tbody tr td {
 
 .dialog {
 	display: none;
+}
+
+.ops {
+	text-align: right;
 }
\ No newline at end of file