From 9ea7d8e37f4da847098e6156a86a3c377cca66d5 Mon Sep 17 00:00:00 2001 From: f10 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 @@ + + + @@ -71,6 +86,7 @@ +
Information:
@@ -137,8 +153,20 @@ - + +
+

All form fields are required.

+ +
+ +
+ + +
+
+
+
@@ -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('json'); // load json data @@ -216,10 +339,7 @@ $(document).ready(function() { getData(); }); - // start autoReload timer - window.setInterval("autoReload()",5000); -}); - +} function autoReload() {