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

Last change on this file since 247 was 247, checked in by duh, 9 years ago
  • set keyword expansion
  • Property svn:keywords set to Author Rev Date
File size: 9.6 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        var tr=document.createElement('tr');
107        tr.id='rowparameterStringValue__new'+id+'__protocol__'+rowId;
108        tr.insertCell(-1).appendChild(input);
109        tbody.appendChild(tr);
110        var button=document.createElement('input');
111        button.type='button';
112        button.value='delete';
113        button.setAttribute('onclick','removeById(\''+tr.id+'\');');
114        tr.insertCell(-1).appendChild(button);
115  }
116
117
118   // create the dialog for this STRINGLIST.
119   // the dialog holds all possible values this parameter can take.
120   // moreover, it is extendable.
121   function addDialogForSelector(rowId,options) {
122     var dialog = document.createElement('div');
123     dialog.id='dialog'+rowId;
124     dialog.setAttribute('name','hiddenDialog');
125
126     var table=document.createElement('table');
127     var tbody=document.createElement('tbody'); tbody.id='options_'+dialog.id;
128     var tr=document.createElement('tr');
129     var th=document.createElement('th');
130     var tx=document.createTextNode('Parameter Values');
131     dialog.appendChild(table);
132     table.appendChild(tbody);
133     tbody.appendChild(tr);
134     tr.appendChild(tx);
135
136     for(i=0;i<options.length;i+=2){
137         var input=document.createElement('input');
138         input.value=unescape(options[i]);
139         input.name='parameterStringValue__'+options[i+1]+'__protocol__'+rowId;
140         var tr=document.createElement('tr');
141         tr.id='rowparameterStringValue__'+options[i+1]+'__protocol__'+rowId;
142         tbody.appendChild(tr);
143         tr.insertCell(-1).appendChild(input);
144         var button=document.createElement('input');
145         button.type='button';
146         button.value='delete';
147         button.setAttribute('onclick','removeById(\''+tr.id+'\');');
148         tr.insertCell(-1).appendChild(button);
149     }
150
151     var button=document.createElement('input');
152     button.setAttribute('type','Button');
153     button.value='Add Option';
154     dialog.appendChild(button);
155     button.onclick=function(){ addRowToDialog(tbody,rowId); }
156
157     return dialog;
158   }
159
160   function removeById(id) {
161        jQuery(document.getElementById(id)).remove();
162   }
163
164   function addSelector(row,selectedText,options){
165
166     // add dialog for displaying paramter options
167     // preserve row's id
168     var dialog = addDialogForSelector(row.id,options);
169
170
171     var selector=document.createElement("select");
172     selector.setAttribute('id',"type"+row.id);
173     setName(selector,row.id);
174     var selectedIndex=0;
175     for(i=0;i<parametertypes.length;i++) {
176         var option = document.createElement("option");
177         var text = document.createTextNode(parametertypes[i]);
178         option.appendChild(text);
179         selector.appendChild(option);
180         if(selectedText!=null&&selectedText==parametertypes[i]) { selectedIndex=i; }
181     }
182
183
184     //  td for the selector
185     var td=document.createElement('td');
186     td.appendChild(selector);
187     td.appendChild(dialog);                          // dialog
188     row.appendChild(td);
189     jQuery(dialog).dialog({ autoOpen:false, });
190
191
192     var showDialogString = "jQuery('#"+ dialog.id + "').dialog('open');"
193
194
195     // set label for selected element
196     selector.selectedIndex=selectedIndex;
197     var option=selector.options[selector.selectedIndex];
198
199     var anchor= document.createElement('a');
200     anchor.name='myanchor';
201     var textNode=document.createTextNode('');
202     option=selector.options[selector.selectedIndex];
203     textNode.nodeValue=(option.value=='STRINGLIST') ? 'edit' : 'n.a.';
204     showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog);
205     anchor.appendChild(textNode);
206
207
208     // show edit link for STRINGLIST
209     selector.onchange=function(){
210         option=this.options[this.selectedIndex];
211         showLinkForSTRINGLIST(anchor,textNode,option,showDialogString,dialog);
212     }
213
214
215     return anchor;
216  }
217
218
219  function getElementsByClass (className) {
220      var all = document.all ? document.all :
221      document.getElementsByTagName('*');
222      var elements = new Array();
223      for (var e = 0; e < all.length; e++)
224         if (all[e].className == className)
225         elements[elements.length] = all[e];
226      return elements;
227  }
228
229
230
231  function addHiddenDialogsToForm() {
232     var form=document.getElementById('showProtocolParameters');
233     var dialogs=document.getElementsByName('hiddenDialog');
234     for(i=0;i<dialogs.length;i++) {
235         form.appendChild(dialogs[i]);
236     }
237  }
238
239  function deleteHiddenDialogs() {
240      var dialogs=document.getElementsByName('hiddenDialog');
241      for(i=0;i<dialogs.length;i++) {
242          jQuery(dialogs[i]).remove();
243      }
244  }
245
246</script>
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262<tr class="prop">
263    <td id='test'>  Protocol </td>
264    <td> <g:select name="protocol" from="${dbnp.studycapturing.Protocol.list()}" value="${protocol}" optionKey="id"   optionValue="name"
265                   onchange= "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'id=\'+this.value' )}; deleteHiddenDialogs();" />
266    </td>
267</tr>
268
269
270<tr><td></td>
271<td>
272
273<table id="someId" >
274
275
276<thead>
277    <tr class="prop">
278
279         <th valign="top" class="name" width=200>
280         <label for="protocolInstance">Name</label>
281         </th>
282
283         <th valign="top" class="name" width=200>
284         <label for="protocolInstance">Unit</label>
285         </th>
286
287         <th valign="top" class="name" width=200>
288         <label for="protocolInstance">Type</label>
289         </th>
290
291         <th valign="top" class="name" width=200>
292         <label for="protocolInstance">Reference</label>
293         </th>
294
295         <th valign="top" class="name" width=200>
296         <label for="protocolInstance">Description</label>
297         </th>
298
299         <th valign="top" class="name" width=200>
300         <label for="protocolInstance">Options</label>
301         </th>
302
303         <th valign="top" class="name" width=200>
304         <label for="protocolInstance">Delete </label>
305         </th>
306
307    </tr>
308</thead>
309
310
311
312<tbody id="showProtocolParameters">
313    <g:include action="showProtocolParameters" controller="eventDescription" id="${description.id} params="[protocol:protocol]" />
314</tbody>
315
316
317<tbody> <tr>
318<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <input type="button" value="Add Parameter" onclick="addRowEmpty('showProtocolParameters')"/> </td>
319</tr> </tbody>
320
321</table>
322
323
324</td> </tr>
Note: See TracBrowser for help on using the repository browser.