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

<%@ page
  pageEncoding="UTF-8"
  session="false"
  import="net.sf.basedb.core.User"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.SessionControl"
  import="net.sf.basedb.core.Application"
  import="net.sf.basedb.clients.web.Base" 
  import="net.sf.basedb.clients.web.util.HTML"  
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(request, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
DbControl dc = null;
try
{
  dc = sc.newDbControl();
  final User user = User.getById(dc, sc.getLoggedInUserId());
%>
<base:page type="default" >
<base:head scripts="ajax.js" styles="path.css">
  <link rel="stylesheet" type="text/css" href="../css/reggie.css">
  <script language="JavaScript" src="../reggie.js" type="text/javascript" charset="UTF-8"></script>

<script language="JavaScript">

var debug = true;
var currentStep = 1;

var dateIsValid = [];
var flowCellIsValid = [];
var commentsIsValid = false;


function init()
{
  var frm = document.forms['reggie'];
  var flowCells = getFlowCells();
  
  // Load existing Flow cells not yet registered
  if (flowCells != null && flowCells.length > 0)
  {
    for (var i=0; i < flowCells.length; i++)
    {
      var flowCell = flowCells[i];
      var option = new Option(flowCell.name, flowCell.id, i < 2);
      option.flowCell = flowCell;
      frm.flowcells.options[frm.flowcells.length] = option;
    }
    setInputStatus('flowcells', '', 'valid');
    outcomeOnChange();
  }
  else
  {
    var msg = 'No flow cells available for processing.';
    setFatalError(msg);
    return;
  }

  // All is ok
  frm.flowcells.focus();
}


function goNextAuto()
{
  goNext(false);
}

function goNext(manual)
{
  setInnerHTML('gonext.message', '');
  if (currentStep == 1)
  {   
    gotoStep2();
  }
  setCurrentStep(currentStep);
}



function getFlowCells()
{
  var frm = document.forms['reggie']; 
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading flow cells lists...');
    var url = '../FlowCell.servlet?ID=<%=ID%>&cmd=GetUnprocessedFlowCells';   
    request.open("GET", url, false);  
    request.send(null);
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);  
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }
  return response.flowCells;
}

function gotoStep2()
{
  var frm = document.forms['reggie'];
  
  var selectedFlowCells = [];
  for (var i = 0; i < frm.flowcells.length; i++)
  {
    if (frm.flowcells[i].selected)
    {
      selectedFlowCells[selectedFlowCells.length] = frm.flowcells[i].flowCell;
    }
  }
  
  if (selectedFlowCells.length == 0)
  {
    setInputStatus('flowcells', 'Select at least 1 flow cell', 'invalid');
    return;
  }

  
  frm.flowcells.disabled = true;
  frm.outcome[0].disabled = true;
  frm.outcome[1].disabled = true;

  currentStep = 2;
  Main.show('step.2.section');
  Main.addClass(document.getElementById('step.1.section'), 'disabled');
  Main.hide('gonext');
  Main.show('gocancel');
  Main.show('goregister');
  
  var html = '<tr valign="top">';
  html += '<td class="prompt">Flow cell</td>';
  html += '<td style="width: 11em;"><b>ID</b></td>';
  html += '<td><b>ReadString</b></td>';
  html += '<td class="status"></td>';
  html += '<td class="help" rowspan="' + (selectedFlowCells.length+1) +'">';
  html += 'ID and ReadString is required for registration. ';
  html += 'ReadString must be a sequence of letters <b>Y</b>, <b>N</b>, <b>I</b>, <b>J</b> followed by digits.';
  html += '</td>';
  html += '</tr>';
  
  for (var i = 0; i < selectedFlowCells.length; i++)
  {
    var fc = selectedFlowCells[i];
    var prefix = 'fc.'+fc.id;
    html += '<tr>';
    html += '<td class="subprompt">'+fc.name+'</td>';
    html += '<td><input type="text" class="required" name="'+prefix+'.id" onblur="flowCellIdOnBlur('+fc.id+')"></td>';
    html += '<td><input type="text" class="required" name="'+prefix+'.readString" onblur="readStringOnBlur('+fc.id+')" value="'+fc.ReadString+'"></td>';
    html += '<td class="status" id="'+prefix+'.status">';
    html += '</tr>';
  }
  
  setInnerHTML('fc-data', html);
  
  // Load mRNA protocols
  var clusterProtocols = getProtocols('CLUSTER_PROTOCOL');
  for (var i = 0; i < clusterProtocols.length; i++)
  {
    var protocol = clusterProtocols[i];
    frm.clusterProtocol[frm.clusterProtocol.length] = new Option(protocol.name, protocol.id, protocol.isDefault);
    setInputStatus('clusterProtocol', '', 'valid');
  }
  if (frm.clusterProtocol.length == 0)
  {
    frm.clusterProtocol[0] = new Option('- none -', '');
  }

  frm['fc.'+selectedFlowCells[0].id+'.id'].focus();
}

