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

Code
Comments
Other
Rev Date Author Line
5439 20 May 19 nicklas 1 <%@ page
5439 20 May 19 nicklas 2   pageEncoding="UTF-8"
5439 20 May 19 nicklas 3   session="false"
5439 20 May 19 nicklas 4   import="net.sf.basedb.core.User"
5439 20 May 19 nicklas 5   import="net.sf.basedb.core.DbControl"
5439 20 May 19 nicklas 6   import="net.sf.basedb.core.SessionControl"
5439 20 May 19 nicklas 7   import="net.sf.basedb.core.Application"
5439 20 May 19 nicklas 8   import="net.sf.basedb.clients.web.Base"  
5439 20 May 19 nicklas 9   import="net.sf.basedb.clients.web.util.HTML"  
5439 20 May 19 nicklas 10   import="net.sf.basedb.clients.web.extensions.ExtensionsControl"
5439 20 May 19 nicklas 11 %>
5439 20 May 19 nicklas 12 <%@ taglib prefix="base" uri="/WEB-INF/base.tld" %>
5439 20 May 19 nicklas 13 <%@ taglib prefix="p" uri="/WEB-INF/path.tld" %>
5439 20 May 19 nicklas 14 <%
5439 20 May 19 nicklas 15 final SessionControl sc = Base.getExistingSessionControl(request, "net.sf.basedb.reggie", true);
5439 20 May 19 nicklas 16 final String ID = sc.getId();
5439 20 May 19 nicklas 17 final float scale = Base.getScale(sc);
5439 20 May 19 nicklas 18 final String home = ExtensionsControl.getHomeUrl("net.sf.basedb.reggie");
5439 20 May 19 nicklas 19 DbControl dc = null;
5439 20 May 19 nicklas 20 try
5439 20 May 19 nicklas 21 {
5439 20 May 19 nicklas 22   dc = sc.newDbControl();
5439 20 May 19 nicklas 23   final User user = User.getById(dc, sc.getLoggedInUserId());
5439 20 May 19 nicklas 24 %>
5439 20 May 19 nicklas 25 <base:page type="default" >
5439 20 May 19 nicklas 26 <base:head 
5439 20 May 19 nicklas 27   scripts="~../reggie-2.js,~create_flowcells.js" 
5439 20 May 19 nicklas 28   styles="path.css,~../css/reggie-2.css,~../css/plate.css">
5439 20 May 19 nicklas 29 <style>
5439 20 May 19 nicklas 30 .nondefault
5439 20 May 19 nicklas 31 {
5439 20 May 19 nicklas 32   background: #FFF066;
5439 20 May 19 nicklas 33 }
5439 20 May 19 nicklas 34 .nondefault:after
5439 20 May 19 nicklas 35 {
5439 20 May 19 nicklas 36   content: '›';
5439 20 May 19 nicklas 37 }
5439 20 May 19 nicklas 38 .nondefault:before
5439 20 May 19 nicklas 39 {
5439 20 May 19 nicklas 40   content: '‹';
5439 20 May 19 nicklas 41 }
5439 20 May 19 nicklas 42
5439 20 May 19 nicklas 43
5439 20 May 19 nicklas 44 #numSelected
5439 20 May 19 nicklas 45 {
5439 20 May 19 nicklas 46   font-style: italic;
5439 20 May 19 nicklas 47   margin-top: 0.25em;
5439 20 May 19 nicklas 48   margin-left: 1em;
5439 20 May 19 nicklas 49 }
5439 20 May 19 nicklas 50
5439 20 May 19 nicklas 51 .plate .header
5439 20 May 19 nicklas 52 {
5439 20 May 19 nicklas 53   height: 2em;
5439 20 May 19 nicklas 54 }
5439 20 May 19 nicklas 55
5439 20 May 19 nicklas 56 .plate .header th.col-0, .plate .header th.col-1
5439 20 May 19 nicklas 57 {
5439 20 May 19 nicklas 58   border-bottom: 1px solid #A0A0A0;
5439 20 May 19 nicklas 59 }
5439 20 May 19 nicklas 60
5439 20 May 19 nicklas 61 .well
5439 20 May 19 nicklas 62 {
5439 20 May 19 nicklas 63   height: 2em;
5439 20 May 19 nicklas 64   max-height: 2em;
5439 20 May 19 nicklas 65   min-height: 2em;
5439 20 May 19 nicklas 66   width: 10em;
5439 20 May 19 nicklas 67   max-width: 10em;
5439 20 May 19 nicklas 68   min-width: 10em;
5439 20 May 19 nicklas 69   font-size: 100%;
5439 20 May 19 nicklas 70   text-align: center;
5439 20 May 19 nicklas 71   vertical-align: middle;
5439 20 May 19 nicklas 72 }
5439 20 May 19 nicklas 73
5439 20 May 19 nicklas 74 .plate tbody .lane
5439 20 May 19 nicklas 75 {
5439 20 May 19 nicklas 76   border-right: 1px solid #A0A0A0;
5439 20 May 19 nicklas 77   width: 3em;
5439 20 May 19 nicklas 78 }
5439 20 May 19 nicklas 79
5439 20 May 19 nicklas 80 .well.col-1
5439 20 May 19 nicklas 81 {
5439 20 May 19 nicklas 82   border-left-style: solid;
5439 20 May 19 nicklas 83 }
5439 20 May 19 nicklas 84
5439 20 May 19 nicklas 85 .hide-fc-1 .col-1
5439 20 May 19 nicklas 86 {
5439 20 May 19 nicklas 87   display: none;
5439 20 May 19 nicklas 88 }
5439 20 May 19 nicklas 89
5439 20 May 19 nicklas 90 #select-pool-all
5439 20 May 19 nicklas 91 {
5439 20 May 19 nicklas 92   max-height: 20em;
5439 20 May 19 nicklas 93   overflow: auto;
5439 20 May 19 nicklas 94 }
5439 20 May 19 nicklas 95
5439 20 May 19 nicklas 96 #select-pool .menuitem
5439 20 May 19 nicklas 97 {
5439 20 May 19 nicklas 98   padding-left: 16px;
5439 20 May 19 nicklas 99 }
5439 20 May 19 nicklas 100
5439 20 May 19 nicklas 101 #select-pool div.current
5439 20 May 19 nicklas 102 {
5439 20 May 19 nicklas 103   font-weight: bold;
5439 20 May 19 nicklas 104   background-image: url('../images/selected.gif');
5439 20 May 19 nicklas 105   background-position: 2px 50%;
5439 20 May 19 nicklas 106   background-repeat: no-repeat;
5439 20 May 19 nicklas 107 }
5439 20 May 19 nicklas 108
5439 20 May 19 nicklas 109 #select-pool div.default:after
5439 20 May 19 nicklas 110 {
5439 20 May 19 nicklas 111   content: ' (default)';
5439 20 May 19 nicklas 112 }
5439 20 May 19 nicklas 113
5439 20 May 19 nicklas 114 #select-pool .menuitem:hover
5439 20 May 19 nicklas 115 {
5439 20 May 19 nicklas 116   padding-left: 14px;
5439 20 May 19 nicklas 117   background-position: 0px 50%;
5439 20 May 19 nicklas 118 }
5439 20 May 19 nicklas 119
5439 20 May 19 nicklas 120 </style>
5439 20 May 19 nicklas 121 </base:head>
5439 20 May 19 nicklas 122 <base:body>
5439 20 May 19 nicklas 123
5439 20 May 19 nicklas 124   <p:path><p:pathelement 
5439 20 May 19 nicklas 125     title="Reggie" href="<%="../index.jsp?ID="+ID%>" 
5439 20 May 19 nicklas 126     /><p:pathelement title="Create flow cells for MIPs sequencing" 
5439 20 May 19 nicklas 127     /></p:path>
5439 20 May 19 nicklas 128
5439 20 May 19 nicklas 129   <div class="content">
5439 20 May 19 nicklas 130   
5439 20 May 19 nicklas 131   <form name="reggie" id="wizard" class="wizard">
5439 20 May 19 nicklas 132   <div id="select-pool" class="menu vertical bg-filled-100" style="width: 15em; z-index: 2; display: none;">
5439 20 May 19 nicklas 133     <div id="select-pool-all"></div>
5439 20 May 19 nicklas 134   </div>
5439 20 May 19 nicklas 135   
5439 20 May 19 nicklas 136   <div class="step" id="step-1">
5439 20 May 19 nicklas 137     <div class="step-no">1</div>
5439 20 May 19 nicklas 138     <div class="step-title">Select pools</div>
5439 20 May 19 nicklas 139     <div class="step-content">
5439 20 May 19 nicklas 140       <table class="step-form">
5439 20 May 19 nicklas 141       <tr>
5439 20 May 19 nicklas 142         <td class="prompt">Flow cell type</td>
5439 20 May 19 nicklas 143         <td class="input">
5439 20 May 19 nicklas 144           <select name="preset" id="preset">
5760 26 Nov 19 nicklas 145             <option value="HiSeq2">HiSeq (2 lanes)
5453 28 May 19 nicklas 146             <option value="HiSeq8">HiSeq (8 lanes)
5760 26 Nov 19 nicklas 147             <option value="NextSeq" selected>NextSeq
5439 20 May 19 nicklas 148             <option value="">Custom
5439 20 May 19 nicklas 149           </select>
5439 20 May 19 nicklas 150         </td>
5439 20 May 19 nicklas 151         <td class="status" id="preset.status"></td>
5439 20 May 19 nicklas 152         <td class="help">
5439 20 May 19 nicklas 153           <span id="preset.message" class="message"></span>
5439 20 May 19 nicklas 154           The selected preset affects number of lanes per flow cell.
5439 20 May 19 nicklas 155         </td>
5439 20 May 19 nicklas 156       </tr>
5439 20 May 19 nicklas 157       <tr>
5439 20 May 19 nicklas 158         <td class="prompt">Lanes/flow cell</td>
5439 20 May 19 nicklas 159         <td class="input" id="lanes">
5439 20 May 19 nicklas 160           <label><input type="radio" name="num_lanes" id="num_lanes_2" value="2" checked>2</label>
5439 20 May 19 nicklas 161           <label><input type="radio" name="num_lanes" id="num_lanes_4" value="4">4</label>
5439 20 May 19 nicklas 162           <label><input type="radio" name="num_lanes" id="num_lanes_8" value="8">8</label>
5439 20 May 19 nicklas 163         </td>
5439 20 May 19 nicklas 164         <td class="status" id="lanes.status"></td>
5439 20 May 19 nicklas 165         <td class="help">
5439 20 May 19 nicklas 166           <span id="lanes.message" class="message"></span>
5439 20 May 19 nicklas 167           Select the number of lanes on each flow cell.
5439 20 May 19 nicklas 168         </td>
5439 20 May 19 nicklas 169       </tr>
5439 20 May 19 nicklas 170       <tr>
5439 20 May 19 nicklas 171         <td class="prompt">Number of flow cells</td>
5439 20 May 19 nicklas 172         <td class="input">
5439 20 May 19 nicklas 173           <label><input type="radio" name="num_flowcells" id="num_flowcells_1" value="1" checked>1</label>
5439 20 May 19 nicklas 174           <label><input type="radio" name="num_flowcells" id="num_flowcells_2" value="2">2</label>
5439 20 May 19 nicklas 175         </td>
5439 20 May 19 nicklas 176         <td class="status" id="numFlowCells.status"></td>
5439 20 May 19 nicklas 177         <td class="help">
5439 20 May 19 nicklas 178           <span id="numFlowCells.message" class="message"></span>
5439 20 May 19 nicklas 179           Select if you want to create 1 or 2 flow cells.
5439 20 May 19 nicklas 180         </td>
5439 20 May 19 nicklas 181       </tr>
5439 20 May 19 nicklas 182       <tr class="align-top">
5439 20 May 19 nicklas 183         <td class="prompt">Pools</td>
5439 20 May 19 nicklas 184         <td class="input">
5439 20 May 19 nicklas 185           <select name="pools" id="pools" size="6" multiple></select>
5439 20 May 19 nicklas 186           <div id="numSelected"></div>
5439 20 May 19 nicklas 187           <base:buttongroup style="margin-top: 0.5em;">
5439 20 May 19 nicklas 188             <base:button title="Select manually&hellip;" id="btnSelectPools" />
5439 20 May 19 nicklas 189           </base:buttongroup>
5439 20 May 19 nicklas 190         </td>
5439 20 May 19 nicklas 191         <td class="status" id="pools.status"></td>
5439 20 May 19 nicklas 192         <td class="help">
5439 20 May 19 nicklas 193           <span id="pools.message" class="message"></span>
5439 20 May 19 nicklas 194           Select the pools that should be used in the flow cells. The list contain pools that has
5453 28 May 19 nicklas 195           not yet been used on any flow cell.
5439 20 May 19 nicklas 196         </td>
5439 20 May 19 nicklas 197       </tr>
5439 20 May 19 nicklas 198       </table>
5439 20 May 19 nicklas 199     </div>
5439 20 May 19 nicklas 200   </div>
5439 20 May 19 nicklas 201   
5439 20 May 19 nicklas 202   <div class="step" id="step-2">
5439 20 May 19 nicklas 203     <div class="step-no">2</div>
5439 20 May 19 nicklas 204     <div class="step-title">Flow cell information</div>
5439 20 May 19 nicklas 205     <div class="step-content">
5439 20 May 19 nicklas 206
5439 20 May 19 nicklas 207       <table class="step-form">
5439 20 May 19 nicklas 208       <tr>
5439 20 May 19 nicklas 209         <td class="prompt">Sequencing cycles</td>
5439 20 May 19 nicklas 210         <td class="input">
5439 20 May 19 nicklas 211           <table>
5439 20 May 19 nicklas 212           <tr>
5439 20 May 19 nicklas 213             <td colspan="3">Read 1</td>
5453 28 May 19 nicklas 214             <td colspan="3">Index 1</td>
5453 28 May 19 nicklas 215             <td colspan="3">Index 2</td>
5439 20 May 19 nicklas 216             <td colspan="3">Read 2</td>
5439 20 May 19 nicklas 217           </tr>
5439 20 May 19 nicklas 218           <tr>
5439 20 May 19 nicklas 219             <td>
5439 20 May 19 nicklas 220               <input type="text" class="required" name="read1" id="read1" 
5439 20 May 19 nicklas 221                 style="width: 4em;" maxlength="4">
5439 20 May 19 nicklas 222             </td>
5439 20 May 19 nicklas 223             <td class="status" id="read1.status"></td>
5439 20 May 19 nicklas 224             <td style="width: 2em;"></td>
5439 20 May 19 nicklas 225             <td>
5453 28 May 19 nicklas 226               <input type="text" class="required" name="indexRead1" id="indexRead1"
5439 20 May 19 nicklas 227                 style="width: 4em;" maxlength="4">
5439 20 May 19 nicklas 228             </td>
5453 28 May 19 nicklas 229             <td class="status" id="indexRead1.status"></td>
5439 20 May 19 nicklas 230             <td style="width: 2em;"></td>
5439 20 May 19 nicklas 231             <td>
5453 28 May 19 nicklas 232               <input type="text" class="required" name="indexRead2" id="indexRead2"
5453 28 May 19 nicklas 233                 style="width: 4em;" maxlength="4">
5453 28 May 19 nicklas 234             </td>
5453 28 May 19 nicklas 235             <td class="status" id="indexRead2.status"></td>
5453 28 May 19 nicklas 236             <td style="width: 2em;"></td>
5453 28 May 19 nicklas 237             <td>
5439 20 May 19 nicklas 238               <input type="text" class="required" name="read2" id="read2"
5439 20 May 19 nicklas 239                 style="width: 4em;" maxlength="4">
5439 20 May 19 nicklas 240             </td>
5439 20 May 19 nicklas 241             <td class="status" id="read2.status"></td>
5439 20 May 19 nicklas 242             <td style="width: 2em;"></td>
5439 20 May 19 nicklas 243           </tr>
5439 20 May 19 nicklas 244           <tr>
5439 20 May 19 nicklas 245             <td colspan="3" class="help"><span id="read1.message" class="message"></span></td>
5453 28 May 19 nicklas 246             <td colspan="3" class="help"><span id="indexRead1.message" class="message"></span></td>
5453 28 May 19 nicklas 247             <td colspan="3" class="help"><span id="indexRead2.message" class="message"></span></td>
5439 20 May 19 nicklas 248             <td colspan="3" class="help"><span id="read2.message" class="message"></span></td>
5439 20 May 19 nicklas 249           </tr>
5439 20 May 19 nicklas 250           </table>
5439 20 May 19 nicklas 251         
5439 20 May 19 nicklas 252         </td>
5439 20 May 19 nicklas 253         <td class="status"></td>
5439 20 May 19 nicklas 254         <td class="help">
5439 20 May 19 nicklas 255           Planned number of sequencing cycles. The actual numbers used may be changed in the
5439 20 May 19 nicklas 256           registration wizard.
5439 20 May 19 nicklas 257         </td>
5439 20 May 19 nicklas 258       </tr>
5439 20 May 19 nicklas 259       <tr class="align-top">
5439 20 May 19 nicklas 260         <td class="prompt">Flow cell layout</td>
5439 20 May 19 nicklas 261         <td class="input">
5439 20 May 19 nicklas 262           <table class="plate" id="plate" style="margin-bottom: 1em;">
5439 20 May 19 nicklas 263           <thead>
5439 20 May 19 nicklas 264           <tr class="header">
5439 20 May 19 nicklas 265             <th class="lane">Lane</th>
5439 20 May 19 nicklas 266             <%
5439 20 May 19 nicklas 267             for (int fcNo = 0; fcNo < 2; fcNo++)
5439 20 May 19 nicklas 268             {
5439 20 May 19 nicklas 269               %>
5439 20 May 19 nicklas 270               <th class="col-<%=fcNo%>" id="fc.<%=fcNo%>">FlowCell<%=fcNo%></th>
5439 20 May 19 nicklas 271               <%
5439 20 May 19 nicklas 272             }
5439 20 May 19 nicklas 273             %>
5439 20 May 19 nicklas 274           </tr>
5439 20 May 19 nicklas 275           </thead>
5439 20 May 19 nicklas 276           <tbody>
5439 20 May 19 nicklas 277           <%
5439 20 May 19 nicklas 278           for (int laneNo = 0; laneNo < 8; laneNo++)
5439 20 May 19 nicklas 279           {
5439 20 May 19 nicklas 280             %>
5439 20 May 19 nicklas 281             <tr class="row-<%=laneNo%>" id="lane.<%=laneNo%>">
5439 20 May 19 nicklas 282               <th class="lane"><%=laneNo+1%></th>
5439 20 May 19 nicklas 283               <%
5439 20 May 19 nicklas 284               for (int fcNo = 0; fcNo < 2; fcNo++)
5439 20 May 19 nicklas 285               {
5439 20 May 19 nicklas 286                 %>
5439 20 May 19 nicklas 287                 <td class="well col-<%=fcNo%>" id="lane.<%=laneNo%>.<%=fcNo%>" 
5439 20 May 19 nicklas 288                   data-fc-no="<%=fcNo%>" data-lane-no="<%=laneNo%>"></td>
5439 20 May 19 nicklas 289                 <%
5439 20 May 19 nicklas 290               }
5439 20 May 19 nicklas 291               %>
5439 20 May 19 nicklas 292             </tr>
5439 20 May 19 nicklas 293             <%
5439 20 May 19 nicklas 294           }
5439 20 May 19 nicklas 295           %>
5439 20 May 19 nicklas 296           </tbody>
5439 20 May 19 nicklas 297           </table>
5439 20 May 19 nicklas 298         
5439 20 May 19 nicklas 299         </td>
5439 20 May 19 nicklas 300         <td class="status" id="flowCells.status"></td>
5439 20 May 19 nicklas 301         <td class="help">
5439 20 May 19 nicklas 302           <span id="flowCells.message" class="message"></span>
5439 20 May 19 nicklas 303           Assign a pool to each flow cell lane. Click on each lane to select a different pool.
5439 20 May 19 nicklas 304         </td>
5439 20 May 19 nicklas 305       </tr>
5439 20 May 19 nicklas 306       <tr valign="top">
5439 20 May 19 nicklas 307         <td class="prompt">Comments</td>
5439 20 May 19 nicklas 308         <td class="input"></td>
5439 20 May 19 nicklas 309         <td class="status" id="comments.status"></td>
5439 20 May 19 nicklas 310         <td class="help">
5439 20 May 19 nicklas 311           <span id="comments.message" class="message"></span>
5439 20 May 19 nicklas 312           Comments about the flow cells.
5439 20 May 19 nicklas 313         </td>
5439 20 May 19 nicklas 314       </tr>
5439 20 May 19 nicklas 315       <tbody id="flowcell-comments">
5439 20 May 19 nicklas 316         <%
5439 20 May 19 nicklas 317         for (int fcNo = 0; fcNo < 2; fcNo++)
5439 20 May 19 nicklas 318         {
5439 20 May 19 nicklas 319           %>
5439 20 May 19 nicklas 320           <tr class="align-top" id="comments.<%=fcNo%>">
5439 20 May 19 nicklas 321           <td class="subprompt" id="comments.<%=fcNo%>.name">FlowCell<%=fcNo%></td>
5439 20 May 19 nicklas 322           <td class="input">
5439 20 May 19 nicklas 323             <textarea rows="3" name="comments.<%=fcNo%>"></textarea>
5439 20 May 19 nicklas 324           </td>
5439 20 May 19 nicklas 325           <td class="status"></td>
5439 20 May 19 nicklas 326           <td class="help"></td>
5439 20 May 19 nicklas 327           </tr>
5439 20 May 19 nicklas 328           <%
5439 20 May 19 nicklas 329         }
5439 20 May 19 nicklas 330         %>
5439 20 May 19 nicklas 331       </tbody>
5439 20 May 19 nicklas 332       </table>
5439 20 May 19 nicklas 333     </div>
5439 20 May 19 nicklas 334   </div>
5439 20 May 19 nicklas 335   
5439 20 May 19 nicklas 336   <div id="wizard-status"></div>
5439 20 May 19 nicklas 337   
5439 20 May 19 nicklas 338   <table class="navigation" id="navigation">
5439 20 May 19 nicklas 339   <tr>
5439 20 May 19 nicklas 340     <td><base:button id="gocancel" title="Cancel" /></td>
5439 20 May 19 nicklas 341     <td><base:button id="gonext" title="Next" image="<%=home+"/images/gonext.png"%>" /></td>
5439 20 May 19 nicklas 342     <td><base:button id="goregister" title="Register" image="<%=home+"/images/import.png"%>"  /></td>
5439 20 May 19 nicklas 343     <td><base:button id="gorestart" title="Restart" image="<%=home+"/images/goback.png"%>" /></td>
5439 20 May 19 nicklas 344     <td id="gonext-message" class="message"></td>
5439 20 May 19 nicklas 345   </tr>
5439 20 May 19 nicklas 346   </table>
5439 20 May 19 nicklas 347   
5439 20 May 19 nicklas 348   </form>
5439 20 May 19 nicklas 349   </div>
5439 20 May 19 nicklas 350   
5439 20 May 19 nicklas 351 </base:body>
5439 20 May 19 nicklas 352 </base:page>
5439 20 May 19 nicklas 353 <%
5439 20 May 19 nicklas 354 }
5439 20 May 19 nicklas 355 finally
5439 20 May 19 nicklas 356 {
5439 20 May 19 nicklas 357   if (dc != null) dc.close();
5439 20 May 19 nicklas 358 }
5439 20 May 19 nicklas 359 %>

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