Merge branch 'staging' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo into staging

apps/dispatch/app/(app)/dispatch/_components/navbar/_components/Connection.tsx

@@ -14,7 +14,7 @@ export const ConnectionBtn = () => {
 	const connection = useDispatchConnectionStore((state) => state);
 	const [form, setForm] = useState({
 		logoffTime: "",
-		selectedZone: "LST_01",
+		selectedZone: "VAR_LST_RD_01",
 		ghostMode: false,
 	});
 	const changeDispatcherMutation = useMutation({

apps/dispatch/app/(app)/pilot/_components/mrt/Base.tsx

@@ -0,0 +1,15 @@
+import { useMrtStore } from "_store/pilot/MrtStore";
+import Image from "next/image";
+import DAY_BASE_IMG from "./images/Base_NoScreen_Day.png";
+import NIGHT_BASE_IMG from "./images/Base_NoScreen_Night.png";
+
+export const MrtBase = () => {
+	const { nightMode } = useMrtStore((state) => state);
+	return (
+		<Image
+			src={nightMode ? NIGHT_BASE_IMG : DAY_BASE_IMG}
+			alt=""
+			className="z-30 col-span-full row-span-full"
+		/>
+	);
+};

apps/dispatch/app/(app)/pilot/_components/mrt/Mrt.tsx

@@ -1,22 +1,9 @@
 import { CSSProperties } from "react";
-import MrtImage from "./MRT.png";
-import MrtMessageImage from "./MRT_MESSAGE.png";
-import { useButtons } from "./useButtons";
-import { useSounds } from "./useSounds";
 import "./mrt.css";
-import Image from "next/image";
-import { useMrtStore } from "_store/pilot/MrtStore";
-
-const MRT_BUTTON_STYLES: CSSProperties = {
-	cursor: "pointer",
-	zIndex: "9999",
-	backgroundColor: "transparent",
-	border: "none",
-};
-const MRT_DISPLAYLINE_STYLES: CSSProperties = {
-	color: "white",
-	zIndex: 1,
-};
+import { MrtBase } from "./Base";
+import { MrtDisplay } from "./MrtDisplay";
+import { MrtButtons } from "./MrtButtons";
+import { MrtPopups } from "./MrtPopups";
 
 export interface DisplayLineProps {
 	lineStyle?: CSSProperties;
@@ -27,45 +14,7 @@ export interface DisplayLineProps {
 	textSize: "1" | "2" | "3" | "4";
 }
 
-const DisplayLine = ({
-	style = {},
-	textLeft,
-	textMid,
-	textRight,
-	textSize,
-	lineStyle,
-}: DisplayLineProps) => {
-	const INNER_TEXT_PARTS: CSSProperties = {
-		fontFamily: "Melder",
-		flex: "1",
-		flexBasis: "auto",
-		overflowWrap: "break-word",
-		...lineStyle,
-	};
-
-	return (
-		<div
-			className={`text-${textSize}`}
-			style={{
-				fontFamily: "Famirids",
-				display: "flex",
-				flexWrap: "wrap",
-
-				...style,
-			}}
-		>
-			<span style={INNER_TEXT_PARTS}>{textLeft}</span>
-			<span style={{ textAlign: "center", ...INNER_TEXT_PARTS }}>{textMid}</span>
-			<span style={{ textAlign: "end", ...INNER_TEXT_PARTS }}>{textRight}</span>
-		</div>
-	);
-};
-
 export const Mrt = () => {
-	useSounds();
-	const { handleButton } = useButtons();
-	const { lines, page } = useMrtStore((state) => state);
-
 	return (
 		<div
 			id="mrt-container"
@@ -78,150 +27,16 @@ export const Mrt = () => {
 				maxHeight: "100%",
 				maxWidth: "100%",
 				color: "white",
-				gridTemplateColumns: "21.83% 4.43% 24.42% 18.08% 5.93% 1.98% 6.00% 1.69% 6.00% 9.35%",
-				gridTemplateRows: "21.58% 11.87% 3.55% 5.00% 6.84% 0.53% 3.03% 11.84% 3.55% 11.84% 20.39%",
+				gridTemplateColumns:
+					"9.75% 4.23% 8.59% 7.30% 1.16% 7.30% 1.23% 7.16% 1.09% 7.30% 3.68% 4.23% 5.59% 6.07% 1.91% 6.07% 1.84% 6.21% 9.28%",
+				gridTemplateRows:
+					"21.55% 11.83% 3.55% 2.50% 9.46% 2.76% 0.66% 4.99% 6.83% 3.55% 1.97% 9.99% 4.20% 11.04% 5.12%",
 			}}
 		>
-			{page !== "sds" && (
-				<Image
-					src={MrtImage}
-					alt="MrtImage"
-					style={{
-						zIndex: 0,
-						height: "100%",
-						width: "100%",
-						gridArea: "1 / 1 / 13 / 13",
-					}}
-				/>
-			)}
-			{page === "sds" && (
-				<Image
-					src={MrtMessageImage}
-					alt="MrtImage-Message"
-					style={{
-						zIndex: 0,
-						height: "100%",
-						width: "100%",
-						gridArea: "1 / 1 / 13 / 13",
-					}}
-				/>
-			)}
-
-			<button
-				onClick={handleButton("home")}
-				style={{ gridArea: "2 / 4 / 3 / 5", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("1")}
-				style={{ gridArea: "2 / 5 / 3 / 6", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("2")}
-				style={{ gridArea: "2 / 7 / 3 / 7", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("3")}
-				style={{ gridArea: "2 / 9 / 3 / 10", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("4")}
-				style={{ gridArea: "4 / 5 / 6 / 6", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("5")}
-				style={{ gridArea: "4 / 7 / 6 / 7", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("6")}
-				style={{ gridArea: "4 / 9 / 6 / 10", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("7")}
-				style={{ gridArea: "8 / 5 / 9 / 6", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("8")}
-				style={{ gridArea: "8 / 7 / 9 / 7", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("9")}
-				style={{ gridArea: "8 / 9 / 9 / 10", ...MRT_BUTTON_STYLES }}
-			/>
-			<button
-				onClick={handleButton("0")}
-				style={{ gridArea: "10 / 7 / 11 / 8", ...MRT_BUTTON_STYLES }}
-			/>
-
-			{lines[0] && (
-				<DisplayLine
-					{...lines[0]}
-					style={
-						page === "sds"
-							? {
-									gridArea: "2 / 3 / 3 / 4",
-									marginLeft: "9px",
-									marginTop: "auto",
-
-									...MRT_DISPLAYLINE_STYLES,
-									...lines[0]?.style,
-								}
-							: {
-									gridArea: "4 / 3 / 5 / 4",
-									marginLeft: "9px",
-									marginTop: "auto",
-									...MRT_DISPLAYLINE_STYLES,
-									...lines[0]?.style,
-								}
-					}
-				/>
-			)}
-			{lines[1] && (
-				<DisplayLine
-					lineStyle={{
-						overflowX: "hidden",
-						maxHeight: "100%",
-						overflowY: "auto",
-					}}
-					{...lines[1]}
-					style={
-						page === "sds"
-							? {
-									gridArea: "4 / 2 / 10 / 4",
-									marginLeft: "3px",
-									...MRT_DISPLAYLINE_STYLES,
-									...lines[1].style,
-								}
-							: {
-									gridArea: "5 / 3 / 7 / 4",
-									marginLeft: "3px",
-									marginTop: "auto",
-									...MRT_DISPLAYLINE_STYLES,
-									...lines[1].style,
-								}
-					}
-				/>
-			)}
-			{lines[2] && (
-				<DisplayLine
-					{...lines[2]}
-					style={{
-						gridArea: "8 / 2 / 9 / 4",
-						...MRT_DISPLAYLINE_STYLES,
-						...lines[2]?.style,
-					}}
-				/>
-			)}
-			{lines[3] && (
-				<DisplayLine
-					{...lines[3]}
-					style={{
-						gridArea: "9 / 2 / 10 / 4",
-						marginRight: "10px",
-						...MRT_DISPLAYLINE_STYLES,
-						...lines[3]?.style,
-					}}
-				/>
-			)}
+			<MrtPopups />
+			<MrtDisplay />
+			<MrtButtons />
+			<MrtBase />
 		</div>
 	);
 };

apps/dispatch/app/(app)/pilot/_components/mrt/MrtButtons.tsx

@@ -32,7 +32,6 @@ const MrtButton = ({ onClick, onHold, style }: MrtButtonProps) => {
 	const handleMouseUp = () => {
 		if (timeoutRef.current) {
 			clearTimeout(timeoutRef.current);
-
 			onClick();
 		}
 	};

apps/dispatch/app/(app)/pilot/_components/mrt/MrtDisplay.css

@@ -0,0 +1,16 @@
+.transition-image {
+	clip-path: inset(0 0 100% 0);
+}
+
+.transition-image.animate-reveal {
+	animation: revealFromTop 0.6s linear forwards;
+}
+
+@keyframes revealFromTop {
+	from {
+		clip-path: inset(0 0 100% 0);
+	}
+	to {
+		clip-path: inset(0 0 0 0);
+	}
+}

apps/dispatch/app/(app)/pilot/_components/mrt/MrtPopups.tsx

@@ -0,0 +1,152 @@
+import { SetPopupParams, useMrtStore } from "_store/pilot/MrtStore";
+import Image, { StaticImageData } from "next/image";
+import { useEffect, useState } from "react";
+import IAMGE_POPUP_LOGIN from "./images/POPUP_login.png";
+import GROUP_SELECTION_POPUP_LOGIN from "./images/POPUP_group_selection.png";
+import IAMGE_POPUP_SDS_RECEIVED from "./images/POPUP_SDS_incomming.png";
+import IAMGE_POPUP_SDS_SENT from "./images/POPUP_SDS_sent.png";
+import IAMGE_POPUP_STATUS_SENT from "./images/POPUP_Status_sent.png";
+import { ROOMS } from "_data/livekitRooms";
+import { cn, useDebounce } from "@repo/shared-components";
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { fmsStatusDescription, fmsStatusDescriptionShort } from "_data/fmsStatusDescription";
+import { pilotSocket } from "(app)/pilot/socket";
+import { StationStatus } from "@repo/db";
+import { useSounds } from "./useSounds";
+import { useButtons } from "./useButtons";
+import { useAudioStore } from "_store/audioStore";
+
+export const MrtPopups = () => {
+	const { sdsReceivedSoundRef } = useSounds();
+	const { handleKlick } = useButtons();
+	const { selectedRoom } = useAudioStore();
+	const { popup, page, setPopup, setStringifiedData, stringifiedData } = useMrtStore(
+		(state) => state,
+	);
+	const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
+	const [popupImage, setPopupImage] = useState<StaticImageData | null>(null);
+
+	useEffect(() => {
+		switch (popup) {
+			case "status-sent":
+				setPopupImage(IAMGE_POPUP_STATUS_SENT);
+				break;
+			case "sds-sent":
+				setPopupImage(IAMGE_POPUP_SDS_SENT);
+				break;
+			case "sds-received":
+				setPopupImage(IAMGE_POPUP_SDS_RECEIVED);
+				break;
+			case "login":
+				setPopupImage(IAMGE_POPUP_LOGIN);
+				break;
+			case "group-selection":
+				setPopupImage(GROUP_SELECTION_POPUP_LOGIN);
+				break;
+			case undefined:
+			case null:
+				setPopupImage(null);
+				break;
+		}
+	}, [popup]);
+
+	useDebounce(
+		() => {
+			if (popup == "login") return;
+			if (popup == "sds-received") return;
+			if (popup == "group-selection") return;
+			setPopup(null);
+		},
+		3000,
+		[popup],
+	);
+
+	useDebounce(
+		() => {
+			if (popup == "group-selection") {
+				if (selectedRoom?.id === stringifiedData.groupSelectionGroupId) {
+					setPopup(null);
+				} else {
+					handleKlick("3l")();
+				}
+			}
+		},
+		5000,
+		[page, stringifiedData.groupSelectionGroupId, selectedRoom],
+	);
+
+	useEffect(() => {
+		if (status === "connecting" && page !== "off" && page !== "startup") {
+			setPopup({ popup: "login" });
+		}
+	}, [status, setPopup, page]);
+
+	useDebounce(
+		() => {
+			if (status === "connected") {
+				setPopup(null);
+			}
+		},
+		5000,
+		[status],
+	);
+
+	useEffect(() => {
+		pilotSocket.on("sds-status", (data: StationStatus) => {
+			setStringifiedData({ sdsText: data.status + " - " + fmsStatusDescriptionShort[data.status] });
+			setPopup({ popup: "sds-received" });
+			if (sdsReceivedSoundRef.current) {
+				sdsReceivedSoundRef.current.currentTime = 0;
+				sdsReceivedSoundRef.current.play();
+			}
+		});
+	}, [setPopup, setStringifiedData, sdsReceivedSoundRef]);
+
+	if (!popupImage || !popup) return null;
+
+	const DisplayText = ({ pageName }: { pageName: SetPopupParams["popup"] }) => {
+		const group = ROOMS.find((r) => r.id === stringifiedData.groupSelectionGroupId);
+
+		return (
+			<div
+				className={cn("font-semibold text-[#000d60]", !!popup && "filter")}
+				style={{
+					fontFamily: "Bahnschrift",
+				}}
+			>
+				{pageName == "status-sent" && (
+					<p className="absolute left-[17.5%] top-[44%] h-[10%] w-[39%] text-lg">
+						{fmsStatusDescription[connectedAircraft?.fmsStatus || "0"]}
+					</p>
+				)}
+				{pageName == "sds-sent" && (
+					<p className="absolute left-[17.5%] top-[44%] h-[10%] w-[39%] text-lg">
+						{fmsStatusDescription[stringifiedData.sentSdsText || "0"]}
+					</p>
+				)}
+				{pageName == "sds-received" && (
+					<p className="absolute left-[17.5%] top-[39%] h-[24%] w-[60%] whitespace-normal break-words">
+						{stringifiedData.sdsText}
+					</p>
+				)}
+				{pageName == "group-selection" && (
+					<>
+						<p className="absolute left-[24%] top-[39%] h-[5%] w-[30%]">{group?.name}</p>
+						<p className="absolute left-[24%] top-[50%] flex h-[9%] w-[31%] items-end justify-end">
+							{stringifiedData.groupSelectionGroupId}
+						</p>
+					</>
+				)}
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<Image src={popupImage} alt="" className="z-30 col-span-full row-span-full" />
+			<div className="relative z-30 col-span-full row-span-full overflow-hidden">
+				<DisplayText pageName={popup} />
+			</div>
+		</>
+	);
+};

apps/dispatch/app/(app)/pilot/_components/mrt/useButtons.ts

@@ -1,15 +1,58 @@
-import { Prisma } from "@repo/db";
+import { getPublicUser, MissionSdsStatusLog, Prisma } from "@repo/db";
 import { usePilotConnectionStore } from "_store/pilot/connectionStore";
 import { useMrtStore } from "_store/pilot/MrtStore";
 import { pilotSocket } from "(app)/pilot/socket";
 import { editConnectedAircraftAPI } from "_querys/aircrafts";
 import { useEffect } from "react";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useSounds } from "./useSounds";
+import { sendSdsStatusMessageAPI } from "_querys/missions";
+import { useSession } from "next-auth/react";
+import { ROOMS } from "_data/livekitRooms";
+import { useAudioStore } from "_store/audioStore";
+
+type ButtonTypes =
+	| "1"
+	| "2"
+	| "3"
+	| "4"
+	| "5"
+	| "6"
+	| "7"
+	| "8"
+	| "9"
+	| "0"
+	| "home"
+	| "3l"
+	| "3r"
+	| "wheel-knob"
+	| "arrow-up"
+	| "arrow-down"
+	| "arrow-left"
+	| "arrow-right"
+	| "end-call";
 
 export const useButtons = () => {
-	const station = usePilotConnectionStore((state) => state.selectedStation);
-	const connectedAircraft = usePilotConnectionStore((state) => state.connectedAircraft);
-	const connectionStatus = usePilotConnectionStore((state) => state.status);
+	const session = useSession();
+	const { connect, setSelectedRoom, selectedRoom } = useAudioStore((state) => state);
+
+	const { longBtnPressSoundRef, statusSentSoundRef } = useSounds();
+	const queryClient = useQueryClient();
+	const {
+		status: pilotState,
+		selectedStation,
+		connectedAircraft,
+	} = usePilotConnectionStore((state) => state);
+
+	const sendSdsStatusMutation = useMutation({
+		mutationFn: async ({ sdsMessage }: { sdsMessage: MissionSdsStatusLog }) => {
+			if (!connectedAircraft?.id) throw new Error("No connected aircraft");
+			await sendSdsStatusMessageAPI({ sdsMessage, aircraftId: connectedAircraft?.id });
+			queryClient.invalidateQueries({
+				queryKey: ["missions"],
+			});
+		},
+	});
 	const updateAircraftMutation = useMutation({
 		mutationKey: ["edit-pilot-connected-aircraft"],
 		mutationFn: ({
@@ -21,56 +64,161 @@ export const useButtons = () => {
 		}) => editConnectedAircraftAPI(aircraftId, data),
 	});
 
-	const { setPage } = useMrtStore((state) => state);
+	const { setPage, setPopup, page, popup, setStringifiedData, stringifiedData } = useMrtStore(
+		(state) => state,
+	);
 
-	const handleButton =
-		(button: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "home") => () => {
-			if (connectionStatus !== "connected") return;
-			if (!station) return;
-			if (!connectedAircraft?.id) return;
-			if (
-				button === "1" ||
-				button === "2" ||
-				button === "3" ||
-				button === "4" ||
-				button === "5" ||
-				button === "6" ||
-				button === "7" ||
-				button === "8" ||
-				button === "9" ||
-				button === "0"
-			) {
-				setPage({ page: "sending-status", station });
+	const role =
+		(pilotState == "connected" && selectedStation?.bosCallsignShort) ||
+		session.data?.user?.publicId;
 
-				setTimeout(async () => {
-					await updateAircraftMutation.mutateAsync({
-						aircraftId: connectedAircraft.id,
-						data: {
-							fmsStatus: button,
-						},
-					});
-					setPage({
-						page: "home",
-						station,
+	const handleHold = (button: ButtonTypes) => async () => {
+		/* if (connectionStatus !== "connected") return; */
+		if (button === "end-call") {
+			setPage({ page: "off" });
+			setPopup(null);
+		}
+		if (button === "1" && page === "off") {
+			setPage({ page: "startup" });
+			return;
+		}
+		if (!selectedStation) return;
+		if (!session.data?.user) return;
+		if (!connectedAircraft?.id) return;
+		if (
+			button === "1" ||
+			button === "2" ||
+			button === "3" ||
+			button === "4" ||
+			button === "6" ||
+			button === "7" ||
+			button === "8"
+		) {
+			longBtnPressSoundRef.current?.play();
+			const delay = Math.random() * 1500 + 500;
+			setTimeout(async () => {
+				await updateAircraftMutation.mutateAsync({
+					aircraftId: connectedAircraft.id,
+					data: {
 						fmsStatus: button,
-					});
-				}, 1000);
-			} else {
-				setPage({ page: "home", fmsStatus: connectedAircraft.fmsStatus || "6", station });
-			}
-		};
+					},
+				});
+				setPopup({ popup: "status-sent" });
+				statusSentSoundRef.current?.play();
+			}, delay);
+		} else if (button === "5" || button === "9" || button === "0") {
+			longBtnPressSoundRef.current?.play();
+			const delay = Math.random() * 1500 + 500;
+			setTimeout(async () => {
+				await sendSdsStatusMutation.mutateAsync({
+					sdsMessage: {
+						type: "sds-status-log",
+						auto: false,
+						timeStamp: new Date().toISOString(),
+						data: {
+							direction: "to-lst",
+							stationId: selectedStation.id,
+							station: selectedStation,
+							user: getPublicUser(session.data?.user),
+							status: button,
+						},
+					},
+				});
+				setStringifiedData({ sentSdsText: button });
+				statusSentSoundRef.current?.play();
+				setPopup({ popup: "sds-sent" });
+			}, delay);
+		}
+	};
+
+	const handleKlick = (button: ButtonTypes) => async () => {
+		console.log("Button clicked:", button);
+		//implement Kurzwahl when button is clicked short to dial
+
+		switch (button) {
+			case "0":
+			case "1":
+			case "2":
+			case "3":
+			case "4":
+			case "5":
+			case "6":
+			case "7":
+			case "8":
+			case "9":
+				//handle short press number buttons for kurzwahl
+				if (popup === "group-selection") {
+					if (stringifiedData.groupSelectionGroupId?.length === 4) {
+						setStringifiedData({ groupSelectionGroupId: button });
+					} else {
+						setStringifiedData({
+							groupSelectionGroupId: (stringifiedData.groupSelectionGroupId || "") + button,
+						});
+					}
+				}
+				if (page === "home" && !popup) {
+					setPopup({ popup: "group-selection" });
+					setStringifiedData({ groupSelectionGroupId: button });
+				}
+				break;
+			case "3r":
+				if (popup === "sds-received" || popup === "group-selection") {
+					setPopup(null);
+				} else if (page === "home") {
+					setPopup({ popup: "group-selection" });
+					setStringifiedData({ groupSelectionGroupId: selectedRoom?.id || ROOMS[0]!.id });
+				} else if (page === "voice-call") {
+					setPage({ page: "home" });
+				}
+				break;
+			case "wheel-knob":
+				setPopup(popup === "group-selection" ? null : { popup: "group-selection" });
+				setStringifiedData({ groupSelectionGroupId: selectedRoom?.id || ROOMS[0]!.id });
+				break;
+			case "arrow-right":
+				if (popup === "group-selection") {
+					let currentGroupIndex = ROOMS.findIndex(
+						(r) => r.id === stringifiedData.groupSelectionGroupId,
+					);
+					if (currentGroupIndex === ROOMS.length - 1) currentGroupIndex = -1;
+					const nextGroup = ROOMS[currentGroupIndex + 1];
+					if (nextGroup) {
+						setStringifiedData({ groupSelectionGroupId: nextGroup.id });
+					}
+				}
+				break;
+			case "arrow-left":
+				if (popup === "group-selection") {
+					let currentGroupIndex = ROOMS.findIndex(
+						(r) => r.id === stringifiedData.groupSelectionGroupId,
+					);
+					if (currentGroupIndex === 0) currentGroupIndex = ROOMS.length;
+					const previousGroup = ROOMS[currentGroupIndex - 1];
+					if (previousGroup) {
+						setStringifiedData({ groupSelectionGroupId: previousGroup.id });
+					}
+				}
+				break;
+			case "3l":
+				if (popup === "group-selection") {
+					const group = ROOMS.find((r) => r.id === stringifiedData.groupSelectionGroupId);
+					if (group && role) {
+						setSelectedRoom(group);
+						connect(group, role);
+						setPopup(null);
+					}
+				}
+		}
+		return false;
+	};
 
 	useEffect(() => {
 		pilotSocket.on("connect", () => {
-			if (!station) return;
-			setPage({ page: "home", fmsStatus: "6", station });
+			const { page } = useMrtStore.getState();
+			if (!selectedStation || page !== "off") return;
+			setPage({ page: "startup" });
 		});
+	}, [setPage, selectedStation, setPopup]);
 
-		pilotSocket.on("aircraft-update", () => {
-			if (!station) return;
-			setPage({ page: "new-status", station });
-		});
-	}, [setPage, station]);
-
-	return { handleButton };
+	return { handleKlick, handleHold };
 };

apps/dispatch/app/(app)/pilot/_components/mrt/useSounds.ts

@@ -1,52 +1,22 @@
 "use client";
-import { usePilotConnectionStore } from "_store/pilot/connectionStore";
-import { useMrtStore } from "_store/pilot/MrtStore";
 import { useEffect, useRef } from "react";
 
 export const useSounds = () => {
-	const mrtState = useMrtStore((state) => state);
-	const { connectedAircraft, selectedStation } = usePilotConnectionStore((state) => state);
-
-	const setPage = useMrtStore((state) => state.setPage);
-	const MRTstatusSoundRef = useRef<HTMLAudioElement>(null);
-	const MrtMessageReceivedSoundRef = useRef<HTMLAudioElement>(null);
+	const longBtnPressSoundRef = useRef<HTMLAudioElement>(null);
+	const statusSentSoundRef = useRef<HTMLAudioElement>(null);
+	const sdsReceivedSoundRef = useRef<HTMLAudioElement>(null);
 
 	useEffect(() => {
 		if (typeof window !== "undefined") {
-			MRTstatusSoundRef.current = new Audio("/sounds/MRT-status.mp3");
-			MrtMessageReceivedSoundRef.current = new Audio("/sounds/MRT-message-received.mp3");
-			MRTstatusSoundRef.current.onended = () => {
-				if (!selectedStation || !connectedAircraft?.fmsStatus) return;
-				setPage({
-					page: "home",
-					station: selectedStation,
-					fmsStatus: connectedAircraft?.fmsStatus,
-				});
-			};
-			MrtMessageReceivedSoundRef.current.onended = () => {
-				if (!selectedStation || !connectedAircraft?.fmsStatus) return;
-				if (mrtState.page === "sds") return;
-				setPage({
-					page: "home",
-					station: selectedStation,
-					fmsStatus: connectedAircraft?.fmsStatus,
-				});
-			};
+			longBtnPressSoundRef.current = new Audio("/sounds/1504.wav");
+			statusSentSoundRef.current = new Audio("/sounds/403.wav");
+			sdsReceivedSoundRef.current = new Audio("/sounds/775.wav");
 		}
-	}, [connectedAircraft?.fmsStatus, selectedStation, setPage, mrtState.page]);
+	}, []);
 
-	const fmsStatus = connectedAircraft?.fmsStatus || "NaN";
-
-	useEffect(() => {
-		if (!connectedAircraft) return;
-		if (mrtState.page === "new-status") {
-			if (fmsStatus === "J" || fmsStatus === "c") {
-				MrtMessageReceivedSoundRef.current?.play();
-			} else {
-				MRTstatusSoundRef.current?.play();
-			}
-		} else if (mrtState.page === "sds") {
-			MrtMessageReceivedSoundRef.current?.play();
-		}
-	}, [mrtState, fmsStatus, connectedAircraft, selectedStation]);
+	return {
+		longBtnPressSoundRef,
+		statusSentSoundRef,
+		sdsReceivedSoundRef,
+	};
 };

apps/dispatch/app/(app)/pilot/page.tsx

@@ -23,7 +23,7 @@ const Map = dynamic(() => import("_components/map/Map"), {
 });
 
 const PilotPage = () => {
-	const { connectedAircraft, status,  } = usePilotConnectionStore((state) => state);
+	const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
 	const { latestMission } = useDmeStore((state) => state);
 	// Query will be cached anyway, due to this, displayed Markers are in sync with own Aircraft connection-warning
 	const { data: aircrafts } = useQuery({
@@ -94,10 +94,20 @@ const PilotPage = () => {
 						</div>
 					</div>
 				</div>
-				<div className="flex h-full w-1/3">
+				<div className="flex h-full w-1/3 min-w-[500px]">
 					<div className="bg-base-300 flex h-full w-full flex-col p-4">
 						<div className="flex justify-between">
-							<h2 className="card-title mb-2">MRT & DME</h2>
+							<div className="mb-2 flex items-center justify-end gap-2">
+								<h2 className="card-title">MRT & DME</h2>
+								<a
+									href="https://docs.virtualairrescue.com/allgemein/var-systeme/leitstelle/pilot.html"
+									target="_blank"
+									rel="noopener noreferrer"
+									className="link text-xs text-gray-500 hover:underline"
+								>
+									Hilfe
+								</a>
+							</div>
 							<div
 								className="tooltip tooltip-left mb-4"
 								data-tip="Dadurch wird der Einsatz erneut an den Desktop-Client gesendet."