"use client";
import { useEffect, useMemo, useState } from "react";
import {
MapContainer,
Marker,
Polygon,
Popup,
TileLayer,
useMap,
} from "react-leaflet";
import L from "leaflet";
import type { Site, VehicleMaster } from "@/lib/fleet/types";
import { getVehicleLatLng, isStale } from "@/lib/fleet/geo";
import { EVENING_THRESHOLDS } from "@/lib/fleet/evening";
import Link from "next/link";
const markerIcon = L.divIcon({
className: "",
html: ``,
iconSize: [12, 12],
iconAnchor: [6, 6],
});
const staleIcon = L.divIcon({
className: "",
html: ``,
iconSize: [12, 12],
iconAnchor: [6, 6],
});
function FitBounds({
vehicles,
sites,
}: {
vehicles: VehicleMaster[];
sites: Site[];
}) {
const map = useMap();
useEffect(() => {
const points: [number, number][] = [];
for (const v of vehicles) {
if (isStale(v.location.properties.timestamp, EVENING_THRESHOLDS.staleMinutes)) {
continue;
}
const { lat, lng } = getVehicleLatLng(v);
points.push([lat, lng]);
}
for (const s of sites) {
points.push([s.center.latitude, s.center.longitude]);
}
if (points.length) {
map.fitBounds(points, { padding: [28, 28], maxZoom: 14 });
}
}, [map, vehicles, sites]);
return null;
}
export function FleetMap({
vehicles,
sites,
height = 360,
}: {
vehicles: VehicleMaster[];
sites: Site[];
height?: number;
}) {
const [ready, setReady] = useState(false);
useEffect(() => setReady(true), []);
const center = useMemo(() => {
const s = sites[0];
return {
lat: s?.center.latitude ?? 48.14,
lng: s?.center.longitude ?? 11.55,
};
}, [sites]);
if (!ready) {
return (
Karte wird geladen…
);
}
return (
{sites.flatMap((site) =>
site.zones.map((zone) => (
{site.shortName} · {zone.name}
)),
)}
{vehicles.map((v) => {
const stale = isStale(
v.location.properties.timestamp,
EVENING_THRESHOLDS.staleMinutes,
);
if (stale) return null;
const { lat, lng } = getVehicleLatLng(v);
return (
{v.licensePlate}
{v.model}
Zur Akte →
);
})}
);
}