source: extensions/net.sf.basedb.reggie/trunk/resources/specimentube.jsp @ 1375

<%@ 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.clients.web.Base" 
%>
<%@ 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);
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="reggie.css">
  <script language="JavaScript" src="reggie.js" type="text/javascript" charset="UTF-8"></script>
  
  
<script language="JavaScript">
var caseIsValid = false;
var arrivalDateIsValid = false;
var nofDeliveredTubesIsValid = true;
var nofTubesIsValid = false;
var debug = false;
var currentStep = 1;

var caseInfo = null;
var specimenTubeInfo = null;

function init()
{
  var frm = document.forms['reggie'];
  frm.caseName.focus();
}

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

function gotoStep2()
{
  var frm = document.forms['reggie'];
  frm.caseName.disabled = true;
  currentStep = 2;
  var hasSpecimen = caseInfo.specimen && caseInfo.specimen.length > 0;
  var hasLeftSpecimen = false;
  var hasRightSpecimen = false;
  var hasUnknownSpecimen = false;
  var thisArrivalDate = null;
  var thisNumberOfTubes = null;
  var thisCaseSamplingDate = null;
  var thisCaseRNALaterDate = null;
  var thisCaseLaterality = null;
  var thisPad = null;

  Main.show('gocancel');
  Main.show('caseSection');

  if (caseInfo.id)
  {
    setInnerHTML('step2.title', 'Update Case Information');
    if (caseInfo.pad)
    {     
      frm.pad.value = caseInfo.pad;
    }
    if (caseInfo.laterality)
    {
      if(caseInfo.laterality == 'LEFT') hasLeftSpecimen = true;
      if(caseInfo.laterality == 'RIGHT') hasRightSpecimen = true;
      thisCaseLaterality = caseInfo.laterality;
      Forms.checkRadio(frm.laterality, thisCaseLaterality);
      lateralityOnChange();
    }
    // Load annotations from the actual case
    if (hasSpecimen)
    {
      frm.nofTubes.value = thisNumberOfTubes;
      frm.nofTubes.disabled = true;
      for (var i=0; i < caseInfo.specimen.length; i++)
      {
        var specimen = caseInfo.specimen[i];        
        if (specimen.pad && !thisPad)
        {         
          thisPad = specimen.pad;
        }
        if(specimen.arrivalDate && !thisArrivalDate)
        { 
          thisArrivalDate = specimen.arrivalDate;
        }
        if (specimen.nofTubes && !thisNumberOfTubes)
        {
          thisNumberOfTubes = specimen.nofTubes;
        }
        if (specimen.samplingDate && !thisCaseSamplingDate) 
        {
          thisCaseSamplingDate = specimen.samplingDate;         
        }
        if (specimen.rnaLaterDate && !thisCaseRNALaterDate) 
        {
          thisCaseRNALaterDate = specimen.rnaLaterDate;
        }
        if (specimen.laterality) 
        {
          if (specimen.laterality == 'LEFT') hasLeftSpecimen = true;
          if (specimen.laterality == 'RIGHT') hasRightSpecimen = true;
          if (!thisCaseLaterality) thisCaseLaterality = specimen.laterality;
        }
        else
        {
          hasUnknownSpecimen = true;        
        }
      }
      // If the number of tubes not is set - use the current number of specimen tubes.
      if (!thisNumberOfTubes) thisNumberOfTubes = caseInfo.specimen.length;
      frm.nofTubes.value = thisNumberOfTubes;
      // Check that all specimen tubes have the same laterality
      var numLateralities = 0;
      if (hasLeftSpecimen) numLateralities++;
      if (hasRightSpecimen) numLateralities++;
      if (hasUnknownSpecimen) numLateralities++;      
      if (numLateralities > 1)
      {
        setInputStatus('laterality', 'Specimen tubes with different laterality', 'warning');
        thisCaseLaterality = null;
        Forms.checkRadio(frm.laterality, thisCaseLaterality);       
      }     
      Forms.checkRadio(frm.laterality, thisCaseLaterality);
      lateralityOnChange();
      
      if (thisPad != null)
      {
        frm.pad.value = thisPad;
      }
      if (thisArrivalDate != null)
      {
        frm.arrivalDate.value = thisArrivalDate;
      }
      if (thisNumberOfTubes != null)
      {
        frm.nofTubes.value = thisNumberOfTubes;
      }
      if (thisCaseSamplingDate != null)
      {
        frm.samplingDate.value = thisCaseSamplingDate.substring(0, 8);
        frm.samplingTime.value = thisCaseSamplingDate.substring(9, 13);
        samplingDateTimeOnChange();
      }
      if (thisCaseRNALaterDate != null)
      {
        frm.rnaLaterDate.value = thisCaseRNALaterDate.substring(0, 8);
        frm.rnaLaterTime.value = thisCaseRNALaterDate.substring(9, 13);
        rnaLaterDateTimeOnChange();
      }
    }
  } 
}

