106 lines
3.7 KiB
JavaScript
106 lines
3.7 KiB
JavaScript
// DEPENDS ON seat-chooser.js
|
|
(async () => {
|
|
let scDiv = document.querySelector('#seat-chooser');
|
|
let summaryDiv = document.querySelector('#summary-dyn');
|
|
|
|
let showingId = scDiv.getAttribute('data-showing-id');
|
|
let ticketTypes = await (await fetch(`/api/showing/${showingId}/prices`)).json();
|
|
|
|
let sc = new SeatChooser(
|
|
showingId,
|
|
scDiv,
|
|
(sc, s, add) => {
|
|
// seat click callback
|
|
// sc is the seat chooser
|
|
// s is the seat // but it's better to look at sc.selectedSeats
|
|
// add is a boolean indicating whether the seat is being added or removed
|
|
|
|
// update the summary
|
|
summaryDiv.innerHTML = '';
|
|
sc.selectedSeats.forEach((seat, index) => {
|
|
// set seat ticket if ticket is not set
|
|
if (!seat.ticket) seat.ticket = ticketTypes[0];
|
|
let seatDiv = document.createElement('div');
|
|
seatDiv.classList.add('seat');
|
|
let ticketSelect = document.createElement('select');
|
|
ticketTypes.forEach((ticketType, index) => {
|
|
let option = document.createElement('option');
|
|
option.value = index;
|
|
option.innerText = ticketType.price_type;
|
|
ticketSelect.appendChild(option);
|
|
});
|
|
ticketSelect.classList.add('ticket-select');
|
|
ticketSelect.value = ticketTypes.indexOf(seat.ticket);
|
|
ticketSelect.addEventListener('change', (e) => {
|
|
seat.ticket = ticketTypes[e.target.value];
|
|
updateTicket(sc, seat, seatDiv);
|
|
updateTotal(sc);
|
|
});
|
|
seatDiv.appendChild(ticketSelect);
|
|
|
|
seatDiv.appendChild(document.createTextNode(' '));
|
|
|
|
let seatSpan = document.createElement('span');
|
|
seatSpan.innerText = `Row ${seat.row}, Seat ${seat.col}`;
|
|
seatSpan.classList.add('seat-span');
|
|
seatDiv.appendChild(seatSpan);
|
|
seatDiv.appendChild(document.createTextNode(' '));
|
|
|
|
let priceSpan = document.createElement('span');
|
|
priceSpan.classList.add('price');
|
|
seatDiv.appendChild(priceSpan);
|
|
summaryDiv.appendChild(seatDiv);
|
|
|
|
updateTicket(sc, seat, seatDiv);
|
|
});
|
|
|
|
updateTotal(sc);
|
|
|
|
if (sc.selectedSeats.length == 0) document.querySelector('button#order-button').disabled = true;
|
|
else document.querySelector('button#order-button').disabled = false;
|
|
|
|
}
|
|
);
|
|
|
|
window.freq.set('seat-chooser', sc);
|
|
})();
|
|
|
|
let total = 0;
|
|
|
|
function updateTicket(sc, seat, seatDiv) {
|
|
seatDiv.querySelector('span:last-child').innerText = `€${seat.ticket.price}`;
|
|
}
|
|
|
|
function updateTotal(sc) {
|
|
total = 0;
|
|
sc.selectedSeats.forEach(_seat => {
|
|
total += Number(_seat.ticket.price);
|
|
});
|
|
document.querySelector('#summary-total').innerText = `Total: €${total}`;
|
|
}
|
|
|
|
document.querySelector('button#order-button').addEventListener('click', (e) => {
|
|
let seats = [];
|
|
window.sc.selectedSeats.forEach(seat => {
|
|
seats.push({
|
|
seat: seat.id,
|
|
ticket: seat.ticket.id
|
|
});
|
|
});
|
|
fetch(`/api/order`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
showing: sc.showingId,
|
|
seats: seats
|
|
})
|
|
}).then(res => {
|
|
if (res.ok) {
|
|
window.location = '/order/complete';
|
|
} else {
|
|
alert('Error placing order');
|
|
}
|
|
});
|
|
});
|