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

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

Views for EventDescription? (edit and create) have been cleaned, tested, debugged, and improved.

  • Property svn:keywords set to Author Rev Date
File size: 9.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
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<tr class="prop">
254    <td id='test'> Protocol </td>
255
256    <% def protocols = dbnp.studycapturing.Protocol.list() %>
257    <td>
258           <g:if test="${protocol==null}">
259               <g:select name="protocol" from="${protocols}" optionKey="id"   optionValue="name"  noSelection="['':'-- Select Protocol -- ']"
260                   onchange= "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'id=\'+this.value' )}; deleteHiddenDialogs();" />
261           </g:if>
262
263           <g:else>
264               <g:select name="protocol" from="${protocols}" optionKey="id"   optionValue="name" value='${protocol.id}'
265                   onchange= "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'id=\'+this.value' )}; deleteHiddenDialogs();" />
266           </g:else>
267    </td>
268
269
270</tr>
271
272
273
274<tr><td></td>
275<td>
276
277<table id="someId" >
278
279
280<thead>
281    <tr class="prop">
282
283         <th valign="top" class="name" width=200>
284         <label for="protocolInstance">Name</label>
285         </th>
286
287         <th valign="top" class="name" width=200>
288         <label for="protocolInstance">Unit</label>
289         </th>
290
291         <th valign="top" class="name" width=200>
292         <label for="protocolInstance">Type</label>
293         </th>
294
295         <th valign="top" class="name" width=200>
296         <label for="protocolInstance">Reference</label>
297         </th>
298
299         <th valign="top" class="name" width=200>
300         <label for="protocolInstance">Description</label>
301         </th>
302
303         <th valign="top" class="name" width=200>
304         <label for="protocolInstance">Options</label>
305         </th>
306
307         <th valign="top" class="name" width=200>
308         <label for="protocolInstance">Delete </label>
309         </th>
310
311    </tr>
312</thead>
313
314
315
316<tbody id="showProtocolParameters">
317    <g:include action="showProtocolParameters" controller="eventDescription" id="${description.id} params="[protocol:protocol]" />
318</tbody>
319
320
321<tbody> <tr>
322<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <input type="button" value="Add Parameter" onclick="addRowEmpty('showProtocolParameters')"/> </td>
323</tr> </tbody>
324
325</table>
326
327
328</td> </tr>
Note: See TracBrowser for help on using the repository browser.