function getProtocols(subtype)
{
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading ' + subtype + ' protocols...');
    var url = '../Protocol.servlet?ID=<%=ID%>&cmd=GetProtocols&subtype='+subtype;   
    request.open("GET", url, false);  
    request.send(null);
  }
  finally
  {
    hideLoadingAnimation();
  }

  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);  
  if (response.status != 'ok')
  {
    setFatalError(response.message);
    return false;
  }
  return response.protocols;
}

function outcomeOnChange()
{
  var frm = document.forms['reggie'];
  Main.addOrRemoveClass(frm['comments'], 'required', document.getElementById('outcomeFailed').checked);
  commentsOnChange();
}

function dateOnChange(dateField)
{
  var frm = document.forms['reggie'];

  setInputStatus(dateField, '', '');
  dateIsValid[dateField] = true;
  var date = frm[dateField].value;

  if (date == '')
  {
    setInputStatus(dateField, 'Missing date', 'warning');
    return;
  }

  // Auto-fill the date if it's only given with 4(MMdd) or 6(yyMMdd) digits.    
  date = autoFillDate(date);
  frm[dateField].value = date;
  if (!Dates.isDate(date, 'yyyyMMdd'))
  {
    setInputStatus(dateField, 'Not a valid date', 'invalid');
    dateIsValid[dateField] = false;
    return;
  }
  
  setInputStatus(dateField, '', 'valid');
}

function setDate(frmName, dateField, date)
{
  var frm = document.forms['reggie'];
  frm[dateField].value = date;
  dateOnChange(dateField);
  frm[dateField].focus();
}

function commentsOnChange()
{
  var frm = document.forms['reggie'];
  commentsIsValid = false;
  setInputStatus('comments', '', '');
  
  var comments = frm.comments.value;
  
  if (comments == '' && document.getElementById('outcomeFailed').checked)
  {
    setInputStatus('comments', 'Missing', 'invalid');
    return;
  }

  setInputStatus('comments', '', 'valid');
  commentsIsValid = true;
}

function flowCellIdOnBlur(flowCellId)
{
  checkFlowCellData(flowCellId);
}

function readStringOnBlur(flowCellId)
{
  checkFlowCellData(flowCellId);
}

function checkFlowCellData(flowCellId)
{
  var frm = document.forms['reggie'];
    
  var prefix = 'fc.'+flowCellId;
  setInputStatus(prefix, '', '');
  
  flowCellIsValid[prefix+'.id'] = false;
  flowCellIsValid[prefix+'.readString'] = false;
  
  var id = frm[prefix+'.id'].value;
  if (id == '')
  {
    setInputStatus(prefix, 'ID is a required value', 'invalid');
    return;
  }
  
  flowCellIsValid[prefix+'.id'] = true;
  
  var readString = frm[prefix+'.readString'].value;
  if (readString == '')
  {
    setInputStatus(prefix, 'ReadString is a required value', 'invalid');
    return;
  }

  if (!readString.match(/^([YNIJ]\d+)+$/))
  {
    setInputStatus(prefix, 'Not a valid ReadString value', 'invalid');
    return;
  }
  
  flowCellIsValid[prefix+'.readString'] = true;
  setInputStatus(prefix, '', 'valid');
}

function step2IsValid()
{
  if (!commentsIsValid) return false;
  
  if (dateIsValid['clusterDate'] == false) return false;
  if (dateIsValid['sequenceStartDate'] == false) return false;
  
  var frm = document.forms['reggie'];
  for (var i = 0; i < frm.flowcells.length; i++)
  {
    if (frm.flowcells[i].selected)
    {
      var fc = frm.flowcells[i].flowCell;
      Main.debug(fc.name + ':'+ fc.id + ':' + flowCellIsValid['fc.'+fc.id+'.id'] + ':' + flowCellIsValid['fc.'+fc.id+'.readString']);
      if (flowCellIsValid['fc.'+fc.id+'.id'] != true) return false;
      if (flowCellIsValid['fc.'+fc.id+'.readString'] != true) return false;
    }
  }
  
  return true;
}

