Line 0
Link Here
|
|
|
1 |
[% USE raw %] |
2 |
[% USE To %] |
3 |
[% USE Koha %] |
4 |
[% USE KohaDates %] |
5 |
[% USE Branches %] |
6 |
[% USE AdditionalContents %] |
7 |
[% SET OpacNav = AdditionalContents.get( location => "OpacNav", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %] |
8 |
[% SET OpacNavBottom = AdditionalContents.get( location => "OpacNavBottom", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %] |
9 |
[% INCLUDE 'doc-head-open.inc' %] |
10 |
<title>Your curbside pickups › [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title> |
11 |
|
12 |
<style> |
13 |
.pickup_time input[type='radio'] { |
14 |
display: none; |
15 |
} |
16 |
.pickup_time { |
17 |
/*margin: .2em;*/ |
18 |
} |
19 |
.pickup_time label { |
20 |
background-color: #ffffcc; |
21 |
display: inline-block; |
22 |
cursor: pointer; |
23 |
} |
24 |
.pickup_time input[type='radio']:checked + label { |
25 |
background-color: #bcdb89; |
26 |
} |
27 |
</style> |
28 |
|
29 |
[% INCLUDE 'doc-head-close.inc' %] |
30 |
[% BLOCK cssinclude %][% END %] |
31 |
</head> |
32 |
[% INCLUDE 'bodytag.inc' bodyid='opac-curside-pickups' bodyclass='scrollto' %] |
33 |
[% INCLUDE 'masthead.inc' %] |
34 |
<div class="main"> |
35 |
<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs"> |
36 |
<ol class="breadcrumb"> |
37 |
<li class="breadcrumb-item"> |
38 |
<a href="/cgi-bin/koha/opac-main.pl">Home</a> |
39 |
</li> |
40 |
<li class="breadcrumb-item"> |
41 |
<a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a> |
42 |
</li> |
43 |
|
44 |
<li class="breadcrumb-item active"> |
45 |
<a href="#" aria-current="page">Curbside pickups</a> |
46 |
</li> |
47 |
</ol> <!-- / .breadcrumb --> |
48 |
</nav> <!-- /#breadcrumbs --> |
49 |
|
50 |
<div class="container-fluid"> |
51 |
<div class="row"> |
52 |
<div class="col col-lg-2 order-2 order-lg-1"> |
53 |
<div id="navigation"> |
54 |
[% INCLUDE 'navigation.inc' IsPatronPage=1 %] |
55 |
</div> |
56 |
</div> |
57 |
<div class="col-md-12 col-lg-10 order-1"> |
58 |
<div id='pickupdetails' class="maincontent"> |
59 |
<h2>Curbside pickups</h2> |
60 |
|
61 |
[% FOR m IN messages %] |
62 |
<div class="dialog [% m.type | html %]"> |
63 |
[% SWITCH m.code %] |
64 |
[% CASE 'too_many_pickups' %] |
65 |
<span>You already have a scheduled pickup for this library.</span> |
66 |
[% CASE 'cannot_checkout' %] |
67 |
<span>Unable to check the items out. Please contact the library.</span> |
68 |
[% CASE 'library_notified' %] |
69 |
<span>The library has been notified of your arrival.</span> |
70 |
[% CASE %] |
71 |
<span>[% m.code | html %]</span> |
72 |
[% END %] |
73 |
</div> |
74 |
[% END %] |
75 |
|
76 |
<div id="opac-pickups-views" class="toptabs"> |
77 |
<ul class="nav nav-tabs" role="tablist"> |
78 |
<li class="nav-item" role="presentation" id="tab-user-pickups"><a href="#user-pickups" class="nav-link" aria-controls="user-pickups" aria-selected="true" role="tab" data-toggle="tab">Your pickups</a></li> |
79 |
[% IF policies.count %] |
80 |
<li class="nav-item" role="presentation" id="tab-user-schedule-pickup"><a href="#user-schedule-pickup" class="nav-link" aria-controls="user-schedule-pickup" aria-selected="false" role="tab" data-toggle="tab">Schedule a pickup</a></li> |
81 |
[% END %] |
82 |
</ul> |
83 |
|
84 |
<div class="tab-content"> |
85 |
<div role="tabpanel" class="tab-pane" id="user-pickups" aria-labelledby="tab-user-pickups"> |
86 |
[% IF patron_curbside_pickups.count %] |
87 |
<table id="pickups-table" class="table table-striped"> |
88 |
<thead> |
89 |
<tr> |
90 |
<th>Pickup library</td> |
91 |
<th>Schedule</th> |
92 |
<th>Notes</th> |
93 |
<th>Actions</th> |
94 |
</tr> |
95 |
</thead> |
96 |
<tbody> |
97 |
[% FOR p IN patron_curbside_pickups %] |
98 |
<tr> |
99 |
<td>[% Branches.GetName(p.branchcode) | html %]</td> |
100 |
<td>[% p.scheduled_pickup_datetime | $KohaDates with_hours => 1 %]</td> |
101 |
<td>[% p.notes | html %]</td> |
102 |
<td> |
103 |
<form method="post"> |
104 |
<input type="hidden" name="op" value="arrival-alert" /> |
105 |
<input type="hidden" name="pickup_id" value="[% p.id | html %]" /> |
106 |
[% IF ! p.staged_datetime || p.arrival_datetime %] |
107 |
<button class="btn disabled" disabled href="#" > |
108 |
[% ELSE %] |
109 |
<button type="submit" class="btn" href="#" > |
110 |
[% END %] |
111 |
<i class="fa fa-bell" aria-hidden="true"></i> Alert staff of your arrival |
112 |
</button> |
113 |
</form> |
114 |
<p> |
115 |
<form method="post"> |
116 |
<input type="hidden" name="op" value="cancel-pickup" /> |
117 |
<input type="hidden" name="pickup_id" value="[% p.id | html %]" /> |
118 |
[% IF p.delivered_datetime %] |
119 |
<button class="btn disabled" disabled href="#" > |
120 |
[% ELSE %] |
121 |
<button type="submit" class="btn" href="#" > |
122 |
[% END %] |
123 |
<i class="fa fa-ban" aria-hidden="true"></i> Cancel this pickup</button> |
124 |
</form> |
125 |
</td> |
126 |
</tr> |
127 |
[% END %] |
128 |
</tbody> |
129 |
</table> |
130 |
[% ELSE %] |
131 |
<div>No curbside pickups.</div> |
132 |
[% END %] |
133 |
</div> |
134 |
|
135 |
[% IF policies.count %] |
136 |
<div role="tabpanel" class="tab-pane" id="user-schedule-pickup" aria-labelledby="tab-user-schedule-pickup"> |
137 |
<form id="create-pickup" method="post"> |
138 |
<fieldset class="rows"> |
139 |
<ol> |
140 |
<li> |
141 |
<label for="pickup_branch">Pickup library:</label> |
142 |
<select name="pickup_branch" id="pickup-branch"> |
143 |
<option value="">Select a library</option> |
144 |
[% FOR p IN policies %] |
145 |
<option value="[% p.branchcode | html %]">[% Branches.GetName(p.branchcode) | html %]</option> |
146 |
|
147 |
[% END %] |
148 |
</select> |
149 |
<span id="existing-pickup-warning" class="required">You already have a pickup scheduled for this library.</span> |
150 |
</li> |
151 |
<li> |
152 |
<label for="pickup_date">Pickup date:</label> |
153 |
<input name="pickup_date" type="text" class="flatpickr" id="pickup-date" disabled required="required"/> |
154 |
<span class="required">Required</span> |
155 |
</li> |
156 |
|
157 |
<li id="pickup-times" class="radio"></li> |
158 |
|
159 |
<li> |
160 |
<label for="notes">Notes:</label> |
161 |
<input name="notes" id="notes" /> |
162 |
</li> |
163 |
</ol> |
164 |
</fieldset> |
165 |
|
166 |
<fieldset class="action"> |
167 |
<input type="hidden" name="op" value="create-pickup" /> |
168 |
<input type="submit" id="schedule-pickup-button" class="btn btn-default" disabled value="Schedule pickup" /> |
169 |
</fieldset> |
170 |
</form> |
171 |
</div> |
172 |
[% END %] |
173 |
</div> |
174 |
</div> |
175 |
</div> |
176 |
</div> <!-- / .col-lg-10 --> |
177 |
</div> <!-- / .row --> |
178 |
</div> <!-- / .container-fluid --> |
179 |
</div> <!-- / .main --> |
180 |
|
181 |
[% INCLUDE 'opac-bottom.inc' %] |
182 |
|
183 |
[% BLOCK jsinclude %] |
184 |
[% Asset.js("lib/dayjs/dayjs.min.js") | $raw %] |
185 |
[% Asset.js("lib/dayjs/plugin/isSameOrAfter.js") | $raw %] |
186 |
<script>dayjs.extend(window.dayjs_plugin_isSameOrAfter)</script> |
187 |
[% INCLUDE 'calendar.inc' %] |
188 |
<script> |
189 |
[% SET pickup_exists_in = [] %] |
190 |
[% FOR p IN patron_curbside_pickups %] |
191 |
[% UNLESS p.delivered_by %] |
192 |
[% pickup_exists_in.push(p.branchcode) %] |
193 |
[% END %] |
194 |
[% END %] |
195 |
let pickup_exists_in = [% To.json(pickup_exists_in.unique()) | $raw %]; |
196 |
|
197 |
let pickups = [% To.json(curbside_pickups.unblessed) | $raw %]; |
198 |
let policies = [% To.json(policies.unblessed) | $raw %]; |
199 |
policies = policies.reduce((map, e) => { |
200 |
map[e.branchcode] = e; |
201 |
return map; |
202 |
}, {}); |
203 |
[% FOR p IN policies %] |
204 |
var opening_slots = [% To.json(p.opening_slots.unblessed) | $raw %]; |
205 |
var slots_per_day = {}; |
206 |
opening_slots.forEach(function(slot){ |
207 |
let day = slot.day; |
208 |
if(!slots_per_day[day]) slots_per_day[day] = []; |
209 |
slots_per_day[day].push(slot); |
210 |
}); |
211 |
policies['[% p.branchcode | html %]'].slots_per_day = slots_per_day; |
212 |
[% END %] |
213 |
|
214 |
let existingPickupMoments = []; |
215 |
pickups.forEach(function(pickup){ |
216 |
let scheduled_pickup_datetime = pickup.scheduled_pickup_datetime; |
217 |
let pickupMoment = dayjs(scheduled_pickup_datetime); |
218 |
|
219 |
if(!existingPickupMoments[pickup.branchcode]) existingPickupMoments[pickup.branchcode] = []; |
220 |
existingPickupMoments[pickup.branchcode].push(pickupMoment); |
221 |
}); |
222 |
|
223 |
$('#pickup-branch').on('change', function() { |
224 |
let branchcode = $(this).val(); |
225 |
|
226 |
let existing_pickup = pickup_exists_in.indexOf(branchcode) != -1; |
227 |
|
228 |
$('#pickup-date').val(""); |
229 |
$('#pickup-time').val(""); |
230 |
$('#pickup-times').hide(); |
231 |
$('#schedule-pickup-button').prop('disabled', true); |
232 |
|
233 |
if (existing_pickup) { |
234 |
$('#existing-pickup-warning').show(); |
235 |
$('#pickup-date').prop("disabled", true); |
236 |
} else { |
237 |
$('#existing-pickup-warning').hide(); |
238 |
$('#pickup-date').prop("disabled", branchcode == ""); |
239 |
} |
240 |
}); |
241 |
|
242 |
$("#pickup-date").on('change', function() { |
243 |
|
244 |
$('#pickup-times').empty(); |
245 |
$('#schedule-pickup-button').prop( 'disabled', 1 ); |
246 |
|
247 |
var currentDate = $(this).val(); |
248 |
let branchcode = $("#pickup-branch").val(); |
249 |
let policy = policies[branchcode]; |
250 |
|
251 |
let selectedDate = dayjs(currentDate); |
252 |
|
253 |
let pickupSlots = []; |
254 |
let available_count = 0; |
255 |
let dow = selectedDate.day(); // Sunday is 0 (at least for now) |
256 |
if (!policy.slots_per_day[dow]){ |
257 |
$('#pickup-times').html("<div>"+_("No pickup time define for this day.")+"</div>"); |
258 |
return; |
259 |
} |
260 |
|
261 |
policy.slots_per_day[dow].forEach(function(slot){ |
262 |
let pickup_interval = policy.pickup_interval; |
263 |
|
264 |
let listStartMoment = selectedDate.hour(slot.start_hour).minute(slot.start_minute); |
265 |
let listEndMoment = selectedDate.hour(slot.end_hour).minute(slot.end_minute); |
266 |
|
267 |
let keep_going = true; |
268 |
let now = dayjs(); |
269 |
|
270 |
// Initialize pickup slots starting at opening time |
271 |
let pickupIntervalStartMoment = listStartMoment; |
272 |
let pickupIntervalEndMoment = listStartMoment.add(pickup_interval, 'minutes'); |
273 |
while (keep_going) { |
274 |
let available = true; |
275 |
|
276 |
if (pickupIntervalStartMoment.isBefore(now)) { |
277 |
// Slots in the past are unavailable |
278 |
available = false; |
279 |
} |
280 |
|
281 |
if (pickupIntervalEndMoment.isAfter(listEndMoment)) { |
282 |
// Slots after the end of pickup times for the day are unavailable |
283 |
available = false; |
284 |
} |
285 |
|
286 |
let pickups_scheduled = 0; |
287 |
|
288 |
if (existingPickupMoments[branchcode]){ |
289 |
existingPickupMoments[branchcode].forEach(function(pickupMoment){ |
290 |
// An existing pickup time |
291 |
if (pickupMoment.isSameOrAfter(pickupIntervalStartMoment) && pickupMoment.isBefore(pickupIntervalEndMoment)) { |
292 |
// This calculated pickup is in use by another scheduled pickup |
293 |
pickups_scheduled++; |
294 |
} |
295 |
}); |
296 |
} |
297 |
|
298 |
if (pickups_scheduled >= policy.patrons_per_interval) { |
299 |
available = false; |
300 |
} |
301 |
|
302 |
pickupSlots.push( |
303 |
{ |
304 |
"available": available, |
305 |
"moment": pickupIntervalStartMoment, |
306 |
"pickups_scheduled": pickups_scheduled |
307 |
} |
308 |
); |
309 |
|
310 |
if ( available ) { |
311 |
available_count++; |
312 |
} |
313 |
|
314 |
pickupIntervalStartMoment = pickupIntervalEndMoment; |
315 |
pickupIntervalEndMoment = pickupIntervalStartMoment.add(pickup_interval, 'minutes'); |
316 |
if (pickupIntervalEndMoment.isAfter(listEndMoment)) { |
317 |
// This latest slot is after the end of pickup times for the day, so we can stop |
318 |
keep_going = false; |
319 |
} |
320 |
} |
321 |
|
322 |
$('#schedule-pickup-button').prop( 'disabled', available_count <= 0 ); |
323 |
}); |
324 |
|
325 |
for (let i = 0; i < pickupSlots.length; i++) { |
326 |
let pickupSlot = pickupSlots[i]; |
327 |
let optText = pickupSlot.moment.format("HH:mm"); |
328 |
let optValue = pickupSlot.moment.format("YYYY-MM-DD HH:mm:ss"); |
329 |
let pickups_scheduled = pickupSlot.pickups_scheduled; |
330 |
let disabled = pickupSlot.available ? "" : "disabled"; |
331 |
$("#pickup-times").append(`<span class="pickup_time"><input type="radio" id="slot_${i}" name="pickup_time" value="${optValue}" ${disabled} /> <label for="slot_${i}">${optText} (${pickups_scheduled})</label></span>`); |
332 |
} |
333 |
|
334 |
$('#pickup-times').show(); |
335 |
}); |
336 |
|
337 |
|
338 |
$(document).ready(function() { |
339 |
$("#existing-pickup-warning").hide(); |
340 |
$("#pickup-times").hide(); |
341 |
if( $("#opac-pickups-views .tab-pane.active").length < 1 ){ |
342 |
$("#opac-pickups-views a:first").tab("show"); |
343 |
} |
344 |
|
345 |
$("#create-pickup").on('submit', function(){ |
346 |
if ( ! $("input[type='radio']:checked").length ) { |
347 |
alert(_("Please select a date and a pickup time")) |
348 |
return false; |
349 |
} |
350 |
return true; |
351 |
}); |
352 |
}); |
353 |
</script> |
354 |
[% END %] |