PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix Marker Cluster & MissionContent

Browse Source
This commit is contained in:
nocnico
2025-05-22 16:31:24 +02:00
parent 05e74077a5
commit eb86b8407e
2 changed files with 143 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
apps/dispatch/app/_components/map/_components/MarkerCluster.tsx
View File

@@ -1,21 +1,10 @@
import {
ConnectedAircraft,
HpgValidationState,
Mission,
Station,
} from "@repo/db";
import { ConnectedAircraft, HpgValidationState, Mission, Station } from "@repo/db";
import { useQuery } from "@tanstack/react-query";
import { SmartPopup, useSmartPopup } from "_components/SmartPopup";
import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
import { useMapStore } from "_store/mapStore";
import {
FMS_STATUS_COLORS,
FMS_STATUS_TEXT_COLORS,
} from "_components/map/AircraftMarker";
import {
MISSION_STATUS_COLORS,
MISSION_STATUS_TEXT_COLORS,
} from "_components/map/MissionMarkers";
import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "_components/map/AircraftMarker";
import { MISSION_STATUS_COLORS, MISSION_STATUS_TEXT_COLORS } from "_components/map/MissionMarkers";
import { cn } from "helpers/cn";
import { checkSimulatorConnected } from "helpers/simulatorConnected";
import { getConnectedAircraftsAPI } from "querys/aircrafts";
@@ -31,9 +20,7 @@ const PopupContent = ({
missions: Mission[];
}) => {
const { anchor } = useSmartPopup();
const { setOpenAircraftMarker, setOpenMissionMarker } = useMapStore(
(state) => state,
);
const { setOpenAircraftMarker, setOpenMissionMarker } = useMapStore((state) => state);
const map = useMap();
let borderColor = "";
@@ -46,9 +33,7 @@ const PopupContent = ({
}
} else if (anchor.includes("bottom")) {
if (aircrafts.length > 0) {
borderColor =
FMS_STATUS_TEXT_COLORS[aircrafts[aircrafts.length - 1]!.fmsStatus] ||
"white";
borderColor = FMS_STATUS_TEXT_COLORS[aircrafts[aircrafts.length - 1]!.fmsStatus] || "white";
} else if (missions.length > 0) {
borderColor = MISSION_STATUS_TEXT_COLORS[missions[0]!.state];
}
@@ -64,16 +49,10 @@ const PopupContent = ({
anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
)}
style={{
borderLeft: anchor.includes("left")
? `3px solid ${borderColor}`
: "",
borderRight: anchor.includes("right")
? `3px solid ${borderColor}`
: "",
borderLeft: anchor.includes("left") ? `3px solid ${borderColor}` : "",
borderRight: anchor.includes("right") ? `3px solid ${borderColor}` : "",
borderTop: anchor.includes("top") ? `3px solid ${borderColor}` : "",
borderBottom: anchor.includes("bottom")
? `3px solid ${borderColor}`
: "",
borderBottom: anchor.includes("bottom") ? `3px solid ${borderColor}` : "",
}}
/>
{missions.map((mission) => {
@@ -89,9 +68,7 @@ const PopupContent = ({
return (
<div
key={mission.id}
className={cn(
"relative inline-flex items-center gap-2 text-nowrap w-full",
)}
className={cn("relative inline-flex items-center gap-2 text-nowrap w-full")}
style={{
backgroundColor: markerColor,
cursor: "pointer",
@@ -166,8 +143,7 @@ export const MarkerCluster = () => {
queryFn: getConnectedAircraftsAPI,
});
const dispatcherConnected =
useDispatchConnectionStore((s) => s.status) === "connected";
const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
const { data: missions = [] } = useQuery({
queryKey: ["missions"],
queryFn: () =>
@@ -183,20 +159,25 @@ export const MarkerCluster = () => {
return missions;
}, [missions, dispatcherConnected]);
const [cluster, setCluster] = useState<
{
// Track zoom level in state
const [zoom, setZoom] = useState(() => map.getZoom());
useEffect(() => {
const handleZoom = () => setZoom(map.getZoom());
map.on("zoomend", handleZoom);
return () => {
map.off("zoomend", handleZoom);
};
}, [map]);
const clusters = useMemo(() => {
if (zoom >= 8) return [];
let newCluster: {
aircrafts: (ConnectedAircraft & { Station: Station })[];
missions: Mission[];
lat: number;
lng: number;
}[]
>([]);
// Compute clusters based on zoom and data using useMemo
const clusters = useMemo(() => {
const zoom = map.getZoom();
if (zoom >= 8) return [];
let newCluster: typeof cluster = [];
}[] = [];
aircrafts
?.filter((a) => checkSimulatorConnected(a.lastHeartbeat))
.forEach((aircraft) => {
@@ -265,10 +246,8 @@ export const MarkerCluster = () => {
const missionPos = c.missions.map((m) => [m.addressLat, m.addressLng]);
const allPos = [...aircraftPos, ...missionPos];
const avgLat =
allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
const avgLng =
allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
const avgLat = allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
const avgLng = allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
return {
...c,
@@ -278,29 +257,11 @@ export const MarkerCluster = () => {
});
return clusterWithAvgPos;
}, [aircrafts, filteredMissions, map]);
// Update clusters on zoom change
useEffect(() => {
const handleZoom = () => {
const zoom = map.getZoom();
if (zoom >= 8) {
setCluster([]);
} else {
setCluster(clusters);
}
};
map.on("zoomend", handleZoom);
// Set initial clusters
handleZoom();
return () => {
map.off("zoomend", handleZoom);
};
}, [map, clusters]);
}, [aircrafts, filteredMissions, zoom]);
return (
<>
{cluster.map((c, i) => (
{clusters.map((c, i) => (
<SmartPopup
options={{
ignoreMarker: true,

213
apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx
View File

@@ -187,31 +187,36 @@ const Einsatzdetails = ({
</span>
</button>
)}
{hpgNeedsAttention && (
<button
className="btn btn-sm btn-info btn-outline flex-3"
onClick={() => sendAlertMutation.mutate(mission.id)}
disabled
>
<span className="flex items-center gap-2">
{mission.hpgValidationState === HpgValidationState.PENDING && (
<div>
<span className="loading loading-spinner loading-md"></span> HPG-Validierung
läuft...
</div>
)}
{mission.hpgValidationState === HpgValidationState.HPG_BUSY && "HPG-Client busy"}
{mission.hpgValidationState === HpgValidationState.HPG_DISCONNECT &&
"HPG-Client nicht verbunden"}
{mission.hpgValidationState === HpgValidationState.INVALID &&
"HPG-Client fehlerhaft"}
{mission.hpgValidationState === HpgValidationState.HPG_INVALID_MISSION &&
"Fehlerhafte HPG-Mission"}
</span>
</button>
)}
{!ignoreHpg &&
hpgNeedsAttention &&
mission.hpgValidationState !== HpgValidationState.POSITION_AMANDED && (
<button
className="btn btn-sm btn-info btn-outline flex-3"
onClick={() => sendAlertMutation.mutate(mission.id)}
disabled
>
<span className="flex items-center gap-2">
{mission.hpgValidationState === HpgValidationState.PENDING && (
<div>
<span className="loading loading-spinner loading-md"></span> HPG-Validierung
läuft...
</div>
)}
{mission.hpgValidationState === HpgValidationState.HPG_BUSY &&
"HPG-Client busy"}
{mission.hpgValidationState === HpgValidationState.HPG_DISCONNECT &&
"HPG-Client nicht verbunden"}
{mission.hpgValidationState === HpgValidationState.INVALID &&
"HPG-Client fehlerhaft"}
{mission.hpgValidationState === HpgValidationState.HPG_INVALID_MISSION &&
"Fehlerhafte HPG-Mission"}
{mission.hpgValidationState === HpgValidationState.NOT_VALIDATED &&
"HPG-Validierung nicht angestoßen"}
</span>
</button>
)}
{mission.hpgValidationState === HpgValidationState.POSITION_AMANDED && (
{!ignoreHpg && mission.hpgValidationState === HpgValidationState.POSITION_AMANDED && (
<button
className="btn btn-sm btn-warning btn-outline flex-3"
onClick={() => sendAlertMutation.mutate(mission.id)}
@@ -339,25 +344,31 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
},
});
const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
return (
<div className="p-4 text-base-content">
<div className="flex items-center w-full justify-between">
<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
<div className="flex items-center w-full justify-between mb-2">
<h2 className="flex items-center gap-2 text-lg font-bold">
<SmartphoneNfc /> Rettungsmittel
</h2>
<div
className="tooltip tooltip-primary tooltip-left font-semibold"
data-tip="Einsatz erneut alarmieren"
>
<button
className="btn btn-xs btn-primary btn-outline"
onClick={() => {
sendAlertMutation.mutate({ id: mission.id });
}}
>
<BellRing size={16} />
</button>
</div>
{mission.state !== "draft" && dispatcherConnected && (
<div className="space-x-2">
<div
className="tooltip tooltip-primary tooltip-left font-semibold"
data-tip="Einsatz erneut alarmieren"
>
<button
className="btn btn-xs btn-primary btn-outline"
onClick={() => {
sendAlertMutation.mutate({ id: mission.id });
}}
>
<BellRing size={16} />
</button>
</div>
</div>
)}
</div>
<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
{missionStations?.map((station, index) => {
@@ -392,66 +403,70 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
);
})}
</ul>
<div className="divider mt-0 mb-0" />
<div className="flex items-center gap-2">
{/* TODO: make it a small multiselect */}
<select
className="select select-sm select-primary select-bordered flex-1"
onChange={(e) => {
const selected = allStations?.find((s) => s.id.toString() === e.target.value);
if (selected) {
setSelectedStation(selected);
} else {
setSelectedStation(e.target.value as "ambulance" | "police" | "firebrigade");
}
}}
value={typeof selectedStation === "string" ? selectedStation : selectedStation?.id}
>
{allStations
?.filter((s) => !mission.missionStationIds.includes(s.id))
?.map((station) => (
<option
key={station.id}
value={station.id}
onClick={() => {
setSelectedStation(station);
}}
>
{station.bosCallsign}
</option>
))}
<option disabled>Fahrzeuge:</option>
<option value="firebrigade">Feuerwehr</option>
<option value="ambulance">RTW</option>
<option value="police">Polizei</option>
</select>
<button
className="btn btn-sm btn-primary btn-outline"
onClick={async () => {
if (typeof selectedStation === "string") {
toast.error("Fahrzeuge werden aktuell nicht unterstützt");
} else {
if (!selectedStation?.id) return;
await updateMissionMutation.mutateAsync({
id: mission.id,
missionEdit: {
missionStationIds: {
push: selectedStation?.id,
},
},
});
await sendAlertMutation.mutate({
id: mission.id,
stationId: selectedStation?.id ?? 0,
});
}
}}
>
<span className="text-base-content flex items-center gap-2">
<BellRing size={16} /> Nachalarmieren
</span>
</button>
</div>
{dispatcherConnected && (
<div>
<div className="divider mt-0 mb-0" />
<div className="flex items-center gap-2">
{/* TODO: make it a small multiselect */}
<select
className="select select-sm select-primary select-bordered flex-1"
onChange={(e) => {
const selected = allStations?.find((s) => s.id.toString() === e.target.value);
if (selected) {
setSelectedStation(selected);
} else {
setSelectedStation(e.target.value as "ambulance" | "police" | "firebrigade");
}
}}
value={typeof selectedStation === "string" ? selectedStation : selectedStation?.id}
>
{allStations
?.filter((s) => !mission.missionStationIds.includes(s.id))
?.map((station) => (
<option
key={station.id}
value={station.id}
onClick={() => {
setSelectedStation(station);
}}
>
{station.bosCallsign}
</option>
))}
<option disabled>Fahrzeuge:</option>
<option value="firebrigade">Feuerwehr</option>
<option value="ambulance">RTW</option>
<option value="police">Polizei</option>
</select>
<button
className="btn btn-sm btn-primary btn-outline"
onClick={async () => {
if (typeof selectedStation === "string") {
toast.error("Fahrzeuge werden aktuell nicht unterstützt");
} else {
if (!selectedStation?.id) return;
await updateMissionMutation.mutateAsync({
id: mission.id,
missionEdit: {
missionStationIds: {
push: selectedStation?.id,
},
},
});
await sendAlertMutation.mutate({
id: mission.id,
stationId: selectedStation?.id ?? 0,
});
}
}}
>
<span className="text-base-content flex items-center gap-2">
<BellRing size={16} /> Nachalarmieren
</span>
</button>
</div>
</div>
)}
</div>
);
};