function gotoStep3()
{
  var frm = document.forms['reggie'];
  var inputTubeHtml = '';
  var nofTubes = frm.nofTubes.value;

  frm.arrivalDate.disabled = true;
  frm.nofTubes.disabled = true;
  frm.pad.disabled = true;
  for (var i=0;i<frm.laterality.length;i++)
  {
    frm.laterality[i].disabled = true;
  }
  frm.rnaLaterDate.disabled = true;
  frm.samplingDate.disabled = true;
  frm.rnaLaterTime.disabled = true;
  frm.samplingTime.disabled = true;
  frm.pathNote.disabled = true; 
  
  for (var i=0;i<nofTubes;i++)
  {
    var specimen = null;
    if (caseInfo.specimen && caseInfo.specimen.length>0 && i<caseInfo.specimen.length)
    {
      specimen = caseInfo.specimen[i];
    }
    inputTubeHtml += '<tr>';
    inputTubeHtml += '<td class="prompt">Specimen Tube '+caseInfo.name+'.'+(i+1)+'</td>';
    inputTubeHtml += '</tr>';

    var box = 'box'+i;
    inputTubeHtml += '<tr>';
    inputTubeHtml += '<td class="subprompt">Box</td>';
    inputTubeHtml += '<td class="input"><input type="text" name='+box+' value="" size="12" maxlength="10"></td>';
    inputTubeHtml += '<td class="status" id="'+box+'.status"></td>';
    inputTubeHtml += '<td class="help"><span id="'+box+'.message" class="message" style="display: none;"></span>Box the specimen tube is located in.</td>';   
    inputTubeHtml += '</tr>';

    var row = 'row'+i;
    var column = 'column'+i;
    inputTubeHtml += '<tr>';
    inputTubeHtml += '<td class="subprompt">Row</td>';
    inputTubeHtml += '<td class="input"><input type="text" name='+row+' value="" size="3" maxlength="3">';
    inputTubeHtml += '&nbsp;Column<input type="text" name='+column+' value="" size="3" maxlength="3">';
    inputTubeHtml += '</td>';
    inputTubeHtml += '<td class="status" id="rowColumn'+i+'.status"></td>';
    inputTubeHtml += '<td class="help"><span id="rowColumn'+i+'.message" class="message" style="display: none;"></span>Row and column the specimen tube is located at.</td>';   
    inputTubeHtml += '</tr>';
    
    var his = 'his'+i;    
    inputTubeHtml += '<tr>';
    inputTubeHtml += '<td class="subprompt">His</td>';
    inputTubeHtml += '<td class="input"><input type="text" name='+his+' value="" size="12" maxlength="10"></td>';
    inputTubeHtml += '<td class="status" id="his.status"></td>';
    inputTubeHtml += '<td class="help"><span id="'+his+'.message" class="message" style="display: none;"></span>[µg]</td>';   
    inputTubeHtml += '</tr>';

    var allPrep = 'allPrep' + i;
    inputTubeHtml += '<tr>';
    inputTubeHtml += '<td class="subprompt">Allprep</td>';
    inputTubeHtml += '<td class="input"><input type="text" name='+allPrep+' value="" size="12" maxlength="10"></td>';
    inputTubeHtml += '<td class="status" id="'+allPrep+'.status"></td>';
    inputTubeHtml += '<td class="help"><span id="'+allPrep+'.message" class="message" style="display: none;"></span>[µg]</td>';   
    inputTubeHtml += '</tr>';

    var backupWeight = 'backupWeight'+i;
    inputTubeHtml += '<tr>';
    inputTubeHtml += '<td class="subprompt">Backup weight</td>';
    inputTubeHtml += '<td class="input"><input type="text" name='+backupWeight+' value="" size="12" maxlength="10"></td>';
    inputTubeHtml += '<td class="status" id="'+backupWeight+'.status"></td>';
    inputTubeHtml += '<td class="help"><span id="'+backupWeight+'.message" class="message" style="display: none;"></span>[µg]</td>';    
    inputTubeHtml += '</tr>';

    var deliveryComment = 'deliveryComment'+i;
    inputTubeHtml += '<tr>';
    inputTubeHtml += '<td class="subprompt">Operator comment</td>';
    inputTubeHtml += '<td class="input"><input type="text" name='+deliveryComment+' value="" size="12" maxlength="10"></td>';
    inputTubeHtml += '<td class="status" id="'+deliveryComment+'.status"></td>';
    inputTubeHtml += '<td class="help"><span id="'+deliveryComment+'.message" class="message" style="display: none;"></span>Operator delivery comment</td>';    
    inputTubeHtml += '</tr>';
  }

  setInnerHTML('tubeInputs', inputTubeHtml);
  Main.show('tubeSection');
  Main.hide('gonext');
  Main.show('gocreate');
  
}

