Marker für HPG Position-amanded, prettier plugin für Tailwind, #61

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

@@ -2,19 +2,75 @@
 import { usePannelStore } from "_store/pannelStore";
 import { Marker } from "react-leaflet";
 import L from "leaflet";
+import { useQuery } from "@tanstack/react-query";
+import { getMissionsAPI } from "_querys/missions";
+import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
+import { getConnectedAircraftsAPI } from "_querys/aircrafts";
+import { useMapStore } from "_store/mapStore";
 
 export const MapAdditionals = () => {
-	const missionForm = usePannelStore((state) => state.missionFormValues);
+	const { isOpen, missionFormValues } = usePannelStore((state) => state);
+	const { data: missions = [] } = useQuery({
+		queryKey: ["missions"],
+		queryFn: () =>
+			getMissionsAPI({
+				OR: [{ state: "draft" }, { state: "running" }],
+			}),
+		refetchInterval: 10_000,
+	});
+	const mapStore = useMapStore((state) => state);
 
-	if (!missionForm?.addressLat || !missionForm?.addressLng) return null;
+	const { data: aircrafts } = useQuery({
+		queryKey: ["aircrafts"],
+		queryFn: () => getConnectedAircraftsAPI(),
+		refetchInterval: 10000,
+	});
+
+	const markersNeedingAttention = missions.filter(
+		(m) =>
+			HPGValidationRequired(m.missionStationIds, aircrafts, m.hpgMissionString) &&
+			m.hpgValidationState === "POSITION_AMANDED" &&
+			m.state === "draft" &&
+			m.hpgLocationLat &&
+			m.hpgLocationLng,
+	);
 
 	return (
 		<>
-			<Marker
-				position={[missionForm.addressLat, missionForm.addressLng]}
-				icon={L.icon({ iconUrl: "/icons/mapMarker.png", iconSize: [40, 40], iconAnchor: [20, 35] })}
-				interactive={false}
-			/>
+			{missionFormValues?.addressLat && missionFormValues?.addressLng && isOpen && (
+				<Marker
+					position={[missionFormValues.addressLat, missionFormValues.addressLng]}
+					icon={L.icon({
+						iconUrl: "/icons/mapMarker.png",
+						iconSize: [40, 40],
+						iconAnchor: [20, 35],
+					})}
+					interactive={false}
+				/>
+			)}
+			{markersNeedingAttention.map((mission) => (
+				<Marker
+					key={mission.id}
+					position={[mission.hpgLocationLat!, mission.hpgLocationLng!]}
+					icon={L.icon({
+						iconUrl: "/icons/mapMarker.png",
+						iconSize: [40, 40],
+						iconAnchor: [20, 35],
+					})}
+					eventHandlers={{
+						click: () =>
+							mapStore.setOpenMissionMarker({
+								open: [
+									{
+										id: mission.id,
+										tab: "home",
+									},
+								],
+								close: [],
+							}),
+					}}
+				/>
+			))}
 		</>
 	);
 };

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

