source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/lib_registration.jsp @ 1934

<%@ 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 = false;
var currentStep = 1;

var libDateIsValid = false;
var wellTableIsValid = false;
var qubitCsvIsValid = false;
var libCommentsIsValid = false;

function init()
{
  var frm = document.forms['reggie'];
  var bioplates = getLibraryBioPlates();
  
  // Load existing Library plates not yet registered
  var plates = frm.bioplate;
  if (bioplates != null && bioplates.length > 0)
  {
    for (var i=0; i < bioplates.length; i++)
    {
      var bioplate = bioplates[i];
      var option = new Option(bioplate.name, bioplate.id);
      option.comments = bioplate.comments;
      plates.options[plates.length] = option;
    }
    bioplateIsValid = true;
    setInputStatus('bioplate', '', 'valid');
    bioPlateOnChange();
    outcomeOnChange();
  }
  else
  {
    var msg = 'No Library bioplates available for processing.';
    setFatalError(msg);
    return;
  }

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


function goNextAuto()
{
  goNext(false);
}

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



function getLibraryBioPlates()
{
  var frm = document.forms['reggie']; 
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading Library bioplates...');
    var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=GetLibraryPlatesForLibPrep';   
    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.bioplates;
}

function gotoStep2()
{
  var frm = document.forms['reggie']; 
  frm.bioplate.disabled = true;
  frm.outcome[0].disabled = true;
  frm.outcome[1].disabled = true;
  
  currentStep = 2;
  Main.addClass(document.getElementById('step.1.section'), 'disabled');
  Main.hide('gonext');
  Main.show('gocancel');
  Main.show('goregister');
  
  Main.show('step.2.section');
  frm.libDate.focus();

  // Load Library protocols
  var libProtocols = getProtocols('LIBRARY_PROTOCOL');
  for (var i = 0; i < libProtocols.length; i++)
  {
    var protocol = libProtocols[i];
    frm.libProtocol[frm.libProtocol.length] = new Option(protocol.name, protocol.id, protocol.isDefault);
    setInputStatus('libProtocol', '', 'valid');
  }
  if (frm.libProtocol.length == 0)
  {
    frm.libProtocol[0] = new Option('- none -', '');
  }
}

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 bioPlateOnChange()
{
  var frm = document.forms['reggie'];
}

function outcomeOnChange()
{
  var frm = document.forms['reggie'];
  var failed = document.getElementById('outcomeFailed').checked

  if (failed)
  {
    Main.addClass(frm.libComments, 'required');
    Main.hide('filesSection');
  }
}

var lastPrefix;
function browseOnClick(prefix, extension)
{
  var frm = document.forms['reggie'];
  if (frm[prefix+'.path'].disabled) return;
  
  var url = getRoot() + 'filemanager/index.jsp?ID=<%=ID%>&cmd=SelectOne&callback=setFileCallback';
  url += '&resetTemporary=1&tmpfilter:STRING:name='+escape('%.' + extension);
  lastPrefix = prefix;
  Main.openPopup(url, 'SelectFile', 1000, 700);
}

function setFileCallback(id, path)
{
  var frm = document.forms['reggie'];
  frm[lastPrefix+'.id'].value = id;
  frm[lastPrefix+'.path'].value = path;
  
  if (lastPrefix == 'welltable')
  {
    preValidateCsvFile();
  }
  else if (lastPrefix == 'qubitcsv')
  {
    qubitCsvFileOnChange();
    frm.libProtocol.focus();
  }
  else
  {
    setInputStatus(lastPrefix, '', 'valid');
  }
}

function libDateOnChange()
{
  var frm = document.forms['reggie'];
  libDateIsValid = false;
  setInputStatus('libDate', '', '');
  
  var libDate = frm.libDate.value;
  if (libDate == '')
  {
    setInputStatus('libDate', 'Missing', 'invalid');
    return;
  }

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


function preValidateCsvFile()
{
  var frm = document.forms['reggie'];
  var csvId = frm['welltable.id'].value;
  var csvPath = frm['welltable.path'].value;
  
  wellTableIsValid = false;
  
  if (!csvId) 
  {
    setInputStatus('welltable', 'Missing', 'invalid');
    return;
  }
  
  var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=PreValidateCaliperWellTable&csv='+csvId;
  
  var request = Ajax.getXmlHttpRequest();
  request.open("POST", url, false); 
  request.send('');
  
  if (debug) Main.debug(request.responseText);
  var response = JSON.parse(request.responseText);  
  
  if (response.messages && response.messages.length > 0)
  {
    var messages = '<ul>';
    for (var i = 0; i < response.messages.length; i++)
    {
      messages += '<li>' + response.messages[i];
    }
    messages += '</ul>';
    setInnerHTML('messages', messages);
    Main.show('messages');
  }
  else
  {
    Main.hide('messages');  
  }
  
  if (response.status != 'ok')
  {
    setInputStatus('welltable', response.message, 'invalid');
    Main.addClass(document.getElementById('messages'), 'failure');
    return;
  }

  setInputStatus('welltable', '', 'valid');
  wellTableIsValid = true;
}


function qubitCsvFileOnChange()
{
  var frm = document.forms['reggie'];
  qubitCsvIsValid = false;
  if (!frm['qubitcsv.id'].value)
  {
    // A PDF is reuired for successful registration, optional after a failure
    var msg = frm['qubitcsv.path'].value ? 'Use the Browse button to select a file' : 'Missing';
    setInputStatus('qubitcsv', msg, 'invalid');
    return;
  }
  qubitCsvIsValid = true;
  setInputStatus('qubitcsv', '', 'valid');
}

function libCommentsOnChange()
{
  var failed = document.getElementById('outcomeFailed').checked;
  if (!failed) return;

  var frm = document.forms['reggie'];
  libCommentsIsValid = false;
  setInputStatus('libComments', '', '');
  
  var comments = frm.libComments.value;
  if (comments == '')
  {
    setInputStatus('libComments', 'Missing', 'invalid');
    return;
  }

  setInputStatus('libComments', '', 'valid');
  libCommentsIsValid = true;
}


function step2IsValid()
{
  var failed = document.getElementById('outcomeFailed').checked;
  if (failed)
  {
    return libDateIsValid && libCommentsIsValid;
  }
  else
  {
    return libDateIsValid && wellTableIsValid && qubitCsvIsValid;
  } 
}

function goRegister()
{
  if (!step2IsValid()) return;
  var frm = document.forms['reggie'];

  
  Main.hide('goregister');
  Main.hide('gocancel');

  var submitInfo = {};
  submitInfo.bioplate = parseInt(frm.bioplate.value, 10);

  Main.addClass(document.getElementById('step.2.section'), 'disabled');
  var url = '../LibPrep.servlet?ID=<%=ID%>&cmd=ImportLibPrepResults';
  var failed = document.getElementById('outcomeFailed').checked;
  submitInfo.failed = failed;
    
  if (!failed)
  {
    submitInfo.wellTableCsv = parseInt(frm['welltable.id'].value, 10);
    submitInfo.caliperGxd = parseInt(frm['calipergxd.id'].value, 10);
    submitInfo.caliperPdf = parseInt(frm['caliperpdf.id'].value, 10);
    submitInfo.qubitCsv = parseInt(frm['qubitcsv.id'].value, 10);
  }
    
  submitInfo.libDate = frm.libDate.value;
  submitInfo.libProtocol = parseInt(frm.libProtocol.value, 10);
  submitInfo.libOperator = frm.libOperator.value;
  submitInfo.libComments = frm.libComments.value;
  
  if (debug) Main.debug(JSON.stringify(submitInfo));
  
  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="Library 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 Library bioplate</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Library bioplate</td>
        <td class="input"><select class="required" style="width:90%;" 
            name="bioplate" id="bioplate" onchange="bioPlateOnChange()"></select>
        </td>
        <td class="status" id="bioplate.status"></td>
        <td class="help"><span id="bioplate.message" class="message" style="display: none;"></span>
          Select an existing Library bioplate. The list contain all Library bioplates that
          has not yet been processed (determined by the absence of a 'creation' date).
        </td>
      </tr>
      <tr valign="top" id="outcomeSection">
        <td class="prompt">Outcome</td>
        <td class="input">
          <input type="radio" name="outcome" id="outcomeSuccess" 
            onchange="outcomeOnChange()" checked><label for="outcomeSuccess">Success</label> - continue processing<br>
          <input type="radio" name="outcome" id="outcomeFailed" 
            onchange="outcomeOnChange()"><label for="outcomeFailed">Failure</label> - no further processing
        </td>
        <td class="status"></td>
        <td class="help">
          Select the <b>Failure</b> option if further processing to pooled libraries is not possible.
          Existing 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">Full plate registration</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Date</td>
        <td class="input">
          <input type="text" class="required" name="libDate" value="" size="12" maxlength="10"
            onblur="libDateOnChange()" onkeypress="focusOnEnter(event, 'welltable.path')">
        </td>
        <td class="status" id="libDate.status"></td>
        <td class="help">
          <span id="libDate.message" class="message" style="display: none;"></span>(YYYYMMDD or MMDD)
        </td>
      </tr>
      <tbody id="filesSection">
      <tr>
        <td class="prompt">Caliper files</td>
        <td class="input"></td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">Well table CSV</td>
        <td class="input">
          <input type="hidden" name="welltable.id" value="">
          <table>
          <tr>
          <td><input class="text required" type="text" 
            name="welltable.path" value=""
            size="50" onkeypress="doOnEnter(event, function(){document.getElementById('btnWellTable').click()})"
            onblur="csvFileOnChange()"
            ></td>
          <td style="padding-left: 4px;"><base:button 
              title="Browse&hellip;"
              onclick="browseOnClick('welltable', 'csv')"
              id="btnWellTable"
              />
          </td>
          </tr>
          </table>
        </td>
        <td class="status" id="welltable.status"></td>
        <td class="help"><span id="welltable.message" class="message" style="display: none;"></span>
           Select the <b>Well Table CSV</b> file that contains the exported analysis 
           result from the Caliper software. 
        </td>
      </tr>
      <tr valign="top">
        <td class="subprompt">GXD raw data</td>
        <td class="input">
          <input type="hidden" name="calipergxd.id" value="">
          <table>
          <tr>
          <td><input class="text" type="text" 
            name="calipergxd.path" value=""
            size="50" onkeypress="doOnEnter(event, function(){document.getElementById('btnCaliperGxd').click()})"
            onblur="caliperGxdFileOnChange()"
            ></td>
          <td style="padding-left: 4px;"><base:button 
              title="Browse&hellip;"
              onclick="browseOnClick('calipergxd', 'gxd')"
              id="btnCaliperGxd"
              />
          </td>
          </tr>
          </table>
        </td>
        <td class="status" id="calipergxd.status"></td>
        <td class="help"><span id="calipergxd.message" class="message" style="display: none;"></span>
          Select the <b>GXD raw data file</b> from Caliper.
        </td>
      </tr>
      <tr valign="top">
        <td class="subprompt">PDF file</td>
        <td class="input">
          <input type="hidden" name="caliperpdf.id" value="">
          <table>
          <tr>
          <td><input class="text" type="text" 
            name="caliperpdf.path" value=""
            size="50" onkeypress="doOnEnter(event, function(){document.getElementById('btnCaliperPdf').click()})"
            onblur="caliperPdfFileOnChange()"
            ></td>
          <td style="padding-left: 4px;"><base:button 
              title="Browse&hellip;"
              onclick="browseOnClick('caliperpdf', 'pdf')"
              id="btnCaliperPdf"
              />
          </td>
          </tr>
          </table>
        </td>
        <td class="status" id="caliperpdf.status"></td>
        <td class="help"><span id="caliperpdf.message" class="message" style="display: none;"></span>
          Select the <b>PDF file</b> that contains a printout with diagrams and other
          useful documentation.
        </td>
      </tr>
      <tr>
        <td class="prompt">Qubit files</td>
        <td class="input"></td>
        <td class="status"></td>
        <td class="help"></td>
      </tr>
      <tr valign="top">
        <td class="subprompt">Conc. CSV</td>
        <td class="input">
          <input type="hidden" name="qubitcsv.id" value="">
          <table>
          <tr>
          <td><input class="text required" type="text" 
            name="qubitcsv.path" value=""
            size="50" onkeypress="doOnEnter(event, function(){document.getElementById('btnQubitCsv').click()})"
            onblur="qubitCsvFileOnChange()"
            ></td>
          <td style="padding-left: 4px;"><base:button 
              title="Browse&hellip;"
              onclick="browseOnClick('qubitcsv', 'csv')"
              id="btnQubitCsv"
              />
          </td>
          </tr>
          </table>
        </td>
        <td class="status" id="qubitcsv.status"></td>
        <td class="help"><span id="qubitcsv.message" class="message" style="display: none;"></span>
          Select the <b>Qubit CSV</b> file that contains the table with concentration
          measurements.
        </td>
      </tr>
      </tbody>
      <tr valign="top">
        <td class="prompt">Protocol</td>
        <td class="input"><select style="width:90%" name="libProtocol" id="libProtocol" 
          onkeypress="focusOnEnter(event, 'libOperator')"></select></td>
        <td class="status" id="libProtocol.status"></td>
        <td class="help"><span id="libProtocol.message" class="message" style="display: none;"></span>
          Select the protocol used for library preparation.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Operator</td>
        <td class="input">
          <input type="text" name="libOperator" value="<%=HTML.encodeTags(user.getName()) %>" 
            style="width: 90%;" maxlength="255" onkeypress="focusOnEnter(event, 'libComments')">
        </td>
        <td class="status" id="libOperator.status"></td>
        <td class="help">
          <span id="libOperator.message" class="message" style="display: none;"></span>
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Comments</td>
        <td class="input"><textarea rows="4" cols="50" style="width: 90%;" name="libComments" value="" onblur="libCommentsOnChange()"></textarea></td>
        <td class="status" id="libComments.status"></td>
        <td class="help"><span id="libComments.message" class="message" style="display: none;"></span>Comments about the library preparation.</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();
}
%>