Initial dev repository
[kcls-web.git] / local_templates / default / circ / selfcheck / main.tt2
diff --git a/local_templates/default/circ/selfcheck/main.tt2 b/local_templates/default/circ/selfcheck/main.tt2
new file mode 100644 (file)
index 0000000..9c89e55
--- /dev/null
@@ -0,0 +1,238 @@
+[%- ctx.home_path ='/local_templates/default/circ/selfcheck' -%]\r
+[% ctx.page_title = 'Self Checkout' %]\r
+[% WRAPPER default/base.tt2 %]\r
+<!-- ***************************************** main.tt2 ***************************************************** -->\r
+\r
+\r
+<div id="selfcheck-main">\r
+<script type="text/javascript">\r
+function switchTo(str,subpage) {\r
+       var pages = [];\r
+       var sidebarLinks = [];\r
+       pages['step0'] = document.getElementById('step0');\r
+       pages['step1'] = document.getElementById('step1');\r
+       pages['step2'] = document.getElementById('step2');\r
+       pages['step3'] = document.getElementById('step3');\r
+       pages['step3a'] = document.getElementById('step3a');\r
+       //pages['step3b'] = document.getElementById('step3b');\r
+       pages['step3c'] = document.getElementById('step3c');\r
+       pages['step3d'] = document.getElementById('step3d');\r
+       pages['step3e'] = document.getElementById('step3e');\r
+       pages['step3f'] = document.getElementById('step3f');\r
+       pages['step4'] = document.getElementById('step4');\r
+       pages['step5'] = document.getElementById('step5');\r
+       pages['pay_fines'] = document.getElementById('pay_fines');\r
+       \r
+       sidebarLinks['sidebar_step3c'] = document.getElementById('sidebar_step3c');\r
+       sidebarLinks['sidebar_step3d'] = document.getElementById('sidebar_step3d');\r
+       sidebarLinks['sidebar_step3e'] = document.getElementById('sidebar_step3e');\r
+       sidebarLinks['sidebar_step3f'] = document.getElementById('sidebar_step3f');\r
+\r
+       for(var i in pages) { if(!pages[i]) continue; pages[i].style.display="none"; }\r
+       for(var i in sidebarLinks) { if(!sidebarLinks[i]) continue; sidebarLinks[i].className=""; }\r
+       \r
+       if(subpage) {\r
+               pages[subpage].style.display="block";\r
+               sidebarLinks['sidebar_'+subpage].className="selected";\r
+       }\r
+       pages[str].style.display="block";\r
+       if(str=='step3' && !subpage) pages['step3a'].style.display="block";\r
+       try{dojo.byId('selfckScanBox').focus();dojo.byId('selfckScanBox').select();}catch(e){}\r
+}\r
+</script>\r
+\r
+\r
+\r
+<div dojoType='openils.widget.ProgressDialog' jsId='progressDialog'></div>\r
+<div dojoType="dijit.Dialog" jsId='oilsSelfckWsDialog' class='oils-login-dialog' style='display:none;'>\r
+    <form>\r
+        <table>\r
+            <tr>\r
+                <td>Choose a location</td>\r
+                <td><div dojoType='openils.widget.OrgUnitFilteringSelect' jsId='oilsSelfckWsLocSelector' \r
+                    searchAttr='shortname' labelAttr='shortname'/></td>\r
+            </tr>\r
+            <tr>\r
+                <td>Enter a workstation name</td>\r
+                <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckWsName'/></td>\r
+            </tr>\r
+            <tr>\r
+                <td colspan='2' align='center'>\r
+                    <button jsId='oilsSelfckWsSubmit' dojoType='dijit.form.Button'>Submit</button>\r
+                </td>\r
+            </tr>\r
+        </table>\r
+    </form>\r
+</div>\r
+\r
+<div style="height:66px;background:#ae2c2a;"><div id='header'>\r
+  <a href='javascript:;'><img src='[% ctx.home_path %]/graphics/KCLS_logo_horiz.gif' alt='kcls logo' /></a>\r
+  <span style="font-size:36px;color:white;position:relative;top:-10px;left:15px;">CHECK OUT HERE</span>\r
+</div></div>\r
+\r
+<div id='content-wrapper'>\r
+  <div id='main-content'>\r
+       <div style='clear:both;'></div>\r
+       \r
+\r
+<script src='[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/selfcheck.js'> </script>\r
+<script src="[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/payment.js"></script>\r
+<link rel='stylesheet' type='text/css' href='[% ctx.media_prefix %]/css/skin/kcls/selfcheck.css'/>\r
+[% INCLUDE 'default/circ/selfcheck/audio_config.tt2' %]\r
+\r
+  <div id="step0" class="checkout" style="width=100%;text-align:center;">Staff login required</div>\r
+  <div id="step1" class="checkout hidden" style="padding-top:15px;">\r
+       <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>\r
+    <td align="center"><h1>Scan your library card barcode<br />OR type your library card number</h1></td></tr></table>\r
+    <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>\r
+    <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
+               <div style="position:absolute;"><div style="position:relative;top:-70px;"><div id='oils-selfck-status-div2' class='status_box'></div></div></div></td>\r
+    <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
+  </div>\r
+  <div id="step2" class="checkout hidden" style="padding-top:15px;">\r
+       <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>\r
+    <td align="center"><h1>Enter your PIN or password</h1></td></tr></table>\r
+    <table cellpadding="0" cellspacing="0" border="0" style="margin:20px auto;"><tr>\r
+    <td style="padding-left:10px;"><span style="font-size:18px;">Example 0926</span><br /><input type="password" id='patron-login-password' />\r
+               <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
+    <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
+  </div>\r
+  <div id="step3" class="checkout" style="display:none;">\r
+       <table cellpadding="0" cellspacing="0" border="0" width="694" height="410" style="margin-bottom:2px;">\r
+      <tr><td valign="top" width="444" style="padding:3px;" rowspan="2">\r
+               <img src="[% ctx.home_path %]/graphics/barcodedetailbook.jpg" alt='item barcode' style="float:left;" />\r
+        <div class="header1">\r
+          <h2>Scan your library item to begin checkout</h2>\r
+                 <input type="text" jsId='selfckScanBox' class="userid" id="selfckScanBox" dojoType='dijit.form.TextBox' />\r
+        </div>\r
+        <br />\r
+\r
+        <div id="step3a" style="">\r
+          <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
+                 <div id='oils-selfck-scan-text' class='hidden'></div>\r
+          <br /><br />\r
+          <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
+                  <tbody id='oils-selfck-circ-tbody'>\r
+               <tr id='oils-selfck-circ-row'><td>\r
+              <table cellpadding="2" cellspacing="0" border="0">\r
+                <tr><td class="label">BARCODE:</td><td name="barcode"></td></tr>\r
+                <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
+                <tr><td class="label" nowrap="nowrap">DUE DATE:</td><td name="due_date"></td></tr>\r
+                               <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
+              </table>\r
+            </td></tr>\r
+                  </tbody>\r
+          </table>\r
+        </div>\r
+        \r
+        <div id="step3c" style="display:none;">\r
+          <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
+          <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
+          <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
+                  <tbody id='oils-selfck-fines-tbody'>\r
+               <tr id='oils-selfck-fines-row'><td width="443">\r
+              <table cellpadding="2" cellspacing="0" border="0" width="100%">\r
+                <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
+                <tr><td class="label">DUE DATE:</td><td name="due_date"></td></tr>\r
+                <tr><td class="label">DATE RETURN:</td><td name="date_return"></td></tr>\r
+                <tr><td class="label">BALANCE OWED:</td><td style="color:red;">$<span name="balance"></span></td></tr>\r
+              </table>\r
+            </td></tr>\r
+                  </tbody>\r
+          </table>\r
+<div id="pay_fines" class="hidden">\r
+[% INCLUDE 'default/circ/selfcheck/payment.tt2' %]\r
+</div>\r
+        </div>\r
+        \r
+               <div id="step3d" style="display:none;">\r
+          <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
+          <a href="javascript:;" onclick="selfCheckMgr.printList('items_out');"><img src="[% ctx.home_path %]/graphics/printlist.jpg" alt='print' /></a><br /><br />\r
+          <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
+                  <tbody id='oils-selfck-circ-out-tbody'>\r
+               <tr id='oils-selfck-circ-out-row'><td>\r
+              <table cellpadding="2" cellspacing="0" border="0">\r
+               <tr><td class="label">BARCODE:</td><td name="barcode"></td></tr>\r
+                <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
+                <tr><td class="label">AUTHOR:</td><td name="author"></td></tr>\r
+                <tr><td class="label">DUE DATE:</td><td name="due_date"></td></tr>\r
+                <tr><td class="label hidden">FORMAT:</td><td class="hidden" name="format"></td></tr>\r
+              </table>\r
+            </td></tr>\r
+                  </tbody>\r
+          </table>\r
+        </div>\r
+        \r
+        <div id="step3e" style="display:none;">\r
+          <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
+          <a href="javascript:;"><img src="[% ctx.home_path %]/graphics/printlist.jpg" alt='print' /></a><br /><br />\r
+          <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
+                  <tbody id='oils-selfck-rdy-tbody'>\r
+               <tr id='oils-selfck-rdy-row'><td>\r
+              <table cellpadding="2" cellspacing="0" border="0">\r
+                <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
+                <tr><td class="label hidden">FORMAT:</td><td name="format" class="hidden"></td></tr>\r
+                <tr><td class="label">PICKUP LOCATION:</td><td name="lib"></td></tr>\r
+                <tr><td class="label">PICK UP BY:</td><td name="date"></td></tr>\r
+              </table>\r
+            </td></tr>\r
+                  </tbody>\r
+          </table>\r
+        </div>\r
+        \r
+        <div id="step3f" style="display:none;">\r
+          <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
+          <a href="javascript:;" onclick="selfCheckMgr.printList('holds')"><img alt='print' src="[% ctx.home_path %]/graphics/printlist.jpg" /></a><br /><br />\r
+          <table cellpadding="5" cellspacing="0" border="0" class="item_table" width="100%">\r
+                  <tbody id='oils-selfck-hold-tbody'>\r
+               <tr id='oils-selfck-hold-row'><td>\r
+              <table cellpadding="2" cellspacing="0" border="0">\r
+                <tr><td class="label">TITLE:</td><td name="title"></td></tr>\r
+                <tr><td class="label">AUTHOR:</td><td name="author"></td></tr>\r
+                <tr><td class="label hidden">FORMAT:</td><td class="hidden" name="format"></td></tr>\r
+                <tr><td class="label">STATUS:</td><td name="status"></td></tr>\r
+              </table>\r
+            </td></tr>\r
+                  </tbody>\r
+          </table>\r
+        </div>\r
+\r
+      </td>\r
+      <td class="sidebar" valign="top" width="226">\r
+          <div id="floatdiv" style="position:relative; width:226px; height:375px;left:0px;top:0px;z-index:100;">\r
+               <h3 class="top" id="todays_date"></h3>\r
+        <div class="greet">Hello, <span id="user_name"></span>.</div>\r
+        <h3>Your Account</h3>\r
+        <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
+        <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
+        <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
+        <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
+\r
+               <div style="padding-left:40px;padding-top:10px;">\r
+          <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
+          <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
+        </div>\r
+        <div style="clear:both;padding-top:15px;padding-left:3px;">\r
+          <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
+        </div>\r
+          </div>\r
+<script src="[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/floating.js"></script>\r
+      </td></tr>\r
+    </table>\r
+  </div>\r
+  \r
+  <div id="step4" class="checkout" style="padding-top:15px;display:none;">\r
+       <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
+  </div>\r
+  \r
+  <div id="step5" class="checkout" style="padding-top:15px;display:none;">\r
+       <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="center"><h1>Checkout Complete.</h1></td></tr></table>\r
+  </div>\r
+  \r
+  \r
+       <div style='clear:both;'></div> \r
+  </div>\r
+</div>\r
+</div>\r
+<!-- ***************************************** END: main.tt2 ***************************************************** -->\r
+[% END %]
\ No newline at end of file