From 9ea7d8e37f4da847098e6156a86a3c377cca66d5 Mon Sep 17 00:00:00 2001
From: f10 <fz@f10-home.de>
Date: Sat, 12 Jun 2010 12:18:37 +0200
Subject: [PATCH] frontend: first step to manage channels/groups with jQuery-UI
 and ajax

---
 frontend/index.html | 130 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 125 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 12b13f4..25f3fe6 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -14,10 +14,13 @@
 	<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
 	<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.barRenderer.min.js"></script>
 	<script type="text/javascript" src="javascript/jqplot/plugins/jqplot.highlighter.min.js"></script>
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
 	
 	<script type="text/javascript" src="javascript/smartmeter.js"></script>
 	
 	<link rel="stylesheet" type="text/css" href="javascript/jqplot/jquery.jqplot.css">
+	<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css" rel="Stylesheet" />	
+
 	
 	<style type="text/css">
 	a {
@@ -55,6 +58,18 @@
 		top:0;
 	}
 	
+	/* styles for jQuery-UI */
+	
+	input.text { margin-bottom:12px; width:95%; padding: .4em; }
+		fieldset { padding:0; border:0; margin-top:25px; }
+		h1 { font-size: 1.2em; margin: .6em 0; }
+		div#users-contain { width: 350px; margin: 20px 0; }
+		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
+		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
+		.ui-dialog .ui-state-error { padding: .3em; }
+		.validateTips { border: 1px solid transparent; padding: 0.3em; }
+
+	
 	</style>
 </head>
 
@@ -71,6 +86,7 @@
 					<td></td>
 				</tr>
 			</table>
+			<button id="addChannel">add channel</button>
 			<br>
 			
 			<b>Information:</b><br>
@@ -137,8 +153,20 @@
 		</div>
 	</div>
 </div>
-
 </form>
+
+<div id="dialog-form" title="add new channel">
+	<p class="validateTips">All form fields are required.</p>
+
+	<form>
+
+	<fieldset>
+		<label for="ucid">ucid</label>
+		<input type="text" name="ucid" id="ucid" class="text ui-widget-content ui-corner-all" />
+	</fieldset>
+	</form>
+</div>
+
 <div id="json"></div>
 <div id="debug"></div>
 
@@ -199,6 +227,101 @@ $(document).ready(function() {
 	}
 	
 	// load channel list
+	loadChannelList();
+	
+	
+	// start autoReload timer
+	window.setInterval("autoReload()",5000);
+	
+	
+	// code for adding a channel
+	var 	ucid = $("#ucid"),
+		allFields = $([]).add(ucid),
+		tips = $(".validateTips");
+
+	
+	function updateTips(t) {
+		tips
+			.text(t)
+			.addClass('ui-state-highlight');
+		setTimeout(function() {
+			tips.removeClass('ui-state-highlight', 1500);
+		}, 500);
+	}
+
+	
+	function checkLength(o,n,min,max) {
+		
+		if ( o.val().length > max || o.val().length < min ) {
+			o.addClass('ui-state-error');
+			updateTips("Length of " + n + " must be between "+min+" and "+max+".");
+			return false;
+		} else {
+			return true;
+		}
+	}
+	
+	function checkRegexp(o,regexp,n) {
+		
+		if ( !( regexp.test( o.val() ) ) ) {
+			o.addClass('ui-state-error');
+			updateTips(n);
+			return false;
+		} else {
+			return true;
+		}
+	}
+
+	
+	$("#dialog-form").dialog({
+			autoOpen: false,
+			height: 300,
+			width: 350,
+			modal: true,
+			buttons: {
+				'add channel': function() {
+					var bValid = true;
+					allFields.removeClass('ui-state-error');
+
+					bValid = bValid && checkLength(ucid,"UCID",36,36);
+
+					//bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
+					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+					
+					if (bValid) {
+						
+						$(this).dialog('close');
+						
+						// ajax command to add the channel
+						//$.getJSON("../backend/index.php",{uuid: myUUID, controller: 'channel', action: 'add', format: 'json'}, function(j){});
+						
+						// reload the channel list
+						loadChannelList();
+					}
+				},
+				Cancel: function() {
+					$(this).dialog('close');
+				}
+			},
+			close: function() {
+				allFields.val('').removeClass('ui-state-error');
+			}
+		});
+		
+		
+		
+	$('#addChannel')
+		.button()
+		.click(function() {
+			$('#dialog-form').dialog('open');
+			return false;
+		});
+
+});
+
+
+function loadChannelList() {
+	
 	
 	$('#debug').append('<a href="../backend/index.php?uuid='+myUUID+'&controller=channel&action=get&format=json">json</a>');
 	// load json data
@@ -216,10 +339,7 @@ $(document).ready(function() {
 		getData();
 	});
 	
-	// start autoReload timer
-	window.setInterval("autoReload()",5000);
-});
-
+}
 
 function autoReload() {