first commit

2025-11-14 09:58:21 +00:00
commit bf10598861
4 changed files with 816 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Location Test</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <style>
+        body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
+        #map { height: 100vh; width: 100%; }
+        .info { 
+            position: absolute; 
+            top: 10px; 
+            right: 10px; 
+            background: white; 
+            padding: 15px; 
+            border-radius: 8px; 
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
+            z-index: 1000;
+            min-width: 200px;
+        }
+        .toggle-btn {
+            margin-top: 15px;
+            padding: 10px 15px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: bold;
+            width: 100%;
+            transition: all 0.3s ease;
+            font-size: 14px;
+        }
+        .toggle-btn.active {
+            background: #4CAF50;
+            color: white;
+        }
+        .toggle-btn.inactive {
+            background: #f44336;
+            color: white;
+        }
+        .toggle-btn:hover {
+            opacity: 0.8;
+        }
+        .status-indicator {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-right: 6px;
+        }
+        .status-indicator.active {
+            background: #4CAF50;
+            animation: pulse 2s infinite;
+        }
+        .status-indicator.inactive {
+            background: #999;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <div class="info">
+        <h3>📍 Location Tracker</h3>
+        <div id="status">Lade...</div>
+        <button id="toggleBtn" class="toggle-btn active" onclick="toggleAutoRefresh()">
+            <span class="status-indicator active"></span>
+            Auto-Refresh: AN
+        </button>
+    </div>
+
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        // Karte initialisieren (München)
+        const map = L.map('map').setView([48.1351, 11.5820], 12);
+        
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap'
+        }).addTo(map);
+
+        // API URL - anpassen an deine Domain
+        const API_URL = 'https://n8n.unixweb.eu/webhook/location';
+
+        // Auto-Refresh State
+        let autoRefreshEnabled = true;
+        let refreshInterval = null;
+
+        async function loadLocations() {
+            try {
+                const response = await fetch(API_URL);
+                const data = await response.json();
+                
+                document.getElementById('status').innerHTML = 
+                    `Punkte: ${data.total_points || 0}<br>` +
+                    `Status: ${data.success ? '✅ Verbunden' : '❌ Fehler'}`;
+                
+                if (data.current) {
+                    const loc = data.current;
+                    L.marker([loc.latitude, loc.longitude])
+                        .addTo(map)
+                        .bindPopup(`${loc.marker_label}<br>${loc.display_time}`)
+                        .openPopup();
+                    
+                    map.setView([loc.latitude, loc.longitude], 15);
+                    
+                    // Historie als Linie
+                    if (data.history && data.history.length > 1) {
+                        const coords = data.history.map(h => [h.latitude, h.longitude]);
+                        L.polyline(coords, {color: 'blue', weight: 3}).addTo(map);
+                    }
+                }
+            } catch (error) {
+                document.getElementById('status').innerHTML = '❌ Verbindungsfehler';
+                console.error(error);
+            }
+        }
+
+        function toggleAutoRefresh() {
+            autoRefreshEnabled = !autoRefreshEnabled;
+            const btn = document.getElementById('toggleBtn');
+            const indicator = btn.querySelector('.status-indicator');
+            
+            if (autoRefreshEnabled) {
+                // Aktiviere Auto-Refresh
+                btn.className = 'toggle-btn active';
+                btn.innerHTML = '<span class="status-indicator active"></span>Auto-Refresh: AN';
+                startAutoRefresh();
+            } else {
+                // Deaktiviere Auto-Refresh
+                btn.className = 'toggle-btn inactive';
+                btn.innerHTML = '<span class="status-indicator inactive"></span>Auto-Refresh: AUS';
+                stopAutoRefresh();
+            }
+        }
+
+        function startAutoRefresh() {
+            if (refreshInterval) clearInterval(refreshInterval);
+            refreshInterval = setInterval(loadLocations, 5000);
+        }
+
+        function stopAutoRefresh() {
+            if (refreshInterval) {
+                clearInterval(refreshInterval);
+                refreshInterval = null;
+            }
+        }
+
+        // Initial laden
+        loadLocations();
+        
+        // Auto-refresh starten
+        startAutoRefresh();
+    </script>
+</body>
+</html>
+