Add files via upload

index.html

@@ -86,7 +86,6 @@
       <!-- Form -->
       <div class="p-6">
         <form id="tripForm" class="space-y-5">
-          <div class="grid md:grid-cols-2 gap-5">
           <div class="space-y-2">
             <label for="name" class="block text-sm font-medium text-gray-700">Jméno řidiče</label>
             <div class="relative">
@@ -99,12 +98,72 @@
           </div>
           
           <div class="space-y-2">
-              <label for="date" class="block text-sm font-medium text-gray-700">Datum cesty</label>
+            <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 - SPZ">VW Caddy - SPZ</option>
+                <option value="VW Golf - SPZ">VW Golf - SPZ</option>
+                <option value="Škoda Fabia - SPZ">Škoda Fabia – SPZ</option>
+                <option value="BMW 218d č. 1 - SPZ">BMW 218d č. 1 – SPZ</option>
+                <option value="BMW 218d č. 2 - SPZ">BMW 218d č. 2 – SPZ</option>
+                <option value="Škoda Superb - SPZ">Škoda Superb - SPZ</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>
+          
+          <!-- 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>
               <div class="relative">
                 <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" name="date" required
+                <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">
+              </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">
+              </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>
+              <div class="relative">
+                <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">
+              </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">
               </div>
             </div>
@@ -174,10 +233,14 @@
           
           <div class="space-y-5 pt-3">
             <div class="p-4 bg-gray-50 rounded-lg">
-              <div class="flex justify-between items-center">
+              <div class="flex justify-between items-center mb-2">
                 <span class="text-sm text-gray-700">Celkem ujetá vzdálenost:</span>
                 <span id="totalDistance" class="font-bold text-brand-blue">0 km</span>
               </div>
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-gray-700">Celková doba jízdy:</span>
+                <span id="totalTime" class="font-bold text-brand-blue">0:00</span>
+              </div>
             </div>
           
           <div class="pt-2">
@@ -224,15 +287,30 @@
     const messageText = document.getElementById('messageText');
     const messageIcon = document.getElementById('messageIcon');
     const totalDistance = document.getElementById('totalDistance');
+    const totalTime = document.getElementById('totalTime');
     const kmStart = document.getElementById('km_start');
     const kmEnd = document.getElementById('km_end');
     const destinationInput = document.getElementById('destination');
     const suggestionsList = document.getElementById('suggest-list');
     const destinationLat = document.getElementById('destination-lat');
     const destinationLon = document.getElementById('destination-lon');
+    const timeStart = document.getElementById('time_start');
+    const timeEnd = document.getElementById('time_end');
+    const dateStart = document.getElementById('date_start');
+    const dateEnd = document.getElementById('date_end');
     
     let debounceTimer;
     
+    // 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);
@@ -327,8 +405,49 @@
       }
     }
     
+    // 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) => {
@@ -342,10 +461,23 @@
         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: document.getElementById('date').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,
