Changeset 558 for trunk/web-app


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

Improved template editor , stringlists and ontologyfields can be edited and extra checks are built in.

Location:
trunk/web-app
Files:
2 edited

Legend:

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

    r556 r558  
    3838.templateFields .empty { opacity: 0.6; padding: 5px 25px; }
    3939
     40/* Domain fields should be yellow */
     41.templateFields .domain { background: #FFFFEA; border-color: #EAEAAE; padding-left: 23px; color: #8F8408; }
     42
    4043/* The position where an item can be dropped in the available list will be red */
    4144#availableTemplateFields .ui-state-highlight { background: #FFD6D6; border-color: #EAAEAE; }
     
    4548.templateField_form .templateFieldButtons { margin-top: 8px; padding-top: 8px; border-top: 1px solid #BBD; }
    4649.templateField_form label { width: 80px; float: left; display: block; }
    47 .templateField_form textarea {width: 145px; height: 100px;  }
     50.templateField_form textarea {width: 205px; height: 100px;  }
    4851.templateField_form input[type=text],
    49 .templateField_form select {width: 145px; }
     52.templateField_form select {width: 205px; }
     53
     54#step3_availableFields .templateField_form p.noEditsPossible {height: auto; margin: 4px 0; padding: 4px; background: #FFD6D6; border: 1px solid #EAAEAE; color: #660000; }
     55.templateField_form .extra { display: none; }
     56
    5057
    5158/* Add new form */
     
    7481        margin-left: 10px; margin-right: 10px;
    7582}
     83
     84/* Add Ontology dialog */
     85#addOntology { list-style-type: none; padding-left: 0; }
     86#addOntology li { list-style-type: none; margin: 8px 0; padding-left: 20px; }
     87#addOntology li input.text { margin-top: 5px; }
     88#addOntology li .check { float: left; margin-left: -15px; margin-top: 2px; }
     89
  • trunk/web-app/js/templateEditor.js

    r556 r558  
    1313 */
    1414
     15// Flag to keep track of whether a form is opened or not
    1516var formOpened = false;
     17
     18// Contains information about the original position of an item, when it is being dragged
     19var currentSort = null;
    1620
    1721/*************************************
     
    121125function addTemplateListItem( id, newHTML ) {
    122126        // 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 );
     127        var li = $( newHTML );
    129128
    130129        // Append the listitem to the list
     
    138137function updateTemplateListItem( id, newHTML ) {
    139138        var li = $( '#template_' + id );
    140         li.html( newHTML );
     139        li.replaceWith( newHTML );
    141140}
    142141
     
    197196}
    198197
    199 
    200 
    201198/**
    202199 * Adds a new template field using AJAX
     
    242239        }
    243240    });
     241}
     242
     243/**
     244 * Deletes a template field using AJAX
     245 */
     246function deleteTemplateField( id ) {
     247    // Delete the field
     248    $.ajax({
     249        url:        baseUrl + '/templateEditor/deleteField',
     250        data:       'templateField=' + id,
     251        type:       "POST",
     252        success:    function(data, textStatus, request) {
     253                        // Put the new HTML into the list item
     254                        deleteFieldListItem( id );
     255
     256                        showHideEmpty( '#availableTemplateFields' );
     257        },
     258        error:      function( request ) {
     259            alert( "Could not delete template field: " + request.responseText );
     260        }
     261    });
     262
     263        return true;
    244264}
    245265
     
    288308        },
    289309        error: function( request ) {
    290             alert( "Could not move template field: " + request.responseText );
     310                        undoMove();
     311                        alert( "Could not move template field: " + request.responseText );
    291312        }
    292313    });
     
    313334 * Adds a new template field to the template using AJAX
    314335 */
    315 function addTemplateField( id, newposition ) {
     336function addTemplateField( id, newposition, moveAfterwards ) {
    316337        if( newposition == null ) {
    317338                newposition = -1;
    318339        }
     340
     341        if( moveAfterwards == null ) {
     342                moveAfterwards = false;
     343        }
     344
    319345        var templateId = $('#templateSelect').val();
    320346
     
    329355                        updateFieldListItem( id, data.html );
    330356
     357                        if( moveAfterwards ) {
     358                                moveFieldListItem( id, '#selectedTemplateFields' );
     359                        }
     360
    331361                        showHideEmpty( '#selectedTemplateFields' );
    332362                        showHideEmpty( '#availableTemplateFields' );
    333363        },
    334364        error:      function( request ) {
     365                        // Send the item back (if it has been moved )
     366                        if( !moveAfterwards ) {
     367                                undoMove();
     368                        }
     369
    335370            alert( "Could not add template field: " + request.responseText );
    336371        }
    337372    });
     373
     374        return true;
    338375}
    339376
     
    346383    var id = item_id.substring( item_id.lastIndexOf( '_' ) + 1 );
    347384
    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         }
     385        return removeTemplateField( id );
    356386}
    357387
     
    359389 * Removes a template field from a template using AJAX
    360390 */
    361 function removeTemplateField( id ) {
     391function removeTemplateField( id, moveAfterwards ) {
     392
     393        if( moveAfterwards == null ) {
     394                moveAfterwards = false;
     395        }
     396
    362397        var templateId = $('#templateSelect').val();
    363398
     
    371406                        updateFieldListItem( id, data.html );
    372407
     408                        if( moveAfterwards ) {
     409                                moveFieldListItem( id, '#availableTemplateFields' );
     410                        }
     411
    373412                        showHideEmpty( '#selectedTemplateFields' );
    374413                        showHideEmpty( '#availableTemplateFields' );
     
    376415        },
    377416        error:      function( request ) {
    378             alert( "Could not delete template field: " + request.responseText );
     417                        if( !moveAfterwards ) {
     418                                undoMove();
     419                        }
     420
     421                        alert( "Could not delete template field: " + request.responseText );
    379422        }
    380423    });
     
    383426}
    384427
    385 /**
    386  * Deletes a template field using AJAX
    387  */
    388 function deleteTemplateField( id ) {
    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 }
    407428
    408429// Adds a new listitem when a field has been added
    409430function addFieldListItem( id, newHTML ) {
    410431        // Create a new listitem
    411         var li = $( '<li></li>' );
    412         li.attr( 'id', 'templateField_' + id );
    413         li.addClass( "ui-state-default" );
    414        
    415         // Insert the right HTML
    416         li.html( newHTML );
     432        var li = $( newHTML );
    417433
    418434        // Append the listitem to the list
     
    426442function updateFieldListItem( id, newHTML ) {
    427443        var li = $( '#templateField_' + id );
    428         li.html( newHTML );
     444        li.replaceWith( newHTML );
    429445}
    430446
     
    445461        $( toSelector ).append( li );
    446462}
     463
     464/**
     465 * Saves the original position of a sortable LI, in order to be able to undo the move event later on
     466 * This function is called on start event of the sortable lists
     467 */
     468function savePosition( event, ui ) {
     469        currentSort = {
     470                id:   ui.item.attr( 'id' ),
     471                parent: ui.item.context.parentNode,
     472                previous: ui.item.context.previousElementSibling,
     473                index: ui.item.index()
     474        }
     475}
     476
     477/**
     478 * Undoes the move of an item, when an ajax call has failed
     479 */
     480function undoMove() {
     481        if( currentSort ) {
     482                var item = $( '#' + currentSort.id );
     483                item.remove();
     484                item.insertAfter( currentSort.previous );
     485        }
     486}
     487
     488/**
     489 * Shows and hides the right 'extra' divs in the field form.
     490 *
     491 * These fields show extra input fields for stringlist and ontology fields
     492 *
     493 * @param       id      ID of the templateField
     494 */
     495function showExtraFields( id ) {
     496        // Find the current selected fieldtype
     497        var fieldType = $( '#templateField_' + id + '_form select[name=type]' ).val();
     498
     499        // Hide all extra forms, and show the right one
     500        $( '#templateField_' + id + '_form .extra' ).hide();
     501        $( '#templateField_' + id + '_form .' + fieldType.toLowerCase() + '_options' ).show();
     502}
     503
    447504
    448505/**
     
    457514        }
    458515}
     516
     517/************************************
     518 *
     519 * Functions for selecting ontologies
     520 *
     521 */
     522
     523function openOntologyDialog() {
     524        $('#ontologyDialog').dialog('open');
     525}
     526
     527function addOntology() {
     528        // Add ontology using AJAX
     529        var url; var data;
     530
     531    // Create a URL to call and call it
     532        if( $( '#ncboID' ).val() ) {
     533            url = baseUrl + '/templateEditor/addOntologyById';
     534                data = 'ncboID=' + $( '#ncboID' ).val();
     535                $( '#ncbo_spinner' ).show();
     536        } else {
     537            url = baseUrl + '/templateEditor/addOntologyByTerm';
     538                data = 'termID=' + $( '#termID' ).val();
     539                $( '#term_spinner' ).show();
     540        }
     541
     542    // Move the item
     543    $.ajax({
     544        url: url,
     545                data: data,
     546                dataType: 'json',
     547                type: 'POST',
     548        success: function(data, textStatus, request) {
     549                        updateOntologyLists( data )
     550                        $( '#term_spinner' ).hide();
     551                        $( '#ncbo_spinner' ).hide();
     552
     553                        $('#ontologyDialog').dialog('close');
     554        },
     555        error: function( request ) {
     556                        alert( "Could not add ontology: " + request.responseText );
     557                        $( '#term_spinner' ).hide();
     558                        $( '#ncbo_spinner' ).hide();
     559                        $('#ontologyDialog').dialog('close');
     560        }
     561    });
     562}
     563
     564function updateOntologyLists( newObject ) {
     565        $( '.ontologySelect' ).append( '<option value="' + newObject.id + '">' + newObject.name + '</option>');
     566}
Note: See TracChangeset for help on using the changeset viewer.