source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/pool_protocol.jsp @ 1973

<%@ 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.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 pools;

function init()
{
  var frm = document.forms['reggie'];
  pools = getUnpooledPools();
  
  var poolsList = frm.pools;
  var plateList = frm.bioplate;
  
  // We get a list of pools from the servlet
  // Each pool has a list of libraries 
  // We want to find the Library bioplates that are unique
  // within a pool (eg. all libraries are from the same bioplate)
  if (pools != null && pools.length > 0)
  {
    var libPlates = [];
    for (var poolNo=0; poolNo < pools.length; poolNo++)
    {
      var pool = pools[poolNo];
      
      var libPlateForPool = null;
      for (var libNo = 0; libNo < pool.libraries.length; libNo++)
      {
        var lib = pool.libraries[libNo];
        var libPlate = lib.bioWell.bioPlate;
        
        if (libNo == 0)
        {
          libPlateForPool = libPlate;
        }
        else if (libPlateForPool.id != libPlate.id)
        {
          libPlateForPool = null;
          break;
        }
      }
      
      // Store the library bioplate
      pool.libPlate = libPlateForPool;
      
      // If the pool has a single library bioplate add it to the selection list
      // If the pool doesn't have a single library bioplate, nothing is added to
      // the list and the pool can only be selected when the 'multiple' option is
      // active for the bioplates list
      if (libPlateForPool != null && !libPlates[libPlateForPool.name])
      {
        libPlates[libPlateForPool.name] = libPlateForPool;
        var plateOption = new Option(libPlateForPool.name, libPlateForPool.id);
        plateOption.plate = libPlateForPool;
        plateList[plateList.length] = plateOption;
      }

    }
    if (plateList.length > 1) plateList.selectedIndex = 1;
    bioplateOnChange();
    Main.show('step.1.section');
    Main.show('gocreate');
  }
  else
  {
    var msg = 'No pools available for processing.';
    setFatalError(msg);
    return;
  }

}


function getUnpooledPools()
{
  var frm = document.forms['reggie']; 
  
  var request = Ajax.getXmlHttpRequest();
  try
  {
    showLoadingAnimation('Loading unprocessed pools...');
    var url = '../Pool.servlet?ID=<%=ID%>&cmd=GetUnprocessedPools';   
    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.pools;
}

// Add pools to the pools list based on the bioplate selection
function bioplateOnChange()
{
  var frm = document.forms['reggie'];
  
  var libPlateId = parseInt(frm.bioplate.value);

  // Clear current list
  frm.pools.length = 0;
  
  for (var poolNo = 0; poolNo < pools.length; poolNo++)
  {
    var pool = pools[poolNo];
    // If a libplate is selected, only show pools that have all libraries from that plate
    // If no libplate is selected, only show pools that have libraries from multiple plates
    var addPool = (libPlateId && pool.libPlate.id == libPlateId) || (!libPlateId && pool.libPlate == null);
    if (addPool)
    {
      frm.pools[frm.pools.length] = new Option(pool.name, pool.id, libPlateId);
    }
  }
  
  setInputStatus('pools', '', '');
  if (libPlateId)
  {
    frm.pools.disabled = true;
    Main.removeClass(document.getElementById('plateview'), 'disabled');
  }
  else
  {
    frm.pools.disabled = false;
    Main.addClass(document.getElementById('plateview'), 'disabled');
  }
}


function viewProtocol(type)
{
  var frm = document.forms['reggie'];
  var libPlateId = parseInt(frm.bioplate.value);
  
  if (libPlateId == 0)
  {
    // 'multiple' option selected, check that at least one pool is selected
    var numSelectedPools = 0;
    for (var poolNo = 0; poolNo < frm.pools.length; poolNo++)
    {
      if (frm.pools[poolNo].selected) numSelectedPools++;
    }
    
    if (numSelectedPools == 0)
    {
      setInputStatus('pools', 'Select at least one pool', 'invalid');
      return;
    }
    setInputStatus('pools', '', 'valid');
  }

  frm.pools.disabled = false;
  frm.view.value = type;
  frm.submit();
  frm.pools.disabled = (libPlateId != 0);
}

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

  <p:path><p:pathelement 
    title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
    /><p:pathelement title="Lab protocols for library pooling" 
    /></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;" action="pool_protocol2.jsp" method="post" target="_blank">
  <input type="hidden" name="ID" value="<%=ID%>">
  <input type="hidden" name="view" value="list">
  
  <div id="step.1.section" style="display: none;">
  <table class="stepform">
  <tr>
    <td rowspan="3" class="stepno">1</td>
    <td class="steptitle">Select pools</td>
  </tr>
  <tr>
    <td class="stepfields">
      <table>
      <tr valign="top">
        <td class="prompt">Library plate</td>
        <td class="input">
          <select style="width:90%;" name="bioplate" id="bioplate" onchange="bioplateOnChange()">
            <option value="0">- multiple -
          </select>
          <br>
          <i>- or -</i>
        </td>
        <td class="status" id="bioplate.status"></td>
        <td class="help"><span id="bioplate.message" class="message" style="display: none;"></span>
          Select the library bioplate that should be pooled in this step. The list contains
          all plates with pools that has not yet been created (determined by abscense of creation date).
          Use the <b>multiple</b> option to select pools with libraries from multiple plates.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Pools</td>
        <td class="input"><select style="width:90%;" size="6" 
            name="pools" id="pools" multiple></select>
        </td>
        <td class="status" id="pools.status"></td>
        <td class="help"><span id="pools.message" class="message" style="display: none;"></span>
          Select the pools to work with. If a plate has been selected no changes can be made.
        </td>
      </tr>
      <tr valign="top">
        <td class="prompt">Lab protocols</td>
        <td class="input" id="protocol" style="white-space: nowrap; line-height: 1.5em;">
          <span id="listview" class="link" onclick="viewProtocol('list')"><img src="../images/listview.png">&nbsp;List layout</span><br>
          <span id="plateview" class="link" onclick="viewProtocol('plate')"><img src="../images/plateview.png">&nbsp;Plate layout</span><br>
        </td>
        <td class="status" id="protocol.status"></td>
        <td class="help"><span id="protocol.message" class="message" style="display: none;"></span>
          The 'list layout' generates a table with one row for each well on the work plate.
          The 'plate layout' generates a grid with wells arranged according to row and column coordinates.
        </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="done" class="success" style="display: none; width: 950px; margin-left: 20px; margin-top: 20px;"></div>
  
  </form>
  </div>
  
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>