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,8 +467,7 @@
             }
 
             // Handle form submission
-            if (form) {
+            reservationForm.addEventListener('submit', async function(e) {
-                form.addEventListener('submit', async function(e) {
                 e.preventDefault();
 
                 // Validate dates
@@ -488,17 +512,12 @@
 
                     showMessage('Rezervace byla úspěšně vytvořena', 'success');
                     calendar.refetchEvents();
-                        form.reset();
+                    reservationForm.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>