Fix dispatcherConnected elements

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

@@ -38,6 +38,7 @@ import {
 } from "querys/missions";
 import { getConnectedAircraftsAPI } from "querys/aircrafts";
 import { getStationsAPI } from "querys/stations";
+import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 
 const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 	const queryClient = useQueryClient();
@@ -80,6 +81,8 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 			});
 		},
 	});
+	const dispatcherConnected =
+		useDispatchConnectionStore((s) => s.status) === "connected";
 	const { setMissionFormValues, setOpen } = usePannelStore((state) => state);
 	return (
 		<div className="p-4 text-base-content">
@@ -87,53 +90,51 @@ const Einsatzdetails = ({ mission }: { mission: Mission }) => {
 				<h2 className="flex items-center gap-2 text-lg font-bold">
 					<Flag /> Einsatzdetails
 				</h2>
-				{mission.state !== "draft" &&
+				{mission.state !== "draft" && dispatcherConnected && (
-					typeof window !== "undefined" &&
+					<div className="space-x-2">
-					!window.location.pathname.startsWith("/pilot") && (
+						<div
-						<div className="space-x-2">
+							className="tooltip tooltip-primary tooltip-left font-semibold"
-							<div
+							data-tip="Einsatzdaten übernehmen"
-								className="tooltip tooltip-primary tooltip-left font-semibold"
+						>
-								data-tip="Einsatzdaten übernehmen"
+							<button
+								className="btn btn-xs btn-primary btn-dash flex items-center gap-2"
+								onClick={() => {
+									setMissionFormValues({
+										...mission,
+										id: undefined,
+										hpgAmbulanceState: null,
+										hpgFireEngineState: null,
+										hpgPoliceState: null,
+										hpgLocationLat: undefined,
+										hpgLocationLng: undefined,
+										state: "draft",
+									});
+									setOpen(true);
+								}}
 							>
-								<button
+								<Repeat2 size={16} />
-									className="btn btn-xs btn-primary btn-dash flex items-center gap-2"
+							</button>
-									onClick={() => {
-										setMissionFormValues({
-											...mission,
-											id: undefined,
-											hpgAmbulanceState: null,
-											hpgFireEngineState: null,
-											hpgPoliceState: null,
-											hpgLocationLat: undefined,
-											hpgLocationLng: undefined,
-											state: "draft",
-										});
-										setOpen(true);
-									}}
-								>
-									<Repeat2 size={16} />
-								</button>
-							</div>
-							<div
-								className="tooltip tooltip-warning tooltip-left font-semibold z-[9999]"
-								data-tip="Einsatz abschließen"
-							>
-								<button
-									className="btn btn-xs btn-warning flex items-center gap-2"
-									onClick={() => {
-										editMissionMutation.mutate({
-											id: mission.id,
-											mission: {
-												state: "finished",
-											},
-										});
-									}}
-								>
-									<CheckCheck size={16} />
-								</button>
-							</div>
 						</div>
-					)}
+						<div
+							className="tooltip tooltip-warning tooltip-left font-semibold z-[9999]"
+							data-tip="Einsatz abschließen"
+						>
+							<button
+								className="btn btn-xs btn-warning flex items-center gap-2"
+								onClick={() => {
+									editMissionMutation.mutate({
+										id: mission.id,
+										mission: {
+											state: "finished",
+										},
+									});
+								}}
+							>
+								<CheckCheck size={16} />
+							</button>
+						</div>
+					</div>
+				)}
 			</div>
 			<ul className="text-base-content font-semibold">
 				<li className="flex items-center gap-2 mb-1">
@@ -366,28 +367,30 @@ 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">
 					<SmartphoneNfc /> Rettungsmittel
 				</h2>
-				{typeof window !== "undefined" &&
+				{dispatcherConnected && (
-					!window.location.pathname.startsWith("/pilot") && (
+					<div
-						<div
+						className="tooltip tooltip-primary tooltip-left font-semibold"
-							className="tooltip tooltip-primary tooltip-left font-semibold"
+						data-tip="Einsatz erneut alarmieren"
-							data-tip="Einsatz erneut alarmieren"
+					>
+						<button
+							className="btn btn-xs btn-primary btn-outline"
+							onClick={() => {
+								sendAlertMutation.mutate({ id: mission.id });
+							}}
 						>
-							<button
+							<BellRing size={16} />
-								className="btn btn-xs btn-primary btn-outline"
+						</button>
-								onClick={() => {
+					</div>
-									sendAlertMutation.mutate({ id: mission.id });
+				)}
-								}}
-							>
-								<BellRing size={16} />
-							</button>
-						</div>
-					)}
 			</div>
 			<ul className="space-y-2 max-h-[300px] overflow-y-auto overflow-x-auto">
 				{missionStations?.map((station, index) => {
@@ -422,20 +425,24 @@ const Rettungsmittel = ({ mission }: { mission: Mission }) => {
 					);
 				})}
 			</ul>
-			<div className="divider mt-0 mb-0" />
+			{dispatcherConnected && (
-			<div className="flex items-center gap-2">
+				<div>
-				{/* TODO: make it a small multiselect */}
+					<div className="divider mt-0 mb-0" />
-				<select className="select select-sm select-primary select-bordered flex-1">
+					<div className="flex items-center gap-2">
-					<option value="1">Feuerwehr</option>
+						{/* TODO: make it a small multiselect */}
-					<option value="2">RTW</option>
+						<select className="select select-sm select-primary select-bordered flex-1">
-					<option value="3">Polizei</option>
+							<option value="1">Feuerwehr</option>
-				</select>
+							<option value="2">RTW</option>
-				<button className="btn btn-sm btn-primary btn-outline">
+							<option value="3">Polizei</option>
-					<span className="text-base-content flex items-center gap-2">
+						</select>
-						<BellRing size={16} /> Nachalarmieren
+						<button className="btn btn-sm btn-primary btn-outline">
-					</span>
+							<span className="text-base-content flex items-center gap-2">
-				</button>
+								<BellRing size={16} /> Nachalarmieren
-			</div>
+							</span>
+						</button>
+					</div>
+				</div>
+			)}
 		</div>
 	);
 };