function samplingDateTimeOnChange()
{
  var frm = document.forms['reggie'];
  samplingDateIsValid = false;
  setInputStatus('samplingDate', '', '');
  
  var samplingDate = frm.samplingDate.value;
  var samplingTime = frm.samplingTime.value;
  
  if (samplingDate != '' || samplingTime != '')
  {
    // Auto-fill the date if it's only given with 4(MMdd) or 6(yyMMdd) digits.
    samplingDate = autoFillDate(samplingDate);
    frm.samplingDate.value = samplingDate;

    samplingTime = autoFillTime(samplingTime);
    frm.samplingTime.value = samplingTime;
    
    if (!Dates.isDate(samplingDate, 'yyyyMMdd'))
    {
      setInputStatus('samplingDate', 'Not a valid date', 'invalid');
      return;
    }
    if (frm.rnaLaterDate.value == '') frm.rnaLaterDate.value = samplingDate;
    
    if (!Dates.isDate(samplingDate + ' ' + samplingTime, 'yyyyMMdd HHmm'))
    {
      if (samplingDate != '') setInputStatus('samplingDate', 'Not a valid time', 'invalid');
      return;
    }
    setInputStatus('samplingDate', '', 'valid');
  }
  samplingDateIsValid = true;
}

function rnaLaterDateTimeOnChange()
{
  var frm = document.forms['reggie'];
  rnaLaterDateIsValid = false;
  setInputStatus('rnaLaterDate', '', '');
  
  var rnaLaterDate = frm.rnaLaterDate.value;
  var rnaLaterTime = frm.rnaLaterTime.value;
  var rnaLaterTimestamp;
  
  if (rnaLaterDate != '' || rnaLaterTime != '')
  {
    // Auto-fill the date if it's only given with 4(MMdd) or 6(yyMMdd) digits.
    rnaLaterDate = autoFillDate(rnaLaterDate);
    frm.rnaLaterDate.value = rnaLaterDate;

    rnaLaterTime = autoFillTime(rnaLaterTime);
    frm.rnaLaterTime.value = rnaLaterTime;
    
    if (!Dates.isDate(rnaLaterDate, 'yyyyMMdd'))
    {
      setInputStatus('rnaLaterDate', 'Not a valid date', 'invalid');
      return;
    }
    rnaLaterTimestamp = Dates.parseString(rnaLaterDate + ' ' + rnaLaterTime, 'yyyyMMdd HHmm');
    if (rnaLaterTimestamp == null)
    {
      if (rnaLaterDate != '') setInputStatus('rnaLaterDate', 'Not a valid time', 'invalid');
      return;
    }
    setInputStatus('rnaLaterDate', '', 'valid');
  }
    
  rnaLaterDateIsValid = true;

  if (samplingDateIsValid && rnaLaterTimestamp)
  {
    var samplingTimestamp = Dates.parseString(frm.samplingDate.value + ' ' + frm.samplingTime.value, 'yyyyMMdd Hmm');
    if (samplingTimestamp && rnaLaterTimestamp.getDate() != samplingTimestamp.getDate())
    {
      setInputStatus('rnaLaterDate', 'Sampling and RNA later dates are different', 'warning');
    }
  }
}

function arrivalDateOnBlur()
{
  var frm = document.forms['reggie'];
  var arrivalDate = frm.arrivalDate.value;
  arrivalDateIsValid = false;

  setInputStatus('arrivalDate', '', '');

  if (arrivalDate != '')
  {
    arrivalDate = autoFillDate(arrivalDate);
    frm.arrivalDate.value = arrivalDate;

    if (!Dates.isDate(arrivalDate, 'yyyyMMdd'))
    {
      setInputStatus('arrivalDate', 'Not a valid date', 'invalid');
      return;
    }
    setInputStatus('arrivalDate', '', 'valid');
    arrivalDateIsValid = true;    
  }
  else
  {
    setInputStatus('arrivalDate', 'Missing', 'warning');
  } 
}

