108 lines
3.9 KiB
JavaScript
108 lines
3.9 KiB
JavaScript
(function () {
|
|
function initReservationForm(form) {
|
|
var dateInput = form.querySelector('[data-reservation-date]');
|
|
var partySelect = form.querySelector('[data-party-size]');
|
|
var timeSelect = form.querySelector('[data-reservation-time]');
|
|
var note = form.querySelector('[data-availability-note]');
|
|
|
|
if (!dateInput || !partySelect || !timeSelect || !note || typeof nazarReservationData === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
var messages = nazarReservationData.messages || {};
|
|
var requestCounter = 0;
|
|
|
|
function setPlaceholder(text, disabled) {
|
|
timeSelect.innerHTML = '';
|
|
var option = document.createElement('option');
|
|
option.value = '';
|
|
option.textContent = text;
|
|
timeSelect.appendChild(option);
|
|
timeSelect.disabled = !!disabled;
|
|
timeSelect.value = '';
|
|
}
|
|
|
|
function updateAvailability() {
|
|
var date = dateInput.value;
|
|
var partySize = partySelect.value;
|
|
|
|
if (!date || !partySize) {
|
|
setPlaceholder(messages.chooseDateAndParty || 'Bitte wählen Sie zuerst Datum und Personenzahl.', true);
|
|
note.textContent = messages.chooseDateAndParty || 'Bitte wählen Sie zuerst Datum und Personenzahl.';
|
|
return;
|
|
}
|
|
|
|
requestCounter += 1;
|
|
var currentRequest = requestCounter;
|
|
|
|
setPlaceholder(messages.loading || 'Verfügbare Uhrzeiten werden geladen …', true);
|
|
note.textContent = messages.loading || 'Verfügbare Uhrzeiten werden geladen …';
|
|
|
|
var body = new URLSearchParams();
|
|
body.append('action', 'nazar_get_available_times');
|
|
body.append('nonce', nazarReservationData.nonce);
|
|
body.append('reservation_date', date);
|
|
body.append('party_size', partySize);
|
|
|
|
fetch(nazarReservationData.ajaxUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
|
|
},
|
|
body: body.toString()
|
|
})
|
|
.then(function (response) {
|
|
return response.json();
|
|
})
|
|
.then(function (payload) {
|
|
if (currentRequest !== requestCounter) {
|
|
return;
|
|
}
|
|
|
|
if (!payload || !payload.success || !payload.data) {
|
|
throw new Error('invalid_response');
|
|
}
|
|
|
|
var times = Array.isArray(payload.data.times) ? payload.data.times : [];
|
|
|
|
if (!times.length) {
|
|
setPlaceholder(messages.empty || 'Für diese Auswahl ist aktuell keine freie Uhrzeit verfügbar.', true);
|
|
note.textContent = payload.data.message || messages.empty || 'Für diese Auswahl ist aktuell keine freie Uhrzeit verfügbar.';
|
|
return;
|
|
}
|
|
|
|
timeSelect.innerHTML = '';
|
|
var defaultOption = document.createElement('option');
|
|
defaultOption.value = '';
|
|
defaultOption.textContent = 'Bitte wählen';
|
|
timeSelect.appendChild(defaultOption);
|
|
|
|
times.forEach(function (slot) {
|
|
var option = document.createElement('option');
|
|
option.value = slot.value;
|
|
option.textContent = slot.label;
|
|
timeSelect.appendChild(option);
|
|
});
|
|
|
|
timeSelect.disabled = false;
|
|
note.textContent = payload.data.message || '';
|
|
})
|
|
.catch(function () {
|
|
if (currentRequest !== requestCounter) {
|
|
return;
|
|
}
|
|
|
|
setPlaceholder(messages.error || 'Die verfügbaren Uhrzeiten konnten gerade nicht geladen werden. Bitte versuchen Sie es erneut.', true);
|
|
note.textContent = messages.error || 'Die verfügbaren Uhrzeiten konnten gerade nicht geladen werden. Bitte versuchen Sie es erneut.';
|
|
});
|
|
}
|
|
|
|
dateInput.addEventListener('change', updateAvailability);
|
|
partySelect.addEventListener('change', updateAvailability);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('[data-availability-form]').forEach(initReservationForm);
|
|
});
|
|
})();
|