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

Last change on this file since 220 was 220, checked in by jahn, 10 years ago

EventDescription? in progress. This is still ugly, because it uses a lot of JS to avoid to much loading from the server; however, the JS lines are just dumped into the page. Instead of this dumping, the JS should go into a tag library or something similar.

Still missing are: (1) a popup box for adding parameter string lists, (2) parsing the parameters form the view into the database in the model upon completion of the action.

File size: 5.7 KB
Line 
1<script type="text/javascript">
2
3function addRowEmpty(id){
4    var tbody = document.getElementById(id);
5    var row = document.createElement("tr");
6
7    var newRowId=''
8    if(tbody.getElementsByTagName('tr').length<=0) { newRowId='0'; }
9    else {
10        var elements=tbody.getElementsByTagName('tr');
11        var predecessor=elements[elements.length-1];
12        newRowId=predecessor.id;
13    }
14
15    row.setAttribute('id',newRowId+'1');
16
17    addTextFieldToRow(row,'classification',20); addTextFieldToRow(row,'unit',6);
18    var textField=addSelector(row,null); addTextFieldToRow(row,'reference',10); addTextFieldToRow(row,'description',20);
19    addTextElementToRow(row,textField,'option',6); addRowButton(row); tbody.appendChild(row);
20}
21
22
23function addRow(id,newId,name,unit,type,reference,description) {
24
25    var tbody = document.getElementById(id);
26    var row = document.createElement("tr");
27    row.id=newId;
28
29    var newRowId=''
30    if(tbody.getElementsByTagName('tr').length<=0) { newRowId='0'; }
31    else {
32        var elements=tbody.getElementsByTagName('tr');
33        var predecessor=elements[elements.length-1];
34        newRowId=predecessor.id;
35    }
36
37    row.setAttribute('id',newRowId+'1');
38
39    addTextFieldToRow(row,'classification',20).value=name;
40    addTextFieldToRow(row,'unit',6).value=unit;
41    var textField=addSelector(row,type);
42    addTextFieldToRow(row,'reference',10).value=reference;
43    addTextFieldToRow(row,'description',20).value=description;
44    addTextElementToRow(row,textField,'option',6);
45    addRowButton(row);
46    tbody.appendChild(row);
47}
48
49
50
51
52
53
54
55var parametertypes= new Array();
56<% dbnp.studycapturing.ProtocolParameterType.list().each{ print "parametertypes.push(\'${it}\');" } %>
57
58
59
60  function addRowButton(parent) {
61     var removeButton=document.createElement("input");
62     var body=parent.parentNode;
63     removeButton.setAttribute('type','button');
64     removeButton.setAttribute('onclick',"removeRow('" + parent.id + "')");
65     removeButton.setAttribute('value','remove');
66     var td=document.createElement('td');
67     td.appendChild(removeButton);
68     parent.appendChild(td);
69  }
70
71
72  function addTextElementToRow(row,field,id,size){
73     var td=document.createElement('td');
74     td.setAttribute('id',id + '_' + row.id);
75     td.appendChild(field);
76     row.appendChild(td);
77     return field;
78  }
79
80
81  function addTextFieldToRow(row,id,size){
82     var input=document.createElement("input");
83     input.setAttribute('type','text');
84     input.setAttribute('id',id);
85     input.setAttribute('size',size);
86     var td=document.createElement('td');
87     td.appendChild(input);
88     row.appendChild(td);
89     return input;
90  }
91
92
93  function removeRow(rowId){
94     var row = document.getElementById(rowId);
95     var body = row.parentNode;
96     body.removeChild(row);
97  }
98
99
100  function addSelector(row,selectedText){
101
102     var selector=document.createElement("select");
103     selector.setAttribute('id',"parameter_type"+row.id);
104     var selectedIndex=0;
105     for(i=0;i<parametertypes.length;i++) {
106         var option = document.createElement("option");
107         var text = document.createTextNode(parametertypes[i]);
108         option.appendChild(text);
109         selector.appendChild(option);
110         if(selectedText!=null&&selectedText==parametertypes[i]) {
111              selectedIndex=i;
112              alert(selectedText);
113         }
114     }
115
116     // set label for selected element
117     selector.selectedIndex=selectedIndex;
118     var option=selector.options[selector.selectedIndex];
119     var textNode = document.createTextNode("");
120     option=selector.options[selector.selectedIndex];
121     textNode.nodeValue=(option.value=='STRINGLIST') ? 'link stuff' : 'n.a.';
122
123
124     // show edit link for STRINGLIST
125     selector.onchange=function(){
126         option=this.options[this.selectedIndex];
127         textNode.nodeValue=(option.value=='STRINGLIST') ? 'link stuff' : 'n.a.';
128     }
129
130     //  td for the selector
131     var td=document.createElement('td');
132     td.appendChild(selector);
133     row.appendChild(td);
134
135     return textNode;
136  }
137
138
139
140
141// testing, remove later
142function doStuff(caller) { var row = caller.parentNode.parentNode; $("#"+row.id).hide(); }
143
144
145</script>
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181<tr class="prop">
182    <td id='test'>  nope </td>
183    <td> <g:select name="selectedProtocol" from="${dbnp.studycapturing.Protocol.list()}" value="${protocol.id}" onchange=
184           "${remoteFunction( action:'showProtocolParameters', update:'showProtocolParameters', params:'\'something=\'+this.value', id:'this.id')} " />
185    </td>
186</tr>
187
188
189<tr><td></td>
190
191<td>
192
193<table id="someId" >
194
195
196<thead>
197    <tr class="prop">
198
199         <th valign="top" class="name" width=200>
200         <label for="protocolInstance">Name</label>
201         </th>
202
203         <th valign="top" class="name" width=200>
204         <label for="protocolInstance">Unit</label>
205         </th>
206
207         <th valign="top" class="name" width=200>
208         <label for="protocolInstance">Type</label>
209         </th>
210
211         <th valign="top" class="name" width=200>
212         <label for="protocolInstance">Reference</label>
213         </th>
214
215         <th valign="top" class="name" width=200>
216         <label for="protocolInstance">Description</label>
217         </th>
218
219         <th valign="top" class="name" width=200>
220         <label for="protocolInstance">Options</label>
221         </th>
222
223         <th valign="top" class="name" width=200>
224         <label for="protocolInstance">Delete </label>
225         </th>
226
227    </tr>
228</thead>
229
230
231
232<tbody id="showProtocolParameters">
233    <g:include action="showProtocolParameters" controller="eventDescription" id="${description.id}" />
234</tbody>
235
236
237<tbody> <tr>
238<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td> <input type="button" value="Add Parameter" onclick="addRowEmpty('showProtocolParameters')"> </td>
239</tr> </tbody>
240
241</table>
242
243
244</td> </tr>
Note: See TracBrowser for help on using the repository browser.