35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const seatGrid = document.querySelector('[data-seat-grid]');
|
|
const seatInput = document.querySelector('[data-seat-input]');
|
|
const totalOutput = document.querySelector('[data-total]');
|
|
const seatOutput = document.querySelector('[data-seat-output]');
|
|
const price = parseFloat(document.body.dataset.price || '0');
|
|
|
|
if (!seatGrid || !seatInput) {
|
|
return;
|
|
}
|
|
|
|
const updateTotals = () => {
|
|
const selectedSeats = Array.from(seatGrid.querySelectorAll('.seat.selected'))
|
|
.map((seat) => seat.dataset.seat);
|
|
seatInput.value = selectedSeats.join(', ');
|
|
if (seatOutput) {
|
|
seatOutput.textContent = selectedSeats.length ? selectedSeats.join(', ') : 'None yet';
|
|
}
|
|
if (totalOutput) {
|
|
totalOutput.textContent = (selectedSeats.length * price).toFixed(2);
|
|
}
|
|
};
|
|
|
|
seatGrid.addEventListener('click', (event) => {
|
|
const seat = event.target.closest('.seat');
|
|
if (!seat || seat.classList.contains('taken')) {
|
|
return;
|
|
}
|
|
seat.classList.toggle('selected');
|
|
updateTotals();
|
|
});
|
|
|
|
updateTotals();
|
|
});
|