Changeset 213 for trunk/web-app


Ignore:
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:
5 added
1 deleted
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/web-app/css/wizard.css

    r209 r213  
    22    display: block;
    33    padding-top: 10px;
     4}
     5
     6.wizard .info {
     7    display: block;
     8    border: 1px solid #006DBA;
     9    background-color: #EEE;
     10    padding: 10px;
     11    font-size: 10px;
     12    margin: 10px 0px 10px 0px;
     13}
     14
     15.wizard .info .title {
     16    color:#006DBA;
     17    font-size:14px;
     18    font-weight:normal;
     19    display: block;
     20    margin-bottom: 5px;
     21    padding-left: 20px;
     22    background: url(../images/icons/famfamfam/information.png) no-repeat center left;
    423}
    524
     
    7089}
    7190
    72 .wizard .error {
    73     display: block;
    74     padding-top: 10px;
    75 }
    76 
    7791.wizard .element {
    7892    display: block;
     
    88102.wizard .element .input {
    89103    display: inline;
     104}
     105
     106.wizard .error {
     107    background: url(../images/icons/famfamfam/exclamation.png) no-repeat 230px 4px;
    90108}
    91109
     
    184202}
    185203
    186 .wizard .table .row .error {
     204.wizard .table .row .warning {
    187205    color: red;
    188206    font-size: 8px;
     
    190208}
    191209
     210.wizard .table .row .error {
     211    background-color: #ffb0b7;
     212}
     213
    192214.wizard .table input, .wizard .table select {
    193215    border: 1px solid #8e908f;
     
    195217    padding: 2px 4px;
    196218    background-color: transparent;
     219    width: 100px;
     220}
     221.wizard .table .header input, .wizard .table .header select, .wizard .table .header button {
     222    border: 1px solid #8e908f;
     223    margin: 2px 0;
     224    padding: 2px 4px;
     225    background-color: #fff;
    197226    width: 100px;
    198227}
  • trunk/web-app/js/table-editor.js

    r209 r213  
    1818    columnIdentifier:   null,
    1919
     20    /**
     21     * initialize object
     22     * @param tableIdentifier
     23     * @param rowIdentifier
     24     * @param columnIdentifier
     25     */
    2026    init: function(tableIdentifier, rowIdentifier, columnIdentifier) {
    2127        // store parameters globally
     
    3541    },
    3642
     43    /**
     44     * initialize table
     45     * @param table
     46     */
    3747    initializeTable: function(table) {
    3848        var that = this;
     
    4959    },
    5060
     61    /**
     62     * attach handlers to the input elements in a table row
     63     * @param row
     64     */
    5165    attachColumnHandlers: function(row) {
    5266        var that = this;
     
    5569            var input = $(':input', $(this));
    5670            // does this column contain an input field
    57 console.log(input)
    5871            if (input) {
    5972                var type = $(input).attr('type');
    60 console.log(input)
    61 console.log('type: '+type)
    6273
    6374                switch (type) {
     
    7485                        $(input).bind('change', function() {
    7586                            that.updateSingleInputElements(input, columnNumber, 'select');
    76                         })
     87                        });
     88                        break;
     89                    case 'checkbox':
     90                        // checkbox
     91                        var columnNumber = count;
     92                        $(input).bind('click', function() {
     93                            console.log(columnNumber+': update checkboxes with value '+input)
     94                            that.updateSingleInputElements(input, columnNumber, 'input');
     95                        });
    7796                        break;
    7897                    case 'hidden':
     
    93112    },
    94113
     114    /**
     115     * update all input elements in a selected column
     116     * @param element
     117     * @param columnNumber
     118     * @param elementSelector
     119     */
    95120    updateSingleInputElements: function(element, columnNumber, elementSelector) {
    96121        var that = this;
     
    99124        var r = c.parent();
    100125        var t = r.parent();
    101 
    102         // get value(s)
    103         // TODO for multiple selects...
    104         var v = e.val();
     126        var v = this.getValue(e);
     127        // TODO for multiples...
    105128
    106129        // select all input elements in the selected rows
    107130        $('.ui-selected', t).each(function() {
    108131            $(that.columnIdentifier + ':eq(' + columnNumber + ') ' + elementSelector, $(this)).each(function() {
    109                 if ($(this).val() != v) {
    110                     $(this).val(v);
    111                     // TODO support multiple selects
     132                var me = $(this)
     133                var myVal = that.getValue(me);
     134                if (myVal != v) {
     135                    that.setValue(me,v);
    112136                }
    113137            })
     138        })
     139    },
    114140
    115         })
     141    /**
     142     * get the value /status of an input field based on it's type
     143     * @param input
     144     */
     145    getValue: function(input) {
     146        var i = $(input);
     147
     148        switch (i.attr('type')) {
     149            case 'checkbox':
     150                return i.attr('checked');
     151                break;
     152            default:
     153                return i.val();
     154                break;
     155        }
     156    },
     157
     158    /**
     159     * set the value / status of an input field based on it's type
     160     * @param input
     161     * @param value
     162     */
     163    setValue: function(input,value) {
     164        var i = $(input);
     165
     166        switch (i.attr('type')) {
     167            case 'checkbox':
     168                return i.attr('checked',value);
     169                break;
     170            default:
     171                return i.val(value);
     172                break;
     173        }
    116174    }
    117175}
  • trunk/web-app/js/wizard.js

    r209 r213  
    3737    attachDateTimePickers();
    3838
    39     // SUBJECT PAGE
     39    // table handlers
    4040    attachTableEvents();
    4141    resizeWizardTable();
    42     attachSubjectSlider();
     42    attachTableSlider();
    4343    new TableEditor().init('div.table','div.row','div.column');
    44    
    45     // GROUPING PAGE
    46     new Grouping().init('div.subjects', 'div.subject', 'div.groups', 'div.group','div.add','div.remove');
     44
     45    // accordeon(s)
     46    $("#accordion").accordion();
    4747}
    4848
     
    189189// slide the contents of the table if the content of
    190190// the table is wider than the table itself
    191 function attachSubjectSlider() {
     191function attachTableSlider() {
    192192    var slider = $("div#wizard").find('div.slider');
    193193    var header = $("div#wizard").find('div.header');
Note: See TracChangeset for help on using the changeset viewer.