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

Last change on this file since 249 was 249, checked in by jahn, 9 years ago

Made controller for saving action used by create and edit. Still needs to be tested and debugged as well as adapted for the eaiser create case. Code needs to be cleaned up!

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