Fix Marker Cluster & MissionContent

apps/dispatch/app/_components/map/_components/MarkerCluster.tsx

@@ -1,21 +1,10 @@
-import {
+import { ConnectedAircraft, HpgValidationState, Mission, Station } from "@repo/db";
-	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 {
+import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "_components/map/AircraftMarker";
-	FMS_STATUS_COLORS,
+import { MISSION_STATUS_COLORS, MISSION_STATUS_TEXT_COLORS } from "_components/map/MissionMarkers";
-	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(
+	const { setOpenAircraftMarker, setOpenMissionMarker } = useMapStore((state) => state);
-		(state) => state,
-	);
 	const map = useMap();
 
 	let borderColor = "";
@@ -46,9 +33,7 @@ const PopupContent = ({
 		}
 	} else if (anchor.includes("bottom")) {
 		if (aircrafts.length > 0) {
-			borderColor =
+			borderColor = FMS_STATUS_TEXT_COLORS[aircrafts[aircrafts.length - 1]!.fmsStatus] || "white";
-				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")
+						borderLeft: anchor.includes("left") ? `3px solid ${borderColor}` : "",
-							? `3px solid ${borderColor}`
+						borderRight: anchor.includes("right") ? `3px solid ${borderColor}` : "",
-							: "",
-						borderRight: anchor.includes("right")
-							? `3px solid ${borderColor}`
-							: "",
 						borderTop: anchor.includes("top") ? `3px solid ${borderColor}` : "",
-						borderBottom: anchor.includes("bottom")
+						borderBottom: anchor.includes("bottom") ? `3px solid ${borderColor}` : "",
-							? `3px solid ${borderColor}`
-							: "",
 					}}
 				/>
 				{missions.map((mission) => {
@@ -89,9 +68,7 @@ const PopupContent = ({
 					return (
 						<div
 							key={mission.id}
-							className={cn(
+							className={cn("relative inline-flex items-center gap-2 text-nowrap w-full")}
-								"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 =
+	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
-		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 =
+			const avgLat = allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
-				allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
+			const avgLng = allPos.reduce((sum, pos) => sum + pos[1]!, 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]);
+	}, [aircrafts, filteredMissions, zoom]);
-
-	// 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]);
 
 	return (
 		<>
-			{cluster.map((c, i) => (
+			{clusters.map((c, i) => (
 				<SmartPopup
 					options={{
 						ignoreMarker: true,

apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx

@@ -187,7 +187,9 @@ const Einsatzdetails = ({
 								</span>
 							</button>
 						)}
-						{hpgNeedsAttention && (
+						{!ignoreHpg &&
+							hpgNeedsAttention &&
+							mission.hpgValidationState !== HpgValidationState.POSITION_AMANDED && (
 								<button
 									className="btn btn-sm btn-info btn-outline flex-3"
 									onClick={() => sendAlertMutation.mutate(mission.id)}
@@ -200,18 +202,21 @@ const Einsatzdetails = ({
 												läuft...
 											</div>
 										)}
-									{mission.hpgValidationState === HpgValidationState.HPG_BUSY && "HPG-Client busy"}
+										{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,12 +344,16 @@ 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">
+			<div className="flex items-center w-full justify-between mb-2">
-				<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
+				<h2 className="flex items-center gap-2 text-lg font-bold">
 					<SmartphoneNfc /> Rettungsmittel
 				</h2>
+				{mission.state !== "draft" && dispatcherConnected && (
+					<div className="space-x-2">
 						<div
 							className="tooltip tooltip-primary tooltip-left font-semibold"
 							data-tip="Einsatz erneut alarmieren"
@@ -359,6 +368,8 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 							</button>
 						</div>
 					</div>
+				)}
+			</div>
 			<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
 				{missionStations?.map((station, index) => {
 					const connectedAircraft = conenctedAircrafts?.find(
@@ -392,6 +403,8 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 					);
 				})}
 			</ul>
+			{dispatcherConnected && (
+				<div>
 					<div className="divider mt-0 mb-0" />
 					<div className="flex items-center gap-2">
 						{/* TODO: make it a small multiselect */}
@@ -453,6 +466,8 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 						</button>
 					</div>
 				</div>
+			)}
+		</div>
 	);
 };