Changeset 556 for trunk/web-app


Ignore:
Timestamp:
Jun 10, 2010, 4:45:53 PM (10 years ago)
Author:
roberth
Message:

Improved the TemplateEditor? again: templates can be created and removed and some checks were built in to ensure that the same fields in different templates point to the same TemplateField? object.

Location:
trunk/web-app
Files:
2 edited

Legend:

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

    r544 r556  
    1 #templateFields {
    2     list-style-type: none;
    3     margin: 0;
    4     padding: 0;
    5     width: 400px;
    6 }
    7 #templateFields li {
    8     margin: 0 5px 5px 5px; padding: 5px;
    9 }
    10 html>body #templateFields li {
    11     line-height: 16px; vertical-align: center;
    12 }
    13 .ui-state-highlight {
    14     height: 1.5em; line-height: 1.2em;
    15 }
    16 #templateFields .ui-icon {
    17     display: inline-block;
    18 }
     1/**
     2 * Formatting the template editor with two columns
     3 */
     4.templateEditorStep { float: left; padding: 10px 0px; margin: 0 10px; }
     5.templateEditorStep h3 { margin: 0 0 10px 0; padding-bottom: 10px; border-bottom: 1px solid #BBD; }
     6#step2_selectedFields p, #step3_availableFields p { height: 42px; }
    197
    20 #templateFields .empty { opacity: 0.6; padding: 5px 25px; }
     8#step1_template { width:340px; }
     9#step2_selectedFields { width: 340px; margin-right: 20px; }
     10#step3_availableFields { width: 340px; }
    2111
     12/**
     13 * Formatting the template list and the forms to add/edit them
     14 */
     15
     16#templates  { list-style-type: none; margin: 0; padding: 0; width: 330px; }
     17#templates li { margin: 0 5px 5px 5px; padding: 5px; color: #2779AA; }
     18html>body #templates li { line-height: 16px; vertical-align: center; }
     19
     20/* Butons within a list item */
     21.listButtons { display: block; float: right; }
     22.listButtons img { margin: 0 3px; cursor: pointer; }
     23.listButtons img.disabled { cursor: default; opacity: 0.3; }
     24
     25/**
     26 * Formatting of the template fields and the forms to edit/add them
     27 */
     28.templateFields { list-style-type: none;  margin: 0; padding: 0; width: 330px; }
     29.templateFields li { margin: 0 5px 3px 5px; padding: 3px 5px; }
     30html>body .templateFields li { line-height: 16px; vertical-align: center; }
     31.ui-state-highlight { height: 17px; }
     32.templateFields .ui-icon { display: inline-block; height: 13px; }
     33
     34.templateName { color: #2779AA; }
     35a.switch { font-size: small; color: #68BFEF; text-decoration: none; }
     36
     37/* Box to show a list is empty */
     38.templateFields .empty { opacity: 0.6; padding: 5px 25px; }
     39
     40/* The position where an item can be dropped in the available list will be red */
     41#availableTemplateFields .ui-state-highlight { background: #FFD6D6; border-color: #EAAEAE; }
     42
     43/* Form to edit or add a template field, but also for editing a template itself */
    2244.templateField_form { display: none; margin: 5px; padding-top: 8px; border-top: 1px solid #BBD; }
    2345.templateField_form .templateFieldButtons { margin-top: 8px; padding-top: 8px; border-top: 1px solid #BBD; }
    24 .templateField_form label { width: 100px; float: left; display: block; }
    25 .templateField_form textarea {width: 240px; height: 100px;  }
     46.templateField_form label { width: 80px; float: left; display: block; }
     47.templateField_form textarea {width: 145px; height: 100px;  }
     48.templateField_form input[type=text],
     49.templateField_form select {width: 145px; }
    2650
     51/* Add new form */
    2752#addNew {
    28         width: 388px;
     53        width: 318px;
    2954        line-height: 16px;
    3055        background-color: #EBF9D7;
     
    4065#addNew a {
    4166        display: block;
    42         padding: 7px 25px;
     67        padding: 7px 7px;
    4368        cursor: pointer;
    4469        color:#79AA27;
  • trunk/web-app/js/templateEditor.js

    r544 r556  
    1515var formOpened = false;
    1616
     17/*************************************
     18 *
     19 * Methods for the index page with templates on it
     20 *
     21 *************************************/
     22
     23/**
     24 * Sends the user to the page where the fields of this template can be edited
     25 */
     26function editFields( id ) {
     27        $( '#templateSelect' ).val( id );
     28        $( '#templateChoice' ).submit();
     29}
     30
     31/**
     32 * Shows the form to edit template properties
     33 */
     34function editTemplate( id ) {
     35    // Show the form is this item is not disabled
     36    if( !formOpened ) {
     37        formOpened = true;
     38
     39                // Show the form
     40                $( '#template_' + id + '_form' ).show();
     41        }
     42}
     43
     44/**
     45 * Hides the form to edit a template
     46 */
     47function hideTemplateForm( id ) {
     48    $( '#template_' + id + '_form' ).hide();
     49
     50    formOpened = false;
     51}
     52
     53/**
     54 * Creates a new template using AJAX
     55 */
     56function createTemplate( id ) {
     57    var formEl = $( '#template_' + id + '_form' );
     58
     59    // Update the field
     60    $.ajax({
     61        url:        baseUrl + '/templateEditor/' + formEl.attr( 'action' ),
     62        data:       formEl.serialize(),
     63                dataType:   'json',
     64        type:       "POST",
     65        success:    function(data, textStatus, request) {
     66            hideTemplateForm( id );
     67            addTemplateListItem( data.id, data.html );
     68        },
     69        error:      function( request ) {
     70            alert( "Could not create template: " + request.responseText );
     71        }
     72    });
     73}
     74
     75/**
     76 * Updates the properties of a template using AJAX
     77 */
     78function updateTemplate( id ) {
     79    var formEl = $( '#template_' + id + '_form' );
     80
     81    // Update the field
     82    $.ajax({
     83        url:        baseUrl + '/templateEditor/' + formEl.attr( 'action' ),
     84                dataType: 'json',
     85        data:       formEl.serialize(),
     86        type:       "POST",
     87        success:    function(data, textStatus, request) {
     88            hideTemplateForm( id );
     89            updateTemplateListItem( id, data.html );
     90        },
     91        error:      function( request ) {
     92            alert( "Could not update template: " + request.responseText );
     93        }
     94    });
     95}
     96
     97/**
     98 * Deletes a template field using AJAX
     99 */
     100function deleteTemplate( id ) {
     101    // Update the field
     102    $.ajax({
     103        url:        baseUrl + '/templateEditor/deleteTemplate',
     104        data:       'template=' + id,
     105        type:       "POST",
     106        success:    function(data, textStatus, request) {
     107                        // Remove the list item
     108                        deleteTemplateListItem( id );
     109
     110                        showHideEmpty( '#templates' );
     111        },
     112        error:      function( request ) {
     113            alert( "Could not delete template: " + request.responseText );
     114        }
     115    });
     116
     117        return true;
     118}
     119
     120// Adds a new listitem when a field has been added
     121function addTemplateListItem( id, newHTML ) {
     122        // Create a new listitem
     123        var li = $( '<li></li>' );
     124        li.attr( 'id', 'template_' + id );
     125        li.addClass( "ui-state-default" );
     126
     127        // Insert the right HTML
     128        li.html( newHTML );
     129
     130        // Append the listitem to the list
     131        $( '#templates li:last').after( li );
     132
     133        // Hide the 'empty' listitem, if needed
     134        showHideEmpty( '#templates' );
     135}
     136
     137// Updates the contents of the listitem when something has changed
     138function updateTemplateListItem( id, newHTML ) {
     139        var li = $( '#template_' + id );
     140        li.html( newHTML );
     141}
     142
     143// Removes a listitem when the template field has been deleted
     144function deleteTemplateListItem( id ) {
     145        var li = $( '#template_' + id );
     146        li.remove();
     147
     148        // Show the 'empty' listitem if the last item is deleted
     149        showHideEmpty( '#templates' );
     150}
     151
     152/*************************************
     153 *
     154 * Methods for the template page with templatefields on it
     155 *
     156 *************************************/
     157
    17158/**
    18159 * Is called on double click on a listitem
     
    34175
    35176                // Disable all other listitems
    36                 $( '#templateFields li:not(#' + list_item_id + ')').addClass( 'ui-state-disabled' );
     177                $( '#availableTemplateFields li:not(#' + list_item_id + ')').addClass( 'ui-state-disabled' );
    37178
    38179                if( list_item_id != 'templateField_new' ) {
     
    50191
    51192    // Enable all other listitems
    52     $( '#templateFields li:not(#templateField_' + id + ')').removeClass( 'ui-state-disabled' );
     193    $( '#availableTemplateFields li:not(#templateField_' + id + ')').removeClass( 'ui-state-disabled' );
    53194        $( '#addNew').removeClass( 'ui-state-disabled' );
    54195
    55196    formOpened = false;
     197}
     198
     199
     200
     201/**
     202 * Adds a new template field using AJAX
     203 */
     204function createTemplateField( id ) {
     205    var formEl = $( '#templateField_' + id + '_form' );
     206        var templateId = $('#templateSelect').val();
     207
     208    // Update the field
     209    $.ajax({
     210        url:        baseUrl + '/templateEditor/' + formEl.attr( 'action' ),
     211        data:       "template=" + templateId + "&" + formEl.serialize(),
     212                dataType: 'json',
     213        type:       "POST",
     214        success:    function(data, textStatus, request) {
     215            hideTemplateFieldForm( id );
     216            addFieldListItem( data.id, data.html );
     217        },
     218        error:       function( request ) {
     219            alert( "Could not add template field: " + request.responseText );
     220        }
     221    });
     222}
     223
     224/**
     225 * Updates the properties of a template field using AJAX
     226 */
     227function updateTemplateField( id ) {
     228    var formEl = $( '#templateField_' + id + '_form' );
     229
     230    // Update the field
     231    $.ajax({
     232        url:        baseUrl + '/templateEditor/' + formEl.attr( 'action' ),
     233                dataType: 'json',
     234        data:       formEl.serialize(),
     235        type:       "POST",
     236        success:    function(data, textStatus, request) {
     237            hideTemplateFieldForm( id );
     238            updateFieldListItem( id, data.html );
     239        },
     240        error:      function( request ) {
     241            alert( "Could not update template field: " + request.responseText );
     242        }
     243    });
    56244}
    57245
     
    61249 */
    62250function updateTemplateFieldPosition( event, ui ) {
     251        // If the item is dragged to the 'availableTemplateFIelds list, we should not 'move' it
     252        // Otherwise, when the item is dragged onto the selectedTemplateFields, but the 'sender' is availableTemplateFields,
     253        // the item is added, and does not need to be moved
     254        if(
     255                ui.item.parent().attr( 'id' ) == 'availableTemplateFields' ||
     256                ui.item.parent().attr( 'id' ) == 'selectedTemplateFields' && ui.sender != null && ui.sender.attr( 'id' ) == 'availableTemplateFields'
     257        ) {
     258                // Return true, otherwise the move operation is canceled by jquery
     259                return true;
     260        }
    63261    // Find the new position of the element in the list
    64262    // http://stackoverflow.com/questions/2979643/jquery-ui-sortable-position
    65     var newposition = ui.item.index();
     263    //
     264    // Because there is also a hidden 'empty template' list item in the list,
     265    // the number is decreased by 1
     266    var newposition = ui.item.index() - 1;
    66267
    67268    // Find the ID of the templateField and template
     
    71272
    72273    // Create a URL to call and call it
    73     var url = baseUrl + '/templateEditor/move';
     274    var url = baseUrl + '/templateEditor/moveField';
    74275
    75276    // Disable sorting until this move has been saved (in order to prevent collisions
     
    83284                type: 'POST',
    84285        success: function(data, textStatus, request) {
    85             updateListItem( templateFieldId, data.html );
     286            updateFieldListItem( templateFieldId, data.html );
    86287            $( '#templateFields' ).sortable( 'enable' );
    87288        },
    88         error: function() {
    89             alert( "Could not move template field" );
    90         }
    91     });
    92 }
    93 
    94 /**
    95  * Adds a new template field using AJAX
    96  */
    97 function addTemplateField( id ) {
    98     var formEl = $( '#templateField_' + id + '_form' );
     289        error: function( request ) {
     290            alert( "Could not move template field: " + request.responseText );
     291        }
     292    });
     293}
     294
     295/**
     296 * Adds a new template field to the template using AJAX
     297 */
     298function addTemplateFieldEvent( event, ui ) {
     299    // Find the new position of the element in the list
     300    // http://stackoverflow.com/questions/2979643/jquery-ui-sortable-position
     301    //
     302    // Because there is also a hidden 'empty template' list item in the list,
     303    // the number is decreased by 1
     304    var newposition = ui.item.index() - 1;
     305
     306        var item_id = ui.item.context.id;
     307    var id = item_id.substring( item_id.lastIndexOf( '_' ) + 1 );
     308
     309        return addTemplateField( id, newposition );
     310}
     311
     312/**
     313 * Adds a new template field to the template using AJAX
     314 */
     315function addTemplateField( id, newposition ) {
     316        if( newposition == null ) {
     317                newposition = -1;
     318        }
    99319        var templateId = $('#templateSelect').val();
    100320
    101321    // Update the field
    102322    $.ajax({
    103         url:        baseUrl + '/templateEditor/' + formEl.attr( 'action' ),
    104         data:       "template=" + templateId + "&" + formEl.serialize(),
    105                 dataType: 'json',
    106         type:       "POST",
    107         success:    function(data, textStatus, request) {
    108             hideTemplateFieldForm( id );
    109             addListItem( data.id, data.html );
    110         },
    111         error:      function() {
    112             alert( "Could not add template field" );
    113         }
    114     });
    115 }
    116 
    117 /**
    118  * Updates the properties of a template field using AJAX
    119  */
    120 function updateTemplateField( id ) {
    121     var formEl = $( '#templateField_' + id + '_form' );
    122 
    123     // Update the field
    124     $.ajax({
    125         url:        baseUrl + '/templateEditor/' + formEl.attr( 'action' ),
    126                 dataType: 'json',
    127         data:       formEl.serialize(),
    128         type:       "POST",
    129         success:    function(data, textStatus, request) {
    130             hideTemplateFieldForm( id );
    131             updateListItem( id, data.html );
    132         },
    133         error:      function() {
    134             alert( "Could not update template field" );
    135         }
    136     });
     323        url:        baseUrl + '/templateEditor/addField',
     324        data:       "template=" + templateId + "&templateField=" + id + "&position=" + newposition,
     325                dataType:       'json',
     326        type:       "POST",
     327        success:    function(data, textStatus, request) {
     328                        // Put the new HTML into the list item
     329                        updateFieldListItem( id, data.html );
     330
     331                        showHideEmpty( '#selectedTemplateFields' );
     332                        showHideEmpty( '#availableTemplateFields' );
     333        },
     334        error:      function( request ) {
     335            alert( "Could not add template field: " + request.responseText );
     336        }
     337    });
     338}
     339
     340
     341/**
     342 * Deletes a template field from a template  using AJAX
     343 */
     344function removeTemplateFieldEvent( event, ui ) {
     345    var item_id = ui.item.context.id;
     346    var id = item_id.substring( item_id.lastIndexOf( '_' ) + 1 );
     347
     348        // The field should only be removed when the study is not in use
     349        // If field is used, the li has class 'inUse'
     350        if( !ui.item.hasClass( 'inUse' ) ) {
     351                return removeTemplateField( id );
     352        } else {
     353                alert( "Field can not be removed, because the template is in use." );
     354                return false;
     355        }
     356}
     357
     358/**
     359 * Removes a template field from a template using AJAX
     360 */
     361function removeTemplateField( id ) {
     362        var templateId = $('#templateSelect').val();
     363
     364    // Update the field
     365    $.ajax({
     366        url:        baseUrl + '/templateEditor/removeField',
     367        data:       'template=' + templateId + '&templateField=' + id,
     368        type:       "POST",
     369        success:    function(data, textStatus, request) {
     370                        // Put the new HTML into the list item
     371                        updateFieldListItem( id, data.html );
     372
     373                        showHideEmpty( '#selectedTemplateFields' );
     374                        showHideEmpty( '#availableTemplateFields' );
     375
     376        },
     377        error:      function( request ) {
     378            alert( "Could not delete template field: " + request.responseText );
     379        }
     380    });
     381
     382        return true;
    137383}
    138384
     
    141387 */
    142388function deleteTemplateField( id ) {
    143         var templateId = $('#templateSelect').val();
    144 
    145     // Update the field
    146     $.ajax({
    147         url:        baseUrl + '/templateEditor/delete',
    148         data:       'template=' + templateId + '&templateField=' + id,
    149         type:       "POST",
    150         success:    function(data, textStatus, request) {
    151             hideTemplateFieldForm( id );
    152             deleteListItem( id );
    153         },
    154         error:      function() {
    155             alert( "Could not delete template field" );
    156         }
    157     });
    158 }
    159 
     389    // Delete the field
     390    $.ajax({
     391        url:        baseUrl + '/templateEditor/deleteField',
     392        data:       'templateField=' + id,
     393        type:       "POST",
     394        success:    function(data, textStatus, request) {
     395                        // Put the new HTML into the list item
     396                        deleteFieldListItem( id );
     397
     398                        showHideEmpty( '#availableTemplateFields' );
     399        },
     400        error:      function( request ) {
     401            alert( "Could not delete template field: " + request.responseText );
     402        }
     403    });
     404
     405        return true;
     406}
    160407
    161408// Adds a new listitem when a field has been added
    162 function addListItem( id, newHTML ) {
     409function addFieldListItem( id, newHTML ) {
    163410        // Create a new listitem
    164411        var li = $( '<li></li>' );
     
    170417
    171418        // Append the listitem to the list
    172         $( '#templateFields li:last').after( li );
     419        $( '#availableTemplateFields li:last').after( li );
    173420
    174421        // Hide the 'empty' listitem
    175         $( '#templateFields .empty' ).hide();
     422        showHideEmpty( '#availableTemplateFields' );
    176423}
    177424
    178425// Updates the contents of the listitem when something has changed
    179 function updateListItem( id, newHTML ) {
     426function updateFieldListItem( id, newHTML ) {
    180427        var li = $( '#templateField_' + id );
    181428        li.html( newHTML );
     
    183430
    184431// Removes a listitem when the template field has been deleted
    185 function deleteListItem( id ) {
     432function deleteFieldListItem( id ) {
    186433        var li = $( '#templateField_' + id );
    187434        li.remove();
    188435
    189436        // Show the 'empty' listitem if the last item is deleted
    190         if( $( '#templateFields li:not(.empty)' ).length == 0 ) {
    191                 $( '#templateFields .empty' ).show();
    192         }
    193 
    194 }
     437        showHideEmpty( '#availableTemplateFields' );
     438}
     439
     440// Moves a listitem from one list to another
     441function moveFieldListItem( id, toSelector ) {
     442        var li = $( '#templateField_' + id );
     443        li.remove();
     444
     445        $( toSelector ).append( li );
     446}
     447
     448/**
     449 * Shows or hides the list item, indicating that a list is empty
     450 */
     451function showHideEmpty( selector ) {
     452        // Show the 'empty' listitem if the last item is deleted
     453        if( $( selector + ' li:not(.empty)' ).length == 0 ) {
     454                $( selector + ' .empty' ).show();
     455        } else {
     456                $( selector + ' .empty' ).hide();
     457        }
     458}
Note: See TracChangeset for help on using the changeset viewer.