fefe

evidence-aut.html

@@ -128,49 +128,28 @@
               <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                 <i class="fas fa-user text-gray-400"></i>
               </div>
-              <input type="text" id="name" name="name" required title="Pouze písmena a mezery, bez čísel a speciálních znaků." pattern="^[A-Za-zÁČĎÉĚÍŇÓŘŠŤÚŮÝŽáčďéěíňóřšťúůýž\s\-]+$"
+              <input type="text" id="name" name="name" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" 
-                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
+                     placeholder="Zadejte jméno a příjmení" required>
             </div>
           </div>
-          
+
+          <!-- Vehicle Selection -->
           <div class="space-y-2">
             <label for="vehicle" class="block text-sm font-medium text-gray-700">Vozidlo</label>
             <div class="relative">
               <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                 <i class="fas fa-car text-gray-400"></i>
               </div>
-              <select id="vehicle" name="vehicle" required
+              <select id="vehicle" name="vehicle" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
-                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue appearance-none">
+                <option value="">Vyberte vozidlo</option>
-                <option value="" selected disabled>Vyberte vozidlo...</option>
+                <option value="Škoda Octavia">Škoda Octavia</option>
-                <option value="VW Caddy - 4Z1 8241">VW Caddy - 4Z1 8241</option>
+                <option value="Škoda Superb">Škoda Superb</option>
-                <option value="VW Golf - 5Z5 8694">VW Golf - 5Z5 8694</option>
+                <option value="Škoda Kodiaq">Škoda Kodiaq</option>
-                <option value="Škoda Fabia - 1Z3 5789">Škoda Fabia – 1Z3 5789</option>
-                <option value="BMW 218d - 6Z5 4739">BMW 218d – 6Z5 4739</option>
-                <option value="BMW 218d - 6Z5 4740">BMW 218d – 6Z5 4740</option>
-                <option value="Škoda Superb - 2BY 2398">Škoda Superb - 2BY 2398</option>
               </select>
-              <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                <i class="fas fa-chevron-down text-gray-400"></i>
-              </div>
             </div>
           </div>
 
-          <!-- Auto-filled from reservation -->
+          <!-- Date and Time Fields -->
-          <div id="reservationInfo" class="mt-4 p-4 bg-gray-50 rounded-lg hidden">
-            <h3 class="text-sm font-medium text-gray-600 mb-2">Informace z rezervace</h3>
-            <div class="space-y-2">
-              <div>
-                <label class="block text-sm font-medium text-gray-500">Datum a čas odjezdu</label>
-                <div id="reservationStart" class="text-sm text-gray-700"></div>
-              </div>
-              <div>
-                <label class="block text-sm font-medium text-gray-500">Datum a čas příjezdu</label>
-                <div id="reservationEnd" class="text-sm text-gray-700"></div>
-              </div>
-            </div>
-          </div>
-          
-          <!-- Date and Time Fields - Departure -->
           <div class="grid md:grid-cols-2 gap-5">
             <div class="space-y-2">
               <label for="date_start" class="block text-sm font-medium text-gray-700">Datum odjezdu</label>
@@ -178,24 +157,20 @@
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-calendar text-gray-400"></i>
                 </div>
-                <input type="date" id="date_start" name="date_start" required
+                <input type="date" id="date_start" name="date_start" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
-                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
-            
             <div class="space-y-2">
               <label for="time_start" class="block text-sm font-medium text-gray-700">Čas odjezdu</label>
               <div class="relative">
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-clock text-gray-400"></i>
                 </div>
-                <input type="time" id="time_start" name="time_start" required
+                <input type="time" id="time_start" name="time_start" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
-                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
           </div>
-          
+
-          <!-- Date and Time Fields - Arrival -->
           <div class="grid md:grid-cols-2 gap-5">
             <div class="space-y-2">
               <label for="date_end" class="block text-sm font-medium text-gray-700">Datum příjezdu</label>
@@ -203,55 +178,21 @@
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-calendar text-gray-400"></i>
                 </div>
-                <input type="date" id="date_end" name="date_end" required
+                <input type="date" id="date_end" name="date_end" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
-                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
-            
             <div class="space-y-2">
               <label for="time_end" class="block text-sm font-medium text-gray-700">Čas příjezdu</label>
               <div class="relative">
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-clock text-gray-400"></i>
                 </div>
-                <input type="time" id="time_end" name="time_end" required
+                <input type="time" id="time_end" name="time_end" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
-                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
               </div>
             </div>
           </div>
