mirror of
https://github.com/Dvorinka/PPve.git
synced 2026-06-04 20:42:59 +00:00
Add files via upload
This commit is contained in:
Tomáš Dvořák
+538
-401
@@ -1,402 +1,539 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="cs">
|
<html lang="cs">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Poppe Potthoff - Záznam jízdy služebního vozu</title>
|
<title>Poppe Potthoff - Záznam jízdy služebního vozu</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
<script>
|
||||||
tailwind.config = {
|
tailwind.config = {
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
'brand-blue': '#004990',
|
'brand-blue': '#004990',
|
||||||
'brand-light-blue': '#0072b0',
|
'brand-light-blue': '#0072b0',
|
||||||
'brand-gray': '#f0f2f5'
|
'brand-gray': '#f0f2f5'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.suggest-container {
|
.suggest-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.suggest-list {
|
.suggest-list {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid #e5e7eb;
|
border: 1px solid #e5e7eb;
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background: white;
|
background: white;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.suggest-item {
|
.suggest-item {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 1px solid #f3f4f6;
|
border-bottom: 1px solid #f3f4f6;
|
||||||
}
|
}
|
||||||
.suggest-item:hover, .suggest-item.highlighted {
|
.suggest-item:hover, .suggest-item.highlighted {
|
||||||
background-color: #f3f4f6;
|
background-color: #f3f4f6;
|
||||||
}
|
}
|
||||||
.suggest-item:last-child {
|
.suggest-item:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-brand-gray min-h-screen">
|
<body class="bg-brand-gray min-h-screen">
|
||||||
<!-- Navigation Bar -->
|
<!-- Navigation Bar -->
|
||||||
<nav class="bg-brand-blue text-white shadow-lg">
|
<nav class="bg-brand-blue text-white shadow-lg">
|
||||||
<div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
|
<div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<img src="http://pp-kunovice.cz/wp-content/uploads/2022/04/logo-retina-white.png" alt="Poppe Potthoff Logo" class="h-10">
|
<img src="http://pp-kunovice.cz/wp-content/uploads/2022/04/logo-retina-white.png" alt="Poppe Potthoff Logo" class="h-10">
|
||||||
<div class="hidden md:block text-xl font-semibold">Poppe + Potthoff</div>
|
<div class="hidden md:block text-xl font-semibold">Poppe + Potthoff</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md:hidden">
|
<div class="md:hidden">
|
||||||
<button class="focus:outline-none">
|
<button class="focus:outline-none">
|
||||||
<i class="fas fa-bars text-xl"></i>
|
<i class="fas fa-bars text-xl"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Page Header -->
|
<!-- Page Header -->
|
||||||
<div class="bg-gradient-to-r from-brand-blue to-brand-light-blue text-white py-6 mb-8">
|
<div class="bg-gradient-to-r from-brand-blue to-brand-light-blue text-white py-6 mb-8">
|
||||||
<div class="max-w-6xl mx-auto px-4">
|
<div class="max-w-6xl mx-auto px-4">
|
||||||
<h1 class="text-3xl font-bold">Záznam jízdy služebního vozu</h1>
|
<h1 class="text-3xl font-bold">Záznam jízdy služebního vozu</h1>
|
||||||
<p class="text-gray-100 mt-2">Systém pro evidenci služebních jízd společnosti Poppe + Potthoff</p>
|
<p class="text-gray-100 mt-2">Systém pro evidenci služebních jízd společnosti Poppe + Potthoff</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<div class="max-w-2xl mx-auto px-4 pb-16">
|
<div class="max-w-2xl mx-auto px-4 pb-16">
|
||||||
<div class="bg-white shadow-xl rounded-lg overflow-hidden">
|
<div class="bg-white shadow-xl rounded-lg overflow-hidden">
|
||||||
<!-- Card Header -->
|
<!-- Card Header -->
|
||||||
<div class="bg-brand-blue text-white py-4 px-6 flex items-center">
|
<div class="bg-brand-blue text-white py-4 px-6 flex items-center">
|
||||||
<i class="fas fa-car-side text-xl mr-3"></i>
|
<i class="fas fa-car-side text-xl mr-3"></i>
|
||||||
<h2 class="text-xl font-semibold">Nový záznam jízdy</h2>
|
<h2 class="text-xl font-semibold">Nový záznam jízdy</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Form -->
|
<!-- Form -->
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<form id="tripForm" class="space-y-5">
|
<form id="tripForm" class="space-y-5">
|
||||||
<div class="grid md:grid-cols-2 gap-5">
|
<div class="space-y-2">
|
||||||
<div class="space-y-2">
|
<label for="name" class="block text-sm font-medium text-gray-700">Jméno řidiče</label>
|
||||||
<label for="name" class="block text-sm font-medium text-gray-700">Jméno řidiče</label>
|
<div class="relative">
|
||||||
<div class="relative">
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
<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>
|
||||||
<i class="fas fa-user text-gray-400"></i>
|
</div>
|
||||||
</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" 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">
|
||||||
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>
|
|
||||||
|
<div class="space-y-2">
|
||||||
<div class="space-y-2">
|
<label for="vehicle" class="block text-sm font-medium text-gray-700">Vozidlo</label>
|
||||||
<label for="date" class="block text-sm font-medium text-gray-700">Datum cesty</label>
|
<div class="relative">
|
||||||
<div class="relative">
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
<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>
|
||||||
<i class="fas fa-calendar text-gray-400"></i>
|
</div>
|
||||||
</div>
|
<select id="vehicle" name="vehicle" required
|
||||||
<input type="date" id="date" name="date" 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">
|
||||||
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">
|
<option value="" selected disabled>Vyberte vozidlo...</option>
|
||||||
</div>
|
<option value="VW Caddy - SPZ">VW Caddy - SPZ</option>
|
||||||
</div>
|
<option value="VW Golf - SPZ">VW Golf - SPZ</option>
|
||||||
</div>
|
<option value="Škoda Fabia - SPZ">Škoda Fabia – SPZ</option>
|
||||||
|
<option value="BMW 218d č. 1 - SPZ">BMW 218d č. 1 – SPZ</option>
|
||||||
<div class="space-y-2">
|
<option value="BMW 218d č. 2 - SPZ">BMW 218d č. 2 – SPZ</option>
|
||||||
<label for="destination" class="block text-sm font-medium text-gray-700">Cíl cesty</label>
|
<option value="Škoda Superb - SPZ">Škoda Superb - SPZ</option>
|
||||||
<div class="suggest-container">
|
</select>
|
||||||
<div class="relative">
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
<i class="fas fa-chevron-down text-gray-400"></i>
|
||||||
<i class="fas fa-map-marker-alt text-gray-400"></i>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input type="text" id="destination" name="destination" required autocomplete="off"
|
</div>
|
||||||
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...">
|
<!-- Date and Time Fields - Departure -->
|
||||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
|
<div class="grid md:grid-cols-2 gap-5">
|
||||||
<i class="fas fa-search text-gray-400"></i>
|
<div class="space-y-2">
|
||||||
</div>
|
<label for="date_start" class="block text-sm font-medium text-gray-700">Datum odjezdu</label>
|
||||||
</div>
|
<div class="relative">
|
||||||
<div id="suggest-list" class="suggest-list"></div>
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
</div>
|
<i class="fas fa-calendar text-gray-400"></i>
|
||||||
<input type="hidden" id="destination-lat" name="destination-lat">
|
</div>
|
||||||
<input type="hidden" id="destination-lon" name="destination-lon">
|
<input type="date" id="date_start" name="date_start" required
|
||||||
<p class="text-xs text-gray-500">Powered by Mapy.cz</p>
|
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">
|
|
||||||
<label for="purpose" class="block text-sm font-medium text-gray-700">Účel cesty</label>
|
<div class="space-y-2">
|
||||||
<div class="relative">
|
<label for="time_start" class="block text-sm font-medium text-gray-700">Čas odjezdu</label>
|
||||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
<div class="relative">
|
||||||
<i class="fas fa-briefcase text-gray-400"></i>
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
</div>
|
<i class="fas fa-clock text-gray-400"></i>
|
||||||
<input type="text" id="purpose" name="purpose" required
|
</div>
|
||||||
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" required
|
||||||
</div>
|
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="grid md:grid-cols-2 gap-5">
|
</div>
|
||||||
<div class="space-y-2">
|
|
||||||
<label for="km_start" class="block text-sm font-medium text-gray-700">Stav tachometru na začátku</label>
|
<!-- Date and Time Fields - Arrival -->
|
||||||
<div class="relative">
|
<div class="grid md:grid-cols-2 gap-5">
|
||||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
<div class="space-y-2">
|
||||||
<i class="fas fa-tachometer-alt text-gray-400"></i>
|
<label for="date_end" class="block text-sm font-medium text-gray-700">Datum příjezdu</label>
|
||||||
</div>
|
<div class="relative">
|
||||||
<input type="number" id="km_start" name="km_start" required min="0"
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
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">
|
<i class="fas fa-calendar text-gray-400"></i>
|
||||||
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
</div>
|
||||||
<span class="text-gray-500">km</span>
|
<input type="date" id="date_end" name="date_end" required
|
||||||
</div>
|
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>
|
||||||
|
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<label for="km_end" class="block text-sm font-medium text-gray-700">Stav tachometru na konci</label>
|
<label for="time_end" class="block text-sm font-medium text-gray-700">Čas příjezdu</label>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
<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>
|
<i class="fas fa-clock text-gray-400"></i>
|
||||||
</div>
|
</div>
|
||||||
<input type="number" id="km_end" name="km_end" required min="0"
|
<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">
|
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">
|
</div>
|
||||||
<span class="text-gray-500">km</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
<div class="space-y-2">
|
||||||
</div>
|
<label for="destination" class="block text-sm font-medium text-gray-700">Cíl cesty</label>
|
||||||
|
<div class="suggest-container">
|
||||||
<div class="space-y-5 pt-3">
|
<div class="relative">
|
||||||
<div class="p-4 bg-gray-50 rounded-lg">
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
<div class="flex justify-between items-center">
|
<i class="fas fa-map-marker-alt text-gray-400"></i>
|
||||||
<span class="text-sm text-gray-700">Celkem ujetá vzdálenost:</span>
|
</div>
|
||||||
<span id="totalDistance" class="font-bold text-brand-blue">0 km</span>
|
<input type="text" id="destination" name="destination" required autocomplete="off"
|
||||||
</div>
|
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>
|
placeholder="Začněte psát pro vyhledání místa...">
|
||||||
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
|
||||||
<div class="pt-2">
|
<i class="fas fa-search text-gray-400"></i>
|
||||||
<button type="submit" class="w-full flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-brand-blue hover:bg-brand-light-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-light-blue transition-colors duration-200">
|
</div>
|
||||||
<i class="fas fa-save mr-2"></i>
|
</div>
|
||||||
Odeslat záznam
|
<div id="suggest-list" class="suggest-list"></div>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
<input type="hidden" id="destination-lat" name="destination-lat">
|
||||||
</form>
|
<input type="hidden" id="destination-lon" name="destination-lon">
|
||||||
|
<p class="text-xs text-gray-500">Powered by Mapy.cz</p>
|
||||||
<!-- Status Messages -->
|
</div>
|
||||||
<div id="message" class="mt-4 py-3 px-4 rounded-md hidden">
|
|
||||||
<div class="flex items-center">
|
<div class="space-y-2">
|
||||||
<i id="messageIcon" class="mr-2"></i>
|
<label for="purpose" class="block text-sm font-medium text-gray-700">Účel cesty</label>
|
||||||
<p id="messageText" class="text-sm"></p>
|
<div class="relative">
|
||||||
</div>
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
</div>
|
<i class="fas fa-briefcase text-gray-400"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<input type="text" id="purpose" name="purpose" required
|
||||||
</div>
|
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>
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="bg-gray-800 text-gray-300 py-8">
|
<div class="grid md:grid-cols-2 gap-5">
|
||||||
<div class="max-w-6xl mx-auto px-4">
|
<div class="space-y-2">
|
||||||
<div class="flex flex-col md:flex-row justify-between">
|
<label for="km_start" class="block text-sm font-medium text-gray-700">Stav tachometru na začátku</label>
|
||||||
<div class="mb-6 md:mb-0">
|
<div class="relative">
|
||||||
<img src="http://pp-kunovice.cz/wp-content/uploads/2022/04/logo-retina-white.png" alt="Poppe Potthoff Logo" class="h-8 mb-3">
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
<p class="text-sm">© 2025 Poppe Potthoff CZ. Všechna práva vyhrazena.</p>
|
<i class="fas fa-tachometer-alt text-gray-400"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<input type="number" id="km_start" name="km_start" required min="0"
|
||||||
<div class="mt-8 text-xs text-gray-400 text-center">
|
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">
|
||||||
<p>Created by: TDvorak 2025</p>
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||||
</div>
|
<span class="text-gray-500">km</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
|
||||||
// API Key for Mapy.cz REST API
|
<div class="space-y-2">
|
||||||
const API_KEY = "N-p8s7xa3-1ZdYGnvCcSo6RdEOLv1wMI2y74-I9EL98"; //Test API KEY
|
<label for="km_end" class="block text-sm font-medium text-gray-700">Stav tachometru na konci</label>
|
||||||
|
<div class="relative">
|
||||||
const form = document.getElementById('tripForm');
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||||
const message = document.getElementById('message');
|
<i class="fas fa-tachometer-alt text-gray-400"></i>
|
||||||
const messageText = document.getElementById('messageText');
|
</div>
|
||||||
const messageIcon = document.getElementById('messageIcon');
|
<input type="number" id="km_end" name="km_end" required min="0"
|
||||||
const totalDistance = document.getElementById('totalDistance');
|
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">
|
||||||
const kmStart = document.getElementById('km_start');
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||||
const kmEnd = document.getElementById('km_end');
|
<span class="text-gray-500">km</span>
|
||||||
const destinationInput = document.getElementById('destination');
|
</div>
|
||||||
const suggestionsList = document.getElementById('suggest-list');
|
</div>
|
||||||
const destinationLat = document.getElementById('destination-lat');
|
</div>
|
||||||
const destinationLon = document.getElementById('destination-lon');
|
</div>
|
||||||
|
|
||||||
let debounceTimer;
|
<div class="space-y-5 pt-3">
|
||||||
|
<div class="p-4 bg-gray-50 rounded-lg">
|
||||||
// Event handlers
|
<div class="flex justify-between items-center mb-2">
|
||||||
destinationInput.addEventListener('input', function() {
|
<span class="text-sm text-gray-700">Celkem ujetá vzdálenost:</span>
|
||||||
clearTimeout(debounceTimer);
|
<span id="totalDistance" class="font-bold text-brand-blue">0 km</span>
|
||||||
debounceTimer = setTimeout(() => {
|
</div>
|
||||||
const query = destinationInput.value.trim();
|
<div class="flex justify-between items-center">
|
||||||
if (query.length >= 3) {
|
<span class="text-sm text-gray-700">Celková doba jízdy:</span>
|
||||||
fetchSuggestions(query);
|
<span id="totalTime" class="font-bold text-brand-blue">0:00</span>
|
||||||
} else {
|
</div>
|
||||||
suggestionsList.style.display = 'none';
|
</div>
|
||||||
}
|
|
||||||
}, 300);
|
<div class="pt-2">
|
||||||
});
|
<button type="submit" class="w-full flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-brand-blue hover:bg-brand-light-blue focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-light-blue transition-colors duration-200">
|
||||||
|
<i class="fas fa-save mr-2"></i>
|
||||||
destinationInput.addEventListener('focus', function() {
|
Odeslat záznam
|
||||||
if (destinationInput.value.trim().length >= 3) {
|
</button>
|
||||||
suggestionsList.style.display = 'block';
|
</div>
|
||||||
}
|
</form>
|
||||||
});
|
|
||||||
|
<!-- Status Messages -->
|
||||||
document.addEventListener('click', function(e) {
|
<div id="message" class="mt-4 py-3 px-4 rounded-md hidden">
|
||||||
if (!destinationInput.contains(e.target) && !suggestionsList.contains(e.target)) {
|
<div class="flex items-center">
|
||||||
suggestionsList.style.display = 'none';
|
<i id="messageIcon" class="mr-2"></i>
|
||||||
}
|
<p id="messageText" class="text-sm"></p>
|
||||||
});
|
</div>
|
||||||
|
</div>
|
||||||
// Suggestions API
|
</div>
|
||||||
async function fetchSuggestions(query) {
|
</div>
|
||||||
try {
|
</div>
|
||||||
const url = `https://api.mapy.cz/v1/suggest?query=${encodeURIComponent(query)}&limit=5&lang=cs&apikey=${API_KEY}`;
|
</div>
|
||||||
|
|
||||||
const response = await fetch(url);
|
<!-- Footer -->
|
||||||
if (!response.ok) {
|
<footer class="bg-gray-800 text-gray-300 py-8">
|
||||||
throw new Error('Network response was not ok');
|
<div class="max-w-6xl mx-auto px-4">
|
||||||
}
|
<div class="flex flex-col md:flex-row justify-between">
|
||||||
|
<div class="mb-6 md:mb-0">
|
||||||
const data = await response.json();
|
<img src="http://pp-kunovice.cz/wp-content/uploads/2022/04/logo-retina-white.png" alt="Poppe Potthoff Logo" class="h-8 mb-3">
|
||||||
displaySuggestions(data.items);
|
<p class="text-sm">© 2025 Poppe Potthoff CZ. Všechna práva vyhrazena.</p>
|
||||||
} catch (error) {
|
</div>
|
||||||
console.error('Error fetching suggestions:', error);
|
</div>
|
||||||
showMessage('Chyba při načítání našeptávače.', 'error');
|
<div class="mt-8 text-xs text-gray-400 text-center">
|
||||||
}
|
<p>Created by: TDvorak 2025</p>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
function displaySuggestions(items) {
|
</footer>
|
||||||
suggestionsList.innerHTML = '';
|
|
||||||
|
<script>
|
||||||
if (items && items.length > 0) {
|
// API Key for Mapy.cz REST API
|
||||||
items.forEach(item => {
|
const API_KEY = "N-p8s7xa3-1ZdYGnvCcSo6RdEOLv1wMI2y74-I9EL98"; //Test API KEY
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'suggest-item';
|
const form = document.getElementById('tripForm');
|
||||||
div.textContent = item.name;
|
const message = document.getElementById('message');
|
||||||
|
const messageText = document.getElementById('messageText');
|
||||||
div.addEventListener('click', () => {
|
const messageIcon = document.getElementById('messageIcon');
|
||||||
selectSuggestion(item);
|
const totalDistance = document.getElementById('totalDistance');
|
||||||
});
|
const totalTime = document.getElementById('totalTime');
|
||||||
|
const kmStart = document.getElementById('km_start');
|
||||||
suggestionsList.appendChild(div);
|
const kmEnd = document.getElementById('km_end');
|
||||||
});
|
const destinationInput = document.getElementById('destination');
|
||||||
|
const suggestionsList = document.getElementById('suggest-list');
|
||||||
suggestionsList.style.display = 'block';
|
const destinationLat = document.getElementById('destination-lat');
|
||||||
} else {
|
const destinationLon = document.getElementById('destination-lon');
|
||||||
suggestionsList.style.display = 'none';
|
const timeStart = document.getElementById('time_start');
|
||||||
}
|
const timeEnd = document.getElementById('time_end');
|
||||||
}
|
const dateStart = document.getElementById('date_start');
|
||||||
|
const dateEnd = document.getElementById('date_end');
|
||||||
function selectSuggestion(item) {
|
|
||||||
destinationInput.value = item.name;
|
let debounceTimer;
|
||||||
|
|
||||||
// Store coordinates
|
// Set default dates to today
|
||||||
if (item.position && item.position.lat && item.position.lon) {
|
const today = new Date();
|
||||||
destinationLat.value = item.position.lat;
|
const yyyy = today.getFullYear();
|
||||||
destinationLon.value = item.position.lon;
|
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
||||||
}
|
const dd = String(today.getDate()).padStart(2, '0');
|
||||||
|
const todayStr = `${yyyy}-${mm}-${dd}`;
|
||||||
suggestionsList.style.display = 'none';
|
|
||||||
}
|
document.getElementById('date_start').value = todayStr;
|
||||||
|
document.getElementById('date_end').value = todayStr;
|
||||||
// Calculate distance
|
|
||||||
function calculateDistance() {
|
// Event handlers
|
||||||
const start = parseInt(kmStart.value) || 0;
|
destinationInput.addEventListener('input', function() {
|
||||||
const end = parseInt(kmEnd.value) || 0;
|
clearTimeout(debounceTimer);
|
||||||
const distance = end - start;
|
debounceTimer = setTimeout(() => {
|
||||||
|
const query = destinationInput.value.trim();
|
||||||
totalDistance.textContent = distance > 0 ? `${distance} km` : '0 km';
|
if (query.length >= 3) {
|
||||||
|
fetchSuggestions(query);
|
||||||
if (distance < 0 && kmEnd.value !== '') {
|
} else {
|
||||||
totalDistance.classList.add('text-red-600');
|
suggestionsList.style.display = 'none';
|
||||||
totalDistance.classList.remove('text-brand-blue');
|
}
|
||||||
} else {
|
}, 300);
|
||||||
totalDistance.classList.add('text-brand-blue');
|
});
|
||||||
totalDistance.classList.remove('text-red-600');
|
|
||||||
}
|
destinationInput.addEventListener('focus', function() {
|
||||||
}
|
if (destinationInput.value.trim().length >= 3) {
|
||||||
|
suggestionsList.style.display = 'block';
|
||||||
kmStart.addEventListener('input', calculateDistance);
|
}
|
||||||
kmEnd.addEventListener('input', calculateDistance);
|
});
|
||||||
|
|
||||||
// Form submission
|
document.addEventListener('click', function(e) {
|
||||||
form.addEventListener('submit', async (e) => {
|
if (!destinationInput.contains(e.target) && !suggestionsList.contains(e.target)) {
|
||||||
e.preventDefault();
|
suggestionsList.style.display = 'none';
|
||||||
|
}
|
||||||
const start = parseInt(kmStart.value);
|
});
|
||||||
const end = parseInt(kmEnd.value);
|
|
||||||
|
// Suggestions API
|
||||||
if (end < start) {
|
async function fetchSuggestions(query) {
|
||||||
showMessage('Stav tachometru na konci nemůže být menší než na začátku.', 'error');
|
try {
|
||||||
return;
|
const url = `https://api.mapy.cz/v1/suggest?query=${encodeURIComponent(query)}&limit=5&lang=cs&apikey=${API_KEY}`;
|
||||||
}
|
|
||||||
|
const response = await fetch(url);
|
||||||
const data = {
|
if (!response.ok) {
|
||||||
name: document.getElementById('name').value,
|
throw new Error('Network response was not ok');
|
||||||
destination: destinationInput.value,
|
}
|
||||||
date: document.getElementById('date').value,
|
|
||||||
purpose: document.getElementById('purpose').value,
|
const data = await response.json();
|
||||||
km_start: start,
|
displaySuggestions(data.items);
|
||||||
km_end: end,
|
} catch (error) {
|
||||||
};
|
console.error('Error fetching suggestions:', error);
|
||||||
|
showMessage('Chyba při načítání našeptávače.', 'error');
|
||||||
// Add coordinates if available
|
}
|
||||||
if (destinationLat.value && destinationLon.value) {
|
}
|
||||||
data.coordinates = {
|
|
||||||
lat: destinationLat.value,
|
function displaySuggestions(items) {
|
||||||
lng: destinationLon.value
|
suggestionsList.innerHTML = '';
|
||||||
};
|
|
||||||
}
|
if (items && items.length > 0) {
|
||||||
|
items.forEach(item => {
|
||||||
try {
|
const div = document.createElement('div');
|
||||||
showMessage('Odesílání záznamu...', 'info');
|
div.className = 'suggest-item';
|
||||||
|
div.textContent = item.name;
|
||||||
const res = await fetch('http://localhost:8080/submit', {
|
|
||||||
method: 'POST',
|
div.addEventListener('click', () => {
|
||||||
headers: { 'Content-Type': 'application/json' },
|
selectSuggestion(item);
|
||||||
body: JSON.stringify(data),
|
});
|
||||||
});
|
|
||||||
|
suggestionsList.appendChild(div);
|
||||||
const result = await res.json();
|
});
|
||||||
showMessage(result.message, 'success');
|
|
||||||
form.reset();
|
suggestionsList.style.display = 'block';
|
||||||
totalDistance.textContent = '0 km';
|
} else {
|
||||||
} catch (err) {
|
suggestionsList.style.display = 'none';
|
||||||
console.error(err);
|
}
|
||||||
showMessage('Nepodařilo se odeslat záznam. Zkontrolujte připojení k internetu.', 'error');
|
}
|
||||||
}
|
|
||||||
});
|
function selectSuggestion(item) {
|
||||||
|
destinationInput.value = item.name;
|
||||||
function showMessage(text, type) {
|
|
||||||
message.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'bg-blue-50', 'text-green-800', 'text-red-800', 'text-blue-800');
|
// Store coordinates
|
||||||
messageText.textContent = text;
|
if (item.position && item.position.lat && item.position.lon) {
|
||||||
|
destinationLat.value = item.position.lat;
|
||||||
switch(type) {
|
destinationLon.value = item.position.lon;
|
||||||
case 'success':
|
}
|
||||||
message.classList.add('bg-green-50', 'text-green-800');
|
|
||||||
messageIcon.className = 'fas fa-check-circle text-green-600 mr-2';
|
suggestionsList.style.display = 'none';
|
||||||
break;
|
}
|
||||||
case 'error':
|
|
||||||
message.classList.add('bg-red-50', 'text-red-800');
|
// Calculate distance
|
||||||
messageIcon.className = 'fas fa-exclamation-circle text-red-600 mr-2';
|
function calculateDistance() {
|
||||||
break;
|
const start = parseInt(kmStart.value) || 0;
|
||||||
case 'info':
|
const end = parseInt(kmEnd.value) || 0;
|
||||||
message.classList.add('bg-blue-50', 'text-blue-800');
|
const distance = end - start;
|
||||||
messageIcon.className = 'fas fa-info-circle text-blue-600 mr-2';
|
|
||||||
break;
|
totalDistance.textContent = distance > 0 ? `${distance} km` : '0 km';
|
||||||
}
|
|
||||||
}
|
if (distance < 0 && kmEnd.value !== '') {
|
||||||
</script>
|
totalDistance.classList.add('text-red-600');
|
||||||
</body>
|
totalDistance.classList.remove('text-brand-blue');
|
||||||
|
} else {
|
||||||
|
totalDistance.classList.add('text-brand-blue');
|
||||||
|
totalDistance.classList.remove('text-red-600');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate time difference
|
||||||
|
function calculateTime() {
|
||||||
|
if (!timeStart.value || !timeEnd.value || !dateStart.value || !dateEnd.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const startDateTime = new Date(`${dateStart.value}T${timeStart.value}`);
|
||||||
|
const endDateTime = new Date(`${dateEnd.value}T${timeEnd.value}`);
|
||||||
|
|
||||||
|
// Calculate difference in milliseconds
|
||||||
|
const diffMs = endDateTime - startDateTime;
|
||||||
|
|
||||||
|
if (diffMs < 0) {
|
||||||
|
totalTime.textContent = "Chybný čas";
|
||||||
|
totalTime.classList.add('text-red-600');
|
||||||
|
totalTime.classList.remove('text-brand-blue');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert to days, hours and minutes
|
||||||
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||||
|
const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
|
||||||
|
// Format the display based on whether days are present
|
||||||
|
let timeDisplay = '';
|
||||||
|
if (diffDays > 0) {
|
||||||
|
timeDisplay = `${diffDays} ${diffDays === 1 ? 'den' : (diffDays >= 2 && diffDays <= 4) ? 'dny' : 'dní'}, ${diffHours} h ${diffMinutes.toString().padStart(2, '0')} min`;
|
||||||
|
} else {
|
||||||
|
timeDisplay = `${diffHours} h ${diffMinutes.toString().padStart(2, '0')} min`;
|
||||||
|
}
|
||||||
|
|
||||||
|
totalTime.textContent = timeDisplay;
|
||||||
|
totalTime.classList.add('text-brand-blue');
|
||||||
|
totalTime.classList.remove('text-red-600');
|
||||||
|
}
|
||||||
|
|
||||||
|
kmStart.addEventListener('input', calculateDistance);
|
||||||
|
kmEnd.addEventListener('input', calculateDistance);
|
||||||
|
timeStart.addEventListener('input', calculateTime);
|
||||||
|
timeEnd.addEventListener('input', calculateTime);
|
||||||
|
dateStart.addEventListener('input', calculateTime);
|
||||||
|
dateEnd.addEventListener('input', calculateTime);
|
||||||
|
|
||||||
|
// Form submission
|
||||||
|
form.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const start = parseInt(kmStart.value);
|
||||||
|
const end = parseInt(kmEnd.value);
|
||||||
|
|
||||||
|
if (end < start) {
|
||||||
|
showMessage('Stav tachometru na konci nemůže být menší než na začátku.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if end date/time is before start date/time
|
||||||
|
const startDateTime = new Date(`${dateStart.value}T${timeStart.value}`);
|
||||||
|
const endDateTime = new Date(`${dateEnd.value}T${timeEnd.value}`);
|
||||||
|
|
||||||
|
if (endDateTime < startDateTime) {
|
||||||
|
showMessage('Datum a čas příjezdu nemůže být dříve než datum a čas odjezdu.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
name: document.getElementById('name').value,
|
||||||
|
vehicle: document.getElementById('vehicle').value,
|
||||||
|
destination: destinationInput.value,
|
||||||
|
date_start: dateStart.value,
|
||||||
|
time_start: timeStart.value,
|
||||||
|
date_end: dateEnd.value,
|
||||||
|
time_end: timeEnd.value,
|
||||||
|
purpose: document.getElementById('purpose').value,
|
||||||
|
km_start: start,
|
||||||
|
km_end: end,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add coordinates if available
|
||||||
|
if (destinationLat.value && destinationLon.value) {
|
||||||
|
data.coordinates = {
|
||||||
|
lat: destinationLat.value,
|
||||||
|
lng: destinationLon.value
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
showMessage('Odesílání záznamu...', 'info');
|
||||||
|
|
||||||
|
const res = await fetch('/submit', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
|
||||||
|
const result = await res.json();
|
||||||
|
showMessage(result.message, 'success');
|
||||||
|
|
||||||
|
// Reset form but keep today's date
|
||||||
|
form.reset();
|
||||||
|
dateStart.value = todayStr;
|
||||||
|
dateEnd.value = todayStr;
|
||||||
|
totalDistance.textContent = '0 km';
|
||||||
|
totalTime.textContent = '0:00';
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
showMessage('Nepodařilo se odeslat záznam. Zkontrolujte připojení k internetu.', 'error');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function showMessage(text, type) {
|
||||||
|
message.classList.remove('hidden', 'bg-green-50', 'bg-red-50', 'bg-blue-50', 'text-green-800', 'text-red-800', 'text-blue-800');
|
||||||
|
messageText.textContent = text;
|
||||||
|
|
||||||
|
switch(type) {
|
||||||
|
case 'success':
|
||||||
|
message.classList.add('bg-green-50', 'text-green-800');
|
||||||
|
messageIcon.className = 'fas fa-check-circle text-green-600 mr-2';
|
||||||
|
break;
|
||||||
|
case 'error':
|
||||||
|
message.classList.add('bg-red-50', 'text-red-800');
|
||||||
|
messageIcon.className = 'fas fa-exclamation-circle text-red-600 mr-2';
|
||||||
|
break;
|
||||||
|
case 'info':
|
||||||
|
message.classList.add('bg-blue-50', 'text-blue-800');
|
||||||
|
messageIcon.className = 'fas fa-info-circle text-blue-600 mr-2';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -16,8 +16,12 @@ import (
|
|||||||
|
|
||||||
type TripEntry struct {
|
type TripEntry struct {
|
||||||
Name string `json:"name"`
|
Name string `json:"name"`
|
||||||
|
Vehicle string `json:"vehicle"`
|
||||||
Destination string `json:"destination"`
|
Destination string `json:"destination"`
|
||||||
Date string `json:"date"`
|
DateStart string `json:"date_start"`
|
||||||
|
TimeStart string `json:"time_start"`
|
||||||
|
DateEnd string `json:"date_end"`
|
||||||
|
TimeEnd string `json:"time_end"`
|
||||||
Purpose string `json:"purpose"`
|
Purpose string `json:"purpose"`
|
||||||
KmStart int `json:"km_start"`
|
KmStart int `json:"km_start"`
|
||||||
KmEnd int `json:"km_end"`
|
KmEnd int `json:"km_end"`
|
||||||
@@ -104,7 +108,7 @@ func handleSubmit(w http.ResponseWriter, r *http.Request) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if entry.Name == "" || entry.Destination == "" || entry.Date == "" || entry.Purpose == "" {
|
if entry.Name == "" || entry.Destination == "" || entry.DateStart == "" || entry.DateEnd == "" || entry.Purpose == "" {
|
||||||
log.Printf("Chybějící povinná pole: %+v", entry)
|
log.Printf("Chybějící povinná pole: %+v", entry)
|
||||||
w.WriteHeader(http.StatusBadRequest)
|
w.WriteHeader(http.StatusBadRequest)
|
||||||
w.Write([]byte(`{"error":"Missing required fields"}`))
|
w.Write([]byte(`{"error":"Missing required fields"}`))
|
||||||
@@ -118,20 +122,25 @@ func handleSubmit(w http.ResponseWriter, r *http.Request) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Formátování data do českého formátu
|
// Formátování dat do českého formátu
|
||||||
parsedDate, err := time.Parse("2006-01-02", entry.Date)
|
czechMonths := []string{
|
||||||
if err == nil {
|
"ledna", "února", "března", "dubna", "května", "června",
|
||||||
czechMonths := []string{
|
"července", "srpna", "září", "října", "listopadu", "prosince",
|
||||||
"ledna", "února", "března", "dubna", "května", "června",
|
|
||||||
"července", "srpna", "září", "října", "listopadu", "prosince",
|
|
||||||
}
|
|
||||||
monthName := czechMonths[parsedDate.Month()-1]
|
|
||||||
entry.Date = fmt.Sprintf("%d. %s %d", parsedDate.Day(), monthName, parsedDate.Year())
|
|
||||||
} else {
|
|
||||||
log.Printf("Chyba při parsování data: %v", err)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
err = sendEmail(entry)
|
// Zpracování začátku cesty
|
||||||
|
parsedDateStart, err := time.Parse("2006-01-02", entry.DateStart)
|
||||||
|
if err != nil {
|
||||||
|
log.Printf("Chyba při parsování data začátku: %v", err)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Zpracování konce cesty
|
||||||
|
parsedDateEnd, err := time.Parse("2006-01-02", entry.DateEnd)
|
||||||
|
if err != nil {
|
||||||
|
log.Printf("Chyba při parsování data konce: %v", err)
|
||||||
|
}
|
||||||
|
|
||||||
|
err = sendEmail(entry, parsedDateStart, parsedDateEnd, czechMonths)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
log.Printf("Chyba při odesílání emailu: %v", err)
|
log.Printf("Chyba při odesílání emailu: %v", err)
|
||||||
w.WriteHeader(http.StatusInternalServerError)
|
w.WriteHeader(http.StatusInternalServerError)
|
||||||
@@ -143,12 +152,12 @@ func handleSubmit(w http.ResponseWriter, r *http.Request) {
|
|||||||
w.Write([]byte(`{"message":"Záznam byl úspěšně uložen a email odeslán"}`))
|
w.Write([]byte(`{"message":"Záznam byl úspěšně uložen a email odeslán"}`))
|
||||||
}
|
}
|
||||||
|
|
||||||
func sendEmail(entry TripEntry) error {
|
func sendEmail(entry TripEntry, parsedDateStart, parsedDateEnd time.Time, czechMonths []string) error {
|
||||||
smtpHost := "mail.pp-kunovice.cz"
|
smtpHost := "smtp.gmail.com"
|
||||||
smtpPort := 465
|
smtpPort := 465
|
||||||
sender := "sluzebnicek@pp-kunovice.cz"
|
sender := "contact.dvorak@gmail.com"
|
||||||
password := "7g}qznB5bj"
|
password := "pnhkcsahbwsbpyqj"
|
||||||
recipient := "sluzebnicek@pp-kunovice.cz"
|
recipient := "contact.dvorak@gmail.com"
|
||||||
|
|
||||||
m := gomail.NewMessage()
|
m := gomail.NewMessage()
|
||||||
m.SetHeader("From", sender)
|
m.SetHeader("From", sender)
|
||||||
@@ -158,57 +167,279 @@ func sendEmail(entry TripEntry) error {
|
|||||||
var htmlContent strings.Builder
|
var htmlContent strings.Builder
|
||||||
|
|
||||||
htmlContent.WriteString(`
|
htmlContent.WriteString(`
|
||||||
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Záznam o jízdě služebním autem</title>
|
||||||
<style>
|
<style>
|
||||||
|
@media only screen and (max-width: 620px) {
|
||||||
|
.container {
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 10px !important;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
.info-row {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.info-item {
|
||||||
|
width: 100% !important;
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
background-color: #f9f9f9;
|
background-color: #f0f2f5;
|
||||||
padding: 20px;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 20px;
|
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
margin: auto;
|
margin: 20px auto;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
h2 {
|
|
||||||
color: #2c3e50;
|
.header {
|
||||||
border-bottom: 2px solid #3498db;
|
background-color: #004990;
|
||||||
padding-bottom: 10px;
|
color: white;
|
||||||
|
padding: 20px 25px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
p {
|
|
||||||
font-size: 16px;
|
.header h1 {
|
||||||
color: #34495e;
|
margin: 0;
|
||||||
line-height: 1.5;
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
border-bottom: 1px solid #eaeaea;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #004990;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
width: 48%;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
font-weight: bold;
|
font-weight: 600;
|
||||||
color: #2980b9;
|
color: #555;
|
||||||
|
font-size: 14px;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-left: 3px solid #0072b0;
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-link {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #0072b0;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #777;
|
||||||
|
background-color: #f8f9fa;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>Záznam o jízdě služebním autem</h2>
|
<div class="header">
|
||||||
|
<h1>Záznam o jízdě služebním autem</h1>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
`)
|
`)
|
||||||
|
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">Řidič:</span> %s</p>`, entry.Name)
|
// Formátování dat a časů pro zobrazení
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">Kam:</span> %s</p>`, entry.Destination)
|
formattedDateStart := ""
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">Datum:</span> %s</p>`, entry.Date)
|
if parsedDateStart.IsZero() == false {
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">Účel jízdy:</span> %s</p>`, entry.Purpose)
|
monthNameStart := czechMonths[parsedDateStart.Month()-1]
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">Kilometry na začátku:</span> %d km</p>`, entry.KmStart)
|
formattedDateStart = fmt.Sprintf("%d. %s %d", parsedDateStart.Day(), monthNameStart, parsedDateStart.Year())
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">Kilometry na konci:</span> %d km</p>`, entry.KmEnd)
|
} else {
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">Ujeté kilometry:</span> %d km</p>`, entry.KmEnd-entry.KmStart)
|
formattedDateStart = entry.DateStart
|
||||||
|
}
|
||||||
|
|
||||||
|
formattedDateEnd := ""
|
||||||
|
if !parsedDateEnd.IsZero() {
|
||||||
|
monthNameEnd := czechMonths[parsedDateEnd.Month()-1]
|
||||||
|
formattedDateEnd = fmt.Sprintf("%d. %s %d", parsedDateEnd.Day(), monthNameEnd, parsedDateEnd.Year())
|
||||||
|
} else {
|
||||||
|
formattedDateEnd = entry.DateEnd
|
||||||
|
}
|
||||||
|
|
||||||
|
// Výpočet celkové doby jízdy
|
||||||
|
startDateTime, startErr := time.Parse("2006-01-02T15:04", fmt.Sprintf("%sT%s", entry.DateStart, entry.TimeStart))
|
||||||
|
endDateTime, endErr := time.Parse("2006-01-02T15:04", fmt.Sprintf("%sT%s", entry.DateEnd, entry.TimeEnd))
|
||||||
|
|
||||||
|
totalDurationStr := "Neznámá"
|
||||||
|
if startErr == nil && endErr == nil {
|
||||||
|
diffMs := endDateTime.Sub(startDateTime)
|
||||||
|
if diffMs >= 0 {
|
||||||
|
diffDays := int(diffMs.Hours() / 24)
|
||||||
|
diffHours := int(diffMs.Hours()) % 24
|
||||||
|
diffMinutes := int(diffMs.Minutes()) % 60
|
||||||
|
|
||||||
|
if diffDays > 0 {
|
||||||
|
dayWord := "dní"
|
||||||
|
if diffDays == 1 {
|
||||||
|
dayWord = "den"
|
||||||
|
} else if diffDays >= 2 && diffDays <= 4 {
|
||||||
|
dayWord = "dny"
|
||||||
|
}
|
||||||
|
totalDurationStr = fmt.Sprintf("%d %s, %d h %d min", diffDays, dayWord, diffHours, diffMinutes)
|
||||||
|
} else {
|
||||||
|
totalDurationStr = fmt.Sprintf("%d h %d min", diffHours, diffMinutes)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vypsání informací o řidiči a vozidle
|
||||||
|
htmlContent.WriteString(`<div class="section">
|
||||||
|
<div class="section-title">Informace o řidiči a vozidle</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Řidič</span>
|
||||||
|
<span class="value">` + entry.Name + `</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Vozidlo</span>
|
||||||
|
<span class="value">` + entry.Vehicle + `</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`)
|
||||||
|
|
||||||
|
// Vypsání informací o trase
|
||||||
|
htmlContent.WriteString(`<div class="section">
|
||||||
|
<div class="section-title">Informace o trase</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Cíl cesty</span>
|
||||||
|
<span class="value">` + entry.Destination + `</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Účel jízdy</span>
|
||||||
|
<span class="value">` + entry.Purpose + `</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`)
|
||||||
|
|
||||||
|
// Vypsání informací o času
|
||||||
|
htmlContent.WriteString(`<div class="section">
|
||||||
|
<div class="section-title">Časové údaje</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Datum a čas odjezdu</span>
|
||||||
|
<span class="value">` + formattedDateStart + `, ` + entry.TimeStart + `</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Datum a čas příjezdu</span>
|
||||||
|
<span class="value">` + formattedDateEnd + `, ` + entry.TimeEnd + `</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight">
|
||||||
|
<span class="label">Celková doba jízdy</span>
|
||||||
|
<span class="value">` + totalDurationStr + `</span>
|
||||||
|
</div>
|
||||||
|
</div>`)
|
||||||
|
|
||||||
|
// Vypsání informací o kilometrech
|
||||||
|
htmlContent.WriteString(`<div class="section">
|
||||||
|
<div class="section-title">Stav tachometru</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Stav na začátku</span>
|
||||||
|
<span class="value">` + fmt.Sprintf("%d km", entry.KmStart) + `</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Stav na konci</span>
|
||||||
|
<span class="value">` + fmt.Sprintf("%d km", entry.KmEnd) + `</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="highlight">
|
||||||
|
<span class="label">Celkem ujeto</span>
|
||||||
|
<span class="value">` + fmt.Sprintf("%d km", entry.KmEnd-entry.KmStart) + `</span>
|
||||||
|
</div>
|
||||||
|
</div>`)
|
||||||
|
|
||||||
if entry.Coordinates != nil {
|
if entry.Coordinates != nil {
|
||||||
fmt.Fprintf(&htmlContent, `<p><span class="label">GPS souřadnice:</span> %s, %s</p>`, entry.Coordinates.Lat, entry.Coordinates.Lng)
|
htmlContent.WriteString(`<div class="section">
|
||||||
fmt.Fprintf(&htmlContent, `<p><a href="https://mapy.cz/zakladni?x=%s&y=%s&z=15" target="_blank">Zobrazit na mapě</a></p>`, entry.Coordinates.Lng, entry.Coordinates.Lat)
|
<div class="section-title">GPS Souřadnice</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="label">Souřadnice</span>
|
||||||
|
<span class="value">` + entry.Coordinates.Lat + `, ` + entry.Coordinates.Lng + `</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="https://mapy.cz/zakladni?x=` + entry.Coordinates.Lng + `&y=` + entry.Coordinates.Lat + `&z=15" target="_blank" class="map-link">
|
||||||
|
<i class="fas fa-map-marker-alt"></i> Zobrazit na mapě
|
||||||
|
</a>
|
||||||
|
</div>`)
|
||||||
}
|
}
|
||||||
|
|
||||||
htmlContent.WriteString(`
|
htmlContent.WriteString(`
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
© 2025 Poppe + Potthoff - Automaticky generovaný email
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user