ef

rezervace-aut.html

@@ -86,12 +86,12 @@
         }
         
         .fc-timegrid-slot {
-            height: 3rem !important;
+            height: 2rem !important;
         }
         
         .fc-timegrid-slot-label {
-            font-size: 0.875rem;
+            font-size: 0.75rem !important;
-            color: #64748b;
+            padding: 0 !important;
         }
         
         .reservation-card {
@@ -125,11 +125,18 @@
         .vehicle-bmw-218d { background-color: #f3e6ff; color: #6f42c1; }
         .vehicle-skoda-superb { background-color: #ffe6e6; color: #dc3545; }
 
+        /* Calendar size adjustments */
+        .calendar-container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 1rem;
+        }
+
         /* Responsive calendar styles */
         @media (max-width: 768px) {
             .fc .fc-toolbar {
                 flex-direction: column;
-                gap: 1rem;
+                gap: 0.5rem;
             }
             
             .fc .fc-toolbar-title {
@@ -141,7 +148,7 @@
             }
             
             .fc-view-harness {
-                height: 500px !important; /* Smaller height on mobile */
+                height: 400px !important;
             }
             
             .fc .fc-button {
@@ -151,14 +158,8 @@
         }
 
         /* Adjust calendar size for desktop */
-        .calendar-container {
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 1rem;
-        }
-
         .fc-view-harness {
-            height: 600px !important; /* Default height for desktop */
+            height: 500px !important; /* Reduced from 600px */
         }
 
         /* Form container styles */
@@ -374,14 +375,13 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // Get form reference
+            let calendar;
-            const form = document.getElementById('reservationForm');
+            const reservationForm = document.getElementById('reservationForm');
-            const message = document.getElementById('statusMessage');
+            const statusMessage = document.getElementById('statusMessage');
-            const messageText = document.getElementById('messageText');
 
-            // Initialize full calendar
+            // Initialize FullCalendar
             const calendarEl = document.getElementById('calendar');
-            const calendar = new FullCalendar.Calendar(calendarEl, {
+            calendar = new FullCalendar.Calendar(calendarEl, {
                 initialView: 'timeGridWeek',
                 headerToolbar: {
                     left: 'prev,next today',
@@ -391,8 +391,9 @@
                 locale: 'cs',
                 slotMinTime: '06:00:00',
                 slotMaxTime: '22:00:00',
+                slotDuration: '01:00:00', // Set slot duration to 1 hour
+                snapDuration: '01:00:00',  // Snap to hour intervals
                 allDaySlot: false,
-                slotDuration: '00:30:00',
                 businessHours: {
                     daysOfWeek: [1, 2, 3, 4, 5],
                     startTime: '06:00',
@@ -410,6 +411,30 @@
                 }
             });
 
+            calendar.render();
+
+            // Check vehicle availability
+            async function checkVehicleAvailability(vehicle, startDate, endDate) {
+                try {
+                    const params = new URLSearchParams({
+                        vehicle: vehicle,
+                        start: startDate.toISOString(),
+                        end: endDate.toISOString()
+                    });
+
+                    const response = await fetch(`/api/check-availability?${params}`);
+                    if (!response.ok) {
+                        throw new Error('Failed to check availability');
+                    }
+
+                    const data = await response.json();
+                    return data.available;
+                } catch (error) {
+                    console.error('Error checking availability:', error);
+                    throw new Error('Could not verify vehicle availability');
+                }
+            }
+
             // Show status message function
             function showMessage(text, type) {
                 const statusContainer = document.getElementById('statusMessage');
@@ -442,63 +467,57 @@
             }
 
             // Handle form submission
-            if (form) {
+            reservationForm.addEventListener('submit', async function(e) {
-                form.addEventListener('submit', async function(e) {
+                e.preventDefault();
-                    e.preventDefault();
 
-                    // Validate dates
+                // Validate dates
-                    const startDate = new Date(document.getElementById('startDateTime').value);
+                const startDate = new Date(document.getElementById('startDateTime').value);
-                    const endDate = new Date(document.getElementById('endDateTime').value);
+                const endDate = new Date(document.getElementById('endDateTime').value);
                 
-                    if (endDate <= startDate) {
+                if (endDate <= startDate) {
-                        showMessage('Čas ukončení musí být později než čas začátku', 'error');
+                    showMessage('Čas ukončení musí být později než čas začátku', 'error');
-                        return;
+                    return;
+                }
+
+                // Check vehicle availability
+                const vehicle = document.getElementById('vehicle').value;
+                const isAvailable = await checkVehicleAvailability(vehicle, startDate, endDate);
+                
+                if (!isAvailable) {
+                    showMessage('Vozidlo není v tomto čase dostupné', 'error');
+                    return;
+                }
+
+                // Prepare reservation data
+                const reservationData = {
+                    driverName: document.getElementById('driverName').value,
+                    vehicle: vehicle,
+                    startDateTime: startDate.toISOString(),
+                    endDateTime: endDate.toISOString(),
+                    purpose: document.getElementById('purpose').value
+                };
+
+                try {
+                    const response = await fetch('/api/reservations', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(reservationData)
+                    });
+
+                    if (!response.ok) {
+                        throw new Error('Chyba při vytváření rezervace');
                     }
 
-                    // Check vehicle availability
+                    showMessage('Rezervace byla úspěšně vytvořena', 'success');
-                    const vehicle = document.getElementById('vehicle').value;
+                    calendar.refetchEvents();
-                    const isAvailable = await checkVehicleAvailability(vehicle, startDate, endDate);
+                    reservationForm.reset();
-                    
+                } catch (error) {
-                    if (!isAvailable) {
+                    console.error('Error:', error);
-                        showMessage('Vozidlo není v tomto čase dostupné', 'error');
+                    showMessage(error.message || 'Nepodařilo se vytvořit rezervaci', 'error');
-                        return;
+                }
-                    }
+            });
-
-                    // Prepare reservation data
-                    const reservationData = {
-                        driverName: document.getElementById('driverName').value,
-                        vehicle: vehicle,
-                        startDateTime: startDate.toISOString(),
-                        endDateTime: endDate.toISOString(),
-                        purpose: document.getElementById('purpose').value
-                    };
-
-                    try {
-                        const response = await fetch('/api/reservations', {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json',
-                            },
-                            body: JSON.stringify(reservationData)
-                        });
-
-                        if (!response.ok) {
-                            throw new Error('Chyba při vytváření rezervace');
-                        }
-
-                        showMessage('Rezervace byla úspěšně vytvořena', 'success');
-                        calendar.refetchEvents();
-                        form.reset();
-                    } catch (error) {
-                        console.error('Error:', error);
-                        showMessage(error.message || 'Nepodařilo se vytvořit rezervaci', 'error');
-                    }
-                });
-            } else {
-                console.error('Reservation form not found');
-            }
-
-            calendar.render();
         });
     </script>
 </body>