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