function nofTubesOnBlur()
{
  var frm = document.forms['reggie'];
  var nofTubes = frm.nofTubes.value;

  if (nofTubes == '')
  {
    setInputStatus('nofTubes', 'Missing', 'invalid');
    return;
  }
  setInputStatus('nofTubes','', 'valid'); 
}

function caseNameOnBlur()
{
  var frm = document.forms['reggie'];
  var caseName = frm.caseName.value;
  if (caseName == '')
  {
    setInputStatus('case', 'Missing', 'invalid');
    return;
  }
  setInputStatus('case', '', 'valid');
  caseIsValid = true;

  getCaseInfo();
}

function padOnChange()
{
  var frm = document.forms['reggie'];
  var PAD = frm.pad.value;
  if (PAD == '')
  {
    setInputStatus('pad', 'Missing', 'warning');
    return;
  }
  frm.pad.value = PAD.replace(/\+/, '-');
  setInputStatus('pad', '', 'valid');
}

function lateralityOnChange()
{
  lateralityIsValid = false;
  var updateMode = caseInfo.id;
  
  // Check selected laterality against specimen tubes
  var frm = document.forms['reggie'];
  var selectedLaterality = Forms.getCheckedRadio(frm.laterality);
  
  // No laterality/case selected
  if (selectedLaterality == null) 
  {
    setInputStatus('laterality', 'Not selected', 'invalid');
    return;
  }
  var laterality = selectedLaterality.value;  
  // No specimen tubes?
  if (!caseInfo.specimen || caseInfo.specimen.length == 0) return;
  
  for (var i = 0; i < caseInfo.specimen.length; i++)
  {
    var specimen = caseInfo.specimen[i];
    if (specimen.laterality != laterality)
    {
      if (specimen.laterality == null || updateMode)
      {
        setInputStatus('laterality', 'Specimen tubes are updated to: ' + laterality, 'valid')
      }
      else
      {
        setInputStatus('laterality', 'Not same laterality as specimen tubes', 'warning');
      }
      return;
    }
  } 
}

function getCaseInfo()
{
  var frm = document.forms['reggie']; 
  var caseName = frm.caseName.value;
  var request = Ajax.getXmlHttpRequest();
  var url = 'SpecimenTubeRegistration.servlet?ID=<%=ID%>&cmd=GetCaseInfo';
  url += '&caseName=' + caseName;
  request.open("GET", url, false);
  request.send(null);

  if (debug) Main.debug(request.responseText);

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

  caseInfo = response.caseInfo;
  if (caseInfo)
  {
    gotoStep2();
  }
}

</script>

