119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var modal = document.getElementById('booking-modal');
|
|
var closeButton = document.querySelector('.close-button');
|
|
var bookingForm = document.getElementById('modal-booking-form');
|
|
var calendar;
|
|
var currentSelectionInfo;
|
|
|
|
if (calendarEl) {
|
|
calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'timeGridWeek',
|
|
headerToolbar: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
|
},
|
|
events: 'get_bookings.php',
|
|
slotMinTime: '08:00:00',
|
|
slotMaxTime: '22:00:00',
|
|
allDaySlot: false,
|
|
slotDuration: '00:15:00',
|
|
slotLabelInterval: '00:15:00',
|
|
snapDuration: '00:15:00',
|
|
selectable: true,
|
|
editable: true,
|
|
selectLongPressDelay: 200,
|
|
longPressDelay: 200,
|
|
select: function(info) {
|
|
// Force 1-hour selection
|
|
info.end = new Date(info.start.getTime() + 60 * 60 * 1000);
|
|
info.endStr = info.end.toISOString();
|
|
|
|
currentSelectionInfo = info;
|
|
modal.style.display = 'block';
|
|
document.getElementById('organizer-name').focus();
|
|
},
|
|
eventDrop: function(info) {
|
|
updateBooking(info.event);
|
|
},
|
|
eventResize: function(info) {
|
|
updateBooking(info.event);
|
|
}
|
|
});
|
|
calendar.render();
|
|
}
|
|
|
|
if (closeButton) {
|
|
closeButton.onclick = function() {
|
|
modal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
window.onclick = function(event) {
|
|
if (event.target == modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
if (bookingForm) {
|
|
bookingForm.onsubmit = function(e) {
|
|
e.preventDefault();
|
|
var title = document.getElementById('organizer-name').value;
|
|
var sport = document.getElementById('modal-sport').value;
|
|
|
|
if (title && sport && currentSelectionInfo) {
|
|
var newEvent = {
|
|
title: title,
|
|
sport: sport,
|
|
start: currentSelectionInfo.startStr,
|
|
end: currentSelectionInfo.endStr
|
|
};
|
|
|
|
fetch('create_booking.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(newEvent),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
modal.style.display = 'none';
|
|
bookingForm.reset();
|
|
calendar.refetchEvents();
|
|
} else {
|
|
alert('Error creating booking: ' + data.message);
|
|
}
|
|
});
|
|
}
|
|
calendar.unselect();
|
|
}
|
|
}
|
|
|
|
function updateBooking(event) {
|
|
var eventData = {
|
|
id: event.id,
|
|
start: event.startStr,
|
|
end: event.endStr
|
|
};
|
|
fetch('update_booking.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(eventData),
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status !== 'success') {
|
|
alert('Error updating booking: ' + data.message);
|
|
// Revert the event's position
|
|
// Note: The `revert()` function is not available on the `event` object directly in v5.
|
|
// Instead, you would refetch events or handle this state differently.
|
|
calendar.refetchEvents();
|
|
}
|
|
});
|
|
}
|
|
}); |