@@ -362,7 +494,7 @@
       try {
         showMessage('Odesílání záznamu...', 'info');
         
-        const res = await fetch('http://localhost:8080/submit', {
+        const res = await fetch('/submit', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(data),
@@ -370,8 +502,13 @@
         
         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');

main.go

@@ -16,8 +16,12 @@ import (
 
 type TripEntry struct {
 	Name        string     `json:"name"`
+	Vehicle     string     `json:"vehicle"`
 	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"`
 	KmStart     int        `json:"km_start"`
 	KmEnd       int        `json:"km_end"`
@@ -104,7 +108,7 @@ func handleSubmit(w http.ResponseWriter, r *http.Request) {
 		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)
 		w.WriteHeader(http.StatusBadRequest)
 		w.Write([]byte(`{"error":"Missing required fields"}`))
@@ -118,20 +122,25 @@ func handleSubmit(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// Formátování data do českého formátu
-	parsedDate, err := time.Parse("2006-01-02", entry.Date)
-	if err == nil {
+	// Formátování dat do českého formátu
 	czechMonths := []string{
 		"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)
+
+	// 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)
 	}
 
-	err = sendEmail(entry)
+	// 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 {
 		log.Printf("Chyba při odesílání emailu: %v", err)
 		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"}`))
 }
 
-func sendEmail(entry TripEntry) error {
-	smtpHost := "mail.pp-kunovice.cz"
+func sendEmail(entry TripEntry, parsedDateStart, parsedDateEnd time.Time, czechMonths []string) error {
+	smtpHost := "smtp.gmail.com"
 	smtpPort := 465
-	sender := "sluzebnicek@pp-kunovice.cz"
-	password := "7g}qznB5bj"
-	recipient := "sluzebnicek@pp-kunovice.cz"
+	sender := "contact.dvorak@gmail.com"
+	password := "pnhkcsahbwsbpyqj"
+	recipient := "contact.dvorak@gmail.com"
 
 	m := gomail.NewMessage()
 	m.SetHeader("From", sender)
@@ -158,58 +167,280 @@ func sendEmail(entry TripEntry) error {
 	var htmlContent strings.Builder
 
 	htmlContent.WriteString(`
+    <!DOCTYPE html>
     <html>
     <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>
-        body {
-          font-family: Arial, sans-serif;
-          background-color: #f9f9f9;
-          padding: 20px;
-        }
+        @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 {
+          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+          background-color: #f0f2f5;
+          margin: 0;
+          padding: 0;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
+        
         .container {
-          background-color: #ffffff;
-          border: 1px solid #ddd;
-          border-radius: 8px;
-          padding: 20px;
           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;
-          border-bottom: 2px solid #3498db;
-          padding-bottom: 10px;
+        
+        .header {
+          background-color: #004990;
+          color: white;
+          padding: 20px 25px;
+          text-align: center;
         }
-        p {
-          font-size: 16px;
-          color: #34495e;
-          line-height: 1.5;
+        
+        .header h1 {
+          margin: 0;
+          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 {
-          font-weight: bold;
-          color: #2980b9;
+          font-weight: 600;
+          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>
     </head>
     <body>
       <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)
-	fmt.Fprintf(&htmlContent, `<p><span class="label">Kam:</span> %s</p>`, entry.Destination)
-	fmt.Fprintf(&htmlContent, `<p><span class="label">Datum:</span> %s</p>`, entry.Date)
-	fmt.Fprintf(&htmlContent, `<p><span class="label">Účel jízdy:</span> %s</p>`, entry.Purpose)
-	fmt.Fprintf(&htmlContent, `<p><span class="label">Kilometry na začátku:</span> %d km</p>`, entry.KmStart)
-	fmt.Fprintf(&htmlContent, `<p><span class="label">Kilometry na konci:</span> %d km</p>`, entry.KmEnd)
-	fmt.Fprintf(&htmlContent, `<p><span class="label">Ujeté kilometry:</span> %d km</p>`, entry.KmEnd-entry.KmStart)
+	// Formátování dat a časů pro zobrazení
+	formattedDateStart := ""
+	if parsedDateStart.IsZero() == false {
+		monthNameStart := czechMonths[parsedDateStart.Month()-1]
+		formattedDateStart = fmt.Sprintf("%d. %s %d", parsedDateStart.Day(), monthNameStart, parsedDateStart.Year())
+	} else {
+		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 {
-		fmt.Fprintf(&htmlContent, `<p><span class="label">GPS souřadnice:</span> %s, %s</p>`, entry.Coordinates.Lat, entry.Coordinates.Lng)
-		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)
+		htmlContent.WriteString(`<div class="section">
+		<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(`
         </div>
+        <div class="footer">
+          &copy; 2025 Poppe + Potthoff - Automaticky generovaný email
+        </div>
+      </div>
     </body>
     </html>
     `)