source: extensions/net.sf.basedb.reggie/trunk/resources/libprep/external_protocol2.jsp @ 6218

<%@ 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.core.Extract"
  import="net.sf.basedb.core.BioMaterial"
  import="net.sf.basedb.core.MeasuredBioMaterial"
  import="net.sf.basedb.core.BioMaterialEventSource"
  import="net.sf.basedb.core.BioPlate"
  import="net.sf.basedb.core.BioWell"
  import="net.sf.basedb.core.PermissionDeniedException"
  import="net.sf.basedb.core.ItemQuery"
  import="net.sf.basedb.core.query.Restrictions"
  import="net.sf.basedb.core.query.Hql"
  import="net.sf.basedb.util.Values"
  import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
  import="net.sf.basedb.util.extensions.Extension"
  import="net.sf.basedb.clients.web.Base" 
  import="net.sf.basedb.clients.web.util.HTML"
  import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
  import="java.util.List"
  import="java.util.ArrayList"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(request, "net.sf.basedb.reggie", true);
final String ID = sc.getId();
final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
final String root = request.getContextPath();
DbControl dc = null;
try
{
  dc = sc.newDbControl();
  final Extension reggie = ExtensionsControl.get(dc).getExtension("net.sf.basedb.reggie");
  final User user = User.getById(dc, sc.getLoggedInUserId());
  int plateId = Values.getInt(request.getParameter("bioplate"));
  String poolSchema = request.getParameter("poolSchema");
  
  BioPlate plate = BioPlate.getById(dc, plateId);
  int columns = plate.getColumns();
  int rows = plate.getRows();
  String view = Values.getString(request.getParameter("view"), "list");
  String title = "Lab protocol for " + HTML.encodeTags(plate.getName()) + " - " + (view.equals("list") ? "list" : "table");
%>
<base:page id="protocol" type="iframe" favicon="<%=home+"/images/pipette.png"%>" title="<%=title%>" noskin="true">
<base:head
  scripts="~../reggie-2.js,~pools.js,~plate.js,~external_protocol.js" 
  styles="~../css/reggie-2.css,~../css/printable.css,~../css/plate.css"
  >
  <style>
  table.protocolheader
  {
    width: 100%;
    border: 1px solid #000000;
    margin-bottom: 1em;
    border-collapse: collapse;
  }

  table.protocolheader > tbody > tr
  {
    vertical-align: top;
    height: 1.25em;
  }

  table.protocolheader > tbody > tr > th
  {
    text-align: left;
    font-size: 1em;
    background-color: #F0F0F0;
    padding: 2px;
  }
  
  table.protocolheader > tbody > tr > td
  {
    text-align: left;
    font-size: 1em;
    padding: 2px;
  }
  
  #listview
  {
    width: 100%;
    font-size: 85%;
    border-collapse: collapse;
    border: 1px solid #000000;
  }
  
  #listview tr.evencol
  {
    background-color: #F0F0F0;
  }
  
  #listview thead
  {
    border: 1px solid #000000;
    background-color: #F0F0F0;
  }
  
  #listview tbody
  {
    page-break-inside: avoid;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
  }
  
  #listview th
  {
    border-left: 1px solid #000000;
  }
  
  #listview td
  {
    border-left: 1px solid #000000;
    border-top: 1px dotted #666666;
    vertical-align: middle;
    padding: 1px;
  }
  
  #listview .col-num
  {
    width: 1.75em;
    text-align: center;
    font-size: 125%;
    font-weight: bold;
    vertical-align: top;
  }
  
  #listview .rna
  {
    width: 10em;
    text-align: center;
    white-space: nowrap;
  }
  
  #listview .empty .rna
  {
    font-style: italic;
    color: #666666;
    text-align: center;
  }
  
  .external .rna:before
  {
    content: '[';
  }
  .external .rna:after
  {
    content: ']';
  }
  
  #listview .box
  {
    width: 8em;
    text-align: center;
  }
  #listview .workplate
  {
    width: 5em;
    text-align: center;
  }
  #listview .conc
  {
    width: 4.5em;
    padding-right: 0.5em;
    text-align: right;
  }
  #listview .remain
  {
    width: 4.5em;
    padding-right: 0.5em;
    text-align: right;
  }
  #listview .volume
  {
    width: 3.5em;
    padding-right: 0.5em;
    text-align: right;
    color: #C80000;
  }
  #listview .water
  {
    width: 3.5em;
    padding-right: 0.5em;
    text-align: right;
    color: #0000C8;
  }
  #listview .remarks
  {
    vertical-align: top;
    padding-left: 0.25em;
  }
  
  /* Divide the 12 wells across the full page */
  #plateview .well
  {
    width: 8.2%;
    max-width: 8.2%;
    min-width: 8.2%;
    background-color: #FFFFFF;
    padding: 4px;
  }
  
  #plateview .well:hover
  {
    padding: 3px;
  }
    
  #plateview .rowheader
  {
    width: 2em;
  }
  
  #plateview .rna
  {
    font-weight: bold;
    margin-bottom: 0.25em;
  }
  #plateview .box
  {
    margin-bottom: 0.25em;
  }
  #plateview .conc
  {
    display: none;
  }
  #plateview .remain
  {
    display: none;
  }
  #plateview .volume
  {
    color: #C80000;
  }
  #plateview .water
  {
    color: #0000C8;
    float: right;
  }
  #plateview .remarks
  {
    color: #C80000;
    font-style: italic;
  }
  #plateview .qc
  {
    background-image: url('../images/mrnaqc.png');
    background-position: 95% 25%;
    background-repeat: no-repeat;
  }
  
  #plateview .yellow-specimen .if-yellow
  {
    background-image: url('../images/yellow-label-small.png');
    background-position: 1px 50%;
    background-repeat: no-repeat;
    /* Grow background without shifting text position veritcally, move to right to make room for icon*/
    padding: 4px 4px 3px 14px;
    margin: -4px -4px -1px -4px;
  }
  
  
  </style>
</base:head>
<base:body>

  <div class="paper <%=view.equals("list") ? "" : "landscape"%>">

  <form name="reggie" id="wizard">
  
  <div id="page-data" class="datacontainer"
    data-view="<%=view%>"
    data-plate-id="<%=plateId %>"
    data-home-url="<%=home%>"
  ></div>
  
  <div id="wizard-status"></div>

  <div id="all-protocol" style="display: none;">
  <div id="print-instructions" class="noprint fullwidth">
    <base:button id="print-button" image="<%=home+"/images/print.png"%>" title="Print&hellip;" />
    <span id="printNote">
    <b>Note!</b> 
    <%
    if (view.equals("list"))
    {
      %>
      For better printing reduce margins to about <i>5mm</i> and set page orientation
      to <i>portrait</i>. To fit everything on a single page, scale down to <i>60-70%</i>.
      <%
    }
    else
    {
      %>
      For better printing reduce margins to about <i>5mm</i> and set page orientation
      to <i>landscape</i>. The recommended scale is <i>100%</i>.
      <%
    }
    %>
    </span>
    <br clear="all">
  </div>

  
  <h1>Lab protocol for external sequencing <span class="reggie">Reggie <%=reggie.getAbout().getVersion() %></span></h1>

  <table style="width: 100%;" class="protocolheader">
  <tr style="border-bottom: 1px solid #cccccc;">
    <th style="width: 15%;">Work plate</th>
    <td style="width: 30%;"><%=HTML.encodeTags(plate.getName())%></td>
    <td style="width: 50%;border-left: 1px solid #000000;" rowspan="3"><%=HTML.niceFormat(plate.getDescription()) %></td>
  </tr>
  <tr style="border-bottom: 1px solid #cccccc;">
    <th>Pre-normalization</th>
    <td id="normalization-protocol"></td>
  </tr>
  <tr style="height: 4em;">
    <th></th>
    <td></td>
  </tr>
  </table>

  <%
  if (view.equals("list"))
  {
    %>
    <table style="width: 100%;" id="listview">
    <thead>
      <tr class="toprow">
        <th></th>
        <th class="rna"></th>
        <th class="box">Storage</th>
        <th>Conc.</th>
        <th>Remain</th>
        <th class="workplate">Work</th>
        <th colspan="2">Volume</th>
        <th></th>
      </tr>
      <tr>
        <th></th>
        <th class="rna">RNA</th>
        <th class="box">box</th>
        <th>(ng/µl)</th>
        <th>(µg)</th>
        <th class="workplate">plate</th>
        <th>(µl)</th>
        <th>H<sub>2</sub>O</th>
        <th>Remarks</th>
      </tr>
    </thead>
    <%
    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
    for (int c = 0; c < columns; ++c)
    {
      String rowClass = c % 2 == 0 ? "evencol" : "oddcol";
      %>
      <tbody>
      <%
      for (int r = 0; r < rows; ++r)
      {
        String idSuffix = c + "." + r;
        %>
        <tr class="<%=rowClass%> empty" id="row.<%=idSuffix%>">
          <%
          if (r == 0)
          {
            %>
            <td class="col-num" rowspan="<%=rows%>"><%=c+1%></td>
            <%
          }
          %>
          <td class="rna if-yellow" id="rna.<%=idSuffix%>">empty</td>
          <td class="box" id="box.<%=idSuffix%>"></td>
          <td class="conc" id="conc.<%=idSuffix%>"></td>
          <td class="remain" id="remain.<%=idSuffix%>"></td>
          <td class="workplate"><%=rowF.format(r)+colF.format(c)%></td>
          <td class="volume" id="volume.<%=idSuffix%>"></td>
          <td class="water" id="water.<%=idSuffix%>"></td>
          <td class="remarks" id="remarks.<%=idSuffix%>"></td>
        </tr>
        <%
      }
      %>
      </tbody>
      <%
    }
    %>
    </table>
    <%
  }
  else
  {
    %>
    <table class="plate" style="margin: 0em 0 0 0; width: 100%;" id="plateview">
    <%
    WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
    WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
    %>
    <tr class="header">
      <th></th>
      <%
      for (int c = 0; c < columns; ++c)
      {
        %>
        <th id="col.<%=c%>"><%=colF.format(c)%></th>
        <%
      }
      %>
    </tr>
    <tbody>
    <%
    for (int r = 0; r < rows; ++r)
    {
      String row = rowF.format(r);
      %>
      <tr class="row-<%=r%>">
        <th id="row.<%=r%>" class="rowheader"><%=row%></th>
        <%
        for (int c = 0; c < columns; ++c)
        {
          %>
          <td class="well col-<%=c%>" id="well.<%=r%>.<%=c%>"></td>
          <%
        }
        %>
      </tr>
      <%
    }
    %>
    </tbody>
    <tr id="pool-row">
      <th colspan=<%=columns+1 %>>&nbsp;</th>
    </tr>
    </table>
    <%
  }
  %>
  <i>Low quantity = The remaining quantity is too low for the RNA to be re-processed one more time</i>
</div>
</form>
</div>
  
</base:body>
</base:page>
<%
}
finally
{
  if (dc != null) dc.close();
}
%>