source: trunk/www/biomaterials/wizards/move_biomaterial.jsp @ 5538

<%-- $Id$
  ------------------------------------------------------------------
  Copyright (C) 2010 Nicklas Nordborg

  This file is part of BASE - BioArray Software Environment.
  Available at http://base.thep.lu.se/

  BASE is free software; you can redistribute it and/or
  modify it under the terms of the GNU General Public License
  as published by the Free Software Foundation; either version 3
  of the License, or (at your option) any later version.

  BASE is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with BASE. If not, see <http://www.gnu.org/licenses/>.
  ------------------------------------------------------------------

  @author Nicklas
--%>
<%@page import="net.sf.basedb.core.BioPlateEventType"%>
<%@ page pageEncoding="UTF-8" session="false"
  import="net.sf.basedb.core.BioPlate"
  import="net.sf.basedb.core.BioPlateEvent"
  import="net.sf.basedb.core.MeasuredBioMaterial"
  import="net.sf.basedb.core.Hardware"
  import="net.sf.basedb.core.Protocol"
  import="net.sf.basedb.core.DbControl"
  import="net.sf.basedb.core.Item"
  import="net.sf.basedb.core.ItemContext"
  import="net.sf.basedb.core.ItemQuery"
  import="net.sf.basedb.core.SessionControl"
  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.Formatter"
  import="net.sf.basedb.clients.web.formatter.FormatterFactory"
  import="net.sf.basedb.clients.web.formatter.FormatterSettings"
  import="net.sf.basedb.clients.web.Base"
  import="net.sf.basedb.clients.web.util.HTML"
  import="java.util.List"
  import="java.util.Date"
  import="java.util.Collections"
