Changeset 213 for trunk/web-app

Timestamp:

Feb 25, 2010, 4:18:22 PM (11 years ago)

Author:

duh

Message:

• restructured wizard
• added information boxes
• improved error feedback (highlighted error fields)
• added confirmation page
• several smaller bugfixes and improvements

Location:

trunk/web-app

Files:

• css/wizard.css (modified) (6 diffs)
• images/icons/famfamfam/add.png (added)
• images/icons/famfamfam/exclamation.png (added)
• images/icons/famfamfam/eye.png (added)
• images/icons/famfamfam/information.png (added)
• js/grouping.js (deleted)
• js/table-editor.js (modified) (7 diffs)
• js/timeline.js (added)
• js/wizard.js (modified) (2 diffs)

trunk/web-app/css/wizard.css

@@ -2 +2 @@
     display: block;
     padding-top: 10px;
+}
+
+.wizard .info {
+    display: block;
+    border: 1px solid #006DBA;
+    background-color: #EEE;
+    padding: 10px;
+    font-size: 10px;
+    margin: 10px 0px 10px 0px;
+}
+
+.wizard .info .title {
+    color:#006DBA;
+    font-size:14px;
+    font-weight:normal;
+    display: block;
+    margin-bottom: 5px;
+    padding-left: 20px;
+    background: url(../images/icons/famfamfam/information.png) no-repeat center left;
 }
 
@@ -70 +89 @@
 }
 
-.wizard .error {
-    display: block;
-    padding-top: 10px;
-}
-
 .wizard .element {
     display: block;
@@ -88 +102 @@
 .wizard .element .input {
     display: inline;
+}
+
+.wizard .error {
+    background: url(../images/icons/famfamfam/exclamation.png) no-repeat 230px 4px;
 }
 
@@ -184 +202 @@
 }
 
-.wizard .table .row .error {
+.wizard .table .row .warning {
     color: red;
     font-size: 8px;
@@ -190 +208 @@
 }
 
+.wizard .table .row .error {
+    background-color: #ffb0b7;
+}
+
 .wizard .table input, .wizard .table select {
     border: 1px solid #8e908f;
@@ -195 +217 @@
     padding: 2px 4px;
     background-color: transparent;
+    width: 100px;
+}
+.wizard .table .header input, .wizard .table .header select, .wizard .table .header button {
+    border: 1px solid #8e908f;
+    margin: 2px 0;
+    padding: 2px 4px;
+    background-color: #fff;
     width: 100px;
 }

trunk/web-app/js/table-editor.js

@@ -18 +18 @@
     columnIdentifier:   null,
 
+    /**
+     * initialize object
+     * @param tableIdentifier
+     * @param rowIdentifier
+     * @param columnIdentifier
+     */
     init: function(tableIdentifier, rowIdentifier, columnIdentifier) {
         // store parameters globally
@@ -35 +41 @@
     },
 
+    /**
+     * initialize table
+     * @param table
+     */
     initializeTable: function(table) {
         var that = this;
@@ -49 +59 @@
     },
 
+    /**
+     * attach handlers to the input elements in a table row
+     * @param row
+     */
     attachColumnHandlers: function(row) {
         var that = this;
@@ -55 +69 @@
             var input = $(':input', $(this));
             // does this column contain an input field
-console.log(input)
             if (input) {
                 var type = $(input).attr('type');
-console.log(input)
-console.log('type: '+type)
 
                 switch (type) {
@@ -74 +85 @@
                         $(input).bind('change', function() {
                             that.updateSingleInputElements(input, columnNumber, 'select');
-                        })
+                        });
+                        break;
+                    case 'checkbox':
+                        // checkbox
+                        var columnNumber = count;
+                        $(input).bind('click', function() {
+                            console.log(columnNumber+': update checkboxes with value '+input)
+                            that.updateSingleInputElements(input, columnNumber, 'input');
+                        });
                         break;
                     case 'hidden':
@@ -93 +112 @@
     },
 
+    /**
+     * update all input elements in a selected column
+     * @param element
+     * @param columnNumber
+     * @param elementSelector
+     */
     updateSingleInputElements: function(element, columnNumber, elementSelector) {
         var that = this;
@@ -99 +124 @@
         var r = c.parent();
         var t = r.parent();
-
-        // get value(s)
-        // TODO for multiple selects...
-        var v = e.val();
+        var v = this.getValue(e);
+        // TODO for multiples...
 
         // select all input elements in the selected rows
         $('.ui-selected', t).each(function() {
             $(that.columnIdentifier + ':eq(' + columnNumber + ') ' + elementSelector, $(this)).each(function() {
-                if ($(this).val() != v) {
-                    $(this).val(v);
-                    // TODO support multiple selects
+                var me = $(this)
+                var myVal = that.getValue(me);
+                if (myVal != v) {
+                    that.setValue(me,v);
                 }
             })
+        })
+    },
 
-        })
+    /**
+     * get the value /status of an input field based on it's type
+     * @param input
+     */
+    getValue: function(input) {
+        var i = $(input);
+
+        switch (i.attr('type')) {
+            case 'checkbox':
+                return i.attr('checked');
+                break;
+            default:
+                return i.val();
+                break;
+        }
+    },
+
+    /**
+     * set the value / status of an input field based on it's type
+     * @param input
+     * @param value
+     */
+    setValue: function(input,value) {
+        var i = $(input);
+
+        switch (i.attr('type')) {
+            case 'checkbox':
+                return i.attr('checked',value);
+                break;
+            default:
+                return i.val(value);
+                break;
+        }
     }
 }

trunk/web-app/js/wizard.js

@@ -37 +37 @@
     attachDateTimePickers();
 
-    // SUBJECT PAGE
+    // table handlers
     attachTableEvents();
     resizeWizardTable();
-    attachSubjectSlider();
+    attachTableSlider();
     new TableEditor().init('div.table','div.row','div.column');
-    
-    // GROUPING PAGE
-    new Grouping().init('div.subjects', 'div.subject', 'div.groups', 'div.group','div.add','div.remove');
+
+    // accordeon(s)
+    $("#accordion").accordion();
 }
 
@@ -189 +189 @@
 // slide the contents of the table if the content of
 // the table is wider than the table itself
-function attachSubjectSlider() {
+function attachTableSlider() {
     var slider = $("div#wizard").find('div.slider');
     var header = $("div#wizard").find('div.header');