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

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

Functionality for dynamically adding parameters included. Dialog for paramert string lists added.

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