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

Last change on this file since 308 was 308, checked in by jahn, 13 years ago

Added an actually non editable show. (Parameters script needs to be adapted, still.)

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