source: trunk/www/biomaterials/wizards/create_child_bioplate_step2.jsp @ 5905

Last change on this file since 5905 was 5905, checked in by Nicklas Nordborg, 10 years ago

References #1655: GUI improvements

  • Use relative font sizes (em and %) instead of pixel values. This should make it possible to use relative values for everything and we don't have to split up into size_*.css


  • Removed "valign" attribute from lots of tables.


  • Removed "wrap" attribute from lots of texarea fields.


  • Property svn:eol-style set to native
  • Property svn:keywords set to Date Id
File size: 26.7 KB
Line 
1<%-- $Id: create_child_bioplate_step2.jsp 5905 2011-12-12 08:42:09Z nicklas $
2  ------------------------------------------------------------------
3  Copyright (C) 2011 Nicklas Nordborg
4
5  This file is part of BASE - BioArray Software Environment.
6  Available at http://base.thep.lu.se/
7
8  BASE is free software; you can redistribute it and/or
9  modify it under the terms of the GNU General Public License
10  as published by the Free Software Foundation; either version 3
11  of the License, or (at your option) any later version.
12
13  BASE is distributed in the hope that it will be useful,
14  but WITHOUT ANY WARRANTY; without even the implied warranty of
15  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16  GNU General Public License for more details.
17
18  You should have received a copy of the GNU General Public License
19  along with BASE. If not, see <http://www.gnu.org/licenses/>.
20  ------------------------------------------------------------------
21
22  @author Nicklas
23--%>
24<%@ page pageEncoding="UTF-8" session="false"
25  import="net.sf.basedb.core.BioPlate"
26  import="net.sf.basedb.core.BioPlateEvent"
27  import="net.sf.basedb.core.BioPlateEventType"
28  import="net.sf.basedb.core.BioPlateType"
29  import="net.sf.basedb.core.PlateGeometry"
30  import="net.sf.basedb.core.MeasuredBioMaterial"
31  import="net.sf.basedb.core.Hardware"
32  import="net.sf.basedb.core.Protocol"
33  import="net.sf.basedb.core.DbControl"
34  import="net.sf.basedb.core.Item"
35  import="net.sf.basedb.core.ItemContext"
36  import="net.sf.basedb.core.ItemQuery"
37  import="net.sf.basedb.core.SessionControl"
38  import="net.sf.basedb.core.SystemItems"
39  import="net.sf.basedb.core.query.Restrictions"
40  import="net.sf.basedb.core.query.Hql"
41  import="net.sf.basedb.util.Values"
42  import="net.sf.basedb.util.formatter.Formatter"
43  import="net.sf.basedb.clients.web.formatter.FormatterFactory"
44  import="net.sf.basedb.clients.web.formatter.FormatterSettings"
45  import="net.sf.basedb.clients.web.Base"
46  import="net.sf.basedb.clients.web.util.HTML"
47  import="java.util.List"
48  import="java.util.Date"
49  import="java.util.Collections"
50%>
51<%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
52<%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
53<%
54final SessionControl sc = Base.getExistingSessionControl(pageContext, true);
55final String ID = sc.getId();
56final float scale = Base.getScale(sc);
57final int sourcePlateId = Values.getInt(request.getParameter("sourceplate_id"));
58final int numChildPlates = Values.getInt(request.getParameter("number_of_plates"), 1);
59final int childPlateTypeId = Values.getInt(request.getParameter("bioplatetype_id"));
60final int childPlateGeometryId = Values.getInt(request.getParameter("plategeometry_id"));
61final String childPlateNamePrefix = Values.getString(request.getParameter("plate_name_prefix"), "New plate.");
62
63final ItemContext cc = sc.getCurrentContext(Item.BIOPLATEEVENT, BioPlateEventType.CREATE_BIOMATERIAL);
64final DbControl dc = sc.newDbControl();
65try
66{
67  final BioPlate sourcePlate = BioPlate.getById(dc, sourcePlateId);
68  final Item childBioMaterialType = Item.valueOf(request.getParameter("child_biomaterial_type"));
69  final boolean isBioAssayEvent = childBioMaterialType == Item.PHYSICALBIOASSAY;
70
71  final PlateGeometry geometry = isBioAssayEvent ? null : PlateGeometry.getById(dc, childPlateGeometryId);
72  final int size = Values.getInt(request.getParameter("size"));
73  final BioPlateType sourceType = sourcePlate.getBioPlateType();
74  final Item sourceBioMaterialType = sourceType.getBioMaterialType();
75  String childNameSuffix = "";
76  if (childBioMaterialType == Item.SAMPLE)
77  {
78    childNameSuffix = "s";
79  }
80  else if (childBioMaterialType == Item.EXTRACT)
81  {
82    childNameSuffix = "e";
83  }
84 
85  final String clazz = "class=\"text\"";
86  final String requiredClazz = "class=\"text required\"";
87  final Formatter<Date> dateFormatter = FormatterFactory.getDateFormatter(sc);
88  final String dateFormat = FormatterSettings.getDateFormat(sc);
89  final String jsDateFormat = HTML.javaScriptEncode(dateFormat);
90  final String htmlDateFormat = HTML.encodeTags(dateFormat);
91  final boolean showSourceCoordinates = Values.getBoolean(sc.getUserClientSetting("create-child-plate.show-source-coordinates"), true);
92  %>
93  <base:page type="popup" title="Create child bioplate - step 2/2">
94  <base:head scripts="ajax.js,plate.js,js-draw.js,json2.js" styles="plate.css,toolbar.css">
95    <script language="javascript">
96 
97    var isBioAssayEvent = <%=isBioAssayEvent ? "true" : "false"%>;
98   
99    // For drawing
100    var graphics;
101    var pen;
102    var selectedPen;
103   
104    // Source and destination plates
105    var sourcePlate;
106    var destPlates;
107   
108    // We can select one well on each plate
109    var selectedSourceWell;
110    var selectedDestWell;
111
112    // Plate and source well currently being edited
113    var editingPlate;
114    var editingWell;
115   
116    function init()
117    {
118      // Initialize graphics
119      graphics = new jsGraphics(document.getElementById('canvas'));
120      pen = new jsPen();
121      selectedPen = new jsPen(new jsColor('445577'), 2);
122      setSourceBioPlate(<%=sourcePlateId%>, '<%=HTML.javaScriptEncode(sourcePlate.getName())%>');
123      createDestinationPlates(<%=numChildPlates%>, <%=isBioAssayEvent ? 1 : geometry.getRows()%>, <%=isBioAssayEvent ? size : geometry.getColumns()%>, '<%=HTML.javaScriptEncode(childPlateNamePrefix)%>');
124    }
125
126    /**
127      Select the source well that is clicked on. The currently selected well
128      is de-selected. If the clicked well is the same as the currently
129      selected well no new item is selected. If a destination well is already
130      selected a link is made between the source and destination wells.
131    */
132    function sourceWellOnClick(row, column)
133    {
134      var well = sourcePlate.getWell(row, column);
135      if (!well) return;
136      storeAndHideChildInfo();
137
138      // De-select the currently selected source well
139      if (selectedSourceWell)
140      {
141        selectedSourceWell.setSelected(false);
142        if (well == selectedSourceWell)
143        {
144          // Re-draw link with regular pen (eg. same as onmouseover)
145          selectedSourceWell.drawLink(graphics, pen, true);
146          selectedSourceWell = null;
147          return;
148        }
149        else
150        {
151          selectedSourceWell.hideLink(graphics);
152        }
153      }
154     
155      // Select the new source well and draw link to destination well
156      selectedSourceWell = well;
157      selectedSourceWell.setSelected(true);
158      selectedSourceWell.drawLink(graphics, selectedPen, true);
159
160      // Map the source and destination wells
161      if (selectedSourceWell && selectedDestWell)
162      {
163        mapSelectedWells();
164      }
165      showChildInfo();
166    }
167   
168    /**
169      Draw a link between the mapped source and destination wells.
170    */
171    function sourceWellOnMouseOver(row, column)
172    {
173      var well = sourcePlate.getWell(row, column);
174      if (!well) return;
175      well.drawLink(graphics, pen, false);
176    }
177   
178    /**
179      Hide the link between the mapped source and destination
180      wells, unless one of them is selected.
181    */
182    function sourceWellOnMouseOut(row, column)
183    {
184      var well = sourcePlate.getWell(row, column);
185      if (!well) return;
186      if (!well.selected && !(well.mappedWell && well.mappedWell.selected))
187      {
188        well.hideLink(graphics);
189      }
190    }
191   
192    function destWellOnClick(plateNo, row, column)
193    {
194      var well = destPlates[plateNo].getWell(row, column);
195      storeAndHideChildInfo();
196
197      // De-select the currently selected well
198      if (selectedDestWell)
199      {
200        selectedDestWell.setSelected(false);
201        if (well == selectedDestWell)
202        {
203          // Re-draw link with regular pen (eg. same as onmouseover)
204          selectedDestWell.drawLink(graphics, pen, true);
205          selectedDestWell = null;
206          return;
207        }
208        else
209        {
210          selectedDestWell.hideLink(graphics);
211        }
212      }
213     
214      selectedDestWell = well;
215      selectedDestWell.setSelected(true);
216      selectedDestWell.drawLink(graphics, selectedPen, true);
217
218      if (selectedSourceWell && selectedDestWell)
219      {
220        mapSelectedWells();
221      }
222      showChildInfo();
223    }
224   
225    function destWellOnMouseOver(plateNo, row, column)
226    {
227      var well = destPlates[plateNo].getWell(row, column);
228      if (!well) return;
229      well.drawLink(graphics, pen, false);
230    }
231   
232    function destWellOnMouseOut(plateNo, row, column)
233    {
234      var well = destPlates[plateNo].getWell(row, column);
235      if (!well) return;
236      if (!well.selected && !(well.mappedWell && well.mappedWell.selected))
237      {
238        well.hideLink(graphics);
239      }
240    }
241
242    /**
243      Map the selected source and destination wells. Hide and
244      redraw links as needed.
245    */
246    function mapSelectedWells()
247    {
248      // Hide any links that are currently displayed
249      selectedSourceWell.hideLink(graphics);
250      selectedDestWell.hideLink(graphics);
251     
252      // Map to the new well and draw link
253      if (selectedSourceWell.mappedWell != selectedDestWell)
254      {
255        selectedSourceWell.mapToWell(selectedDestWell);
256        selectedSourceWell.drawLink(graphics, pen, true);
257      }
258      else
259      {
260        selectedSourceWell.unmapWell();
261      }
262     
263      // De-select everything
264      selectedSourceWell.setSelected(false);
265      selectedDestWell.setSelected(false);
266      selectedSourceWell = null;
267      selectedDestWell = null;
268    }
269
270   
271    /**
272      Remove all mappings that have been made so far.
273    */
274    function clearMapping()
275    {
276      if (!destPlates)
277      {
278        alert('No destination plates have been created');
279        return;
280      }
281      if (!confirm('This will remove all placed biomaterial. Continue?')) return;
282      sourcePlate.unmapAll(graphics);
283    }
284   
285    /**
286      Automatically move remaining biomaterial to the destination plate filling rows first.
287      Biomaterial and wells that have already been mapped are skipped.
288    */
289    function placeByRow()
290    {
291      if (!destPlates)
292      {
293        alert('No destination plates have been created');
294        return;
295      }
296      var srcRow = 0;
297      var srcCol = 0;
298      for (var plateNo = 0; plateNo < destPlates.length; plateNo++)
299      {
300        var destPlate = destPlates[plateNo];
301        for (var destRow = 0; destRow < destPlate.rows; destRow++)
302        {
303          for (var destCol = 0; destCol < destPlate.columns; destCol++)
304          {
305            var destWell = destPlate.getWell(destRow, destCol);
306            if (!destWell.mappedWell && !destWell.locked)
307            {
308              var mapped = false;
309              var srcWell = sourcePlate.getWell(srcRow, srcCol);
310              while (srcWell && !mapped)
311              {
312                if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
313                {
314                  srcWell.mapToWell(destWell);
315                  mapped = true;
316                }
317                else
318                {
319                  srcCol++;
320                  if (srcCol >= sourcePlate.columns)
321                  {
322                    srcCol = 0;
323                    srcRow++;
324                  }
325                  srcWell = sourcePlate.getWell(srcRow, srcCol);
326                }
327              }
328            }
329          }
330        }
331      }
332    }
333 
334    /**
335      Automatically move remaining biomaterial to the destination plate filling columns first.
336      Biomaterial and wells that have already been mapped are skipped.
337    */
338    function placeByColumn()
339    {
340      if (!destPlates)
341      {
342        alert('No destination plates have been created');
343        return;
344      }
345      var srcRow = 0;
346      var srcCol = 0;
347      for (var plateNo = 0; plateNo < destPlates.length; plateNo++)
348      {
349        var destPlate = destPlates[plateNo];
350        for (var destCol = 0; destCol < destPlate.columns; destCol++)
351        {
352          for (var destRow = 0; destRow < destPlate.rows; destRow++)
353          {
354            var destWell = destPlate.getWell(destRow, destCol);
355            if (!destWell.mappedWell && !destWell.locked)
356            {
357              var mapped = false;
358              var srcWell = sourcePlate.getWell(srcRow, srcCol);
359              while (srcWell && !mapped)
360              {
361                if (srcWell.id && !srcWell.locked && !srcWell.mappedWell)
362                {
363                  srcWell.mapToWell(destWell);
364                  mapped = true;
365                }
366                else
367                {
368                  srcRow++;
369                  if (srcRow >= sourcePlate.rows)
370                  {
371                    srcCol++;
372                    srcRow = 0;
373                  }
374                  srcWell = sourcePlate.getWell(srcRow, srcCol);
375                }
376              }
377            }
378          }
379        }
380      }
381    }
382
383   
384
385    function setSourceBioPlate(bioPlateId, name)
386    {
387      var request = Ajax.getXmlHttpRequest();
388      var url = '../bioplates/ajax.jsp?ID=<%=ID%>&cmd=GetFullPlateInfo&item_id=' + bioPlateId;
389      if (!isBioAssayEvent)
390      {
391        url += '&countChildren=<%=sourceBioMaterialType == childBioMaterialType ? "pooled" : "1"%>';
392      }
393      request.open("GET", url, false);
394      // NOTE! 'false' causes code to wait for the response. aka. 'Synchronous AJAX' or SJAX.
395      request.send(null);
396      var plateInfo = Ajax.parseJsonResponse(request.responseText);
397      if (plateInfo.status != 'ok')
398      {
399        alert(plateInfo.message);
400        return false;
401      }
402
403      // Get plate and well information from the AJAX response
404      var rows = plateInfo.rows;
405      var columns = plateInfo.columns;
406     
407      var bigPlate = rows > 12 || columns > 18;
408      var plateClass = bigPlate ? 'plate bigplate' : 'plate';
409
410      // Create plate and wells
411      var prefix = 'source';
412      var plate = new Plate(prefix, plateInfo.id, plateInfo.name, rows, columns, true);
413      for (var i = 0; i < plateInfo.wells.length; i++)
414      {
415        var wellInfo = plateInfo.wells[i];
416        var bmInfo = wellInfo.bioMaterial;
417        var row = wellInfo.row;
418        var col = wellInfo.column;
419        var well = plate.getWell(row, col);
420        if (bmInfo)
421        {
422          well.id = bmInfo.id;
423          well.name = bmInfo.name;
424          if (!isBioAssayEvent)
425          {
426            well.childCount = bmInfo.childCount;
427            well.childName = well.name + '.<%=childNameSuffix%>' + (well.childCount + 1);
428          }
429        }
430      }
431     
432      // Create html table representing the bioplate
433      var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
434      html += '<tr><td></td>';
435      for (var c = 0; c < plate.columns; c++)
436      {
437        html += '<td class="columnheader">' + (c+1) + '</td>';
438      }
439      html += '</tr>';
440      for (var r = 0; r < plate.rows; r++)
441      {
442        html += '<tr><td class="rowheader">' + Plates.toAlphaCoordinate[r] + '</td>';
443        for (var c = 0; c < plate.columns; c++)
444        {
445          var well = plate.getWell(r, c);
446          var cls = 'well';
447          var onclick = '';
448          var onmouseover = '';
449          var onmouseout = '';
450          var title = well.name ? Main.encodeTags(well.name) : '';
451
452          // We can only create a child biomaterial if the well is not empty
453          if (well.id)
454          {
455            cls += ' filled editable';
456            onclick = ' onclick="sourceWellOnClick('+r+','+c+')"';
457            onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
458            onmouseout = ' onmouseout=sourceWellOnMouseOut('+r+','+c+')';
459          }
460          else
461          {
462            cls += ' empty';
463          }
464          html += '<td id="'+prefix+'.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+' title="'+title+'">';
465          html += '<div class="info" id="'+prefix+'.'+r+'.'+c+'.info"></div></td>';
466        }
467        html += '</tr>';
468      }
469      html += '</table>';
470      document.getElementById('plate.src').innerHTML = html;
471      document.getElementById('plate.src.name').innerHTML = Main.encodeTags(name);
472      sourcePlate = plate;
473    }
474   
475   
476    function createDestinationPlates(numPlates, rows, columns, namePrefix)
477    {
478      var bigPlate = rows > 12 || columns > 18;
479      var plateClass = bigPlate ? 'plate bigplate' : 'plate';
480
481      document.getElementById('plate.dest.info').innerHTML = numPlates + ' - ' + rows + '×' + columns;
482     
483      // Create plate and wells
484      destPlates = new Array();
485      var html = '';
486      for (var plateNo = 0; plateNo < numPlates; plateNo++)
487      {
488        var prefix = 'dest.' + plateNo;
489        var plate = new Plate(prefix, plateNo, namePrefix + plateNo, rows, columns, false);
490        plate.barcode = '';
491        destPlates[plateNo] = plate;
492
493        // Create html table representing the bioplate
494        html += '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
495        if (plateNo == 0)
496        {
497          html += '<tr><td></td>';
498          for (var c = 0; c < plate.columns; c++)
499          {
500            html += '<td class="columnheader">' + (c+1) + '</td>';
501          }
502          html += '</tr>';
503        }
504        for (var r = 0; r < plate.rows; r++)
505        {
506          html += '<tr><td class="rowheader">' + Plates.toAlphaCoordinate[r] + '</td>';
507          for (var c = 0; c < plate.columns; c++)
508          {
509            var cls = 'well empty editable';
510            var onclick = ' onclick="destWellOnClick('+plateNo+','+r+','+c+')"';
511            var onmouseover = ' onmouseover=destWellOnMouseOver('+plateNo+','+r+','+c+')';
512            var onmouseout = ' onmouseout=destWellOnMouseOut('+plateNo+','+r+','+c+')';
513            html += '<td id="'+prefix+'.'+r+'.'+c+'" class="' + cls + '"' + onclick + onmouseover + onmouseout+'>';
514            html += '<div class="info" id="'+prefix+'.'+r+'.'+c+'.info"></div></td>';
515          }
516          html += '</tr>';
517        }
518        html += '</table>';
519      }
520     
521      document.getElementById('plate.dest').innerHTML = html;
522
523      Main.hide('destplatecreateoptions');
524      Main.show('toolbar.mappings');
525      Main.showHide('plate.dest.options', !bigPlate);
526      showSourceCoordinatesOnClick();
527    }
528   
529    /**
530      Save the event.
531    */
532    function doCreateChildPlate()
533    {
534      var frm = document.forms['main'];
535      var numMapped = 0;
536      for (var plateNo = 0; plateNo < destPlates.length; plateNo++)
537      {
538        var destPlate = destPlates[plateNo];
539        Forms.createHidden(frm, 'plate.' + plateNo + '.name', destPlate.name);
540        if (!isBioAssayEvent)
541        {
542          Forms.createHidden(frm, 'plate.' + plateNo + '.barcode', destPlate.barcode);
543        }
544        for (var row = 0; row < destPlate.rows; row++)
545        {
546          for (var column = 0; column < destPlate.columns; column++)
547          {
548            var well = destPlate.getWell(row, column);
549            if (well.mappedWell)
550            {
551              var prefix = 'well.' +plateNo + '.' + row + '.' + column;
552              Forms.createHidden(frm, prefix, well.mappedWell.id);
553              if (!isBioAssayEvent)
554              {
555                Forms.createHidden(frm, prefix + '.name', well.mappedWell.childName);
556              }
557              numMapped++;
558            }
559          }
560        }
561      }
562     
563      if (numMapped == 0)
564      {
565        alert('No wells have been mapped.');
566        return;
567      }
568     
569      frm.submit();
570    }
571   
572
573    function selectPlateMappingOnClick()
574    {
575      if (!destPlates) 
576      {
577        alert('No destination plates have been created');
578        return;
579      }
580      var url = '../../lims/platemappings/index.jsp?ID=<%=ID%>&cmd=UpdateContext&mode=selectone&callback=setPlateMappingCallback';
581      url += '&resetTemporary=1';
582      url += '&tmpfilter:INT:sourceGeometry.rows='+sourcePlate.rows;
583      url += '&tmpfilter:INT:sourceGeometry.columns='+sourcePlate.columns;
584      url += '&tmpfilter:INT:sourceCount=1';
585      url += '&tmpfilter:INT:destinationGeometry.rows='+destPlates[0].rows;
586      url += '&tmpfilter:INT:destinationGeometry.columns='+destPlates[0].columns;
587      url += '&tmpfilter:INT:destinationCount=' + destPlates.length;
588      Main.openPopup(url, 'SelectPlateMapping', 1000, 700); 
589    }
590   
591    function setPlateMappingCallback(plateMappingId, name)
592    {
593      var request = Ajax.getXmlHttpRequest();
594      var url = '../../lims/platemappings/ajax.jsp?ID=<%=ID%>&cmd=GetMappingDetails&item_id=' + plateMappingId;
595      request.open("GET", url, false); 
596      request.send(null);
597      var mappingInfo = Ajax.parseJsonResponse(request.responseText);
598      if (mappingInfo.status != 'ok')
599      {
600        alert(mappingInfo.message);
601        return false;
602      }
603     
604      if (mappingInfo.sourcePlates != 1 || mappingInfo.sourceRows != sourcePlate.rows || mappingInfo.sourceColumns != sourcePlate.columns)
605      {
606        if (!confirm("The selected mapping doesn't match the geometry of the source plate.\nContinue mapping overlapping positions?")) return;
607      }
608      else if (mappingInfo.destinationPlates != destPlates.length || mappingInfo.destinationRows != destPlates[0].rows || mappingInfo.destinationColumns != destPlates[0].columns)
609      {
610        if (!confirm("The selected mapping doesn't match the geometry of the destination plate.\nContinue mapping overlapping positions?")) return;
611      }
612     
613      var numMapped = 0;
614      for (var i = 0; i < mappingInfo.details.length; i++)
615      {
616        var mapping = mappingInfo.details[i].split(',');
617        var srcWell = sourcePlate.getWell(parseInt(mapping[1]), parseInt(mapping[2]));
618        var plateNo = parseInt(mapping[3]);
619        if (plateNo >= 0 && plateNo < destPlates.length)
620        {
621          var destPlate = destPlates[plateNo];
622          var destWell = destPlate.getWell(parseInt(mapping[4]), parseInt(mapping[5]));
623          if (srcWell && destWell)
624          {
625            if (!destWell.mappedWell && !destWell.locked && srcWell.id && !srcWell.locked && !srcWell.mappedWell)
626            {
627              srcWell.mapToWell(destWell);
628              numMapped++;
629            }
630          }
631        }
632      }
633    }
634   
635    function showSourceCoordinatesOnClick()
636    {
637      var frm = document.forms['main'];
638      Main.addOrRemoveClass(document.getElementById('plate.dest'), 'noinfo', !frm.showSourceCoordinates.checked);
639    }
640   
641    function showChildInfo()
642    {
643      if (selectedDestWell) 
644      {
645        editingPlate = selectedDestWell.plate;
646        editingWell = selectedDestWell.mappedWell;
647      }
648      else if (selectedSourceWell)
649      {
650        if (selectedSourceWell.mappedWell)
651        {
652          editingPlate = selectedSourceWell.mappedWell.plate; 
653        }
654        editingWell = selectedSourceWell;
655      }
656      var frm = document.forms['main'];
657      if (editingPlate)
658      {
659        frm.plate_name.value = editingPlate.name;
660        if (!isBioAssayEvent)
661        {
662          frm.plate_barcode.value = editingPlate.barcode;
663        }
664        Main.show('childplate.info');
665      }
666      if (editingWell && !isBioAssayEvent)
667      {
668        frm.biomaterial_name.value = editingWell.childName;
669        Main.show('childbiomaterial.info');
670      }
671    }
672   
673    function storeAndHideChildInfo()
674    {
675      var frm = document.forms['main'];
676      if (editingWell && !isBioAssayEvent)
677      {
678        Main.hide('childbiomaterial.info');
679        editingWell.childName = frm.biomaterial_name.value;
680        editingWell = null;
681      }
682      if (editingPlate)
683      {
684        Main.hide('childplate.info');
685        editingPlate.name = frm.plate_name.value;
686        if (!isBioAssayEvent)
687        {
688          editingPlate.barcode = frm.plate_barcode.value;
689        }
690        editingPlate = null;
691      }
692     
693    }
694    </script>
695  </base:head>
696  <base:body onload="init()">
697    <div id="canvas"></div>
698    <h3>Create child bioplate - step 2/2 <base:help helpid="bioplateevent.create-child-2" /></h3>
699    <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; padding: 0px;">
700      <form name="main" action="index.jsp" method="post">
701      <input type="hidden" name="ID" value="<%=ID%>">
702      <input type="hidden" name="cmd" value="CreateChildPlate">
703      <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
704      <!-- event properties -->
705      <input type="hidden" name="event_name" value="<%=HTML.encodeTags(request.getParameter("event_name"))%>">
706      <input type="hidden" name="event_description" value="<%=HTML.encodeTags(request.getParameter("event_description"))%>">
707      <input type="hidden" name="event_date" value="<%=HTML.encodeTags(request.getParameter("event_date"))%>">
708      <input type="hidden" name="protocol_id" value="<%=Values.getInt(request.getParameter("protocol_id"))%>">
709      <input type="hidden" name="hardware_id" value="<%=Values.getInt(request.getParameter("hardware_id"))%>">
710      <!-- child plate properties -->
711      <input type="hidden" name="number_of_plates" value="<%=numChildPlates%>">
712      <input type="hidden" name="size" value="<%=size%>">
713      <input type="hidden" name="plategeometry_id" value="<%=childPlateGeometryId%>">
714      <input type="hidden" name="bioplatetype_id" value="<%=childPlateTypeId%>">
715      <input type="hidden" name="freezer_id" value="<%=Values.getInt(request.getParameter("freezer_id"))%>">
716      <input type="hidden" name="plate_description" value="<%=HTML.encodeTags(request.getParameter("plate_description"))%>">
717      <!-- child biomaterial properties -->
718      <input type="hidden" name="child_biomaterial_type" value="<%=childBioMaterialType.name()%>"> 
719      <input type="hidden" name="subtype_id" value="<%=request.getParameter(childBioMaterialType.name() + "_subtype_id")%>">
720      <input type="hidden" name="original_quantity" value="<%=HTML.encodeTags(request.getParameter("original_quantity"))%>">
721      <input type="hidden" name="used_quantity" value="<%=HTML.encodeTags(request.getParameter("used_quantity"))%>">
722      <input type="hidden" name="child_description" value="<%=HTML.encodeTags(request.getParameter("child_description"))%>">
723      <input type="hidden" name="tag_id" value="<%=HTML.encodeTags(request.getParameter("tag_id"))%>">
724 
725    <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px; border-top: 0px;">
726        <tbl:button title="Clear" 
727          onclick="clearMapping()" 
728          image="cancel.png" 
729          tooltip="Clear all mapped wells"
730        />
731        <tbl:button title="Place by row" 
732          onclick="placeByRow()" 
733          image="place_by_row.png" 
734          tooltip="Place remaining items; start with rows"
735        />
736        <tbl:button title="Place by column" 
737          onclick="placeByColumn()" 
738          image="place_by_column.png" 
739          tooltip="Place remaining items; start with columns"
740        />
741        <tbl:button title="Predefined mapping&hellip;" 
742          onclick="selectPlateMappingOnClick()" 
743          image="star.png" 
744          tooltip="Select a predefined plate mapping"
745        />
746      </tbl:toolbar>
747 
748      <table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding: 4px;">
749      <tr >
750        <td style="width: 50%;">
751          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
752            <b>Source plate:</b> <span id="plate.src.name"></span>
753            <div id="plate.src"></div>
754          </div>
755        </td>
756        <td style="width: 50%;">
757          <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
758            <b><%=isBioAssayEvent ? 
759                "Physical bioassay(s)" : "Destination plate(s):"%></b> 
760                <span id="plate.dest.info"><i>not created</i></span>
761           
762            <div id="plate.dest"></div>
763            <div id="plate.dest.options" style="display: none;">
764              <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
765                <%=showSourceCoordinates ? "checked" : ""%> value="1"
766                onclick="showSourceCoordinatesOnClick()"><label for="showSourceCoordinates">Show source coordinates</label>
767            </div>
768          </div>
769        </td>
770      </tr>
771      </table>
772
773      <div style="height: 150px; xbackground: #e0e0e0; padding-bottom: 6px;">
774      <table cellspacing="0" border="0" width="100%" style="xdisplay: none;">
775      <tr >
776      <td width="50%">
777        <h3><%=isBioAssayEvent ? "Physical bioassay" : "Child plate:"%></h3>
778        <table class="form" cellspacing="0" id="childplate.info" style="display: none;">
779        <tr>
780          <td class="prompt" style="width: 90px;">Name</td>
781          <td><input <%=requiredClazz%> type="text" name="plate_name" value="" 
782            size="40" maxlength="<%=BioPlate.MAX_NAME_LENGTH%>"></td>
783        </tr>
784        <%
785        if (!isBioAssayEvent)
786        {
787          %>
788          <tr>
789            <td class="prompt">Barcode</td>
790            <td><input <%=clazz%> type="text" name="plate_barcode" value="" 
791              size="40" maxlength="<%=BioPlate.MAX_BARCODE_LENGTH%>"></td>
792          </tr>
793          <%
794        }
795        %>
796        </table>
797      </td>
798      <td width="50%">
799        <%
800        if (!isBioAssayEvent)
801        {
802          %>
803          <h3>Child biomaterial</h3>
804          <table class="form" cellspacing="0" id="childbiomaterial.info" style="display: none;">
805          <tr>
806            <td class="prompt" style="width: 90px;">Name</td>
807            <td><input <%=requiredClazz%> type="text" name="biomaterial_name" value="" 
808              size="40" maxlength="<%=MeasuredBioMaterial.MAX_NAME_LENGTH%>"></td>
809          </tr>
810          </table>
811          <%
812        }
813        %>
814      </td>
815    </tr>
816    </table>
817    </div>
818
819
820    </div>
821    </form>
822
823    <table align="center">
824    <tr>
825      <td width="50%"><base:button onclick="doCreateChildPlate()" title="Save" /></td>
826      <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
827    </tr>
828    </table>
829   
830  </base:body>
831  </base:page>
832  <%
833}
834finally
835{
836  if (dc != null) dc.close();
837}
838%>
Note: See TracBrowser for help on using the repository browser.