Changeset 233 for trunk/grails-app/views/eventDescription

Timestamp:

Mar 5, 2010, 9:08:23 AM (13 years ago)

Author:

jahn

Message:

Functionality for dynamically adding parameters included. Dialog for paramert string lists added.

Location:

trunk/grails-app/views/eventDescription

Files:

• showMyProtocolFilled.gsp (modified) (9 diffs)
• showProtocolParameters.gsp (modified) (1 diff)

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

@@ -1 +1 @@
 <script type="text/javascript">
+
+var parametertypes= new Array();
+<% dbnp.studycapturing.ProtocolParameterType.list().each{ print "parametertypes.push(\'${it}\');" } %>
+
 
 function addRowEmpty(id){
@@ -17 +21 @@
     addTextFieldToRow(row,'classification',20); addTextFieldToRow(row,'unit',6);
     var textField=addSelector(row,null); addTextFieldToRow(row,'reference',10); addTextFieldToRow(row,'description',20);
-    addTextElementToRow(row,textField,'option',6); addRowButton(row); tbody.appendChild(row);
+    addElementToRow(row,textField,'option',6); addRowButton(row); tbody.appendChild(row);
 }
 
@@ -42 +46 @@
     addTextFieldToRow(row,'reference',10).value=reference;
     addTextFieldToRow(row,'description',20).value=description;
-    addTextElementToRow(row,textField,'option',6);
+    addElementToRow(row,textField,'option',6);
     addRowButton(row);
     tbody.appendChild(row);
 }
-
-
-
-
-
-
-
-var parametertypes= new Array();
-<% dbnp.studycapturing.ProtocolParameterType.list().each{ print "parametertypes.push(\'${it}\');" } %>
-
 
 
@@ -70 +64 @@
 
 
-  function addTextElementToRow(row,field,id,size){
+  function addElementToRow(row,field,id,size){
      var td=document.createElement('td');
      td.setAttribute('id',id + '_' + row.id);
@@ -98 +92 @@
 
 
-  function addSelector(row,selectedText){
+  // for the STRINGLIST type, display a link to show
+  // all optional values of the parameter.
+  function showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog) {
+        if(option.value=='STRINGLIST') {
+           textNode.nodeValue='edit';
+           anchor.setAttribute('onclick',showDialogString);
+        }
+        else {
+           textNode.nodeValue='n.a.';
+           anchor.setAttribute('onclick','');
+        }
+  }
+
+
+
+   function addRowToDialog(dialogTableBodyId) {
+        var tbody = document.getElementById(dialogTableBodyId);
+        var input=document.createElement('input');
+        tbody.insertRow(-1).insertCell(-1).appendChild(input);
+   }
+
+
+
+   // create the dialog for this STRINGLIST.
+   // the dialog holds all possible values this parameter can take.
+   // moreover, it is extendable.
+   function addDialogForSelector(rowId,options) {
+     var dialog = document.createElement('div');
+     dialog.setAttribute('id','dialog_'+rowId);
+     //var dialogText = document.createTextNode(dialog.id);
+     //dialog.appendChild(dialogText);
+
+
+     var table=document.createElement('table');
+     var tbody=document.createElement('tbody'); tbody.id='options_'+dialog.id;
+     var tr=document.createElement('tr');
+     var th=document.createElement('th');
+     var tx=document.createTextNode('Parameter Values');
+     dialog.appendChild(table);
+     table.appendChild(tbody);
+     tbody.appendChild(tr);
+     tr.appendChild(tx);
+
+     for(i=0;i<options.length;i++){
+         var input=document.createElement('input');
+         input.value=options[i];
+         tbody.insertRow(-1).insertCell(-1).appendChild(input);
+     }
+
+     var button=document.createElement('input');
+     button.setAttribute('type','Button');
+     button.value='Add Option';
+     dialog.appendChild(button);
+     button.onclick=function(){ addRowToDialog('options_'+dialog.id); }
+
+
+     return dialog;
+   }
+
+
+   function addSelector(row,selectedText){
+
+     // add dialog for displaying paramter options
+     // preserve row's id
+     var options= [1,2,3,4,5,6,7,8,9];
+     var dialog = addDialogForSelector(row.id,options);
+
 
      var selector=document.createElement("select");
@@ -108 +168 @@
          option.appendChild(text);
          selector.appendChild(option);
-         if(selectedText!=null&&selectedText==parametertypes[i]) {
-              selectedIndex=i;
-              alert(selectedText);
-         }
+         if(selectedText!=null&&selectedText==parametertypes[i]) { selectedIndex=i; }
      }
 
-     // set label for selected element
-     selector.selectedIndex=selectedIndex;
-     var option=selector.options[selector.selectedIndex];
-     var textNode = document.createTextNode("");
-     option=selector.options[selector.selectedIndex];
-     textNode.nodeValue=(option.value=='STRINGLIST') ? 'link stuff' : 'n.a.';
-
-
-     // show edit link for STRINGLIST
-     selector.onchange=function(){
-         option=this.options[this.selectedIndex];
-         textNode.nodeValue=(option.value=='STRINGLIST') ? 'link stuff' : 'n.a.';
-     }
 
      //  td for the selector
@@ -132 +176 @@
      td.appendChild(selector);
      row.appendChild(td);
-
-     return textNode;
+     td.appendChild(dialog);                          // dialog
+     jQuery(dialog).dialog({autoOpen:false});
+
+     var showDialogString = "jQuery('#"+ dialog.id + "').dialog('open');"
+
+
+     // set label for selected element
+     selector.selectedIndex=selectedIndex;
+     var option=selector.options[selector.selectedIndex];
+
+     var anchor= document.createElement('a');
+     anchor.setAttribute('name', 'myanchor');
+     var textNode=document.createTextNode('');
+     option=selector.options[selector.selectedIndex];
+     textNode.nodeValue=(option.value=='STRINGLIST') ? 'edit' : 'n.a.';
+     showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog);
+     anchor.appendChild(textNode);
+
+
+     // show edit link for STRINGLIST
+     selector.onchange=function(){
+         option=this.options[this.selectedIndex];
+         showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog);
+     }
+
+
+     return anchor;
   }
 
@@ -181 +250 @@
 <tr class="prop">
     <td id='test'>  nope </td>
-    <td> <g:select name="selectedProtocol" from="${dbnp.studycapturing.Protocol.list()}" value="${protocol.id}" onchange=
-           "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'something=\'+this.value', id:'this.id')} " />
+    <td> <g:select name="selectedProtocol" from="${dbnp.studycapturing.Protocol.list()}" value="${protocol.id}" optionKey="id"   optionValue="name"
+                   onchange= "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'id=\'+this.value' )} " />
     </td>
 </tr>
@@ -188 +257 @@
 
 <tr><td></td>
-
 <td>
 

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

@@ -6 +6 @@
 <% tableRowId=0 %>
 <g:each in ="${list}" >
-
     <script type="text/javascript">
     addRow('showProtocolParameters',"${list.id}","${it.name}","${it.unit}","${it.type}","${it.reference}","${it.description}");
     </script>
-
 </g:each>