Logan
44 lines
1.8 KiB
TypeScript
44 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { useNodes } from "@/lib/useNodes";
|
|
import { useActiveCalls } from "@/lib/useCalls";
|
|
import { useActiveIncidents } from "@/lib/useIncidents";
|
|
|
|
// Leaflet is browser-only — must be dynamically imported with no SSR
|
|
const MapView = dynamic(() => import("@/components/MapView"), { ssr: false });
|
|
|
|
export default function MapPage() {
|
|
const { nodes, loading } = useNodes();
|
|
const activeCalls = useActiveCalls();
|
|
const incidents = useActiveIncidents();
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-xl font-bold text-white font-mono">Map</h1>
|
|
<div className="flex items-center gap-4 text-xs font-mono text-gray-400">
|
|
<span><span className="text-green-400">●</span> Online</span>
|
|
<span><span className="text-orange-400 animate-pulse">●</span> Recording</span>
|
|
<span><span className="text-indigo-400">●</span> Unconfigured</span>
|
|
<span><span className="text-gray-600">●</span> Offline</span>
|
|
<span className="border-l border-gray-700 pl-4"><span className="text-red-500">■</span> Fire</span>
|
|
<span><span className="text-blue-500">■</span> Police</span>
|
|
<span><span className="text-yellow-500">■</span> EMS</span>
|
|
<span><span className="text-orange-500">■</span> Accident</span>
|
|
</div>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-96 text-gray-600 font-mono text-sm">
|
|
Loading map…
|
|
</div>
|
|
) : (
|
|
<div style={{ height: "calc(100vh - 160px)" }}>
|
|
<MapView nodes={nodes} activeCalls={activeCalls} incidents={incidents} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|