function goRegister()
{
  if (!step2IsValid()) return;
  var frm = document.forms['reggie'];
  
  Main.hide('goregister');
  Main.hide('gocancel');
  Main.addClass(document.getElementById('step.2.section'), 'disabled');

  frm.clusterDate.disabled = true;
  frm.clusterOperator.disabled = true;
  frm.sequenceStartDate.disabled = true;
  frm.sequenceOperator.disabled = true;
  frm.clusterProtocol.disabled = true;
  frm.comments.disabled = true;
  
  var submitInfo = {};
  submitInfo.flowCells = [];
  for (var i = 0; i < frm.flowcells.length; i++)
  {
    if (frm.flowcells[i].selected) 
    {
      var fc = frm.flowcells[i].flowCell;
      fc.externalId = frm['fc.'+fc.id+'.id'].value;
      fc.ReadString = frm['fc.'+fc.id+'.readString'].value;
      submitInfo.flowCells[submitInfo.flowCells.length] = fc;
    }
  }
  
  submitInfo.clusterProtocol = parseInt(frm.clusterProtocol.value, 10);
  submitInfo.failed = document.getElementById('outcomeSuccess').checked ? false : true;
  submitInfo.clusterDate = frm.clusterDate.value;
  submitInfo.clusterOperator = frm.clusterOperator.value;
  submitInfo.sequenceStartDate = frm.sequenceStartDate.value;
  submitInfo.sequenceOperator = frm.sequenceOperator.value;
  submitInfo.comments = frm.comments.value;
  
  if (debug) Main.debug(JSON.stringify(submitInfo));
  var url = '../FlowCell.servlet?ID=<%=ID%>&cmd=RegisterFlowCells';
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Performing registration...');
    request.open("POST", url, false);
    request.send(JSON.stringify(submitInfo));
  }
  finally
  {
    hideLoadingAnimation();
  }
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);
  
  if (response.messages && response.messages.length > 0)
  {
    var msg = '<ul>';
    for (var i = 0; i < response.messages.length; i++)
    {
      var msgLine = response.messages[i];
      if (msgLine.indexOf('[Warning]') >= 0)
      {
        msg += '<li class="warning">' + msgLine.replace('[Warning]', '');
      }
      else
      {
        msg += '<li>' + msgLine;
      }
    }
    msg += '</ul>';
    setInnerHTML('messages', msg);
    Main.show('messages');
  }
  
  if (response.status != 'ok')
  {
    Main.addClass(document.getElementById('messages'), 'failure');
    setFatalError(response.message);
    return false;
  }

  Main.show('gorestart'); 
}


</script>

