TDvorak/PPve
1
0
Fork 0
mirror of https://github.com/Dvorinka/PPve.git synced 2026-06-04 04:22:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fefe

Browse Source
This commit is contained in:
Dvorinka
2025-06-20 12:06:13 +02:00
parent c3d30d7918
commit e1e716548c
2 changed files with 121 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
evidence-aut.html
+93 -112
View File
@@ -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\-]+$"
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">
<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"
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
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="" selected disabled>Vyberte vozidlo...</option>
<option value="VW Caddy - 4Z1 8241">VW Caddy - 4Z1 8241</option>
<option value="VW Golf - 5Z5 8694">VW Golf - 5Z5 8694</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 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>
<option value="">Vyberte vozidlo</option>
<option value="Škoda Octavia">Škoda Octavia</option>
<option value="Škoda Superb">Škoda Superb</option>
<option value="Škoda Kodiaq">Škoda Kodiaq</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 -->
<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 -->
<!-- Date and Time Fields -->
<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
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">
<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>
</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
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">
<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>
</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
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">
<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>
</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
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">
<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>
</div>
</div>
</div>
<div class="space-y-2">
<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>
<!-- Odometer Fields -->
<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"
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>
<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>
</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 reservationStart = document.getElementById('reservationStart');
const reservationEnd = document.getElementById('reservationEnd');
const reservationId = document.getElementById('reservationId');
let debounceTimer;
// Check for pre-filled data from reservation
window.addEventListener('load', () => {
const preFilledData = localStorage.getItem('preFilledEvidence');
if (preFilledData) {
const data = JSON.parse(preFilledData);
// Fill form fields
document.getElementById('name').value = data.driverName;
document.getElementById('vehicle').value = data.vehicle;
dateStart.value = data.date_start;
timeStart.value = data.time_start;
dateEnd.value = data.date_end;
timeEnd.value = data.time_end;
// Show reservation info
reservationInfo.classList.remove('hidden');
reservationStart.textContent = `${data.date_start} ${data.time_start}`;
reservationEnd.textContent = `${data.date_end} ${data.time_end}`;
// Clear pre-filled data from localStorage
localStorage.removeItem('preFilledEvidence');
// Check for reservation data
function handleReservationData() {
const urlParams = new URLSearchParams(window.location.search);
const reservationId = urlParams.get('reservationId');
if (reservationId) {
// Get reservation data from localStorage
const reservationData = JSON.parse(localStorage.getItem(`reservation_${reservationId}`));
if (reservationData) {
// Fill form with reservation data
document.getElementById('name').value = reservationData.driver;
document.getElementById('vehicle').value = reservationData.vehicle;
// Parse dates
const startDate = new Date(reservationData.start);
const endDate = new Date(reservationData.end);
document.getElementById('date_start').value = startDate.toISOString().split('T')[0];
document.getElementById('time_start').value = startDate.toTimeString().split(' ')[0];
document.getElementById('date_end').value = endDate.toISOString().split('T')[0];
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) {