source: trunk/grails-app/views/eventDescription/showMyProtocolFilled.gsp @ 241

Last change on this file since 241 was 241, checked in by jahn, 12 years ago

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.

File size: 8.9 KB
Line 
1<script type="text/javascript">
2
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. */
8var parametertypes= new Array();
9var newRows=0;
10<% dbnp.studycapturing.ProtocolParameterType.list().each{ print "parametertypes.push(\'${it}\');" } %>
11
12/* create a prefix for all members of a protocol */
13function setName(element,protocolId) {
14    element.name='protocolId_'+protocolId+'_'+element.id;
15}
16
17function addRowEmpty(id){
18    var tbody = document.getElementById(id);
19    var row = document.createElement("tr");
20    row.setAttribute('id','new' + (newRows++) );
21
22    addTextFieldToRow(row,'classification',20); addTextFieldToRow(row,'unit',6);
23    var textField=addSelector(row,null,[]); addTextFieldToRow(row,'reference',10); addTextFieldToRow(row,'description',20);
24    addElementToRow(row,textField,'option',6); addRowButton(row); tbody.appendChild(row);
25}
26
27
28function addRow(id,newId,name,unit,type,reference,description,options) {
29
30    var tbody = document.getElementById(id);
31    var row = document.createElement("tr");
32    row.setAttribute('id',newId);
33
34    addTextFieldToRow(row,'classification',20).value=name;
35    addTextFieldToRow(row,'unit',6).value=unit;
36    var textField=addSelector(row,type,options);
37    addTextFieldToRow(row,'reference',10).value=reference;
38    addTextFieldToRow(row,'description',20).value=description;
39    addElementToRow(row,textField,'option',6);
40    addRowButton(row);
41    tbody.appendChild(row);
42}
43
44
45  function addRowButton(parent) {
46     var removeButton=document.createElement("input");
47     var body=parent.parentNode;
48     removeButton.setAttribute('type','button');
49     removeButton.setAttribute('onclick',"removeRow('" + parent.id + "');");
50     removeButton.setAttribute('value','remove');
51     var td=document.createElement('td');
52     td.appendChild(removeButton);
53     parent.appendChild(td);
54  }
55
56
57  function addElementToRow(row,field,id,size){
58     var td=document.createElement('td');
59     td.setAttribute('id',id + '_' + row.id);
60     td.appendChild(field);
61     row.appendChild(td);
62     return field;
63  }
64
65
66  function addTextFieldToRow(row,id,size){
67     var input=document.createElement("input");
68     input.setAttribute('type','text');
69     input.setAttribute('id',id);
70     input.setAttribute('name', 'row_' + row.id + '__' + id);
71     input.setAttribute('size',size);
72     var td=document.createElement('td');
73     td.appendChild(input);
74     row.appendChild(td);
75     return input;
76  }
77
78
79  function removeRow(rowId){
80     var row = document.getElementById(rowId);
81     var body = row.parentNode;
82     body.removeChild(row);
83     jQuery(document.getElementById('dialog'+rowId)).remove();
84  }
85
86
87  // for the STRINGLIST type, display a link to show
88  // all optional values of the parameter.
89  function showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog) {
90        if(option.value=='STRINGLIST') {
91           textNode.nodeValue='edit';
92           anchor.setAttribute('onclick',showDialogString);
93        }
94        else {
95           textNode.nodeValue='n.a.';
96           anchor.setAttribute('onclick','');
97        }
98  }
99
100
101
102  function addRowToDialog(tbody,rowId) {
103        var input=document.createElement('input');
104        var id = tbody.rows.length + 1;
105        input.setAttribute('name','parameterStringValue__new'+id+'__protocol__'+rowId);
106        tbody.insertRow(-1).insertCell(-1).appendChild(input);
107  }
108
109
110   // create the dialog for this STRINGLIST.
111   // the dialog holds all possible values this parameter can take.
112   // moreover, it is extendable.
113   function addDialogForSelector(rowId,options) {
114     var dialog = document.createElement('div');
115     dialog.id='dialog'+rowId;
116     dialog.setAttribute('name','hiddenDialog');
117
118     var table=document.createElement('table');
119     var tbody=document.createElement('tbody'); tbody.id='options_'+dialog.id;
120     var tr=document.createElement('tr');
121     var th=document.createElement('th');
122     var tx=document.createTextNode('Parameter Values');
123     dialog.appendChild(table);
124     table.appendChild(tbody);
125     tbody.appendChild(tr);
126     tr.appendChild(tx);
127
128     for(i=0;i<options.length;i+=2){
129         var input=document.createElement('input');
130         input.value=unescape(options[i]);
131         input.name='parameterStringValue__'+options[i+1]+'__protocol__'+rowId;
132         tbody.insertRow(-1).insertCell(-1).appendChild(input);
133     }
134
135     var button=document.createElement('input');
136     button.setAttribute('type','Button');
137     button.value='Add Option';
138     dialog.appendChild(button);
139     button.onclick=function(){ addRowToDialog(tbody,rowId); }
140
141     return dialog;
142   }
143
144
145   function addSelector(row,selectedText,options){
146
147     // add dialog for displaying paramter options
148     // preserve row's id
149     var dialog = addDialogForSelector(row.id,options);
150
151
152     var selector=document.createElement("select");
153     selector.setAttribute('id',"type"+row.id);
154     setName(selector,row.id);
155     var selectedIndex=0;
156     for(i=0;i<parametertypes.length;i++) {
157         var option = document.createElement("option");
158         var text = document.createTextNode(parametertypes[i]);
159         option.appendChild(text);
160         selector.appendChild(option);
161         if(selectedText!=null&&selectedText==parametertypes[i]) { selectedIndex=i; }
162     }
163
164
165     //  td for the selector
166     var td=document.createElement('td');
167     td.appendChild(selector);
168     td.appendChild(dialog);                          // dialog
169     row.appendChild(td);
170     jQuery(dialog).dialog({ autoOpen:false, });
171
172
173     var showDialogString = "jQuery('#"+ dialog.id + "').dialog('open');"
174
175
176     // set label for selected element
177     selector.selectedIndex=selectedIndex;
178     var option=selector.options[selector.selectedIndex];
179
180     var anchor= document.createElement('a');
181     anchor.name='myanchor';
182     var textNode=document.createTextNode('');
183     option=selector.options[selector.selectedIndex];
184     textNode.nodeValue=(option.value=='STRINGLIST') ? 'edit' : 'n.a.';
185     showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog);
186     anchor.appendChild(textNode);
187
188
189     // show edit link for STRINGLIST
190     selector.onchange=function(){
191         option=this.options[this.selectedIndex];
192         showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog);
193     }
194
195
196     return anchor;
197  }
198
199
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  }
226
227</script>
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243<tr class="prop">
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();" />
247    </td>
248</tr>
249
250
251<tr><td></td>
252<td>
253
254<table id="someId" >
255
256
257<thead>
258    <tr class="prop">
259
260         <th valign="top" class="name" width=200>
261         <label for="protocolInstance">Name</label>
262         </th>
263
264         <th valign="top" class="name" width=200>
265         <label for="protocolInstance">Unit</label>
266         </th>
267
268         <th valign="top" class="name" width=200>
269         <label for="protocolInstance">Type</label>
270         </th>
271
272         <th valign="top" class="name" width=200>
273         <label for="protocolInstance">Reference</label>
274         </th>
275
276         <th valign="top" class="name" width=200>
277         <label for="protocolInstance">Description</label>
278         </th>
279
280         <th valign="top" class="name" width=200>
281         <label for="protocolInstance">Options</label>
282         </th>
283
284         <th valign="top" class="name" width=200>
285         <label for="protocolInstance">Delete </label>
286         </th>
287
288    </tr>
289</thead>
290
291
292
293<tbody id="showProtocolParameters">
294    <g:include action="showProtocolParameters" controller="eventDescription" id="${description.id} params="[protocol:protocol]" />
295</tbody>
296
297
298<tbody> <tr>
299<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <input type="button" value="Add Parameter" onclick="addRowEmpty('showProtocolParameters')"/> </td>
300</tr> </tbody>
301
302</table>
303
304
305</td> </tr>
Note: See TracBrowser for help on using the repository browser.