%>
<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
<%
final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
final String ID = sc.getId();
final float scale = Base.getScale(sc);
final int sourcePlateId = Values.getInt(request.getParameter("sourceplate_id"));
final ItemContext cc = sc.getCurrentContext(Item.BIOPLATEEVENT, BioPlateEventType.MOVE);
final DbControl dc = sc.newDbControl();
try
{
  BioPlate sourcePlate = BioPlate.getById(dc, sourcePlateId);
  
  // Load recently used items
  List<Hardware> recentHardware = (List<Hardware>)cc.getRecent(dc, Item.HARDWARE);
  List<Protocol> recentProtocols = (List<Protocol>)cc.getRecent(dc, Item.PROTOCOL);
  
  Item itemType = Item.SAMPLE;
  
  final String clazz = "class=\"text\"";
  final String requiredClazz = "class=\"text required\"";
  final Formatter<Date> dateFormatter = FormatterFactory.getDateFormatter(sc);
  final String dateFormat = FormatterSettings.getDateFormat(sc);
  final String jsDateFormat = HTML.javaScriptEncode(dateFormat);
  final String htmlDateFormat = HTML.encodeTags(dateFormat);
  %>
  <base:page type="popup" title="Move biomaterial">
  <base:head scripts="ajax.js,plate.js,js-draw.js" styles="plate.css,toolbar.css">
    <script language="javascript">
  
    // For drawing
    var graphics;
    var pen;
    var selectedPen;
    
    // Source and destination plates
    var sourcePlate;
    var destPlate;
    
    // We can select one well on each plate
    var selectedSourceWell;
    var selectedDestWell;

    function init()
    {
      // Initialize graphics
      graphics = new jsGraphics(document.getElementById('canvas'));
      pen = new jsPen();
      selectedPen = new jsPen(new jsColor('445577'), 2);
      setBioPlateCallback(<%=sourcePlateId%>, '<%=HTML.javaScriptEncode(sourcePlate.getName())%>', true);
    }

    /**
      Select the source well that is clicked on. The currently selected well
      is de-selected. If the clicked well is the same as the currently 
      selected well no new item is selected. If a destination well is already 
      selected a link is made between the source and destination wells.
    */
    function sourceWellOnClick(row, column)
    {
      var well = sourcePlate.getWell(row, column);
      if (!well) return;

      // De-select the currently selected source well
      if (selectedSourceWell) 
      {
        selectedSourceWell.setSelected(false);
        if (well == selectedSourceWell)
        {
          // Re-draw link with regular pen (eg. same as onmouseover)
          selectedSourceWell.drawLink(graphics, pen, true);
          selectedSourceWell = null;
          return;
        }
        else
        {
          selectedSourceWell.hideLink(graphics);
        }
      }
      
      // Select the new source well and draw link to destination well
      selectedSourceWell = well;
      selectedSourceWell.setSelected(true);
      selectedSourceWell.drawLink(graphics, selectedPen, true);

      // Map the source and destination wells
      if (selectedSourceWell && selectedDestWell)
      {
        mapSelectedWells();
      }
    }
    
    /**
      Draw a link between the mapped source and destination wells.
    */
    function sourceWellOnMouseOver(row, column)
    {
      var well = sourcePlate.getWell(row, column);
      if (!well) return;
      well.drawLink(graphics, pen, false);
    }
    
    /**
      Hide the link between the mapped source and destination 
      wells, unless one of them is selected.
    */
    function sourceWellOnMouseOut(row, column)
    {
      var well = sourcePlate.getWell(row, column);
      if (!well) return;
      if (!well.selected && !(well.mappedWell && well.mappedWell.selected)) 
      {
        well.hideLink(graphics);
      }
    }
    
    function destWellOnClick(row, column)
    {
      var well = destPlate.getWell(row, column);

      // De-select the currently selected well
      if (selectedDestWell) 
      {
        selectedDestWell.setSelected(false);
        if (well == selectedDestWell)
        {
          // Re-draw link with regular pen (eg. same as onmouseover)
          selectedDestWell.drawLink(graphics, pen, true);
          selectedDestWell = null;
          return;
        }
        else
        {
          selectedDestWell.hideLink(graphics);
        }
      }
      
      selectedDestWell = well;
      selectedDestWell.setSelected(true);
      selectedDestWell.drawLink(graphics, selectedPen, true);

      if (selectedSourceWell && selectedDestWell)
      {
        mapSelectedWells();
      }
    }
    
    function destWellOnMouseOver(row, column)
    {
      var well = destPlate.getWell(row, column);
      if (!well) return;
      well.drawLink(graphics, pen, false);
    }
    
    function destWellOnMouseOut(row, column)
    {
      var well = destPlate.getWell(row, column);
      if (!well) return;
      if (!well.selected && !(well.mappedWell && well.mappedWell.selected)) 
      {
        well.hideLink(graphics);
      }
    }

    /**
      Map the selected source and destination wells. Hide and
      redraw links as needed.
    */
    function mapSelectedWells()
    {
      // Hide any links that are currently displayed
      selectedSourceWell.hideLink(graphics);
      selectedDestWell.hideLink(graphics);
      
      // Map to the new well and draw link
      if (selectedSourceWell.mappedWell != selectedDestWell)
      {
        selectedSourceWell.mapToWell(selectedDestWell);
        selectedSourceWell.drawLink(graphics, pen, true);
      }
      else
      {
        selectedSourceWell.unmapWell();
      }
      
      // De-select everything
      selectedSourceWell.setSelected(false);
      selectedDestWell.setSelected(false);
      selectedSourceWell = null;
      selectedDestWell = null;
    }

    
    function selectBioPlateOnClick()
    {
      if (destPlate && !confirm('This will reset all moved biomaterial. Continue?')) return;
      
      var url = '../bioplates/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setBioPlateCallback';
      url += '&resetTemporary=1&tmpfilter:INT:bioPlateType.bioMaterialType=|<%=itemType.getValue()%>'
      url += '&exclude='+sourcePlate.id;
      Main.openPopup(url, 'SelectBioPlate', 1000, 700);
    }

    function setBioPlateCallback(bioPlateId, name, isSourcePlate)
    {
      if (!isSourcePlate && bioPlateId == sourcePlate.id)
      {
        alert('It is not possible to use the same plate as both source and destination plate.');
        return;
      }
      
      var request = Ajax.getXmlHttpRequest();
      var url = '../bioplates/ajax.jsp?ID=<%=ID%>&cmd=GetFullPlateInfo&item_id=' + bioPlateId;
      request.open("GET", url, false); 
      // NOTE! 'false' causes code to wait for the response. aka. 'Synchronous AJAX' or SJAX.
      request.send(null);
      var response = Ajax.parseResponse(request.responseText);
      if (response.isError())
      {
        alert(response.getErrorMessage());
        return false;
      }

      // Get plate and well information from the AJAX response
      var records = response.getElements();
      var plateInfo = records[0];
      var rows = parseInt(plateInfo['rows']);
      var columns = parseInt(plateInfo['columns']);
      
      var bigPlate = rows > 12 || columns > 18;
      var plateClass = bigPlate ? 'plate bigplate' : 'plate';

      // Remove existing mapping
      if (sourcePlate) sourcePlate.unmapAll();

      // Create plate and wells
      var prefix = isSourcePlate ? 'source' : 'dest';
      var plate = new Plate(prefix, plateInfo['id'], plateInfo['name'], rows, columns, isSourcePlate);
      for (var i = 1; i < records.length; i++)
      {
        var wellInfo = records[i];
        var row = parseInt(wellInfo['well.row']);
        var col = parseInt(wellInfo['well.column']);
        var well = plate.getWell(row, col);
        well.id = wellInfo['bm.id'];
        well.name = wellInfo['bm.name'];
        well.locked = isSourcePlate ? wellInfo['well.can-clear'] == '0' : wellInfo['well.can-add'] == '0';
      }
      
      // Create html table representing the bioplate
      var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
      html += '<tr><td></td>';
      for (var c = 0; c < plate.columns; c++)
      {
        html += '<td class="columnheader">' + (c+1) + '</td>';
      }
      html += '</tr>';
      for (var r = 0; r < plate.rows; r++)
      {
        html += '<tr><td class="rowheader">' + Plates.toAlphaCoordinate[r] + '</td>';
        for (var c = 0; c < plate.columns; c++)
        {
          var well = plate.getWell(r, c);
          var cls = 'well';
          var onclick = '';
          var onmouseover = '';
          var onmouseout = '';
          var title = well.name ? Main.encodeTags(well.name) : '';
          if (isSourcePlate)
          {
            // We can only move a biomaterial if the well is not empty or locked
            if (well.id)
            {
              if (well.locked)
              {
                cls += ' filled locked';
              }
              else
              {
                cls += ' filled editable';
                onclick = ' onclick="sourceWellOnClick('+r+','+c+')"';
                onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
                onmouseout = ' onmouseout=sourceWellOnMouseOut('+r+','+c+')';
              }
            }
            else
            {
              cls += ' empty';
            }
          }
          else
          {
            // We only add biomaterial to destination well if it is empty and not locked
            if (well.id || well.locked)
            {
              cls += ' unmappable';
            }
            else
            {
              cls += ' empty editable';
              onclick = ' onclick="destWellOnClick('+r+','+c+')"';
              onmouseover = ' onmouseover=destWellOnMouseOver('+r+','+c+')';
              onmouseout = ' onmouseout=destWellOnMouseOut('+r+','+c+')';
            }
          }
          /*
          if (well.id) 
          {
            if (isSourcePlate && !well.locked)
            {
              cls += ' filled editable';
              onclick = ' onclick="sourceWellOnClick('+r+','+c+')""';
              onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
              onmouseout = ' onmouseout=sourceWellOnMouseOut('+r+','+c+')';
            }
            else
            {
              if (isSourcePlate)
              {
                cls+= ' filled locked';
              }
              else
              {
                cls += ' unmappable';
              }
            }
            if (well.name) title = Main.encodeTags(well.name);
          }
          else
          {
            if (isSourcePlate)
            {
              cls += ' empty';
            }
            else
            {
              cls += ' empty editable';
              onclick = ' onclick="destWellOnClick('+r+','+c+')""';
              onmouseover = ' onmouseover=destWellOnMouseOver('+r+','+c+')';
              onmouseout = ' onmouseout=destWellOnMouseOut('+r+','+c+')';
            }
          }
          */
          html += '<td id="'+prefix+'.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+' title="'+title+'"></td>';
        }
        html += '</tr>';
      }
      html += '</table>';
      if (isSourcePlate)
      {
        document.getElementById('plate.src').innerHTML = html;
        document.getElementById('plate.src.name').innerHTML = Main.encodeTags(name);
        sourcePlate = plate;
      }
      else
      {
        document.getElementById('plate.dest').innerHTML = html;
        document.getElementById('plate.dest.name').innerHTML = Main.encodeTags(name);
        destPlate = plate;
      }
    }
    
    /**
      Save the event.
    */
    function doMoveBioMaterial()
    {
      if (!destPlate)
      {
        alert('No destination plate has been selected');
        return;
      }
      var frm = document.forms['main'];
      if (Main.trimString(frm.name.value) == '')
      {
        alert("You must enter a name for the event.");
        frm.name.focus();
        return;
      }
      
      frm.destplate_id.value = destPlate.id;
      frm.rows.value = destPlate.rows;
      frm.columns.value = destPlate.columns;
      
      var numMapped = 0;
      for (var row = 0; row < destPlate.rows; row++)
      {
        for (var column = 0; column < destPlate.columns; column++)
        {
          var well = destPlate.getWell(row, column);
          
          if (well.mappedWell)
          {
            Forms.createHidden(frm, 'well.' + row + '.' + column, well.mappedWell.id);
            numMapped++;
          }
        }
      }
      
      if (numMapped == 0)
      {
        alert('No wells have been mapped.');
        return;
      }
      
      frm.submit();
    }
    
    function showMoreEventProperties()
    {
      Main.show('moreeventproperties');
      Main.hide('more');
    }
    
    function hideMoreEventProperties()
    {
      Main.hide('moreeventproperties');
      Main.show('more');
    }

    function selectHardwareOnClick()
    {
      var frm = document.forms['main'];
      var url = '../../admin/hardware/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setHardwareCallback';
      if (frm.hardware_id.length > 1) 
      {
        var id = Math.abs(parseInt(frm.hardware_id[1].value));        
        url += '&item_id='+id;
      }
      url += '&resetTemporary=1';
      Main.openPopup(url, 'SelectHardware', 1000, 700); 
    }
    function setHardwareCallback(id, name)
    {
      var frm = document.forms['main'];
      var list = frm.hardware_id;
      if (list.length < 2 || list[1].value == '0') // >
      {
        Forms.addListOption(list, 1, new Option());
      }
      list[1].value = id;
      list[1].text = name;
      list.selectedIndex = 1;
    }
  
    function selectProtocolOnClick()
    {
      var frm = document.forms['main'];
      var url = '../../admin/protocols/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setProtocolCallback';
      if (frm.protocol_id.length > 1) 
      {
        var id = Math.abs(parseInt(frm.protocol_id[1].value));        
        url += '&item_id='+id;
      }
      url += '&resetTemporary=1';
      Main.openPopup(url, 'SelectProtocol', 1000, 700); 
    }
    function setProtocolCallback(id, name)
    {
      var frm = document.forms['main'];
      var list = frm.protocol_id;
      if (list.length < 2 || list[1].value == '0') // >
      {
        Forms.addListOption(list, 1, new Option());
      }
      list[1].value = id;
      list[1].text = name;
      list.selectedIndex = 1;
    }
    </script>
  </base:head>
  <base:body onload="init()">
    <div id="canvas"></div>
    <h3>Move biomaterial to plate</h3>
    <div class="boxedbottom" style="height: <%=(int)(scale*480)%>px; overflow: auto:">
      <form name="main" action="index.jsp" method="post">
      <input type="hidden" name="ID" value="<%=ID%>">
      <input type="hidden" name="cmd" value="MoveBioMaterial">
      <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
      <input type="hidden" name="destplate_id" value="">
      <input type="hidden" name="rows" value="">
      <input type="hidden" name="columns" value=""> 

      <table cellspacing="0" border="0" width="100%">
      <tr valign="top">
        <td>
          <table class="form" cellspacing=0>
          <tr>
            <td class="prompt" style="width: 90px;">Event name</td>
            <td><input <%=requiredClazz%> type="text" name="name" 
              value="Move biomaterial" 
              size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
          </tr>
          <tr>
            <td class="prompt">Event date</td>
            <td>
              <table border="0" cellspacing="0" cellpadding="0">
              <tr>
              <td>
                <input <%=clazz%> type="text" name="event_date" 
                  value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>" 
                  size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
                &nbsp;
              </td>
              <td>
              <base:button 
                onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
                image="calendar.png"
                title="Calendar&hellip;" 
                tooltip="Select a date from a calendar" 
              />
              </td>
              </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="prompt">Protocol</td>
            <td>
              <base:select 
                id="protocol_id"
                clazz="selectionlist"
                required="false"
                current="<%=null%>"
                recent="<%=recentProtocols%>"
                onselect="selectProtocolOnClick()"
              />
            </td>
          </tr>
          <tr>
            <td class="prompt">Hardware</td>
            <td>
              <base:select 
                id="hardware_id"
                clazz="selectionlist"
                required="false"
                current="<%=null%>"
                recent="<%=recentHardware%>"
                onselect="selectHardwareOnClick()"
              />
            </td>
          </tr>
          </table>
        </td>
        <td>
          <b>Description</b><br>
          <textarea <%=clazz%> rows="4" cols="40" name="description" wrap="virtual"
            ></textarea>
          <a href="javascript:Main.zoom('Description', 'main', 'description')"
            title="Edit in larger window"><base:icon image="zoom.gif" /></a>
        </td>
      </tr>
      
      <tr>
        <td><b>Source plate</b> (<span id="plate.src.name"></span>)</td>
        <td><b>Destination plate</b> (<span id="plate.dest.name">no plate selected</span>) <a href="javascript:selectBioPlateOnClick()">Select plate...</a></td>
      </tr>
      <tr valign="top">
        <td style="width: 50%;">
          <div id="plate.src"></div>
        </td>
        <td style="width: 50%;">
          <div style="height: <%=(int)(scale*400)%>px; overflow: auto;">
          
          <tbl:toolbar id="toolbar.mappings" style="display: none; margin-top: 6px;">
            <tbl:button title="Clear" 
              onclick="clearMapping()" 
              image="cancel.gif" 
              tooltip="Clear all mapped wells"
            />
            <tbl:button title="Place by row" 
              onclick="placeByRow()" 
              image="place_by_row.png" 
              tooltip="Place remaining items; start with rows"
            />
            <tbl:button title="Place by column" 
              onclick="placeByColumn()" 
              image="place_by_column.png" 
              tooltip="Place remaining items; start with columns"
            />
          </tbl:toolbar>
          <div id="plate.dest"></div>
          </div>
        </td>
      </tr>
      </table>

      </form>
    </div>
    <table align="center">
    <tr>
      <td width="50%"><base:button onclick="doMoveBioMaterial()" title="Save" /></td>
      <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    </tr>
    </table>
    
  </base:body>
  </base:page>
  <%
}
finally
{
  if (dc != null) dc.close();
}
%>