v0.2 fleet overhaul

templates/dashboard.html

@@ -98,6 +98,15 @@
 
     </div>
 
+    <!-- Fleet Map -->
+    <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6 mb-8">
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Fleet Map</h2>
+            <span class="text-sm text-gray-500 dark:text-gray-400">Deployed units</span>
+        </div>
+        <div id="fleet-map" class="w-full h-96 rounded-lg"></div>
+    </div>
+
     <!-- Fleet Status Section with Tabs -->
     <div class="rounded-xl shadow-lg bg-white dark:bg-slate-800 p-6">
 
@@ -132,7 +141,10 @@
         </div>
 
         <!-- Tab Content Target -->
-        <div id="fleet-table" class="space-y-2">
+        <div id="fleet-table" class="space-y-2"
+             hx-get="/dashboard/active"
+             hx-trigger="load"
+             hx-swap="innerHTML">
             <p class="text-gray-500 dark:text-gray-400">Loading fleet data...</p>
         </div>
 
@@ -204,10 +216,116 @@ function updateDashboard(event) {
             alertsList.innerHTML = alertsHtml;
         }
 
+        // ===== Update Fleet Map =====
+        updateFleetMap(data);
+
     } catch (err) {
         console.error("Dashboard update error:", err);
     }
 }
+
+// Handle tab switching
+document.addEventListener('DOMContentLoaded', function() {
+    const tabButtons = document.querySelectorAll('.tab-button');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Remove active-tab class from all buttons
+            tabButtons.forEach(btn => btn.classList.remove('active-tab'));
+            // Add active-tab class to clicked button
+            this.classList.add('active-tab');
+        });
+    });
+
+    // Initialize fleet map
+    initFleetMap();
+});
+
+let fleetMap = null;
+let fleetMarkers = [];
+
+function initFleetMap() {
+    // Initialize the map centered on the US (can adjust based on your deployment area)
+    fleetMap = L.map('fleet-map').setView([39.8283, -98.5795], 4);
+
+    // Add OpenStreetMap tiles
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© OpenStreetMap contributors',
+        maxZoom: 18
+    }).addTo(fleetMap);
+}
+
+function updateFleetMap(data) {
+    if (!fleetMap) return;
+
+    // Clear existing markers
+    fleetMarkers.forEach(marker => fleetMap.removeLayer(marker));
+    fleetMarkers = [];
+
+    // Get deployed units with location data
+    const deployedUnits = Object.entries(data.units).filter(([_, u]) => u.deployed && u.location);
+
+    if (deployedUnits.length === 0) {
+        return;
+    }
+
+    const bounds = [];
+
+    deployedUnits.forEach(([id, unit]) => {
+        const coords = parseLocation(unit.location);
+        if (coords) {
+            const [lat, lon] = coords;
+
+            // Create marker with custom color based on status
+            const markerColor = unit.status === 'OK' ? 'green' : unit.status === 'Pending' ? 'orange' : 'red';
+
+            const marker = L.circleMarker([lat, lon], {
+                radius: 8,
+                fillColor: markerColor,
+                color: '#fff',
+                weight: 2,
+                opacity: 1,
+                fillOpacity: 0.8
+            }).addTo(fleetMap);
+
+            // Add popup with unit info
+            marker.bindPopup(`
+                <div class="p-2">
+                    <h3 class="font-bold text-lg">${id}</h3>
+                    <p class="text-sm">Status: <span style="color: ${markerColor}">${unit.status}</span></p>
+                    <p class="text-sm">Type: ${unit.device_type}</p>
+                    ${unit.note ? `<p class="text-sm text-gray-600">${unit.note}</p>` : ''}
+                    <a href="/unit/${id}" class="text-blue-600 hover:underline text-sm">View Details →</a>
+                </div>
+            `);
+
+            fleetMarkers.push(marker);
+            bounds.push([lat, lon]);
+        }
+    });
+
+    // Fit map to show all markers
+    if (bounds.length > 0) {
+        fleetMap.fitBounds(bounds, { padding: [50, 50] });
+    }
+}
+
+function parseLocation(location) {
+    if (!location) return null;
+
+    // Try to parse as "lat,lon" format
+    const parts = location.split(',').map(s => s.trim());
+    if (parts.length === 2) {
+        const lat = parseFloat(parts[0]);
+        const lon = parseFloat(parts[1]);
+        if (!isNaN(lat) && !isNaN(lon)) {
+            return [lat, lon];
+        }
+    }
+
+    // TODO: Add geocoding support for address strings
+    return null;
+}
 </script>
 
 {% endblock %}