From a905872f256910c32d57b6b20b385f9895f9d3ea Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Tue, 22 Jul 2025 11:06:00 -0700
Subject: [PATCH] Fix Station-Select

---
 .../dispatch/_components/StationSelect.tsx    | 27 ++++++++++++-------
 .../navbar/_components/Connection.tsx         |  2 +-
 .../app/_components/map/MapAdditionals.tsx    |  3 +++
 .../app/_components/map/MissionMarkers.tsx    | 22 +++++++--------
 .../map/_components/MissionMarkerTabs.tsx     | 11 +++++---
 5 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/apps/dispatch/app/(app)/dispatch/_components/StationSelect.tsx b/apps/dispatch/app/(app)/dispatch/_components/StationSelect.tsx
index f435050e..7c685caa 100644
--- a/apps/dispatch/app/(app)/dispatch/_components/StationSelect.tsx
+++ b/apps/dispatch/app/(app)/dispatch/_components/StationSelect.tsx
@@ -45,16 +45,9 @@ export function StationsSelect({
 		queryFn: () => getStationsAPI(),
 	});
 
-	const [value, setValue] = useState<string[]>(selectedStations?.map((id) => String(id)) || []);
-
-	useEffect(() => {
-		setValue([
-			...(selectedStations || []).map((id) => String(id)),
-			...(vehicleStates.hpgAmbulanceState !== HpgState.NOT_REQUESTED || undefined ? ["RTW"] : []),
-			...(vehicleStates.hpgFireEngineState !== HpgState.NOT_REQUESTED || undefined ? ["FW"] : []),
-			...(vehicleStates.hpgPoliceState !== HpgState.NOT_REQUESTED || undefined ? ["POL"] : []),
-		]);
-	}, [selectedStations, vehicleStates]);
+	const [value, setValue] = useState<string[] | string | null>(
+		selectedStations?.map((id) => String(id)) || [],
+	);
 
 	// Helper to check if a station is a vehicle and its state is NOT_REQUESTED
 	const stationsOptions = [
@@ -101,6 +94,20 @@ export function StationsSelect({
 			return true;
 		});
 
+	useEffect(() => {
+		if (isMulti) {
+			setValue([
+				...(selectedStations || []).map((id) => String(id)),
+				...(vehicleStates.hpgAmbulanceState !== HpgState.NOT_REQUESTED || undefined ? ["RTW"] : []),
+				...(vehicleStates.hpgFireEngineState !== HpgState.NOT_REQUESTED || undefined ? ["FW"] : []),
+				...(vehicleStates.hpgPoliceState !== HpgState.NOT_REQUESTED || undefined ? ["POL"] : []),
+			]);
+		} else {
+			console.log("clear selected stations");
+			setValue(null);
+		}
+	}, [selectedStations, vehicleStates, isMulti]);
+
 	return (
 		<Select
 			className={className}
diff --git a/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx b/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx
index 92549f3c..fd193ee8 100644
--- a/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx
+++ b/apps/dispatch/app/(app)/pilot/_components/navbar/_components/Connection.tsx
@@ -135,7 +135,7 @@ export const ConnectionBtn = () => {
 							/>
 						</div>
 					)}
-					<fieldset className="fieldset mt-2 w-full">
+					<fieldset className="fieldset mt-4 w-full">
 						<label className="floating-label w-full text-base">
 							<span>Logoff Zeit (LCL)</span>
 							<input
diff --git a/apps/dispatch/app/_components/map/MapAdditionals.tsx b/apps/dispatch/app/_components/map/MapAdditionals.tsx
index c23f1b86..ff7c5162 100644
--- a/apps/dispatch/app/_components/map/MapAdditionals.tsx
+++ b/apps/dispatch/app/_components/map/MapAdditionals.tsx
@@ -7,9 +7,11 @@ import { getMissionsAPI } from "_querys/missions";
 import { HPGValidationRequired } from "_helpers/hpgValidationRequired";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
 import { useMapStore } from "_store/mapStore";
+import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 
 export const MapAdditionals = () => {
 	const { isOpen, missionFormValues } = usePannelStore((state) => state);
+	const dispatcherConnectionState = useDispatchConnectionStore((state) => state.status);
 	const { data: missions = [] } = useQuery({
 		queryKey: ["missions"],
 		queryFn: () =>
@@ -32,6 +34,7 @@ export const MapAdditionals = () => {
 			m.hpgValidationState === "POSITION_AMANDED" &&
 			m.state === "draft" &&
 			m.hpgLocationLat &&
+			dispatcherConnectionState === "connected" &&
 			m.hpgLocationLng,
 	);
 
diff --git a/apps/dispatch/app/_components/map/MissionMarkers.tsx b/apps/dispatch/app/_components/map/MissionMarkers.tsx
index 36d2a8bc..3dee1d2e 100644
--- a/apps/dispatch/app/_components/map/MissionMarkers.tsx
+++ b/apps/dispatch/app/_components/map/MissionMarkers.tsx
@@ -82,7 +82,7 @@ const MissionPopupContent = ({
 	return (
 		<>
 			<div
-				className="absolute p-1 z-99 top-0 right-0 transform -translate-y-full bg-base-100 cursor-pointer"
+				className="z-99 bg-base-100 absolute right-0 top-0 -translate-y-full transform cursor-pointer p-1"
 				onClick={() => {
 					setOpenMissionMarker({
 						open: [],
@@ -95,7 +95,7 @@ const MissionPopupContent = ({
 
 			<div
 				className={cn(
-					"absolute w-[calc(100%+2px)] h-4 z-99",
+					"z-99 absolute h-4 w-[calc(100%+2px)]",
 					anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
 					anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
 				)}
@@ -116,13 +116,13 @@ const MissionPopupContent = ({
 			/>
 			<div>
 				<div
-					className="flex gap-[2px] text-white pb-0.5"
+					className="flex gap-[2px] pb-0.5 text-white"
 					style={{
 						backgroundColor: `${MISSION_STATUS_TEXT_COLORS[mission.state]}`,
 					}}
 				>
 					<div
-						className="p-2 px-3 flex justify-center items-center cursor-pointer"
+						className="flex cursor-pointer items-center justify-center p-2 px-3"
 						style={{
 							backgroundColor: `${MISSION_STATUS_COLORS[mission.state]}`,
 							borderBottom:
@@ -135,7 +135,7 @@ const MissionPopupContent = ({
 						<House className="text-sm" />
 					</div>
 					<div
-						className="p-2 px-4 flex justify-center items-center cursor-pointer"
+						className="flex cursor-pointer items-center justify-center p-2 px-4"
 						style={{
 							backgroundColor: `${MISSION_STATUS_COLORS[mission.state]}`,
 							borderBottom:
@@ -148,7 +148,7 @@ const MissionPopupContent = ({
 						<Cross className="text-sm" />
 					</div>
 					<div
-						className="p-2 px-4 flex justify-center items-center cursor-pointer"
+						className="flex cursor-pointer items-center justify-center p-2 px-4"
 						style={{
 							backgroundColor: `${MISSION_STATUS_COLORS[mission.state]}`,
 							borderBottom:
@@ -162,7 +162,7 @@ const MissionPopupContent = ({
 					</div>
 					{mission.state === "draft" && (
 						<div
-							className="p-2 px-4 flex justify-center items-center cursor-pointer ml-auto"
+							className="ml-auto flex cursor-pointer items-center justify-center p-2 px-4"
 							style={{
 								backgroundColor: `${MISSION_STATUS_COLORS["attention"]}`,
 								borderBottom: "5px solid transparent",
@@ -173,9 +173,9 @@ const MissionPopupContent = ({
 									addressMissionDestination: mission.addressMissionDestination ?? undefined,
 									addressAdditionalInfo: mission.addressAdditionalInfo ?? undefined,
 									state: "draft",
-									hpgAmbulanceState: "NOT_REQUESTED",
-									hpgFireEngineState: "NOT_REQUESTED",
-									hpgPoliceState: "NOT_REQUESTED",
+									hpgAmbulanceState: mission.hpgAmbulanceState ?? "NOT_REQUESTED",
+									hpgFireEngineState: mission.hpgFireEngineState ?? "NOT_REQUESTED",
+									hpgPoliceState: mission.hpgPoliceState ?? "NOT_REQUESTED",
 									hpgLocationLat: mission.hpgLocationLat ?? undefined,
 									hpgLocationLng: mission.hpgLocationLng ?? undefined,
 								});
@@ -188,7 +188,7 @@ const MissionPopupContent = ({
 					)}
 					<div
 						className={cn(
-							"p-2 px-4 flex justify-center items-center cursor-pointer",
+							"flex cursor-pointer items-center justify-center p-2 px-4",
 							mission.state !== "draft" && "ml-auto",
 						)}
 						style={{
diff --git a/apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx b/apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx
index af102661..dcb042e1 100644
--- a/apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx
+++ b/apps/dispatch/app/_components/map/_components/MissionMarkerTabs.tsx
@@ -530,11 +530,15 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 							className="min-w-[320px] flex-1"
 							isMulti={false}
 							onChange={(v) => {
+								console.log("Selected Station:", v);
 								setSelectedStation({
 									selectedStationId: v?.selectedStationIds[0],
-									hpgAmbulanceState: mission.hpgAmbulanceState || HpgState.NOT_REQUESTED,
-									hpgFireEngineState: mission.hpgFireEngineState || HpgState.NOT_REQUESTED,
-									hpgPoliceState: mission.hpgPoliceState || HpgState.NOT_REQUESTED,
+									hpgAmbulanceState:
+										v.hpgAmbulanceState || mission.hpgAmbulanceState || HpgState.NOT_REQUESTED,
+									hpgFireEngineState:
+										v.hpgFireEngineState || mission.hpgFireEngineState || HpgState.NOT_REQUESTED,
+									hpgPoliceState:
+										v.hpgPoliceState || mission.hpgPoliceState || HpgState.NOT_REQUESTED,
 								});
 							}}
 							selectedStations={mission.missionStationIds}
@@ -548,6 +552,7 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 						<button
 							className="btn btn-sm btn-primary btn-outline"
 							onClick={async () => {
+								console.log("Selected Station:", selectedStation);
 								if (
 									selectedStation.hpgAmbulanceState !== "NOT_REQUESTED" ||
 									selectedStation.hpgFireEngineState !== "NOT_REQUESTED" ||