@@ -441,10 +671,11 @@
let calendar;
const reservationForm = document.getElementById('reservationForm');
const statusMessage = document.getElementById('statusMessage');
+ const modal = document.getElementById('eventModal');
+ let currentEventId = null;
// Initialize FullCalendar
- const calendarEl = document.getElementById('calendar');
- calendar = new FullCalendar.Calendar(calendarEl, {
+ const calendarEl = document.getElementById('calendar'); calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
@@ -460,24 +691,32 @@
events: '/api/reservations',
eventDisplay: 'block',
eventTimeFormat: {
- hour: '2-digit',
- minute: '2-digit',
hour12: false
},
+ dateClick: function(info) {
+ // Store the timestamp of the last click
+ const now = Date.now();
+ if (this.lastClick && (now - this.lastClick < 300)) {
+ // Double click detected
+ showReservationForm(info.date);
+ }
+ this.lastClick = now;
+ },
eventContent: function(arg) {
return {
html: `
-
-
${arg.event.extendedProps.driverName || 'Rezervace'}
-
${arg.event.extendedProps.purpose || ''}
+
+
${arg.event.extendedProps.vehicle}
+
${arg.event.extendedProps.driverName}
+ ${arg.event.extendedProps.purpose ? `
${arg.event.extendedProps.purpose}
` : ''}
`
};
},
- // Add these properties to ensure proper event rendering
+ eventClick: function(info) {
+ showEventModal(info.event);
+ },
eventConstraint: {
- startTime: '06:00',
- endTime: '22:00',
dows: [0,1,2,3,4,5,6]
},
selectConstraint: {
@@ -489,6 +728,44 @@
calendar.render();
+ // Reservation modal functions
+ const reservationModal = document.getElementById('reservationModal');
+ const closeReservationModal = document.getElementById('closeReservationModal'); function showReservationForm(date) {
+ // Format the date for the form inputs using local timezone
+ const formattedDate = date.getFullYear() + '-' +
+ String(date.getMonth() + 1).padStart(2, '0') + '-' +
+ String(date.getDate()).padStart(2, '0');
+ const formattedTime = String(date.getHours()).padStart(2, '0') + ':' +
+ String(date.getMinutes()).padStart(2, '0');
+
+ // Set the form values
+ document.getElementById('startDate').value = formattedDate;
+ document.getElementById('startTime').value = formattedTime;
+
+ // Set end time to 1 hour after start time by default
+ const endDate = new Date(date);
+ endDate.setHours(endDate.getHours() + 1);
+ document.getElementById('endDate').value = formattedDate;
+ document.getElementById('endTime').value = endDate.toTimeString().substring(0, 5);
+
+ // Show the modal
+ reservationModal.style.display = 'block';
+ }
+
+ // Close modal when clicking the close button
+ closeReservationModal.onclick = function() {
+ reservationModal.style.display = 'none';
+ }
+
+ // Close modal when clicking outside
+ window.onclick = function(event) {
+ if (event.target == reservationModal) {
+ reservationModal.style.display = 'none';
+ } else if (event.target == modal) {
+ modal.style.display = 'none';
+ }
+ }
+
// Check vehicle availability
async function checkVehicleAvailability(vehicle, startDate, endDate) {
try {
@@ -625,6 +902,68 @@
}
}
+ // Event modal functions
+ function showEventModal(event) {
+ const startDate = new Date(event.start);
+ const endDate = new Date(event.end);
+
+ document.getElementById('modalDriver').textContent = event.extendedProps.driverName;
+ document.getElementById('modalVehicle').textContent = event.extendedProps.vehicle;
+ document.getElementById('modalStart').textContent = formatDateTime(startDate);
+ document.getElementById('modalEnd').textContent = formatDateTime(endDate);
+ document.getElementById('modalPurpose').textContent = event.extendedProps.purpose || '(není uvedeno)';
+
+ // Show delete button only for user's own reservations
+ // You might want to add user authentication here
+ const deleteBtn = document.getElementById('deleteReservation');
+ deleteBtn.classList.remove('hidden');
+
+ modal.style.display = 'block';
+ }
+
+ function formatDateTime(date) {
+ return date.toLocaleString('cs-CZ', {
+ day: 'numeric',
+ month: 'long',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ }
+
+ // Close modal when clicking the close button or outside
+ document.querySelector('.modal-close').onclick = function() {
+ modal.style.display = 'none';
+ }
+
+ window.onclick = function(event) {
+ if (event.target == modal) {
+ modal.style.display = 'none';
+ }
+ }
+
+ // Delete reservation handler
+ document.getElementById('deleteReservation').onclick = async function() {
+ if (!currentEventId) return;
+
+ if (confirm('Opravdu chcete zrušit tuto rezervaci?')) {
+ try {
+ const response = await fetch(`/api/reservations/${currentEventId}`, {
+ method: 'DELETE'
+ });
+
+ if (!response.ok) throw new Error('Failed to delete reservation');
+
+ calendar.getEventById(currentEventId).remove();
+ modal.style.display = 'none';
+ showMessage('Rezervace byla úspěšně zrušena', 'success');
+ } catch (error) {
+ console.error('Error:', error);
+ showMessage('Nepodařilo se zrušit rezervaci', 'error');
+ }
+ }
+ }
+
// Initialize time dropdowns when page loads
document.addEventListener('DOMContentLoaded', function() {
populateTimeDropdowns();