Ignore:
Timestamp:
Jan 17, 2012, 1:00:53 PM (10 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

The "create child plate" wizard.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/biomaterials/wizards/create_child_bioplate_step2.jsp

    r5905 r5928  
    118118      // Initialize graphics
    119119      graphics = new jsGraphics(document.getElementById('canvas'));
    120       pen = new jsPen();
    121       selectedPen = new jsPen(new jsColor('445577'), 2);
     120      pen = new jsPen(new jsColor('#2288AA'), 1);
     121      selectedPen = new jsPen(new jsColor('#2288AA'), 2);
    122122      setSourceBioPlate(<%=sourcePlateId%>, '<%=HTML.javaScriptEncode(sourcePlate.getName())%>');
    123123      createDestinationPlates(<%=numChildPlates%>, <%=isBioAssayEvent ? 1 : geometry.getRows()%>, <%=isBioAssayEvent ? size : geometry.getColumns()%>, '<%=HTML.javaScriptEncode(childPlateNamePrefix)%>');
     
    431431     
    432432      // Create html table representing the bioplate
    433       var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
     433      var html = '<table class="'+plateClass+'" onmouseout="event.cancelBubble=true">';
    434434      html += '<tr><td></td>';
    435435      for (var c = 0; c < plate.columns; c++)
     
    453453          if (well.id)
    454454          {
    455             cls += ' filled editable';
     455            cls += ' used editable';
    456456            onclick = ' onclick="sourceWellOnClick('+r+','+c+')"';
    457457            onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
     
    492492
    493493        // Create html table representing the bioplate
    494         html += '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
     494        html += '<table class="'+plateClass+'" onmouseout="event.cancelBubble=true" style="margin-bottom: 4px;">';
    495495        if (plateNo == 0)
    496496        {
     
    695695  </base:head>
    696696  <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"))%>">
     697    <div id="canvas" style="position: absolute; z-index: 99;"></div>
     698   
     699    <h1>Create child bioplate - step 2/2 <base:help helpid="bioplateevent.create-child-2" /></h1>
     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    <div class="content">
     726      <div class="absolutefull filled" style="height: 3em;">
     727        <tbl:toolbar id="toolbar.mappings" subclass="bottomborder">
     728          <tbl:button title="Clear"
     729            onclick="clearMapping()"
     730            image="cancel.png"
     731            tooltip="Clear all mapped wells"
     732          />
     733          <tbl:button title="Place by row"
     734            onclick="placeByRow()"
     735            image="place_by_row.png"
     736            tooltip="Place remaining items; start with rows"
     737          />
     738          <tbl:button title="Place by column"
     739            onclick="placeByColumn()"
     740            image="place_by_column.png"
     741            tooltip="Place remaining items; start with columns"
     742          />
     743          <tbl:button title="Predefined mapping&hellip;"
     744            onclick="selectPlateMappingOnClick()"
     745            image="star.png"
     746            tooltip="Select a predefined plate mapping"
     747          />
     748        </tbl:toolbar>
     749      </div>
    724750 
    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>
     751      <div class="absolutefull" style="top: 3em; bottom: 10em;">
    747752 
    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;">
     753        <div class="absolutefull" style="width: 50%;">
     754          <div class="absolutefull filled" style="height: 2em;">
     755            <div class="padded">
    752756            <b>Source plate:</b> <span id="plate.src.name"></span>
    753             <div id="plate.src"></div>
     757            </div>
    754758          </div>
    755         </td>
    756         <td style="width: 50%;">
    757           <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
    758             <b><%=isBioAssayEvent ?
     759         
     760          <div class="absolutefull topborder" style="top: 2em;">
     761            <table style="margin: auto; height: 100%;"><tr><td>
     762              <div id="plate.src"></div>
     763              <br>
     764            </td></tr></table>
     765          </div>
     766        </div>
     767 
     768        <div class="absolutefull" style="left: auto; width: 50%;">
     769          <div class="absolutefull filled" style="height: 2em;">
     770            <div class="padded">
     771              <b><%=isBioAssayEvent ?
    759772                "Physical bioassay(s)" : "Destination plate(s):"%></b>
    760773                <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>
    767774            </div>
    768775          </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>
     776           
     777          <div class="absolutefull leftborder topborder" style="top: 2em;">
     778            <table style="margin: auto; height: 100%;"><tr><td>
     779              <div id="plate.dest"></div>
     780              <div id="plate.dest.options" style="display: none;">
     781                <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
     782                  <%=showSourceCoordinates ? "checked" : ""%> value="1"
     783                  onclick="showSourceCoordinatesOnClick()"><label for="showSourceCoordinates">Show source coordinates</label>
     784              </div>
     785            </td></tr></table>
     786          </div>
     787        </div>
     788      </div>
     789
     790      <div class="absolutefull filled topborder bottomborder" style="top: auto; height: 10em;">
     791        <div class="absolutefull rightborder" style="width: 50%; display: none;" id="childplate.info">
     792          <table class="fullform input100 smaller">
     793            <tbody class="sectionheader">
     794              <tr>
     795                <th colspan="2"><%=isBioAssayEvent ? "Physical bioassay" : "Child plate"%></th>
     796              </tr>
     797            </tbody>
     798            <tbody>
     799              <tr>
     800                <th>Name</th>
     801                <td><input <%=requiredClazz%> type="text" name="plate_name" value=""
     802                  maxlength="<%=BioPlate.MAX_NAME_LENGTH%>"></td>
     803              </tr>
     804              <%
     805              if (!isBioAssayEvent)
     806              {
     807                %>
     808                <tr>
     809                  <th>Barcode</td>
     810                  <td><input <%=clazz%> type="text" name="plate_barcode" value=""
     811                    maxlength="<%=BioPlate.MAX_BARCODE_LENGTH%>"></td>
     812                </tr>
     813                <%
     814              }
     815              %>
     816            </tbody>
     817            <tr class="dynamic">
     818              <th></th>
     819              <td></td>
     820            </tr>
    810821          </table>
    811           <%
    812         }
    813         %>
    814       </td>
    815     </tr>
    816     </table>
    817     </div>
     822        </div>
     823       
     824        <div class="absolutefull" style="left: auto; width: 50%; display: none;" id="childbiomaterial.info">
     825          <table class="fullform input100 smaller">
     826            <tbody class="sectionheader">
     827              <tr>
     828                <th colspan="2">Child biomaterial</th>
     829              </tr>
     830            </tbody>
     831            <tbody>
     832              <tr>
     833                <th>Name</th>
     834                <td><input <%=requiredClazz%> type="text" name="biomaterial_name" value=""
     835                  maxlength="<%=MeasuredBioMaterial.MAX_NAME_LENGTH%>"></td>
     836              </tr>
     837            </tbody>
     838            <tr class="dynamic">
     839              <th></th>
     840              <td></td>
     841            </tr>
     842          </table>
     843       
     844        </div>
     845      </div>
    818846
    819847
     
    821849    </form>
    822850
    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>
     851    <base:buttongroup subclass="dialogbuttons">
     852      <base:button onclick="doCreateChildPlate()" title="Save" />
     853      <base:button onclick="window.close()" title="Cancel" />
     854    </base:buttongroup>
    829855   
    830856  </base:body>
Note: See TracChangeset for help on using the changeset viewer.