</base:head>
<base:body onload="init()">

  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Flow cell registration" 
    /></p:path>

  <div class="content">
  <%
  if (sc.getActiveProjectId() == 0)
  {
    %>
    <div class="messagecontainer note" style="width: 950px; margin-left: 20px; margin-bottom: 20px; margin-right: 0px; font-weight: bold; color: #cc0000;">
      No project has been selected. You may proceed with the registration but 
      created items will not be shared.
    </div>
    <%
  }
  %>

  <form name="reggie" onsubmit="return false;">
    <input type="hidden" name="pdf.id" value="">
  
  <div id="step.1.section">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select flow cells</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Flow cells</td>
        <td class="input"><select class="required" style="width:90%;" 
            name="flowcells" id="flowcells" multiple size="4"></select>
        </td>
        <td class="status" id="flowcells.status"></td>
        <td class="help"><span id="flowcells.message" class="message" style="display: none;"></span>
          Select one or more existing flow cells. The list contain all flow cells that
          has not yet been processed (determined by the absence of a 'creation' date).
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Outcome</td>
        <td class="input">
          <input type="radio" name="outcome" id="outcomeSuccess" 
            onchange="outcomeOnChange()" checked><label for="outcomeSuccess">Success</label> - continue with sequencing<br>
          <input type="radio" name="outcome" id="outcomeFailed" 
            onchange="outcomeOnChange()"><label for="outcomeFailed">Failure</label> - no sequencing
        </td>
        <td class="status"></td>
        <td class="help">
          Select the <b>Failure</b> option if it is not possible to continue
          with sequencing. RNA will be flagged and added
          to the <b>Flagged RNA</b> list.
        </td>
      </tr>
      </table>
    </td>
  </tr>
  </table>
  </div>
  
  <div id="step.2.section" style="display: none;">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">2</td>
    <td class="steptitle">Clustering information</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tbody id="fc-data"></tbody>
      <tr valign="top">
        <td class="prompt">Step</td>
        <td style="width: 11em;"><b>Date</b></td>
        <td><b>Operator</b></td>
        <td class="status"></td>
        <td class="help" rowspan="3">
          Enter date and operator for each step in the clustering and sequencing startup.
          (YYYYMMDD or MMDD)
        </td>
      </tr>
      <tr>
        <td class="subprompt">Clustering</td>
        <td>
          <input type="text" name="clusterDate" maxlength="10" style="width: 8em;"
            onblur="dateOnChange('clusterDate')" onkeypress="focusOnEnter(event, 'clusterOperator')">
            <base:icon 
              onclick="Dates.selectDate('Cluster date', 'reggie', 'clusterDate', 'setDate', 'yyyyMMdd')"
              image="calendar.png" 
              tooltip="Select a date from a calendar" 
              tabindex="-1"
            />
        </td>
        <td>
          <input type="text" name="clusterOperator" value="<%=HTML.encodeTags(user.getName()) %>" 
            style="width: 95%;" maxlength="255" onkeypress="focusOnEnter(event, 'sequenceStartDate')">
        </td>
        <td class="status" id="clusterDate.status"></td>
      </tr>
      <tr>
        <td class="subprompt">Sequence start</td>
        <td>
          <input type="text" name="sequenceStartDate" maxlength="10" style="width: 8em;"
            onblur="dateOnChange('sequenceStartDate')" onkeypress="focusOnEnter(event, 'sequenceOperator')">
            <base:icon 
              onclick="Dates.selectDate('Sequence start date', 'reggie', 'sequenceStartDate', 'setDate', 'yyyyMMdd')"
              image="calendar.png" 
              tooltip="Select a date from a calendar" 
              tabindex="-1"
            />
        </td>
        <td>
          <input type="text" name="sequenceOperator" value="<%=HTML.encodeTags(user.getName()) %>" 
            style="width: 95%;" maxlength="255" onkeypress="focusOnEnter(event, 'clusterProtocol')">
        </td>
        <td class="status" id="sequenceStartDate.status"></td>
      </tr>
      <tr valign="top">
        <td class="prompt">Protocol</td>
        <td class="input" colspan="2"><select style="width:90%" name="clusterProtocol" id="clusterProtocol" 
          onkeypress="focusOnEnter(event, 'comments')"></select></td>
        <td class="status" id="clusterProtocol.status"></td>
        <td class="help"><span id="clusterProtocol.message" class="message" style="display: none;"></span>
          Select the protocol which was used in the clustering.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Comments</td>
        <td class="input" colspan="2"><textarea rows="4" cols="50" style="width: 90%;" name="comments" value="" onblur="commentsOnChange()"></textarea></td>
        <td class="status" id="comments.status"></td>
        <td class="help"><span id="comments.message" class="message" style="display: none;"></span>Comments about the clustering.</td>
      </tr>
      </table>
    </td>
  </tr>
  </table>
  </div>
  
  <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>
  
  <div class="messagecontainer error" id="errorMessage" style="display: none; width: 950px; margin-left: 20px; margin-bottom: 0px;"></div>
  
  <div id="messages" class="success" style="display: none; width: 950px; margin-left: 20px; margin-top: 20px;"></div>
  
  <table style="margin-left: 20px; margin-top: 10px;" class="navigation">
    <tr>
      <td><base:button id="gocancel" title="Cancel" onclick="goRestart(false)" style="display: none;"/></td>
      <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" onclick="goNext(true)"/></td>
      <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>" onclick="goRegister()" style="display: none;"/></td>
      <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" onclick="goRestart(true)" style="display: none;"/></td>
      <td id="gonext.message" class="message"></td>
    </tr>
  </table>
  
  </form>
  </div>
  
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>