-          
+
-          <div class="space-y-2">
+          <!-- Odometer Fields -->
-            <label for="destination" class="block text-sm font-medium text-gray-700">Cíl cesty</label>
-            <div class="suggest-container">
-              <div class="relative">
-                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                  <i class="fas fa-map-marker-alt text-gray-400"></i>
-                </div>
-                <input type="text" id="destination" name="destination" required autocomplete="off"
-                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue"
-                  placeholder="Začněte psát pro vyhledání místa...">
-                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
-                  <i class="fas fa-search text-gray-400"></i>
-                </div>
-              </div>
-              <div id="suggest-list" class="suggest-list"></div>
-            </div>
-            <input type="hidden" id="destination-lat" name="destination-lat">
-            <input type="hidden" id="destination-lon" name="destination-lon">
-            <p class="text-xs text-gray-500">Powered by Mapy.cz</p>
-          </div>
-          
-          <div class="space-y-2">
-            <label for="purpose" class="block text-sm font-medium text-gray-700">Účel cesty</label>
-            <div class="relative">
-              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <i class="fas fa-briefcase text-gray-400"></i>
-              </div>
-              <input type="text" id="purpose" name="purpose" required
-                class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
-            </div>
-          </div>
-          
           <div class="grid md:grid-cols-2 gap-5">
             <div class="space-y-2">
               <label for="km_start" class="block text-sm font-medium text-gray-700">Stav tachometru na začátku</label>
@@ -259,14 +200,9 @@
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <i class="fas fa-tachometer-alt text-gray-400"></i>
                 </div>
-                <input type="number" id="km_start" name="km_start" required min="0"
+                <input type="number" id="km_start" name="km_start" class="pl-10 w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-brand-blue focus:border-brand-blue" required>
-                  class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-brand-light-blue focus:border-brand-light-blue">
-                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                  <span class="text-gray-500">km</span>
-                </div>
               </div>
             </div>
-            
             <div class="space-y-2">
               <label for="km_end" class="block text-sm font-medium text-gray-700">Stav tachometru na konci</label>
               <div class="relative">
@@ -374,34 +310,79 @@
     const timeEnd = document.getElementById('time_end');
     const dateStart = document.getElementById('date_start');
     const dateEnd = document.getElementById('date_end');
-    const reservationInfo = document.getElementById('reservationInfo');
+    const reservationId = document.getElementById('reservationId');
-    const reservationStart = document.getElementById('reservationStart');
+    
-    const reservationEnd = document.getElementById('reservationEnd');
+    let debounceTimer;
 
-    // Check for pre-filled data from reservation
+    // Check for reservation data
-    window.addEventListener('load', () => {
+    function handleReservationData() {
-        const preFilledData = localStorage.getItem('preFilledEvidence');
+        const urlParams = new URLSearchParams(window.location.search);
-        if (preFilledData) {
+        const reservationId = urlParams.get('reservationId');
-            const data = JSON.parse(preFilledData);
+
-            
+        if (reservationId) {
-            // Fill form fields
+            // Get reservation data from localStorage
-            document.getElementById('name').value = data.driverName;
+            const reservationData = JSON.parse(localStorage.getItem(`reservation_${reservationId}`));
-            document.getElementById('vehicle').value = data.vehicle;
+            if (reservationData) {
-            dateStart.value = data.date_start;
+                // Fill form with reservation data
-            timeStart.value = data.time_start;
+                document.getElementById('name').value = reservationData.driver;
-            dateEnd.value = data.date_end;
+                document.getElementById('vehicle').value = reservationData.vehicle;
-            timeEnd.value = data.time_end;
+                
-            
+                // Parse dates
-            // Show reservation info
+                const startDate = new Date(reservationData.start);
-            reservationInfo.classList.remove('hidden');
+                const endDate = new Date(reservationData.end);
-            reservationStart.textContent = `${data.date_start} ${data.time_start}`;
+                
-            reservationEnd.textContent = `${data.date_end} ${data.time_end}`;
+                document.getElementById('date_start').value = startDate.toISOString().split('T')[0];
-            
+                document.getElementById('time_start').value = startDate.toTimeString().split(' ')[0];
-            // Clear pre-filled data from localStorage
+                document.getElementById('date_end').value = endDate.toISOString().split('T')[0];
-            localStorage.removeItem('preFilledEvidence');
+                document.getElementById('time_end').value = endDate.toTimeString().split(' ')[0];
+                
+                // Set reservation ID
+                document.getElementById('reservationId').value = reservationId;
+                
+                // Show message
+                showMessage('Data byla načtena z rezervace.', 'success');
+            }
         }
-    });
+    }
 
+    // Initialize form
+    handleReservationData();
+    
+    // Set default dates to today
+    const today = new Date();
+    const yyyy = today.getFullYear();
+    const mm = String(today.getMonth() + 1).padStart(2, '0');
+    const dd = String(today.getDate()).padStart(2, '0');
+    const todayStr = `${yyyy}-${mm}-${dd}`;
+    
+    document.getElementById('date_start').value = todayStr;
+    document.getElementById('date_end').value = todayStr;
+    
+    // Event handlers
+    destinationInput.addEventListener('input', function() {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        const query = destinationInput.value.trim();
+        if (query.length >= 3) {
+          fetchSuggestions(query);
+        } else {
+          suggestionsList.style.display = 'none';
+        }
+      }, 300);
+    });
+    
+    destinationInput.addEventListener('focus', function() {
+      if (destinationInput.value.trim().length >= 3) {
+        suggestionsList.style.display = 'block';
+      }
+    });
+    
+    document.addEventListener('click', function(e) {
+      if (!destinationInput.contains(e.target) && !suggestionsList.contains(e.target)) {
+        suggestionsList.style.display = 'none';
+      }
+    });
+    
     // Suggestions API
     async function fetchSuggestions(query) {
       try {
@@ -413,13 +394,13 @@
         }
         
         const data = await response.json();
-        return data.items;
+        displaySuggestions(data.items);
       } catch (error) {
         console.error('Error fetching suggestions:', error);
         showMessage('Chyba při načítání našeptávače.', 'error');
       }
     }
