source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/flowcell_registration.jsp @ 2020

Last change on this file since 2020 was 2020, checked in by Nicklas Nordborg, 8 years ago

References #481: Register prepared flow cells

Preliminary wizards for flow cell creation and registration.

File size: 13.1 KB
Line 
1<%@ page
2  pageEncoding="UTF-8"
3  session="false"
4  import="net.sf.basedb.core.User"
5  import="net.sf.basedb.core.DbControl"
6  import="net.sf.basedb.core.SessionControl"
7  import="net.sf.basedb.core.Application"
8  import="net.sf.basedb.clients.web.Base" 
9  import="net.sf.basedb.clients.web.util.HTML" 
10  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
11%>
12<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
13<%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
14<%
15final SessionControl sc = Base.getExistingSessionControl(request, true);
16final String ID = sc.getId();
17final float scale = Base.getScale(sc);
18final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
19DbControl dc = null;
20try
21{
22  dc = sc.newDbControl();
23  final User user = User.getById(dc, sc.getLoggedInUserId());
24%>
25<base:page type="default" >
26<base:head scripts="ajax.js" styles="path.css">
27  <link rel="stylesheet" type="text/css" href="../css/reggie.css">
28  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>
29
30<script language="JavaScript">
31
32var debug = true;
33var currentStep = 1;
34
35var dateIsValid = [];
36var commentsIsValid = false;
37
38
39function init()
40{
41  var frm = document.forms['reggie'];
42  var flowCells = getFlowCells();
43 
44  // Load existing Flow cells not yet registered
45  if (flowCells != null && flowCells.length > 0)
46  {
47    for (var i=0; i < flowCells.length; i++)
48    {
49      var flowCell = flowCells[i];
50      var option = new Option(flowCell.name, flowCell.id, i < 2);
51      option.comments = flowCell.comments;
52      frm.flowcells.options[frm.flowcells.length] = option;
53    }
54    flowCellIsValid = true;
55    setInputStatus('flowcells', '', 'valid');
56    outcomeOnChange();
57  }
58  else
59  {
60    var msg = 'No flow cells available for processing.';
61    setFatalError(msg);
62    return;
63  }
64
65  // All is ok
66  frm.flowcells.focus();
67}
68
69
70function goNextAuto()
71{
72  goNext(false);
73}
74
75function goNext(manual)
76{
77  setInnerHTML('gonext.message', '');
78  if (currentStep == 1)
79  {   
80    gotoStep2();
81  }
82  setCurrentStep(currentStep);
83}
84
85
86
87function getFlowCells()
88{
89  var frm = document.forms['reggie']; 
90 
91  var request = Ajax.getXmlHttpRequest();
92  try
93  {
94    showLoadingAnimation('Loading flow cells lists...');
95    var url = '../FlowCell.servlet?ID=<%=ID%>&cmd=GetUnprocessedFlowCells';   
96    request.open("GET", url, false); 
97    request.send(null);
98  }
99  finally
100  {
101    hideLoadingAnimation();
102  }
103 
104  if (debug) Main.debug(request.responseText);
105  var response = JSON.parse(request.responseText); 
106  if (response.status != 'ok')
107  {
108    setFatalError(response.message);
109    return false;
110  }
111  return response.flowCells;
112}
113
114function gotoStep2()
115{
116  var frm = document.forms['reggie']; 
117  frm.flowcells.disabled = true;
118  frm.outcome[0].disabled = true;
119  frm.outcome[1].disabled = true;
120
121 
122  currentStep = 2;
123  Main.show('step.2.section');
124  Main.addClass(document.getElementById('step.1.section'), 'disabled');
125  Main.hide('gonext');
126  Main.show('gocancel');
127  Main.show('goregister');
128 
129  // Load mRNA protocols
130  var clusterProtocols = getProtocols('CLUSTER_PROTOCOL');
131  for (var i = 0; i < clusterProtocols.length; i++)
132  {
133    var protocol = clusterProtocols[i];
134    frm.clusterProtocol[frm.clusterProtocol.length] = new Option(protocol.name, protocol.id, protocol.isDefault);
135    setInputStatus('clusterProtocol', '', 'valid');
136  }
137  if (frm.clusterProtocol.length == 0)
138  {
139    frm.clusterProtocol[0] = new Option('- none -', '');
140  }
141
142  frm.clusterDate.focus();
143}
144
145function getProtocols(subtype)
146{
147  var request = Ajax.getXmlHttpRequest();
148  try
149  {
150    showLoadingAnimation('Loading ' + subtype + ' protocols...');
151    var url = '../Protocol.servlet?ID=<%=ID%>&cmd=GetProtocols&subtype='+subtype;   
152    request.open("GET", url, false); 
153    request.send(null);
154  }
155  finally
156  {
157    hideLoadingAnimation();
158  }
159
160  if (debug) Main.debug(request.responseText);
161  var response = JSON.parse(request.responseText); 
162  if (response.status != 'ok')
163  {
164    setFatalError(response.message);
165    return false;
166  }
167  return response.protocols;
168}
169
170function outcomeOnChange()
171{
172  var frm = document.forms['reggie'];
173  Main.addOrRemoveClass(frm['comments'], 'required', document.getElementById('outcomeFailed').checked);
174  commentsOnChange();
175}
176
177function dateOnChange(dateField)
178{
179  var frm = document.forms['reggie'];
180
181  setInputStatus(dateField, '', '');
182  dateIsValid[dateField] = true;
183  var date = frm[dateField].value;
184
185  if (date == '')
186  {
187    setInputStatus(dateField, 'Missing date', 'warning');
188    return;
189  }
190
191  // Auto-fill the date if it's only given with 4(MMdd) or 6(yyMMdd) digits.   
192  date = autoFillDate(date);
193  frm[dateField].value = date;
194  if (!Dates.isDate(date, 'yyyyMMdd'))
195  {
196    setInputStatus(dateField, 'Not a valid date', 'invalid');
197    dateIsValid[dateField] = false;
198    return;
199  }
200 
201  setInputStatus(dateField, '', 'valid');
202}
203
204function setDate(frmName, dateField, date)
205{
206  var frm = document.forms['reggie'];
207  frm[dateField].value = date;
208  dateOnChange(dateField);
209  frm[dateField].focus();
210}
211
212function commentsOnChange()
213{
214  var frm = document.forms['reggie'];
215  commentsIsValid = false;
216  setInputStatus('comments', '', '');
217 
218  var comments = frm.comments.value;
219 
220  if (comments == '' && document.getElementById('outcomeFailed').checked)
221  {
222    setInputStatus('comments', 'Missing', 'invalid');
223    return;
224  }
225
226  setInputStatus('comments', '', 'valid');
227  commentsIsValid = true;
228}
229
230function step2IsValid()
231{
232  if (!commentsIsValid) return false;
233 
234  if (dateIsValid['clusterDate'] == false) return false;
235 
236  return true;
237}
238
239function goRegister()
240{
241  if (!step2IsValid()) return;
242
243  var frm = document.forms['reggie'];
244 
245  Main.hide('goregister');
246  Main.hide('gocancel');
247  Main.addClass(document.getElementById('step.2.section'), 'disabled');
248
249  frm.clusterDate.disabled = true;
250  frm.clusterOperator.disabled = true;
251  frm.clusterProtocol.disabled = true;
252  frm.comments.disabled = true;
253 
254  var submitInfo = {};
255  submitInfo.flowCells = [];
256  for (var i = 0; i < frm.flowcells.length; i++)
257  {
258    if (frm.flowcells[i].selected) submitInfo.flowCells[submitInfo.flowCells.length] = parseInt(frm.flowcells[i].value);
259  }
260 
261  submitInfo.clusterProtocol = parseInt(frm.clusterProtocol.value, 10);
262  submitInfo.failed = document.getElementById('outcomeSuccess').checked ? false : true;
263  submitInfo.clusterDate = frm.clusterDate.value;
264  submitInfo.clusterOperator = frm.clusterOperator.value;
265  submitInfo.comments = frm.comments.value;
266 
267  if (debug) Main.debug(JSON.stringify(submitInfo));
268  var url = '../FlowCell.servlet?ID=<%=ID%>&cmd=RegisterFlowCells';
269 
270  var request = Ajax.getXmlHttpRequest();
271  try
272  {
273    showLoadingAnimation('Performing registration...');
274    request.open("POST", url, false);
275    request.send(JSON.stringify(submitInfo));
276  }
277  finally
278  {
279    hideLoadingAnimation();
280  }
281 
282  if (debug) Main.debug(request.responseText);
283  var response = JSON.parse(request.responseText);
284 
285  if (response.messages && response.messages.length > 0)
286  {
287    var msg = '<ul>';
288    for (var i = 0; i < response.messages.length; i++)
289    {
290      var msgLine = response.messages[i];
291      if (msgLine.indexOf('[Warning]') >= 0)
292      {
293        msg += '<li class="warning">' + msgLine.replace('[Warning]', '');
294      }
295      else
296      {
297        msg += '<li>' + msgLine;
298      }
299    }
300    msg += '</ul>';
301    setInnerHTML('messages', msg);
302    Main.show('messages');
303  }
304 
305  if (response.status != 'ok')
306  {
307    Main.addClass(document.getElementById('messages'), 'failure');
308    setFatalError(response.message);
309    return false;
310  }
311
312  Main.show('gorestart');
313}
314
315
316</script>
317
318</base:head>
319<base:body onload="init()">
320
321  <p:path><p:pathelement 
322    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
323    /><p:pathelement title="Flow cell registration" 
324    /></p:path>
325
326  <div class="content">
327  <%
328  if (sc.getActiveProjectId() == 0)
329  {
330    %>
331    <div class="messagecontainer note" style="width: 950px; margin-left: 20px; margin-bottom: 20px; margin-right: 0px; font-weight: bold; color: #cc0000;">
332      No project has been selected. You may proceed with the registration but
333      created items will not be shared.
334    </div>
335    <%
336  }
337  %>
338
339  <form name="reggie" onsubmit="return false;">
340    <input type="hidden" name="pdf.id" value="">
341 
342  <div id="step.1.section">
343  <table class="stepform">
344  <tr>
345    <td rowspan="3" class="stepno">1</td>
346    <td class="steptitle">Select flow cells</td>
347  </tr>
348  <tr>
349    <td class="stepfields">
350      <table>
351      <tr valign="top">
352        <td class="prompt">Flow cells</td>
353        <td class="input"><select class="required" style="width:90%;" 
354            name="flowcells" id="flowcells" multiple size="4"></select>
355        </td>
356        <td class="status" id="flowcells.status"></td>
357        <td class="help"><span id="flowcells.message" class="message" style="display: none;"></span>
358          Select one or more existing flow cells. The list contain all flow cells that
359          has not yet been processed (determined by the absence of a 'creation' date).
360        </td>
361      </tr>
362      <tr valign="top">
363        <td class="prompt">Outcome</td>
364        <td class="input">
365          <input type="radio" name="outcome" id="outcomeSuccess" 
366            onchange="outcomeOnChange()" checked><label for="outcomeSuccess">Success</label> - continue with sequencing<br>
367          <input type="radio" name="outcome" id="outcomeFailed" 
368            onchange="outcomeOnChange()"><label for="outcomeFailed">Failure</label> - no sequencing
369        </td>
370        <td class="status"></td>
371        <td class="help">
372          Select the <b>Failure</b> option if it is not possible to continue
373          with sequencing. RNA will be flagged and added
374          to the <b>Flagged RNA</b> list.
375        </td>
376      </tr>
377      </table>
378    </td>
379  </tr>
380  </table>
381  </div>
382 
383  <div id="step.2.section" style="display: none;">
384  <table class="stepform">
385  <tr>
386    <td rowspan="3" class="stepno">2</td>
387    <td class="steptitle">Clustering information</td>
388  </tr>
389  <tr>
390    <td class="stepfields">
391      <table>
392      <tr valign="top">
393        <td class="prompt">Step</td>
394        <td style="width: 11em;"><b>Date</b></td>
395        <td><b>Operator</b></td>
396        <td class="status"></td>
397        <td class="help" rowspan="2">
398          <span id="mrnaDate.message" class="message" style="display: none;"></span>
399          Enter date and operator for each step in the clustering.
400          (YYYYMMDD or MMDD)
401        </td>
402      </tr>
403      <tr>
404        <td class="subprompt">Clustering</td>
405        <td>
406          <input type="text" name="clusterDate" maxlength="10" style="width: 8em;"
407            onblur="dateOnChange('clusterDate')" onkeypress="focusOnEnter(event, 'clusterOperator')">
408            <base:icon 
409              onclick="Dates.selectDate('Cluster date', 'reggie', 'clusterDate', 'setDate', 'yyyyMMdd')"
410              image="calendar.png" 
411              tooltip="Select a date from a calendar" 
412              tabindex="-1"
413            />
414        </td>
415        <td>
416          <input type="text" name="clusterOperator" value="<%=HTML.encodeTags(user.getName()) %>" 
417            style="width: 95%;" maxlength="255" onkeypress="focusOnEnter(event, 'clusterProtocol')">
418        </td>
419        <td class="status" id="clusterDate.status"></td>
420      </tr>
421      <tr valign="top">
422        <td class="prompt">Protocol</td>
423        <td class="input" colspan="2"><select style="width:90%" name="clusterProtocol" id="clusterProtocol" 
424          onkeypress="focusOnEnter(event, 'comments')"></select></td>
425        <td class="status" id="clusterProtocol.status"></td>
426        <td class="help"><span id="clusterProtocol.message" class="message" style="display: none;"></span>
427          Select the protocol which was used in the clustering.
428        </td>
429      </tr>
430      <tr valign="top">
431        <td class="prompt">Comments</td>
432        <td class="input" colspan="2"><textarea rows="4" cols="50" style="width: 90%;" name="comments" value="" onblur="commentsOnChange()"></textarea></td>
433        <td class="status" id="comments.status"></td>
434        <td class="help"><span id="comments.message" class="message" style="display: none;"></span>Comments about the clustering.</td>
435      </tr>
436      </table>
437    </td>
438  </tr>
439  </table>
440  </div>
441 
442  <div class="loading" id="loading" style="display: none;"><table><tr><td><img src="../images/loading.gif"></td><td id="loading.msg">Please wait...</td></tr></table></div>
443 
444  <div class="messagecontainer error" id="errorMessage" style="display: none; width: 950px; margin-left: 20px; margin-bottom: 0px;"></div>
445 
446  <div id="messages" class="success" style="display: none; width: 950px; margin-left: 20px; margin-top: 20px;"></div>
447 
448  <table style="margin-left: 20px; margin-top: 10px;" class="navigation">
449    <tr>
450      <td><base:button id="gocancel" title="Cancel" onclick="goRestart(false)" style="display: none;"/></td>
451      <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" onclick="goNext(true)"/></td>
452      <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>" onclick="goRegister()" style="display: none;"/></td>
453      <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" onclick="goRestart(true)" style="display: none;"/></td>
454      <td id="gonext.message" class="message"></td>
455    </tr>
456  </table>
457 
458  </form>
459  </div>
460 
461</base:body>
462</base:page>
463<%
464}
465finally
466{
467  if (dc != null) dc.close();
468}
469%>
Note: See TracBrowser for help on using the repository browser.