Changeset 241


Ignore:
Timestamp:
Mar 8, 2010, 12:19:54 AM (13 years ago)
Author:
jahn
Message:

Functionality of dynamic protocol parameter selection improved. The java scripts lines still need to be cleaned and put into a seperate fiel to be included by a grails source tag.

Location:
trunk/grails-app/views/eventDescription
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/grails-app/views/eventDescription/edit.gsp

    r220 r241  
    1111
    1212    <body>
     13
     14
    1315        <div class="nav">
    1416            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}">Home</a></span>
    … …  
    3133
    3234
    33 
    34             <g:form method="post" >
     35           <% println eventDescriptionInstance.toString() %>
     36            <g:form action="save" method="post" id="${eventDescriptionInstance.id}" onsubmit="addHiddenDialogsToForm();">
    3537                <g:hiddenField name="id" value="${eventDescriptionInstance?.id}" />
    3638                <g:hiddenField name="version" value="${eventDescriptionInstance?.version}" />
    … …  
    8991
    9092
    91                             <tbody id="protocolPartial">
    92                                 <g:include action="showMyProtocol" controller="eventDescription" id="${eventDescriptionInstance.id}" />
    93                             </tbody>
    94 
    95 
    96 
    9793
    9894                        </tbody>
    9995                    </table>
    10096                </div>
     97                                <g:include action="showMyProtocol" controller="eventDescription" id="${eventDescriptionInstance.id}" />
    10198                <div class="buttons">
    102                     <span class="button"><g:actionSubmit class="save" action="update" value="${message(code: 'default.button.update.label', default: 'Update')}" /></span>
    103                     <span class="button"><g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" /></span>
     99                    <span class="button"><g:submitButton name="save" class="save" value="${message(code: 'default.save.label', default: 'Save')}" /></span>
     100                    <span class="button"><g:submitToRemote class="delete" action="list" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" /></span>
    104101                </div>
    105102            </g:form>

  • trunk/grails-app/views/eventDescription/showMyProtocolFilled.gsp

    r233 r241  
    11<script type="text/javascript">
    22
     3/* The following JS functions provide the dynamics of this view.
     4 * Mainly, rows of parameters can be added or removed by the user.
     5 * Additionally, each parameter can contain a STRINGLIST. In this case
     6 * the a link is activated. On following this link the user can activate
     7 * a dialog that displays all options of the STRINGLIST and edit them. */
    38var parametertypes= new Array();
     9var newRows=0;
    410<% dbnp.studycapturing.ProtocolParameterType.list().each{ print "parametertypes.push(\'${it}\');" } %>
    511
     12/* create a prefix for all members of a protocol */
     13function setName(element,protocolId) {
     14    element.name='protocolId_'+protocolId+'_'+element.id;
     15}
    616
    717function addRowEmpty(id){
    818    var tbody = document.getElementById(id);
    919    var row = document.createElement("tr");
    10 
    11     var newRowId=''
    12     if(tbody.getElementsByTagName('tr').length<=0) { newRowId='0'; }
    13     else {
    14         var elements=tbody.getElementsByTagName('tr');
    15         var predecessor=elements[elements.length-1];
    16         newRowId=predecessor.id;
    17     }
    18 
    19     row.setAttribute('id',newRowId+'1');
     20    row.setAttribute('id','new' + (newRows++) );
    2021
    2122    addTextFieldToRow(row,'classification',20); addTextFieldToRow(row,'unit',6);
    22     var textField=addSelector(row,null); addTextFieldToRow(row,'reference',10); addTextFieldToRow(row,'description',20);
     23    var textField=addSelector(row,null,[]); addTextFieldToRow(row,'reference',10); addTextFieldToRow(row,'description',20);
    2324    addElementToRow(row,textField,'option',6); addRowButton(row); tbody.appendChild(row);
    2425}
    2526
    2627
    27 function addRow(id,newId,name,unit,type,reference,description) {
     28function addRow(id,newId,name,unit,type,reference,description,options) {
    2829
    2930    var tbody = document.getElementById(id);
    3031    var row = document.createElement("tr");
    31     row.id=newId;
    32 
    33     var newRowId=''
    34     if(tbody.getElementsByTagName('tr').length<=0) { newRowId='0'; }
    35     else {
    36         var elements=tbody.getElementsByTagName('tr');
    37         var predecessor=elements[elements.length-1];
    38         newRowId=predecessor.id;
    39     }
    40 
    41     row.setAttribute('id',newRowId+'1');
     32    row.setAttribute('id',newId);
    4233
    4334    addTextFieldToRow(row,'classification',20).value=name;
    4435    addTextFieldToRow(row,'unit',6).value=unit;
    45     var textField=addSelector(row,type);
     36    var textField=addSelector(row,type,options);
    4637    addTextFieldToRow(row,'reference',10).value=reference;
    4738    addTextFieldToRow(row,'description',20).value=description;
    … …  
    5647     var body=parent.parentNode;
    5748     removeButton.setAttribute('type','button');
    58      removeButton.setAttribute('onclick',"removeRow('" + parent.id + "')");
     49     removeButton.setAttribute('onclick',"removeRow('" + parent.id + "');");
    5950     removeButton.setAttribute('value','remove');
    6051     var td=document.createElement('td');
    … …  
    7768     input.setAttribute('type','text');
    7869     input.setAttribute('id',id);
     70     input.setAttribute('name', 'row_' + row.id + '__' + id);
    7971     input.setAttribute('size',size);
    8072     var td=document.createElement('td');
    … …  
    8981     var body = row.parentNode;
    9082     body.removeChild(row);
     83     jQuery(document.getElementById('dialog'+rowId)).remove();
    9184  }
    9285
    … …  
    107100
    108101
    109    function addRowToDialog(dialogTableBodyId) {
    110         var tbody = document.getElementById(dialogTableBodyId);
     102  function addRowToDialog(tbody,rowId) {
    111103        var input=document.createElement('input');
     104        var id = tbody.rows.length + 1;
     105        input.setAttribute('name','parameterStringValue__new'+id+'__protocol__'+rowId);
    112106        tbody.insertRow(-1).insertCell(-1).appendChild(input);
    113    }
    114 
     107  }
    115108
    116109
    … …  
    120113   function addDialogForSelector(rowId,options) {
    121114     var dialog = document.createElement('div');
    122      dialog.setAttribute('id','dialog_'+rowId);
    123      //var dialogText = document.createTextNode(dialog.id);
    124      //dialog.appendChild(dialogText);
    125 
     115     dialog.id='dialog'+rowId;
     116     dialog.setAttribute('name','hiddenDialog');
    126117
    127118     var table=document.createElement('table');
    … …  
    135126     tr.appendChild(tx);
    136127
    137      for(i=0;i<options.length;i++){
     128     for(i=0;i<options.length;i+=2){
    138129         var input=document.createElement('input');
    139          input.value=options[i];
     130         input.value=unescape(options[i]);
     131         input.name='parameterStringValue__'+options[i+1]+'__protocol__'+rowId;
    140132         tbody.insertRow(-1).insertCell(-1).appendChild(input);
    141133     }
    … …  
    145137     button.value='Add Option';
    146138     dialog.appendChild(button);
    147      button.onclick=function(){ addRowToDialog('options_'+dialog.id); }
    148 
     139     button.onclick=function(){ addRowToDialog(tbody,rowId); }
    149140
    150141     return dialog;
    … …  
    152143
    153144
    154    function addSelector(row,selectedText){
     145   function addSelector(row,selectedText,options){
    155146
    156147     // add dialog for displaying paramter options
    157148     // preserve row's id
    158      var options= [1,2,3,4,5,6,7,8,9];
    159149     var dialog = addDialogForSelector(row.id,options);
    160150
    161151
    162152     var selector=document.createElement("select");
    163      selector.setAttribute('id',"parameter_type"+row.id);
     153     selector.setAttribute('id',"type"+row.id);
     154     setName(selector,row.id);
    164155     var selectedIndex=0;
    165156     for(i=0;i<parametertypes.length;i++) {
    … …  
    175166     var td=document.createElement('td');
    176167     td.appendChild(selector);
     168     td.appendChild(dialog);                          // dialog
    177169     row.appendChild(td);
    178      td.appendChild(dialog);                          // dialog
    179      jQuery(dialog).dialog({autoOpen:false});
     170     jQuery(dialog).dialog({ autoOpen:false, });
     171
    180172
    181173     var showDialogString = "jQuery('#"+ dialog.id + "').dialog('open');"
    … …  
    187179
    188180     var anchor= document.createElement('a');
    189      anchor.setAttribute('name', 'myanchor');
     181     anchor.name='myanchor';
    190182     var textNode=document.createTextNode('');
    191183     option=selector.options[selector.selectedIndex];
    … …  
    206198
    207199
    208 
    209 
    210 // testing, remove later
    211 function doStuff(caller) { var row = caller.parentNode.parentNode; $("#"+row.id).hide(); }
    212 
     200  function getElementsByClass (className) {
     201      var all = document.all ? document.all :
     202      document.getElementsByTagName('*');
     203      var elements = new Array();
     204      for (var e = 0; e < all.length; e++)
     205         if (all[e].className == className)
     206         elements[elements.length] = all[e];
     207      return elements;
     208  }
     209
     210
     211
     212  function addHiddenDialogsToForm() {
     213     var form=document.getElementById('showProtocolParameters');
     214     var dialogs=document.getElementsByName('hiddenDialog');
     215     for(i=0;i<dialogs.length;i++) {
     216         form.appendChild(dialogs[i]);
     217     }
     218  }
     219
     220  function deleteHiddenDialogs() {
     221      var dialogs=document.getElementsByName('hiddenDialog');
     222      for(i=0;i<dialogs.length;i++) {
     223          jQuery(dialogs[i]).remove();
     224      }
     225  }
    213226
    214227</script>
    … …  
    228241
    229242
    230 
    231 
    232 
    233 
    234 
    235 
    236 
    237 
    238 
    239 
    240 
    241 
    242 
    243 
    244 
    245 
    246 
    247 
    248 
    249 
    250243<tr class="prop">
    251     <td id='test'>  nope </td>
    252     <td> <g:select name="selectedProtocol" from="${dbnp.studycapturing.Protocol.list()}" value="${protocol.id}" optionKey="id"   optionValue="name"
    253                    onchange= "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'id=\'+this.value' )} " />
     244    <td id='test'>  Protocol </td>
     245    <td> <g:select name="selectedProtocol" from="${dbnp.studycapturing.Protocol.list()}" value="${protocol}" optionKey="id"   optionValue="name"
     246                   onchange= "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'id=\'+this.value' )}; deleteHiddenDialogs();" />
    254247    </td>
    255248</tr>
    … …  
    299292
    300293<tbody id="showProtocolParameters">
    301     <g:include action="showProtocolParameters" controller="eventDescription" id="${description.id}" />
     294    <g:include action="showProtocolParameters" controller="eventDescription" id="${description.id} params="[protocol:protocol]" />
    302295</tbody>
    303296
    304297
    305298<tbody> <tr>
    306 <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <input type="button" value="Add Parameter" onclick="addRowEmpty('showProtocolParameters')"> </td>
     299<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <input type="button" value="Add Parameter" onclick="addRowEmpty('showProtocolParameters')"/> </td>
    307300</tr> </tbody>
    308301

  • trunk/grails-app/views/eventDescription/showProtocolParameters.gsp

    r233 r241  
    66<% tableRowId=0 %>
    77<g:each in ="${list}" >
    8     <script type="text/javascript">
    9     addRow('showProtocolParameters',"${list.id}","${it.name}","${it.unit}","${it.type}","${it.reference}","${it.description}");
    10     </script>
     8
     9    <g:if test="it.type==dbnp.studycapturing.ProtocolParameterType.STRINGLIST" >
     10        <% def listEntries=it.listEntries.collect { it } %>
     11
     12        <script type="text/javascript">
     13            var tmpList = [];
     14            <% listEntries.each{ print "tmpList.push( escape('${it}') ); tmpList.push( '${it.id}' );" } %>
     15            addRow('showProtocolParameters',"${list.id[0]}","${it.name}","${it.unit}","${it.type}","${it.reference}","${it.description}", tmpList );
     16            delete tmpList;
     17        </script>
     18    </g:if>
     19    <g:else>
     20        <script type="text/javascript">
     21            addRow('showProtocolParameters',"${list.id[0]}","${it.name}","${it.unit}","${it.type}","${it.reference}","${it.description}", new Array() );
     22        </script>
     23    </g:else>
    1124</g:each>
Note: See TracChangeset for help on using the changeset viewer.