@@ -338,22 +338,15 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 		return [
 			editingMissionId === mission.id && missionFormValues?.addressLat
 				? missionFormValues.addressLat
-				: mission.hpgValidationState !== "POSITION_AMANDED" && mission.hpgLocationLat
-					? mission.hpgLocationLat
-					: mission.addressLat,
+				: mission.addressLat,
 			editingMissionId === mission.id && missionFormValues?.addressLng
 				? missionFormValues.addressLng
-				: mission.hpgValidationState !== "POSITION_AMANDED" && mission.hpgLocationLng
-					? mission.hpgLocationLng
-					: mission.addressLng,
+				: mission.addressLng,
 		];
 	}, [
 		editingMissionId,
 		mission.addressLat,
 		mission.addressLng,
-		mission.hpgLocationLat,
-		mission.hpgLocationLng,
-		mission.hpgValidationState,
 		mission.id,
 		missionFormValues?.addressLat,
 		missionFormValues?.addressLng,

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

@@ -93,8 +93,8 @@ const Einsatzdetails = ({
 	const { setMissionFormValues, setOpen, setEditingMission } = usePannelStore((state) => state);
 	const [ignoreHpg, setIgnoreHpg] = useState(false);
 	return (
-		<div className="p-4 text-base-content">
-			<div className="flex items-center justify-between mb-3">
+		<div className="text-base-content p-4">
+			<div className="mb-3 flex items-center justify-between">
 				<h2 className="flex items-center gap-2 text-lg font-bold">
 					<Flag /> Einsatzdetails
 				</h2>
@@ -126,7 +126,7 @@ const Einsatzdetails = ({
 							</button>
 						</div>
 						<div
-							className="tooltip tooltip-warning tooltip-left font-semibold z-[9999]"
+							className="tooltip tooltip-warning tooltip-left z-[9999] font-semibold"
 							data-tip="Einsatz abschließen"
 						>
 							<button
@@ -161,19 +161,19 @@ const Einsatzdetails = ({
 				)}
 			</div>
 			<ul className="text-base-content font-semibold">
-				<li className="flex items-center gap-2 mb-1">
+				<li className="mb-1 flex items-center gap-2">
 					<BellRing size={16} /> {mission.missionKeywordCategory}
 				</li>
-				<li className="flex items-center gap-2 mb-1">
+				<li className="mb-1 flex items-center gap-2">
 					<ListCollapse size={16} />
 					{mission.missionKeywordName}
 				</li>
-				<li className="flex items-center gap-2 mt-3">
+				<li className="mt-3 flex items-center gap-2">
 					<Hash size={16} />
 					{mission.publicId}
 				</li>
 			</ul>
-			<div className="divider mt-0 mb-0" />
+			<div className="divider mb-0 mt-0" />
 			<div className="text-sm font-semibold">
 				<p className="flex items-center gap-2">
 					<MapPin size={16} /> {mission.addressLat} {mission.addressLng}
@@ -192,7 +192,7 @@ const Einsatzdetails = ({
 			</div>
 			{mission.type == "sekundär" && (
 				<>
-					<div className="divider mt-0 mb-0" />
+					<div className="divider mb-0 mt-0" />
 					<div className="text-sm font-semibold">
 						<p className="flex items-center gap-2">
 							<Route size={16} /> {mission.addressMissionDestination}
@@ -202,11 +202,11 @@ const Einsatzdetails = ({
 			)}
 			{mission.state === "draft" && (
 				<div>
-					<div className="divider mt-0 mb-0" />
+					<div className="divider mb-0 mt-0" />
 
 					{hpgNeedsAttention && mission.hpgValidationState !== "POSITION_AMANDED" && (
-						<div className="form-control mb-2 flex justify-between items-center">
-							<label className="flex items-center gap-2 cursor-pointer">
+						<div className="form-control mb-2 flex items-center justify-between">
+							<label className="flex cursor-pointer items-center gap-2">
 								<input
 									type="checkbox"
 									className="checkbox checkbox-sm checkbox-primary"
@@ -214,7 +214,7 @@ const Einsatzdetails = ({
 									onChange={(e) => setIgnoreHpg(e.target.checked)}
 								/>
 								<span
-									className="label-text font-semibold leading-6 tooltip"
+									className="label-text tooltip font-semibold leading-6"
 									data-tip="Die HPG-Alarmierung wird trotzdem ausgeführt. Die Position des HPG-Einsatzes kann gravierend von der Einsatzposition abweichen"
 								>
 									HPG-Fehler ignorieren
@@ -235,7 +235,7 @@ const Einsatzdetails = ({
 						</div>
 					)}
 
-					<div className="flex items-center gap-2 w-full">
+					<div className="flex w-full items-center gap-2">
 						{(!hpgNeedsAttention || ignoreHpg) &&
 							mission.hpgValidationState !== HpgValidationState.POSITION_AMANDED && (
 								<button
@@ -354,13 +354,13 @@ const Einsatzdetails = ({
 
 const Patientdetails = ({ mission }: { mission: Mission }) => {
 	return (
-		<div className="p-4 text-base-content">
-			<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
+		<div className="text-base-content p-4">
+			<h2 className="mb-3 flex items-center gap-2 text-lg font-bold">
 				<User /> Patientendetails
 			</h2>
 			<p className="text-base-content font-semibold">{mission.missionPatientInfo}</p>
 			<div className="divider my-2" />
-			<h2 className="flex items-center gap-2 text-lg font-bold mb-3">
+			<h2 className="mb-3 flex items-center gap-2 text-lg font-bold">
 				<Cross /> Einsatzinformationen
 			</h2>
 			<p className="text-base-content font-semibold">{mission.missionAdditionalInfo}</p>
@@ -440,7 +440,7 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 	const HPGVehicle = ({ state, name }: { state: HpgState; name: string }) => (
 		<li className="flex items-center gap-2">
 			<span
-				className="font-bold text-base"
+				className="text-base font-bold"
 				style={{
 					color: FMS_STATUS_TEXT_COLORS[hpgStateToFMSStatus(state)],
 				}}
@@ -457,8 +457,8 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 	);
 
 	return (
-		<div className="p-4 text-base-content">
-			<div className="flex items-center w-full justify-between mb-2">
+		<div className="text-base-content p-4">
+			<div className="mb-2 flex w-full items-center justify-between">
 				<h2 className="flex items-center gap-2 text-lg font-bold">
 					<SmartphoneNfc /> Rettungsmittel
 				</h2>
@@ -480,9 +480,9 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 					</div>
 				)}
 			</div>
-			<ul className="space-y-2 h-[130px] overflow-y-auto overflow-x-auto flex-1">
+			<ul className="h-[130px] flex-1 space-y-2 overflow-x-auto overflow-y-auto">
 				{mission.missionStationIds.length === 0 && (
-					<p className="text-gray-500 w-full text-center my-10 font-semibold">
+					<p className="my-10 w-full text-center font-semibold text-gray-500">
 						Keine Rettungsmittel zugewiesen
 					</p>
 				)}
@@ -494,17 +494,17 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 					return (
 						<li key={index} className="flex items-center gap-2">
 							<span
-								className="font-bold text-base"
+								className="text-base font-bold"
 								style={{
 									color: FMS_STATUS_TEXT_COLORS[connectedAircraft?.fmsStatus || "6"],
 								}}
 							>
 								{connectedAircraft?.fmsStatus || "6"}
 							</span>
-							<span className="text-base-content flex flex-col	">
+							<span className="text-base-content flex flex-col">
 								<span className="font-bold">{station.bosCallsign}</span>
 								{!connectedAircraft && (
-									<span className="text-gray-400 text-xs">Kein Benutzer verbunden</span>
+									<span className="text-xs text-gray-400">Kein Benutzer verbunden</span>
 								)}
 							</span>
 						</li>
@@ -522,7 +522,7 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 			</ul>
 			{dispatcherConnected && (
 				<div>
-					<div className="divider mt-0 mb-0" />
+					<div className="divider mb-0 mt-0" />
 					<div className="flex items-center gap-2">
 						{/* TODO: make it a small multiselect */}
 						<StationsSelect
@@ -657,7 +657,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 					<div className="flex items-center gap-2">
 						{!isAddingNote ? (
 							<button
-								className="text-base-content text-base cursor-pointer"
+								className="text-base-content cursor-pointer text-base"
 								onClick={() => setIsAddingNote(true)}
 							>
 								<span className="flex items-center gap-2">
@@ -665,7 +665,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 								</span>
 							</button>
 						) : (
-							<div className="flex items-center gap-2 w-full">
+							<div className="flex w-full items-center gap-2">
 								<input
 									type="text"
 									placeholder=""
@@ -697,7 +697,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 					<div className="divider m-0" />
 				</div>
 			)}
-			<ul className="space-y-1 max-h-[300px] overflow-y-auto overflow-x-auto">
+			<ul className="max-h-[300px] space-y-1 overflow-x-auto overflow-y-auto">
 				{(mission.missionLog as unknown as MissionLog[])
 					.slice()
 					.reverse()
@@ -712,7 +712,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 										})}
 									</span>
 									<span
-										className="font-bold text-base"
+										className="text-base font-bold"
 										style={{
 											color: FMS_STATUS_TEXT_COLORS[entry.data.newFMSstatus],
 										}}
@@ -732,7 +732,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 										})}
 									</span>
 									<span
-										className="font-bold text-base flex items-center gap-0.5"
+										className="flex items-center gap-0.5 text-base font-bold"
 										style={{
 											color: FMS_STATUS_TEXT_COLORS[6],
 										}}
@@ -781,7 +781,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 										})}
 									</span>
 									<span
-										className="font-bold text-base flex items-center gap-0.5"
+										className="flex items-center gap-0.5 text-base font-bold"
 										style={{
 											color: FMS_STATUS_TEXT_COLORS[6],
 										}}
@@ -830,7 +830,7 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 					})}
 			</ul>
 			{!mission.missionLog.length && (
-				<p className="text-gray-500 w-full text-center my-10 font-semibold">
+				<p className="my-10 w-full text-center font-semibold text-gray-500">
 					Keine Notizen verfügbar
 				</p>
 			)}