125 lines
3.7 KiB
JavaScript
125 lines
3.7 KiB
JavaScript
const forms = document.querySelectorAll('.booking-form');
|
|
const navToggle = document.querySelector('[data-nav-toggle]');
|
|
const navMenu = document.querySelector('[data-nav-menu]');
|
|
const navLinks = document.querySelectorAll('.site-nav-public a');
|
|
|
|
const formatCurrency = (cents) =>
|
|
new Intl.NumberFormat('de-DE', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(cents / 100);
|
|
|
|
const calculateRentalDays = (start, end) => {
|
|
if (!start || !end) return null;
|
|
|
|
const startDate = new Date(start);
|
|
const endDate = new Date(end);
|
|
|
|
if (Number.isNaN(startDate.valueOf()) || Number.isNaN(endDate.valueOf())) {
|
|
return null;
|
|
}
|
|
|
|
const milliseconds = endDate.getTime() - startDate.getTime();
|
|
const rentalDays = Math.floor(milliseconds / 86400000);
|
|
|
|
return rentalDays > 0 ? rentalDays : null;
|
|
};
|
|
|
|
forms.forEach((form) => {
|
|
const startInput = form.querySelector('[data-booking-start]');
|
|
const endInput = form.querySelector('[data-booking-end]');
|
|
const daysOutput = form.querySelector('[data-summary-days]');
|
|
const rateOutput = form.querySelector('[data-summary-rate]');
|
|
const totalOutput = form.querySelector('[data-summary-total]');
|
|
const rateInput = form.querySelector('input[name="price_per_day_cents"]');
|
|
const deliveryModeInput = form.querySelector('[data-delivery-mode]');
|
|
const deliveryZoneInput = form.querySelector('[data-delivery-zone]');
|
|
const defaultRate = Number(form.dataset.dayRate || rateInput?.value || 9999);
|
|
const priceRates = (() => {
|
|
try {
|
|
return JSON.parse(form.dataset.priceRates || '{}');
|
|
} catch {
|
|
return {};
|
|
}
|
|
})();
|
|
|
|
const resolveRate = () => {
|
|
if (deliveryModeInput?.value === 'self_pickup') {
|
|
return Number(priceRates.self_pickup || defaultRate);
|
|
}
|
|
|
|
return Number(priceRates[deliveryZoneInput?.value || ''] || defaultRate);
|
|
};
|
|
|
|
const syncRate = () => {
|
|
if (deliveryZoneInput) {
|
|
if (deliveryModeInput?.value === 'self_pickup') {
|
|
deliveryZoneInput.value = 'self_pickup';
|
|
} else if (deliveryZoneInput.value === 'self_pickup') {
|
|
deliveryZoneInput.value = 'hannover';
|
|
}
|
|
}
|
|
|
|
const rate = resolveRate();
|
|
|
|
if (rateInput) {
|
|
rateInput.value = String(rate);
|
|
}
|
|
|
|
return rate;
|
|
};
|
|
|
|
const render = () => {
|
|
const rentalDays = calculateRentalDays(startInput?.value, endInput?.value);
|
|
const rate = syncRate();
|
|
|
|
if (!rentalDays || rate < 0) {
|
|
if (daysOutput) daysOutput.textContent = 'Noch nicht gewählt';
|
|
if (rateOutput) rateOutput.textContent = formatCurrency(rate);
|
|
if (totalOutput) totalOutput.textContent = formatCurrency(rate);
|
|
return;
|
|
}
|
|
|
|
if (daysOutput) {
|
|
daysOutput.textContent = `${rentalDays} ${rentalDays === 1 ? 'Miettag' : 'Miettage'}`;
|
|
}
|
|
|
|
if (rateOutput) {
|
|
rateOutput.textContent = formatCurrency(rate);
|
|
}
|
|
|
|
if (totalOutput) {
|
|
totalOutput.textContent = formatCurrency(rentalDays * rate);
|
|
}
|
|
};
|
|
|
|
startInput?.addEventListener('input', render);
|
|
endInput?.addEventListener('input', render);
|
|
rateInput?.addEventListener('input', render);
|
|
deliveryModeInput?.addEventListener('change', render);
|
|
deliveryZoneInput?.addEventListener('change', render);
|
|
render();
|
|
});
|
|
|
|
if (navToggle && navMenu) {
|
|
const closeMenu = () => {
|
|
navToggle.setAttribute('aria-expanded', 'false');
|
|
navMenu.classList.remove('is-open');
|
|
};
|
|
|
|
navToggle.addEventListener('click', () => {
|
|
const isOpen = navMenu.classList.toggle('is-open');
|
|
navToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
|
});
|
|
|
|
navLinks.forEach((link) => {
|
|
link.addEventListener('click', closeMenu);
|
|
});
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') {
|
|
closeMenu();
|
|
}
|
|
});
|
|
}
|