Bug 14862: Upgrade jQuery from 1.7 to 3.4.1 in OPAC
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / sci / sci-main.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [%# Includes %]
4 [% USE Koha %]
5 [% USE KohaDates %]
6 [%# Helper template functions %]
7 [% BLOCK error_message %]
8     [% IF messages.BadBarcode %]
9         <span>(Barcode not found on the database, please see library staff for assistance)</span>
10     [% ELSIF messages.Wrongbranch %]
11         <span>(The item cannot be returned at this library, please see library staff for assistance)</span>
12     [% ELSIF messages.withdrawn %]
13         <span>(Item is withdrawn and check-in blocked by policy, please see library staff for assistance)</span>
14     [% ELSIF messages.NotIssued %]
15         <span>(The book is not currently on loan, please see library staff for assistance)</span>
16     [% ELSE %]
17         <span>(There was a problem returning this item, please see library staff for assistance)</span>
18     [% END %]
19 [% END %]
20
21 [% INCLUDE 'doc-head-open.inc' %]
22
23 <title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha [% END %] &rsaquo; Self check-in</title>
24
25 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
26 <meta name="generator" content="Koha [% Version | html %]" /> <!-- leave this for stats -->
27
28 [% IF ( Koha.Preference('OpacFavicon') ) %]
29 <link rel="shortcut icon" href="[% Koha.Preference('OpacFavicon') | url %]" type="image/x-icon" />
30 [% ELSE %]
31 <link rel="shortcut icon" href="[% interface | html %]/[% theme | html %]/images/favicon.ico" type="image/x-icon" />
32 [% END %]
33 [% Asset.css("lib/bootstrap/css/bootstrap.min.css") | $raw %]
34 [% Asset.css("lib/jquery/jquery-ui-1.12.1.css") | $raw %]
35 [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
36 [% Asset.css("css/sco.css") | $raw %]
37 [% IF ( Koha.Preference('OPACUserCSS') ) %]<style>[% Koha.Preference('OPACUserCSS') | $raw %]</style>[% END %]
38 [% IF ( Koha.Preference('SelfCheckInUserCSS') ) %]<style>[% Koha.Preference('SelfCheckInUserCSS') | $raw %]</style>[% END %]
39 <!--[if lt IE 9]>
40     <script src="[% interface | html %]/[% theme | html %]/lib/respond.min.js"></script>
41 <![endif]-->
42 <script>
43     function _(s) { return s } // dummy function for gettext
44 </script>
45 [% Asset.js("lib/modernizr.min.js") | $raw %]
46 </head>
47 <body id="sci_main" class="sci" onload="dofocus();" onunload="mungeHistory();">
48
49 [% SET OpacLangSelectorMode = Koha.Preference('OpacLangSelectorMode') %]
50 <div id="wrap">
51     <div class="navbar navbar-inverse navbar-static-top">
52         <div class="navbar-inner">
53             <div class="container-fluid">
54                 <a class="brand" href="/cgi-bin/koha/sci/sci-main.pl"><img src="[% interface | html %]/[% theme | html %]/images/koha-green-logo.png" alt=""></a>
55                 <div id="checkouthelp">
56                     <ul class="nav pull-right">
57                         <li><a href="/cgi-bin/koha/sci/sci-main.pl" class="helpModal-trigger" role="button" data-toggle="modal"><i class="fa fa-info-circle"></i> Help</a></li>
58                         <li><a id="sci_logout" href="/cgi-bin/koha/sci/sci-main.pl?logout.x=1" class="logout">Log out</a></li>
59                     </ul>
60                 </div>
61
62                 [% IF Koha.Preference( 'opaclanguagesdisplay' ) %]
63                     <div id="members">
64                         <ul class="nav pull-right">
65                             [% INCLUDE 'masthead-langmenu.inc' %]
66                         </ul>
67                     </div>
68                 [% END %]
69
70             </div> <!-- /.container-fluid -->
71         </div> <!-- /.navbar-inner -->
72     </div> <!-- /.navbar -->
73
74 [% IF Koha.Preference( 'opacheader' ) %]
75     <div class="container-fluid">
76         <div class="row-fluid">
77             <div id="opacheader">
78                 [% Koha.Preference( 'opacheader' ) | $raw %]
79             </div>
80         </div>
81     </div>
82 [% END %]
83
84     <div class="main">
85         <div class="container-fluid">
86             <div class="row-fluid">
87                 <div id="masthead">
88                     <h1>[% LibraryName | html %] Self check-in</h1>
89                 [% IF ( nopermission ) %]
90                     [%# This is what is displayed if user doesn't have permission %]
91                     <div class="alert">
92                         <h3>Access denied</h3>
93                         <p>Sorry, this self check-in station has lost authentication. Please contact the administrator to resolve this problem.</p>
94                     </div>
95                 [% ELSIF ( different_ip ) %]
96                     [%# This is what is displayed if user doesn't have permission %]
97                     <div class="alert">
98                         <h3>Session lost</h3>
99                         <p>You are accessing self check-in from a different IP address! Please log in again.</p>
100                     </div>
101                 [% ELSIF ( checkins ) %]
102                     [%# We have results from a check-in attempt %]
103                     <div id="checkins" class="sci_results_list">
104                         [% IF ( success && success.size > 0 || errors && errors.size > 0 ) %]
105                             <h3>Results</h3>
106                                 <table id="sci_bcheckins_table" class="table table-bordered table-striped dataTable no-footer" style="font-size: initial;">
107                                   <thead>
108                                     <th>Barcode</th>
109                                     <th>Status</th>
110                                   </thead>
111                                   <tbody>
112                                 [% FOREACH success_line IN success %]
113                                     <tr><td>[% success_line.barcode | html %]</td><td>Checked in</td></tr>
114                                 [% END %]
115                                 [% FOREACH error IN errors %]
116                                     <tr>
117                                       <td>[% error.barcode | html %]</td>
118                                       <td>Not checked in [% PROCESS error_message messages=error.messages %]</td>
119                                     </tr>
120                                 [% END %]
121                                   </tbody>
122                                 </table>
123                                 <div>
124                                     <form method="post" action="#" id="finish_form">
125                                         <button id="sci_finish_button" type="submit" class="btn"><i class="fa fa-check"></i> Finish</button>
126                                     </form>
127                                 </div>
128                         [% ELSE %]
129                             <div class="alert">
130                                 <p>Your request included no check-ins.</p>
131                             </div>
132                         [% END %]
133                     </div>
134                 [% ELSE %]
135                     [%# Prompt for barcodes %]
136                     <div id="new_checkins" class="sci_entry">
137                         <form id="scan_form" name="scan_form"
138                               method="post" action="/cgi-bin/koha/sci/sci-main.pl">
139                             <fieldset>
140                                 <div>
141                                   <label for="barcode_input">Scan the item or enter its barcode:</label>
142                                   <input id="barcode_input" name="barcode_input" size="20" type="text" class="focus" autocomplete="off" />
143                                   <button id="sci_append_button" type="submit" class="btn btn-default btn-sm">
144                                     <i class="fa fa-plus" aria-hidden="true"></i> <span>Add</span>
145                                   </button>
146                                 </div>
147                                 <div class="sci_input_append">
148                                     <table id="sci_barcodes_table" class="table table-bordered table-striped dataTable no-footer" style="display: none; font-size: initial;">
149                                       <thead>
150                                         <th class="barcodes_column">Barcode</th>
151                                       </thead>
152                                       <tbody>
153                                       </tbody>
154                                     </table>
155                                 </div>
156                                 <input type="hidden" name="op" value="check_in" />
157                                 <div id="button_bar">
158                                 <button id="sci_checkin_button" type="submit" class="btn btn-default btn-sm" style="display: none;">
159                                     <i class="fa fa-check-square-o" aria-hidden="true"></i> <span>Check in</span>
160                                 </button>
161                                 <a href="/cgi-bin/koha/sci/sci-main.pl" class="btn btn-default btn-sm" role="button" style="display: none;" id="sci_refresh_button">
162                                     <i class="fa fa-refresh" aria-hidden="true"></i> <span>Cancel</span>
163                                 </a>
164                                 </div>
165                             </fieldset>
166                         </form>
167                     </div> <!-- / #new_checkins -->
168                 [% END %]
169                 </div> <!-- / #masthead -->
170             </div> <!-- / .row-fluid -->
171         </div> <!-- / .container-fluid -->
172
173         [% IF ( Koha.Preference('SelfCheckInMainUserBlock') ) %]
174             <div id="SelfCheckInMainUserBlock">[% Koha.Preference('SelfCheckInMainUserBlock' ) | $raw %]</div>
175         [% END %]
176     </div> <!-- / .main -->
177
178     <div id="helpModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
179
180       <div class="modal-header">
181         <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
182         <h3 id="helpModalLabel">Self check-in help</h3>
183       </div>
184
185       <div class="modal-body">
186         <ul>
187           <li>Scan each item or enter its barcode. A list with the entered barcodes will be displayed.</li>
188           <li>Click the 'Check in' button to confirm.</li>
189           <li>The operation results will be displayed for each entered barcode.</li>
190           <li>The 'Finish' button is presented to start over.</li>
191           <li>At any step, clicking the 'Cancel' button will erase the scanned barcodes and start over.</li>
192         </ul>
193       </div>
194     </div> <!-- /#helpModal -->
195 </body>
196
197 [% INCLUDE 'opac-bottom.inc' %]
198 [% BLOCK jsinclude %]
199     <script>
200
201         function mungeHistory() {
202             // prevent back button from allowing form resubmission
203             if (history && history.pushState) {
204                 history.replaceState(null, document.title, window.location.href);
205             }
206         }
207
208         function dofocus() {
209             $(".focus:last").select();
210         }
211
212         var barcodes = [];
213
214         $(document).ready(function() {
215             // Barcodes scanning table initially hidden
216             $("#sci_barcodes_table").hide();
217             // Control de 'append' button behaviour
218             $("#sci_append_button").on('click',function( e ){
219                 // Make sure the form is not submitted by the button
220                 e.preventDefault();
221                 var barcode = $('#barcode_input').val();
222                 //var result  = validate_barcode( barcode );
223                 $('#sci_barcodes_table tbody').append(
224                         '<tr style="font-size: initial;"><td>' +
225                             barcode +
226                             '<input type="hidden" name="barcode" value="' + barcode + '" />' +
227                         '</td></tr>' );
228                 // Make sure the table is now displayed
229                 $("#sci_barcodes_table").show();
230                 $('#sci_checkin_button').show();
231                 $('#sci_refresh_button').show();
232                 barcodes.push(barcode);
233                 // clean the input, reset the focus
234                 $('#barcode_input').val('');
235                 dofocus();
236             });
237
238             $(".helpModal-trigger").on("click",function(e){
239                 e.preventDefault();
240                 $("#helpModal").modal("show");
241             });
242
243             // set focus at the beginning
244             dofocus();
245         });
246
247         var idleTime = 0;
248         $(document).ready(function () {
249             //Increment the idle time counter every second
250             var idleInterval = setInterval(timerIncrement, 1000);
251
252             //Zero the idle timer on mouse movement.
253             $(this).mousemove(function (e) {
254                 idleTime = 0;
255             });
256             $(this).keypress(function (e) {
257                 idleTime = 0;
258             });
259         });
260
261         function timerIncrement() {
262             if ( $("#sci_finish_button").is(":visible") || $("#sci_refresh_button").is(":visible") ) {
263                 idleTime = idleTime + 1;
264                 idleTimeout = [% refresh_timeout | html %];
265                 if (idleTime >= idleTimeout ) {
266                     location.href = '/cgi-bin/koha/sci/sci-main.pl';
267                 }
268             }
269         }
270     </script>
271
272     [% IF ( Koha.Preference('SelfCheckInUserJS') ) %]<script>[% Koha.Preference('SelfCheckInUserJS') | $raw %]</script>[% END %]
273 [% END %]