map with selection + trail

web/src/components/MapView.jsx

@@ -1,52 +1,54 @@
 import { useEffect, useRef } from 'react';
 import L from 'leaflet';
+import { api } from '../api.js';
 
-export default function MapView({ members, groups, sos }) {
+export default function MapView({ members, groups, sos, selected, onSelect }) {
   const elRef = useRef(null);
   const mapRef = useRef(null);
   const markersRef = useRef(new Map());
+  const trailRef = useRef(null);
   const didFit = useRef(false);
 
   useEffect(() => {
-    const map = L.map(elRef.current, { center: [48.8566, 2.3522], zoom: 12 });
+    const map = L.map(elRef.current).setView([48.8566, 2.3522], 12);
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       maxZoom: 19,
     }).addTo(map);
     mapRef.current = map;
-    return () => map.remove();
+    return () => { map.remove(); mapRef.current = null; };
   }, []);
 
   useEffect(() => {
     const map = mapRef.current;
     if (!map) return;
 
-    const sosMembers = new Set(sos.filter((a) => a.state !== 'resolved').map((a) => a.member_id));
+    const sosIds = new Set(sos.filter((a) => a.state !== 'resolved').map((a) => a.member_id));
     const colorOf = (gid) => groups.find((g) => g.id === gid)?.color || '#64748b';
     const positioned = members.filter((m) => m.lat != null && m.lng != null);
     const seen = new Set();
 
     for (const m of positioned) {
       seen.add(m.id);
-      const isSos = sosMembers.has(m.id);
+      const cls = `pin ${m.status === 'online' ? 'online' : 'offline'} ${sosIds.has(m.id) ? 'sos' : ''}`;
       const icon = L.divIcon({
-        className: 'marker-wrap',
-        html: `<div class="marker ${m.status} ${isSos ? 'sos' : ''}" style="--c:${colorOf(m.group_id)}"></div>`,
-        iconSize: [16, 16],
-        iconAnchor: [8, 8],
+        className: 'pin-wrap',
+        html: `<div class="${cls}" style="background:${colorOf(m.group_id)}">${m.name.slice(0, 2).toUpperCase()}</div>`,
+        iconSize: [26, 26],
+        iconAnchor: [13, 13],
       });
       let mk = markersRef.current.get(m.id);
       if (!mk) {
         mk = L.marker([m.lat, m.lng], { icon }).addTo(map);
+        mk.on('click', () => onSelect(m.id));
         markersRef.current.set(m.id, mk);
       } else {
         mk.setLatLng([m.lat, m.lng]);
         mk.setIcon(icon);
       }
       mk.bindPopup(
-        `<b>${m.name}</b>${m.callsign ? ` · ${m.callsign}` : ''}<br/>` +
-        `${m.group_name || 'no group'} · ${m.status}<br/>` +
-        `battery ${m.battery != null ? m.battery + '%' : '–'}<br/>` +
+        `<b>${m.name}</b>${m.callsign ? ` · ${m.callsign}` : ''} · ${m.group_name || 'no group'}<br/>` +
+        `${m.status} · battery ${m.battery != null ? m.battery + '%' : '–'}<br/>` +
         `${m.lat.toFixed(5)}, ${m.lng.toFixed(5)}`
       );
     }
@@ -60,7 +62,22 @@ export default function MapView({ members, groups, sos }) {
       didFit.current = true;
       map.fitBounds(L.latLngBounds(positioned.map((m) => [m.lat, m.lng])).pad(0.3));
     }
-  }, [members, groups, sos]);
+  }, [members, groups, sos, onSelect]);
+
+  // GPS trail of the selected member
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    trailRef.current?.remove();
+    trailRef.current = null;
+    if (!selected) return;
+    let cancelled = false;
+    api.get(`/members/${selected}/trail`).then((rows) => {
+      if (cancelled || rows.length < 2) return;
+      trailRef.current = L.polyline(rows.map((r) => [r.lat, r.lng]), { color: '#4fc3f7', weight: 3, opacity: 0.7 }).addTo(map);
+    }).catch(() => {});
+    return () => { cancelled = true; };
+  }, [selected]);
 
   return <div ref={elRef} className="map" />;
 }