-
+    
     function displaySuggestions(items) {
       suggestionsList.innerHTML = '';
       
@@ -441,7 +422,7 @@
         suggestionsList.style.display = 'none';
       }
     }
-
+    
     function selectSuggestion(item) {
       destinationInput.value = item.name;
       
@@ -453,7 +434,7 @@
       
       suggestionsList.style.display = 'none';
     }
-
+    
     // Calculate distance
     function calculateDistance() {
       const start = parseInt(kmStart.value) || 0;
@@ -470,7 +451,7 @@
         totalDistance.classList.remove('text-red-600');
       }
     }
-
+    
     // Calculate time difference
     function calculateTime() {
       if (!timeStart.value || !timeEnd.value || !dateStart.value || !dateEnd.value) {

rezervace-aut.html

@@ -1111,22 +1111,19 @@
             <div class="modal-header">
                 <h3 class="text-xl font-semibold text-gray-900">Detail rezervace</h3>
             </div>
-            <div class="modal-body">
+            <div class="modal-content">
-                <div class="info-grid">
+                <span class="close">&times;</span>
-                    <span class="info-label">Řidič:</span>
+                <h2 class="text-xl font-bold mb-4">Detail rezervace</h2>
-                    <span id="modalDriver"></span>
+                <div class="reservation-details">
-                    
+                    <p><strong>Jméno:</strong> <span id="eventDriver"></span></p>
-                    <span class="info-label">Vozidlo:</span>
+                    <p><strong>Vozidlo:</strong> <span id="eventVehicle"></span></p>
-                    <span id="modalVehicle"></span>
+                    <p><strong>Datum od:</strong> <span id="eventStartDate"></span></p>
-                    
+                    <p><strong>Datum do:</strong> <span id="eventEndDate"></span></p>
-                    <span class="info-label">Začátek:</span>
+                </div>
-                    <span id="modalStart"></span>
+                <div class="mt-4">
-                    
+                    <button id="addEvidenceBtn" class="bg-brand-blue text-white px-4 py-2 rounded-lg hover:bg-brand-light-blue transition-colors">
-                    <span class="info-label">Konec:</span>
+                        Přidat záznam jízdy
-                    <span id="modalEnd"></span>
+                    </button>
-                    
-                    <span class="info-label">Účel:</span>
-                    <span id="modalPurpose"></span>
                 </div>
                 <button id="deleteReservation" class="delete-btn hidden">
                     <i class="fas fa-trash mr-2"></i>Zrušit rezervaci
@@ -1457,9 +1454,6 @@
             const calendarEl = document.getElementById('calendar');
             let selectedVehicle = 'all';
             let calendar; // Make calendar global
-
-            // Update reservations list when page loads
-            updateReservationsList();
             
 
             // Fix calendar initialization
@@ -1499,6 +1493,21 @@
                 },
                 eventClick: function(info) {
                     showEventModal(info.event);
+                    
+                    // Store event data for evidence integration
+                    const eventData = {
+                        id: info.event.id,
+                        driver: info.event.extendedProps.driver,
+                        vehicle: info.event.extendedProps.vehicle,
+                        start: info.event.startStr,
+                        end: info.event.endStr
+                    };
+                    
+                    // Store in localStorage with user authentication
+                    const userId = localStorage.getItem('userId');
+                    if (userId) {
+                        localStorage.setItem(`reservation_${info.event.id}`, JSON.stringify(eventData));
+                    }
                 },
                 dateClick: function(info) {
                     showReservationForm(info.date);