local_templates/default/circ/selfcheck/main.tt2

   1 [%- ctx.home_path ='/local_templates/default/circ/selfcheck' -%]\r
   2 [% ctx.page_title = 'Self Checkout' %]\r
   3 [% WRAPPER default/base.tt2 %]\r
   4 <!-- ***************************************** main.tt2 ***************************************************** -->\r
   5 \r
   6 \r
   7 <div id="selfcheck-main">\r
   8 <script type="text/javascript">\r
   9 function switchTo(str,subpage) {\r
  10         var pages = [];\r
  11         var sidebarLinks = [];\r
  12         pages['step0'] = document.getElementById('step0');\r
  13         pages['step1'] = document.getElementById('step1');\r
  14         pages['step2'] = document.getElementById('step2');\r
  15         pages['step3'] = document.getElementById('step3');\r
  16         pages['step3a'] = document.getElementById('step3a');\r
  17         //pages['step3b'] = document.getElementById('step3b');\r
  18         pages['step3c'] = document.getElementById('step3c');\r
  19         pages['step3d'] = document.getElementById('step3d');\r
  20         pages['step3e'] = document.getElementById('step3e');\r
  21         pages['step3f'] = document.getElementById('step3f');\r
  22         pages['step4'] = document.getElementById('step4');\r
  23         pages['step5'] = document.getElementById('step5');\r
  24         pages['pay_fines'] = document.getElementById('pay_fines');\r
  25         \r
  26         sidebarLinks['sidebar_step3c'] = document.getElementById('sidebar_step3c');\r
  27         sidebarLinks['sidebar_step3d'] = document.getElementById('sidebar_step3d');\r
  28         sidebarLinks['sidebar_step3e'] = document.getElementById('sidebar_step3e');\r
  29         sidebarLinks['sidebar_step3f'] = document.getElementById('sidebar_step3f');\r
  30 \r
  31         for(var i in pages) { if(!pages[i]) continue; pages[i].style.display="none"; }\r
  32         for(var i in sidebarLinks) { if(!sidebarLinks[i]) continue; sidebarLinks[i].className=""; }\r
  33         \r
  34         if(subpage) {\r
  35                 pages[subpage].style.display="block";\r
  36                 sidebarLinks['sidebar_'+subpage].className="selected";\r
  37         }\r
  38         pages[str].style.display="block";\r
  39         if(str=='step3' && !subpage) pages['step3a'].style.display="block";\r
  40         try{dojo.byId('selfckScanBox').focus();dojo.byId('selfckScanBox').select();}catch(e){}\r
  41 }\r
  42 </script>\r
  43 \r
  44 \r
  45 \r
  46 <div dojoType='openils.widget.ProgressDialog' jsId='progressDialog'></div>\r
  47 <div dojoType="dijit.Dialog" jsId='oilsSelfckWsDialog' class='oils-login-dialog' style='display:none;'>\r
  48     <form>\r
  49         <table>\r
  50             <tr>\r
  51                 <td>Choose a location</td>\r
  52                 <td><div dojoType='openils.widget.OrgUnitFilteringSelect' jsId='oilsSelfckWsLocSelector' \r
  53                     searchAttr='shortname' labelAttr='shortname'/></td>\r
  54             </tr>\r
  55             <tr>\r
  56                 <td>Enter a workstation name</td>\r
  57                 <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckWsName'/></td>\r
  58             </tr>\r
  59             <tr>\r
  60                 <td colspan='2' align='center'>\r
  61                     <button jsId='oilsSelfckWsSubmit' dojoType='dijit.form.Button'>Submit</button>\r
  62                 </td>\r
  63             </tr>\r
  64         </table>\r
  65     </form>\r
  66 </div>\r
  67 \r
  68 <div style="height:66px;background:#ae2c2a;"><div id='header'>\r
  69   <a href='javascript:;'><img src='[% ctx.home_path %]/graphics/KCLS_logo_horiz.gif' alt='kcls logo' /></a>\r
  70   <span style="font-size:36px;color:white;position:relative;top:-10px;left:15px;">CHECK OUT HERE</span>\r
  71 </div></div>\r
  72 \r
  73 <div id='content-wrapper'>\r
  74   <div id='main-content'>\r
  75         <div style='clear:both;'></div>\r
  76         \r
  77 \r
  78 <script src='[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/selfcheck.js'> </script>\r
  79 <script src="[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/payment.js"></script>\r
  80 <link rel='stylesheet' type='text/css' href='[% ctx.media_prefix %]/css/skin/kcls/selfcheck.css'/>\r
  81 [% INCLUDE 'default/circ/selfcheck/audio_config.tt2' %]\r
  82 \r
  83   <div id="step0" class="checkout" style="width=100%;text-align:center;">Staff login required</div>\r
  84   <div id="step1" class="checkout hidden" style="padding-top:15px;">\r
  85         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>\r
  86     <td align="center"><h1>Scan your library card barcode<br />OR type your library card number</h1></td></tr></table>\r
  87     <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>\r
  88     <td><img src="[% ctx.home_path %]/graphics/libcard_barcode.jpg" alt='library card' /></td><td style="padding-left:10px;"><span style="font-size:18px;">Example 0017620030</span><br /><input type="text" id='patron-login-username' />\r
  89                 <div style="position:absolute;"><div style="position:relative;top:-70px;"><div id='oils-selfck-status-div2' class='status_box'></div></div></div></td>\r
  90     <td><a href="javascript:;" onclick="checkLogin();" style="position:relative;top:12px;left:5px;"><img alt='go' src="[% ctx.home_path %]/graphics/gobutton.jpg" /></a></td></tr></table>\r
  91   </div>\r
  92   <div id="step2" class="checkout hidden" style="padding-top:15px;">\r
  93         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>\r
  94     <td align="center"><h1>Enter your PIN or password</h1></td></tr></table>\r
  95     <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>\r
  96     <td style="padding-left:10px;"><span style="font-size:18px;">Example 0926</span><br /><input type="password" id='patron-login-password' />\r
  97                 <div style="position:absolute;"><div style="position:relative;top:10px;"><div id='oils-selfck-status-div3' class='status_box'></div><div class="hidden" id="back_to_login"><a href="javascript:;" onclick="cancelLogin();">Cancel</a></div></div></div></td>\r
  98     <td><a href="javascript:;" onclick="selfCheckMgr.loginPatron(dojo.byId('patron-login-username').value,dojo.byId('patron-login-password').value);" style="position:relative;top:12px;left:5px;"><img alt='go' src="[% ctx.home_path %]/graphics/gobutton.jpg" /></a></td></tr></table>\r
  99   </div>\r
 100   <div id="step3" class="checkout" style="display:none;">\r
 101         <table cellpadding="0" cellspacing="0" border="0" width="694" height="410" style="margin-bottom:2px;">\r
 102       <tr><td valign="top" width="444" style="padding:3px;" rowspan="2">\r
 103                 <img src="[% ctx.home_path %]/graphics/barcodedetailbook.jpg" alt='item barcode' style="float:left;" />\r
 104         <div class="header1">\r
 105           <h2>Scan your library item to begin checkout</h2>\r
 106                   <input type="text" jsId='selfckScanBox' class="userid" id="selfckScanBox" dojoType='dijit.form.TextBox' />\r
 107         </div>\r
 108         <br />\r
 109 \r
 110         <div id="step3a" style="">\r
 111           <table cellpadding="0" cellspacing="0" border="0" width="100%" height="70"><tr><td width="100%"><div id='oils-selfck-status-div' class="oils-selfck-status-div"></div></td></tr></table>\r
 112                   <div id='oils-selfck-scan-text' class='hidden'></div>\r
 113           <br /><br />\r
 114           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 115                    <tbody id='oils-selfck-circ-tbody'>\r
 116                 <tr id='oils-selfck-circ-row'><td>\r
 117               <table cellpadding="2" cellspacing="0" border="0">\r
 118                 <tr><td class="label">BARCODE:</td><td name="barcode"></td></tr>\r
 119                 <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
 120                 <tr><td class="label" nowrap="nowrap">DUE DATE:</td><td name="due_date"></td></tr>\r
 121                                 <tr><td></td><td><div class="hidden"><div name='checkout' class='hidden'>Checkout</div><div name='renew' class='hidden'>Renewal</div></div></td></tr>\r
 122               </table>\r
 123             </td></tr>\r
 124                    </tbody>\r
 125           </table>\r
 126         </div>\r
 127         \r
 128         <div id="step3c" style="display:none;">\r
 129           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:20px;">Fines</td></tr></table>\r
 130           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td><a href="javascript:;" onclick="selfCheckMgr.printList('fines')"><img src="[% ctx.home_path %]/graphics/printlist.jpg" alt='print' /></a></td><td class="hidden"><a class="hidden" href="javascript:;" id="oils-selfck-pay-fines-link">Pay Fines</a></td></tr></table><br />\r
 131           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 132                    <tbody id='oils-selfck-fines-tbody'>\r
 133                 <tr id='oils-selfck-fines-row'><td width="443">\r
 134               <table cellpadding="2" cellspacing="0" border="0" width="100%">\r
 135                 <tr><td class="label"><input style="float:left;margin:2px;" class="hidden" type="checkbox" checked="checked" name='selector' onclick='selfCheckMgr.keepMeLoggedIn();' title='pay this fine' /> TITLE:</td><td name="title"></td></tr>\r
 136                 <tr><td class="label">DUE DATE:</td><td name="due_date"></td></tr>\r
 137                 <tr><td class="label">DATE RETURN:</td><td name="date_return"></td></tr>\r
 138                 <tr><td class="label">BALANCE OWED:</td><td style="color:red;">$<span name="balance"></span></td></tr>\r
 139               </table>\r
 140             </td></tr>\r
 141                    </tbody>\r
 142           </table>\r
 143 <div id="pay_fines" class="hidden">\r
 144 [% INCLUDE 'default/circ/selfcheck/payment.tt2' %]\r
 145 </div>\r
 146         </div>\r
 147         \r
 148                 <div id="step3d" style="display:none;">\r
 149           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:20px;">Items Checked Out</td></tr></table><br />\r
 150           <a href="javascript:;" onclick="selfCheckMgr.printList('items_out');"><img src="[% ctx.home_path %]/graphics/printlist.jpg" alt='print' /></a><br /><br />\r
 151           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 152                    <tbody id='oils-selfck-circ-out-tbody'>\r
 153                 <tr id='oils-selfck-circ-out-row'><td>\r
 154               <table cellpadding="2" cellspacing="0" border="0">\r
 155                 <tr><td class="label">BARCODE:</td><td name="barcode"></td></tr>\r
 156                 <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
 157                 <tr><td class="label">AUTHOR:</td><td name="author"></td></tr>\r
 158                 <tr><td class="label">DUE DATE:</td><td name="due_date"></td></tr>\r
 159                 <tr><td class="label hidden">FORMAT:</td><td class="hidden" name="format"></td></tr>\r
 160               </table>\r
 161             </td></tr>\r
 162                    </tbody>\r
 163           </table>\r
 164         </div>\r
 165         \r
 166         <div id="step3e" style="display:none;">\r
 167           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:20px;">Items Ready for Pick-Up</td></tr></table><br />\r
 168           <a href="javascript:;"><img src="[% ctx.home_path %]/graphics/printlist.jpg" alt='print' /></a><br /><br />\r
 169           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 170                    <tbody id='oils-selfck-rdy-tbody'>\r
 171                 <tr id='oils-selfck-rdy-row'><td>\r
 172               <table cellpadding="2" cellspacing="0" border="0">\r
 173                 <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
 174                 <tr><td class="label hidden">FORMAT:</td><td name="format" class="hidden"></td></tr>\r
 175                 <tr><td class="label">PICKUP LOCATION:</td><td name="lib"></td></tr>\r
 176                 <tr><td class="label">PICK UP BY:</td><td name="date"></td></tr>\r
 177               </table>\r
 178             </td></tr>\r
 179                    </tbody>\r
 180           </table>\r
 181         </div>\r
 182         \r
 183         <div id="step3f" style="display:none;">\r
 184           <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center" style="font-weight:bold;font-size:20px;">Holds</td></tr></table><br />\r
 185           <a href="javascript:;" onclick="selfCheckMgr.printList('holds')"><img alt='print' src="[% ctx.home_path %]/graphics/printlist.jpg" /></a><br /><br />\r
 186           <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
 187                    <tbody id='oils-selfck-hold-tbody'>\r
 188                 <tr id='oils-selfck-hold-row'><td>\r
 189               <table cellpadding="2" cellspacing="0" border="0">\r
 190                 <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
 191                 <tr><td class="label">AUTHOR:</td><td name="author"></td></tr>\r
 192                 <tr><td class="label hidden">FORMAT:</td><td class="hidden" name="format"></td></tr>\r
 193                 <tr><td class="label">STATUS:</td><td name="status"></td></tr>\r
 194               </table>\r
 195             </td></tr>\r
 196                    </tbody>\r
 197           </table>\r
 198         </div>\r
 199 \r
 200       </td>\r
 201       <td class="sidebar" valign="top" width="226">\r
 202            <div id="floatdiv" style="position:relative; width:226px; height:375px;left:0px;top:0px;z-index:100;">\r
 203                 <h3 class="top" id="todays_date"></h3>\r
 204         <div class="greet">Hello, <span id="user_name"></span>.</div>\r
 205         <h3>Your Account</h3>\r
 206         <p id="sidebar_step3c">Fines: <span id="acct_fines"></span><br /><a href="javascript:;" id='oils-selfck-view-fines-link'>View Details</a></p>\r
 207         <p id="sidebar_step3d">(<span id="oils-selfck-circ-account-total">0) Items</span> Checked Out<br /><a href="javascript:;" id='oils-selfck-items-out-details-link'>View Details</a></p>\r
 208         <p id="sidebar_step3e">(<span id="oils-selfck-holds-ready">0) Items</span> Ready for Pick-Up<br /><a href="javascript:;" onclick="selfCheckMgr.drawHoldsPage();">View Details</a></p>\r
 209         <p id="sidebar_step3f">(<span id="oils-selfck-holds-total">0) Items</span> on Hold<br /><a href="javascript:;" id='oils-selfck-hold-details-link'>View Details</a></p>\r
 210 \r
 211                 <div style="padding-left:40px;padding-top:10px;">\r
 212           <div style="padding-bottom:5px;"><a href="javascript:;" id='oils-selfck-nav-logout-print'><img alt='logout with receipt' src="[% ctx.home_path %]/graphics/logoutbutton.jpg" style="" /></a></div>\r
 213           <div style=""><a href="javascript:;" id='oils-selfck-nav-logout'><img alt='logout without receipt' src="[% ctx.home_path %]/graphics/logoutwithoutreceiptbutton.jpg" style="" /></a></div>\r
 214         </div>\r
 215         <div style="clear:both;padding-top:15px;padding-left:3px;">\r
 216           <a href="javascript:;" id="back_button" onclick="selfCheckMgr.keepMeLoggedIn();switchTo('step3');"><img alt='back to checkout' src="[% ctx.home_path %]/graphics/arrow.gif" /></a> <a href="javascript:;" onclick="selfCheckMgr.keepMeLoggedIn();switchTo('step3');"><span style="position:relative;top:-4px;left:2px;">Back to Checkout</span></a>\r
 217         </div>\r
 218            </div>\r
 219 <script src="[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/floating.js"></script>\r
 220       </td></tr>\r
 221     </table>\r
 222   </div>\r
 223   \r
 224   <div id="step4" class="checkout" style="padding-top:15px;display:none;">\r
 225         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center"><h1>Checkout Complete.<br />Please take your reciept.</h1></td></tr></table>\r
 226   </div>\r
 227   \r
 228   <div id="step5" class="checkout" style="padding-top:15px;display:none;">\r
 229         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center"><h1>Checkout Complete.</h1></td></tr></table>\r
 230   </div>\r
 231   \r
 232   \r
 233         <div style='clear:both;'></div> \r
 234   </div>\r
 235 </div>\r
 236 </div>\r
 237 <!-- ***************************************** END: main.tt2 ***************************************************** -->\r
 238 [% END %]