Lines 66-72
Link Here
|
66 |
</ol> |
66 |
</ol> |
67 |
</fieldset> |
67 |
</fieldset> |
68 |
[% END %] |
68 |
[% END %] |
69 |
[% CASE %] |
69 |
[% CASE 'add-multiple' %] |
|
|
70 |
<div id="booking_result"></div> |
71 |
<fieldset class="brief"> |
72 |
<input type="hidden" name="biblio_id" id="biblio-id" value="[% biblio.biblionumber %]"> |
73 |
<input type="hidden" name="start_date" id="booking-start_date" value=""> |
74 |
<input type="hidden" name="end_date" id="booking-end_date" value=""> |
75 |
<input type="hidden" id="items-hidden" name="items"> |
76 |
<ol> |
77 |
<li> |
78 |
<div> |
79 |
<label for="itemnumber">Add barcode :</label> |
80 |
<input type="text" id="barcode" name="barcode"> |
81 |
<button type="button" class="btn btn-sm btn-link" > |
82 |
<i class="fa fa-fw fa-plus" aria-hidden="true" onclick="addItem()"></i> |
83 |
</button> |
84 |
</div> |
85 |
<ul id="items-list"></ul> |
86 |
</li> |
87 |
<button type="button" id="checks_bookings" name="opac-add-multiple-check" class="btn btn-sm btn-link" style="display:none" onclick="validateItems()"> |
88 |
<i class="fa fa-fw fa-arrows-rotate" aria-hidden="true"></i> Validate items |
89 |
</button> |
90 |
<li> |
91 |
<label class="required" for="booking_pickup">Pickup at:</label> |
92 |
<select name="booking_pickup" id="pickup_library_id" required="required" disabled="true"></select> |
93 |
<span class="required">Required</span> |
94 |
</li> |
95 |
<li> |
96 |
<div id="period_fields"> |
97 |
<label class="required" for="period">Booking dates: </label> |
98 |
<input type="text" id="period" name="period" class="flatpickr" data-flatpickr-futuredate="true" data-flatpickr-disable-shortcuts="true" required autocomplete="off"> |
99 |
<span class="required">Required</span> |
100 |
</div> |
101 |
<div class="hint">Select the booking start date and end date</div> |
102 |
</li> |
103 |
</ol> |
104 |
</fieldset> |
70 |
[% END %] |
105 |
[% END %] |
71 |
</div> |
106 |
</div> |
72 |
<div class="modal-footer"> |
107 |
<div class="modal-footer"> |
Lines 86-89
Link Here
|
86 |
</div> <!-- /.modal-content --> |
121 |
</div> <!-- /.modal-content --> |
87 |
</form> |
122 |
</form> |
88 |
</div> <!-- /.modal-dialog --> |
123 |
</div> <!-- /.modal-dialog --> |
89 |
</div> <!-- /.modal --> |
124 |
</div> <!-- /.modal --> |
|
|
125 |
<script> |
126 |
function addItem() { |
127 |
const barcodeInput = document.getElementById('barcode'); |
128 |
const itemsList = document.getElementById('items-list'); |
129 |
const barcode = barcodeInput.value.trim(); |
130 |
const errorDiv = document.getElementById('booking_result'); |
131 |
const errorElement = document.createElement('div'); |
132 |
errorElement.id = 'add_booking_error'; |
133 |
errorElement.classList.add('alert', 'alert-danger'); |
134 |
const observer = new MutationObserver(function() { |
135 |
if (itemsList.children.length === 0) { |
136 |
$("#pickup_library_id").prop("disabled", true); |
137 |
$("#checks_bookings").hide(); |
138 |
|
139 |
} else { |
140 |
$("#pickup_library_id").prop("disabled", false); |
141 |
$("#checks_bookings").show(); |
142 |
} |
143 |
}); |
144 |
observer.observe(itemsList, { |
145 |
childList: true, |
146 |
subtree: true |
147 |
}); |
148 |
|
149 |
if (barcode) { |
150 |
let targetItemInList = document.getElementById('booking_item-' + barcode); |
151 |
if (targetItemInList) { |
152 |
errorElement.textContent = 'Item already in the list.'; |
153 |
errorDiv.appendChild(errorElement); |
154 |
return; |
155 |
} |
156 |
let biblioTitle; |
157 |
let itemRepresentation = $.ajax({ |
158 |
url: "/api/v1/items/?external_id=" + barcode, |
159 |
type: "GET", |
160 |
dataType: "json", |
161 |
success: function (response) { |
162 |
if (!response[0].bookable) { |
163 |
errorElement.textContent = 'Item not bookable'; |
164 |
errorDiv.replaceWith(errorElement); |
165 |
} else { |
166 |
let biblio_id = response[0].biblio_id; |
167 |
let item_id = response[0].item_id; |
168 |
let biblioRepresentation = $.ajax({ |
169 |
url: "/api/v1/biblios/" + biblio_id, |
170 |
type: "GET", |
171 |
dataType: "json", |
172 |
success: function (response) { |
173 |
if (response) { |
174 |
biblioTitle = response.title; |
175 |
const listItem = document.createElement('li'); |
176 |
listItem.setAttribute('id', 'booking_item-' + barcode); |
177 |
listItem.dataset.biblio_id = biblio_id; |
178 |
listItem.dataset.item_id = item_id; |
179 |
listItem.textContent = `${item_id} - ${biblioTitle} (${barcode})`; |
180 |
const deleteLink = document.createElement('a'); |
181 |
deleteLink.classList.add('fa', 'fa-fw', 'fa-times'); |
182 |
deleteLink.setAttribute('aria-hidden', 'true'); |
183 |
deleteLink.onclick = function () { |
184 |
deleteItem(listItem); |
185 |
}; |
186 |
listItem.appendChild(deleteLink); |
187 |
itemsList.appendChild(listItem); |
188 |
barcodeInput.value = ''; |
189 |
updateItemList(); |
190 |
} |
191 |
}, |
192 |
error: function (xhr, status, error) { |
193 |
errorElement.textContent = 'Fetch failed: ' + error; |
194 |
errorDiv.replaceWith(errorElement); |
195 |
}, |
196 |
}); |
197 |
} |
198 |
}, |
199 |
error: function (xhr, status, error) { |
200 |
errorElement.textContent = 'Fetch failed: ' + error; |
201 |
errorDiv.replaceWith(errorElement); |
202 |
}, |
203 |
}); |
204 |
} |
205 |
} |
206 |
function updateItemList() { |
207 |
const itemsList = document.getElementById('items-list'); |
208 |
const itemnumbers = []; |
209 |
const barcodes = itemsList.getElementsByTagName('li'); |
210 |
for (let barcode of barcodes) { |
211 |
itemnumbers.push(barcode.textContent); |
212 |
} |
213 |
const itemsHidden = document.getElementById('items-hidden'); |
214 |
itemsHidden.value = JSON.stringify(itemnumbers); |
215 |
} |
216 |
function deleteItem(listItem) { |
217 |
const itemsList = document.getElementById('items-list'); |
218 |
itemsList.removeChild(listItem); |
219 |
$('#pickup_library_id').empty(); |
220 |
updateItemList(); |
221 |
} |
222 |
</script> |