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

Last change on this file since 241 was 241, checked in by jahn, 9 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.