</base:head>
<base:body onload="init()">
<p:path style="margin-top: 20px; margin-bottom: 10px;">
    <p:pathelement title="Reggie" href="<%="index.jsp?ID="+ID%>" />
    <p:pathelement title="Specimen tube registration" />
  </p:path>

  <%
  if (sc.getActiveProjectId() == 0)
  {
    %>
    <base:note type="warning" style="width: 800px; 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.
    </base:note>
    <%
  }
  %>

  <form name="reggie" onsubmit="return false;">
  
  <!-- 1. Case name-->
  <table border="0" cellspacing="0" cellpadding="0" class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Enter Case Name</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
      <tr valign="top">
        <td class="prompt">Case name</td>
        <td class="input"><input type="text" name="caseName" 
          size="18" maxlength="12" onblur="caseNameOnBlur()"></td>
        <td class="status" id="case.status"></td>
        <td class="help"><span id="case.message" class="message" style="display: none;"></span>The case (barcode) associated with this specimen tube.</td>
      </tr>
      </table>
    </td>
  </tr>
  </table>
  
  <div id="caseSection" style="display: none;">
  <p></p>
  <table border="0" cellspacing="0" cellpadding="0" class="stepform">
  <tr>
    <td rowspan="2" class="stepno">2</td>
    <td id="step2.title" class="steptitle">Enter Case information</td>
  </tr>
  <tr>
    <td class="stepfields">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td class="prompt">Number of tubes</td>
      <td class="input"><input type="text" name="nofTubes"
        value="" size="12" maxlength="10" onblur="nofTubesOnBlur()"></td>
      <td class="status" id="nofTubes.status"></td>
      <td class="help"><span id="nofTubes.message" class="message" style="display:none"></span>Number of tubes in this case.</td>
    </tr>
    <tr valign="top">
      <td class="prompt">Arrival date</td>
      <td class="input"><input type="text" name="arrivalDate"
        value="" size="12" maxlength="10" onblur="arrivalDateOnBlur()"></td>
      <td class="status" id="arrivalDate.status"></td>
      <td class="help"><span id="arrivalDate.message" class="message" style="display:none"></span>Date when the specimen tubes arrived(YYYYMMDD or MMDD).</td>
    </tr>
    <tr>
      <td class="prompt">PAD</td>
      <td class="input"><input type="text" name="pad" 
        value="" size="12" maxlength="10"
        onblur="padOnChange()"></td>
      <td class="status" id="pad.status"></td>
      <td class="help"><span id="pad.message" class="message" style="display: none;"></span></td>
    </tr>
    <tr id="samplingDateSection" valign="top">
      <td class="prompt">Sampling date</td>
      <td class="input"><input type="text" name="samplingDate" value="" size="12" maxlength="10" 
          onkeypress="focusOnEnter(event, 'samplingTime')" onblur="samplingDateTimeOnChange()">
        Time <input type="text" name="samplingTime" value="" size="6" maxlength="4" 
          onkeypress="focusOnEnter(event, 'rnaLaterDate')" onblur="samplingDateTimeOnChange()"></td>
      <td class="status" id="samplingDate.status"></td>
      <td class="help"><span id="samplingDate.message" class="message" style="display: none;"></span>Date+time of surgical removal (YYYYMMDD, HHMM)</td>
    </tr>
    <tr id="rnaLaterDateSection" valign="top">
      <td class="prompt">RNA Later date</td>
      <td class="input"><input type="text" name="rnaLaterDate" value="" size="12" maxlength="10"
          onkeypress="focusOnEnter(event, 'rnaLaterTime')" onblur="rnaLaterDateTimeOnChange()">
        Time <input type="text" name="rnaLaterTime" value="" size="6" maxlength="4"
          onblur="rnaLaterDateTimeOnChange()"></td>
      <td class="status" id="rnaLaterDate.status"></td>
      <td class="help"><span id="rnaLaterDate.message" class="message" style="display: none;"></span>Date+time of pathology handling (YYYYMMDD, HHMM)</td>
    </tr>
    <tr>
      <td class="prompt" id="laterality.prompt">Laterality</td>
      <td class="input" id="laterality.input">
        <input type="radio" name="laterality" value="LEFT" onclick="lateralityOnChange()">LEFT<br>
        <input type="radio" name="laterality" value="RIGHT" onclick="lateralityOnChange()">RIGHT<br>
        <input type="radio" name="laterality" value="" onclick="lateralityOnChange()"><i>unknown</i>
      </td>
      <td class="status" id="laterality.status"></td>
      <td class="help"><span id="laterality.message" class="message" style="display: none;"></span></td>
    </tr>
    <tr>
      <td class="prompt" id="pathNote.prompt">Path note</td>
      <td class="input" id="pathNote.input"><textarea rows="3" cols="30" name="pathNote" value=""></textarea></td>
      <td class="status" id="pathNote.status"></td>
      <td class="help"><span id="pathNote.message" class="message" style="display: none;"></span></td>
    </tr>
    </table>
    </td>
      
  </tr>
  </table>
  </div>
  
  <div id="tubeSection" style="display:none;">
  <p></p>
  <table border="0" cellspacing="0" cellpadding="0" class="stepform">
  <tr>
    <td rowspan="2" class="stepno">3</td>
    <td class="steptitle">Enter tube information</td>   
  </tr>
  <tr>
    <td class="stepfields">
      <table id="tubeInputs" border="0" cellspacing="0" cellpadding="0" width="100%">
      </table>
    </td>
  </tr>
  </table>
  </div>
    
  <div class="error" id="errorMessage" style="display: none; width: 800px; margin-left: 20px; margin-bottom: 0px;"></div>
  
  <div id="done" class="success" style="display: none; width: 800px; 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="gonext.gif" onclick="goNext(true)"/></td>
      <td><base:button id="gocreate" title="Create" image="gonext.gif" onclick="goCreate()" style="display: none;"/></td>
      <td><base:button id="gorestart" title="Restart" image="goback.gif" onclick="goRestart(true)" style="display: none;"/></td>
      <td id="gonext.message" class="message"></td>
    </tr>
  </table>
  </form>
  
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>