extensions/net.sf.basedb.reggie/trunk/resources/mipsprep/design_mipsplate.jsp

Code
Comments
Other
Rev Date Author Line
5390 29 Apr 19 nicklas 1 <%@ page
5390 29 Apr 19 nicklas 2   pageEncoding="UTF-8"
5390 29 Apr 19 nicklas 3   session="false"
5390 29 Apr 19 nicklas 4   import="net.sf.basedb.core.Application"
5390 29 Apr 19 nicklas 5   import="net.sf.basedb.core.User"
5390 29 Apr 19 nicklas 6   import="net.sf.basedb.core.DbControl"
5390 29 Apr 19 nicklas 7   import="net.sf.basedb.core.SessionControl"
5390 29 Apr 19 nicklas 8   import="net.sf.basedb.clients.web.Base"
5390 29 Apr 19 nicklas 9   import="net.sf.basedb.clients.web.util.HTML"
5390 29 Apr 19 nicklas 10   import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
5390 29 Apr 19 nicklas 11   import="net.sf.basedb.util.Values"
5390 29 Apr 19 nicklas 12   import="net.sf.basedb.util.formatter.WellCoordinateFormatter"
5390 29 Apr 19 nicklas 13 %>
5390 29 Apr 19 nicklas 14 <%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
5390 29 Apr 19 nicklas 15 <%@ taglib prefix="m" uri="/WEB-INF/menu.tld" %>
5390 29 Apr 19 nicklas 16 <%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
5390 29 Apr 19 nicklas 17 <%@ taglib prefix="tbl" uri="/WEB-INF/table.tld" %>
5390 29 Apr 19 nicklas 18 <%
5390 29 Apr 19 nicklas 19 final SessionControl sc = Base.getExistingSessionControl(request, "net.sf.basedb.reggie", true);
5390 29 Apr 19 nicklas 20 final String ID = sc.getId();
5390 29 Apr 19 nicklas 21 final float scale = Base.getScale(sc);
5390 29 Apr 19 nicklas 22 final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
5390 29 Apr 19 nicklas 23 DbControl dc = null;
5390 29 Apr 19 nicklas 24 try
5390 29 Apr 19 nicklas 25 {
5390 29 Apr 19 nicklas 26   dc = sc.newDbControl();
5390 29 Apr 19 nicklas 27   final User user = User.getById(dc, sc.getLoggedInUserId());
5390 29 Apr 19 nicklas 28 %>
5390 29 Apr 19 nicklas 29 <base:page type="default">
5390 29 Apr 19 nicklas 30 <base:head 
5390 29 Apr 19 nicklas 31   scripts="~../reggie-2.js,~design_mipsplate.js,~plate.js,js-draw.js" 
5390 29 Apr 19 nicklas 32   styles="path.css,toolbar.css,~../css/reggie-2.css,~../css/plate.css"
5390 29 Apr 19 nicklas 33   >
5390 29 Apr 19 nicklas 34 <style>
5390 29 Apr 19 nicklas 35
5390 29 Apr 19 nicklas 36 /* Empty wells should have greyed, italic text */
5390 29 Apr 19 nicklas 37 .well.empty
5390 29 Apr 19 nicklas 38 {
5390 29 Apr 19 nicklas 39   text-align: center;
5390 29 Apr 19 nicklas 40   vertical-align: middle;
5390 29 Apr 19 nicklas 41   font-style: italic;
5390 29 Apr 19 nicklas 42   color: #999999;
5390 29 Apr 19 nicklas 43 }
5390 29 Apr 19 nicklas 44
5390 29 Apr 19 nicklas 45 .well .missing
5390 29 Apr 19 nicklas 46 {
5390 29 Apr 19 nicklas 47   font-style: italic;
5390 29 Apr 19 nicklas 48 }
5390 29 Apr 19 nicklas 49
5390 29 Apr 19 nicklas 50 .comment
5390 29 Apr 19 nicklas 51 {
5390 29 Apr 19 nicklas 52   font-style: italic;
5390 29 Apr 19 nicklas 53 }
5603 13 Sep 19 nicklas 54 .mips-panel
5483 11 Jun 19 nicklas 55 {
5483 11 Jun 19 nicklas 56   color: #0000C8;
5483 11 Jun 19 nicklas 57 }
5413 09 May 19 nicklas 58 .volume
5413 09 May 19 nicklas 59 {
5413 09 May 19 nicklas 60   color: #C80000;
5413 09 May 19 nicklas 61   float: right;
5413 09 May 19 nicklas 62 }
5448 27 May 19 nicklas 63 .mips-form
5448 27 May 19 nicklas 64 {}
5448 27 May 19 nicklas 65
5448 27 May 19 nicklas 66 .mips-form span + span:before
5413 09 May 19 nicklas 67 {
5448 27 May 19 nicklas 68   content: '−';
5448 27 May 19 nicklas 69   padding: 0 0.25em;
5413 09 May 19 nicklas 70 }
5454 28 May 19 nicklas 71
5454 28 May 19 nicklas 72 #unplaced-aliquots
5454 28 May 19 nicklas 73 {
5454 28 May 19 nicklas 74   writing-mode: sideways-lr;
5454 28 May 19 nicklas 75   background-color: transparent;
5454 28 May 19 nicklas 76   padding: 2em 1em;
5454 28 May 19 nicklas 77   text-align: left;
5454 28 May 19 nicklas 78   vertical-align: bottom;
5454 28 May 19 nicklas 79   border-left-width: 1px;
5454 28 May 19 nicklas 80   border-bottom-width: 0;
5454 28 May 19 nicklas 81   background-image: url('../images/info.png');
5454 28 May 19 nicklas 82   background-repeat: no-repeat;
5454 28 May 19 nicklas 83   background-position: 50% calc(100% - 2px);
5454 28 May 19 nicklas 84 }
5390 29 Apr 19 nicklas 85 </style>
5390 29 Apr 19 nicklas 86 </base:head>
5390 29 Apr 19 nicklas 87 <base:body>
5390 29 Apr 19 nicklas 88   <p:path><p:pathelement 
5390 29 Apr 19 nicklas 89     title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
5390 29 Apr 19 nicklas 90     /><p:pathelement title="Create new MIPs plate" 
5390 29 Apr 19 nicklas 91     /></p:path>
5390 29 Apr 19 nicklas 92   
5390 29 Apr 19 nicklas 93   <div class="content">
5390 29 Apr 19 nicklas 94
5390 29 Apr 19 nicklas 95   <form name="reggie" id="wizard" class="wizard">
5390 29 Apr 19 nicklas 96   
5390 29 Apr 19 nicklas 97   <div class="step auto-hide" id="step-1">
5390 29 Apr 19 nicklas 98     <div class="step-no">1</div>
5390 29 Apr 19 nicklas 99     <div class="step-title">MIPs plate</div>
5390 29 Apr 19 nicklas 100     <div class="step-content">
5390 29 Apr 19 nicklas 101
5390 29 Apr 19 nicklas 102       <table class="step-form bottomborder">
5390 29 Apr 19 nicklas 103       <tr>
5390 29 Apr 19 nicklas 104         <td class="prompt">Name</td>
5390 29 Apr 19 nicklas 105         <td class="input" id="plateName"></td>
5390 29 Apr 19 nicklas 106         <td class="status"></td>
5390 29 Apr 19 nicklas 107         <td class="help"></td>
5390 29 Apr 19 nicklas 108       </tr>
5392 02 May 19 nicklas 109       <tr class="align-top">
5454 28 May 19 nicklas 110         <td class="prompt">Aliquot plates
5454 28 May 19 nicklas 111           <base:buttongroup vertical="true" style="float: right;">
5454 28 May 19 nicklas 112             <base:button
5454 28 May 19 nicklas 113               id="moveUp"
5454 28 May 19 nicklas 114               image="move_up.png" 
5454 28 May 19 nicklas 115               tooltip="Move up" 
5454 28 May 19 nicklas 116               subclass="square"
5454 28 May 19 nicklas 117               data-down="0"
5454 28 May 19 nicklas 118             />
5454 28 May 19 nicklas 119             <base:button 
5454 28 May 19 nicklas 120               id="moveDown"
5454 28 May 19 nicklas 121               image="move_down.png" 
5454 28 May 19 nicklas 122               tooltip="Move down" 
5454 28 May 19 nicklas 123               subclass="square"
5454 28 May 19 nicklas 124               data-down="1"
5454 28 May 19 nicklas 125             />
5454 28 May 19 nicklas 126           </base:buttongroup>
5454 28 May 19 nicklas 127         
5454 28 May 19 nicklas 128         </td>
5392 02 May 19 nicklas 129         <td class="input">
5392 02 May 19 nicklas 130           <table style="width: 100%;">
5392 02 May 19 nicklas 131           <tr>
5392 02 May 19 nicklas 132             <td>
5458 29 May 19 nicklas 133               <select name="plates" id="plates" size="4" style="width: 24em;" class="required" multiple></select>
5392 02 May 19 nicklas 134             </td>
5392 02 May 19 nicklas 135             <td>
5392 02 May 19 nicklas 136               <base:buttongroup vertical="true">
5392 02 May 19 nicklas 137                 <base:button title="Add plates&hellip;" id="btnAddAliquotPlates" style="width: 9em;"/>
5392 02 May 19 nicklas 138                 <base:button title="Remove" id="btnRemoveAliquotPlates" style="width: 9em;"/>
5392 02 May 19 nicklas 139               </base:buttongroup>
5392 02 May 19 nicklas 140             </td>
5392 02 May 19 nicklas 141           </tr>
5392 02 May 19 nicklas 142           </table>
5392 02 May 19 nicklas 143         </td>
5392 02 May 19 nicklas 144         <td class="status" id="plates.status"></td>
5392 02 May 19 nicklas 145         <td class="help">
5392 02 May 19 nicklas 146           <span id="plates.message" class="message"></span>
5392 02 May 19 nicklas 147           Select aliquot plates that should be used for the MIPs plate.
5392 02 May 19 nicklas 148         </td>
5392 02 May 19 nicklas 149       </tr>
5413 09 May 19 nicklas 150       <tr class="align-top">
5414 09 May 19 nicklas 151         <td class="prompt">Comments</td>
5414 09 May 19 nicklas 152         <td class="input">
5414 09 May 19 nicklas 153           <textarea rows="2" name="comments" id="comments"></textarea>
5414 09 May 19 nicklas 154         </td>
5414 09 May 19 nicklas 155         <td class="status"></td>
5414 09 May 19 nicklas 156         <td class="help">Comments about the new plate.</td>
5414 09 May 19 nicklas 157       </tr>
5390 29 Apr 19 nicklas 158       </table>
5390 29 Apr 19 nicklas 159
5454 28 May 19 nicklas 160       <table id="plate" class="plate" 
5390 29 Apr 19 nicklas 161           style="margin: 1em auto 0 auto;">
5390 29 Apr 19 nicklas 162         <%
5390 29 Apr 19 nicklas 163         int columns = 12;
5390 29 Apr 19 nicklas 164         int rows = 8;
5390 29 Apr 19 nicklas 165         WellCoordinateFormatter rowF = new WellCoordinateFormatter(true);
5390 29 Apr 19 nicklas 166         WellCoordinateFormatter colF = new WellCoordinateFormatter(false);
5390 29 Apr 19 nicklas 167         %>
5390 29 Apr 19 nicklas 168         <tr class="header">
5446 24 May 19 nicklas 169           <th></th>
5390 29 Apr 19 nicklas 170           <%
5390 29 Apr 19 nicklas 171           for (int c = 0; c < columns; ++c)
5390 29 Apr 19 nicklas 172           {
5390 29 Apr 19 nicklas 173             %>
5390 29 Apr 19 nicklas 174             <th class="link auto-init" id="col.<%=c%>"
5390 29 Apr 19 nicklas 175               data-auto-init="plate-col" data-col="<%=c%>"
5390 29 Apr 19 nicklas 176               title="Select/deselect all wells in this column"><%=colF.format(c)%></th>
5390 29 Apr 19 nicklas 177             <%
5390 29 Apr 19 nicklas 178           }
5390 29 Apr 19 nicklas 179           %>
5454 28 May 19 nicklas 180           <th style="padding: 0;"></th>
5390 29 Apr 19 nicklas 181         </tr>
5390 29 Apr 19 nicklas 182         <tbody>
5390 29 Apr 19 nicklas 183         <%
5390 29 Apr 19 nicklas 184         for (int r = 0; r < rows; ++r)
5390 29 Apr 19 nicklas 185         {
5390 29 Apr 19 nicklas 186           String row = rowF.format(r);
5390 29 Apr 19 nicklas 187           %>
5390 29 Apr 19 nicklas 188           <tr class="row-<%=r%>">
5390 29 Apr 19 nicklas 189             <th class="link auto-init" id="row.<%=r%>"
5390 29 Apr 19 nicklas 190               data-auto-init="plate-row" data-row="<%=r%>"
5390 29 Apr 19 nicklas 191               title="Select/deselect all wells in this row"><%=row%></th>
5390 29 Apr 19 nicklas 192             <%
5390 29 Apr 19 nicklas 193             for (int c = 0; c < columns; ++c)
5390 29 Apr 19 nicklas 194             {
5390 29 Apr 19 nicklas 195               %>
5390 29 Apr 19 nicklas 196               <td id="well.<%=r%>.<%=c%>" class="well empty auto-init"
5390 29 Apr 19 nicklas 197                 data-auto-init="plate-well" data-col="<%=c%>" data-row="<%=r%>"
5390 29 Apr 19 nicklas 198                 title="Select/deselect this well">empty</td>
5390 29 Apr 19 nicklas 199               <%
5390 29 Apr 19 nicklas 200             }
5454 28 May 19 nicklas 201             if (r == 0)
5454 28 May 19 nicklas 202             {
5454 28 May 19 nicklas 203               %>
5454 28 May 19 nicklas 204               <th id="unplaced-aliquots" rowspan="<%=rows%>" style="display: none;"></th>
5454 28 May 19 nicklas 205               <%
5454 28 May 19 nicklas 206             }
5390 29 Apr 19 nicklas 207             %>
5390 29 Apr 19 nicklas 208           </tr>
5390 29 Apr 19 nicklas 209           <%
5390 29 Apr 19 nicklas 210         }
5390 29 Apr 19 nicklas 211         %>
5390 29 Apr 19 nicklas 212         </tbody>
5454 28 May 19 nicklas 213         
5446 24 May 19 nicklas 214         <tr id="pool-row" style="display: none;">
5440 20 May 19 nicklas 215           <th colspan="<%=columns+1%>">&nbsp;</th>
5440 20 May 19 nicklas 216         </tr>
5446 24 May 19 nicklas 217         <tr id="plate-row" style="display: none;">
5446 24 May 19 nicklas 218           <th colspan="<%=columns+1%>">&nbsp;</th>
5446 24 May 19 nicklas 219         </tr>
5390 29 Apr 19 nicklas 220         </table>
5390 29 Apr 19 nicklas 221         <div style="margin: 0.5em; text-align: center;">
5390 29 Apr 19 nicklas 222           <base:icon image="<%=home+"/images/error.png"%>" style="padding-left: 1em;" />=Error that prevent plate creation
5390 29 Apr 19 nicklas 223           <base:icon image="<%=home+"/images/warning.png"%>" style="padding-left: 1em;" />=Warning but plate can be created
5390 29 Apr 19 nicklas 224         </div>
5390 29 Apr 19 nicklas 225     </div>
5390 29 Apr 19 nicklas 226   </div>
5390 29 Apr 19 nicklas 227
5390 29 Apr 19 nicklas 228
5390 29 Apr 19 nicklas 229   <div id="wizard-status"></div>
5390 29 Apr 19 nicklas 230   
5390 29 Apr 19 nicklas 231   <table class="navigation" id="navigation">
5390 29 Apr 19 nicklas 232   <tr>
5390 29 Apr 19 nicklas 233     <td><base:button id="gocancel" title="Cancel" /></td>
5390 29 Apr 19 nicklas 234     <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" /></td>
5390 29 Apr 19 nicklas 235     <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>"  /></td>
5390 29 Apr 19 nicklas 236     <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" /></td>
5390 29 Apr 19 nicklas 237     <td id="gonext-message" class="message"></td>
5390 29 Apr 19 nicklas 238   </tr>
5390 29 Apr 19 nicklas 239   </table>
5390 29 Apr 19 nicklas 240
5390 29 Apr 19 nicklas 241   </form>
5390 29 Apr 19 nicklas 242   </div>
5390 29 Apr 19 nicklas 243   </div>
5390 29 Apr 19 nicklas 244 </base:body>
5390 29 Apr 19 nicklas 245 </base:page>
5390 29 Apr 19 nicklas 246 <%
5390 29 Apr 19 nicklas 247 }
5390 29 Apr 19 nicklas 248 finally
5390 29 Apr 19 nicklas 249 {
5390 29 Apr 19 nicklas 250   if (dc != null) dc.close();
5390 29 Apr 19 nicklas 251 }
5390 29 Apr 19 nicklas 252 %>

Generated on Tue Nov 21 03:31:13 2023 (UTC) by svndigest 0.11.2pre (dev build 1672)