@@ -446,6 +453,9 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 	const [note, setNote] = useState("");
 	const queryClient = useQueryClient();
 
+	const dispatcherConnected =
+		useDispatchConnectionStore((s) => s.status) === "connected";
+
 	const editMissionMutation = useMutation({
 		mutationFn: ({
 			id,
@@ -464,74 +474,73 @@ const FMSStatusHistory = ({ mission }: { mission: Mission }) => {
 	if (!session.data?.user) return null;
 	return (
 		<div className="p-4">
-			{typeof window !== "undefined" &&
+			{dispatcherConnected && (
-				!window.location.pathname.startsWith("/pilot") && (
+				<div>
-					<div>
+					<div className="flex items-center gap-2">
-						<div className="flex items-center gap-2">
+						{!isAddingNote ? (
-							{!isAddingNote ? (
+							<button
+								className="text-base-content text-base cursor-pointer"
+								onClick={() => setIsAddingNote(true)}
+							>
+								<span className="flex items-center gap-2">
+									<Plus size={18} /> Notiz hinzufügen
+								</span>
+							</button>
+						) : (
+							<div className="flex items-center gap-2 w-full">
+								<input
+									type="text"
+									placeholder=""
+									className="input input-sm text-base-content flex-1"
+									value={note}
+									onChange={(e) => setNote(e.target.value)}
+								/>
 								<button
-									className="text-base-content text-base cursor-pointer"
+									className="btn btn-sm btn-primary btn-outline"
-									onClick={() => setIsAddingNote(true)}
+									onClick={() => {
+										const newMissionLog = [
+											...mission.missionLog,
+											{
+												type: "message-log",
+												auto: false,
+												timeStamp: new Date().toISOString(),
+												data: {
+													message: note,
+													user: getPublicUser(session.data?.user),
+												},
+											} as MissionMessageLog,
+										];
+										editMissionMutation
+											.mutateAsync({
+												id: mission.id,
+												mission: {
+													// eslint-disable-next-line @typescript-eslint/no-explicit-any
+													missionLog: newMissionLog as any,
+												},
+											})
+											.then(() => {
+												setIsAddingNote(false);
+												setNote("");
+											});
+									}}
 								>
-									<span className="flex items-center gap-2">
+									<Plus size={20} />
-										<Plus size={18} /> Notiz hinzufügen
-									</span>
 								</button>
-							) : (
+								<button
-								<div className="flex items-center gap-2 w-full">
+									className="btn btn-sm btn-outline"
-									<input
+									onClick={() => {
-										type="text"
+										setIsAddingNote(false);
-										placeholder=""
+										setNote("");
-										className="input input-sm text-base-content flex-1"
+									}}
-										value={note}
+								>
-										onChange={(e) => setNote(e.target.value)}
+									<Ban size={20} />
-									/>
+								</button>
-									<button
+							</div>
-										className="btn btn-sm btn-primary btn-outline"
+						)}
-										onClick={() => {
-											const newMissionLog = [
-												...mission.missionLog,
-												{
-													type: "message-log",
-													auto: false,
-													timeStamp: new Date().toISOString(),
-													data: {
-														message: note,
-														user: getPublicUser(session.data?.user),
-													},
-												} as MissionMessageLog,
-											];
-											editMissionMutation
-												.mutateAsync({
-													id: mission.id,
-													mission: {
-														// eslint-disable-next-line @typescript-eslint/no-explicit-any
-														missionLog: newMissionLog as any,
-													},
-												})
-												.then(() => {
-													setIsAddingNote(false);
-													setNote("");
-												});
-										}}
-									>
-										<Plus size={20} />
-									</button>
-									<button
-										className="btn btn-sm btn-outline"
-										onClick={() => {
-											setIsAddingNote(false);
-											setNote("");
-										}}
-									>
-										<Ban size={20} />
-									</button>
-								</div>
-							)}
-						</div>
-						<div className="divider m-0" />
 					</div>
-				)}
+					<div className="divider m-0" />
+				</div>
+			)}
 			<ul className="space-y-1 max-h-[300px] overflow-y-auto overflow-x-auto">
 				{(mission.missionLog as unknown as MissionLog[])
 					.slice()