Neues MRt eingefügt. Status 059 sind nun keine FMS status mehr

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

@@ -0,0 +1,110 @@
+import { CSSProperties, useRef } from "react";
+import { useButtons } from "./useButtons";
+import { useSounds } from "./useSounds";
+
+const MRT_BUTTON_STYLES: CSSProperties = {
+	cursor: "pointer",
+	zIndex: "9999",
+	backgroundColor: "transparent",
+	border: "none",
+};
+
+interface MrtButtonProps {
+	onClick: () => void;
+	onHold?: () => void;
+	style: CSSProperties;
+}
+
+const MrtButton = ({ onClick, onHold, style }: MrtButtonProps) => {
+	const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+	const handleMouseDown = () => {
+		if (!onHold) return;
+		timeoutRef.current = setTimeout(onHold, 500);
+	};
+
+	const handleMouseUp = () => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			onClick();
+		}
+	};
+
+	return (
+		<button
+			onMouseDown={handleMouseDown}
+			onMouseUp={handleMouseUp}
+			onMouseLeave={() => timeoutRef.current && clearTimeout(timeoutRef.current)}
+			style={style}
+		/>
+	);
+};
+
+export const MrtButtons = () => {
+	const { handleHold, handleKlick } = useButtons();
+
+	return (
+		<>
+			<MrtButton
+				onHold={handleHold("3r")}
+				onClick={handleKlick("3r")}
+				style={{ gridArea: "9 / 12 / 11 / 13", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("3l")}
+				onClick={handleKlick("3l")}
+				style={{ gridArea: "9 / 2 / 11 / 3", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("1")}
+				onClick={handleKlick("1")}
+				style={{ gridArea: "2 / 14 / 3 / 15", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("2")}
+				onClick={handleKlick("2")}
+				style={{ gridArea: "2 / 16 / 3 / 17", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("3")}
+				onClick={handleKlick("3")}
+				style={{ gridArea: "2 / 18 / 3 / 19", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("4")}
+				onClick={handleKlick("4")}
+				style={{ gridArea: "4 / 14 / 6 / 15", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("5")}
+				onClick={handleKlick("5")}
+				style={{ gridArea: "4 / 16 / 6 / 17", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("6")}
+				onClick={handleKlick("6")}
+				style={{ gridArea: "4 / 18 / 6 / 19", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("7")}
+				onClick={handleKlick("7")}
+				style={{ gridArea: "8 / 14 / 10 / 15", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("8")}
+				onClick={handleKlick("8")}
+				style={{ gridArea: "8 / 16 / 10 / 17", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("9")}
+				onClick={handleKlick("9")}
+				style={{ gridArea: "8 / 18 / 10 / 19", ...MRT_BUTTON_STYLES }}
+			/>
+			<MrtButton
+				onHold={handleHold("0")}
+				onClick={handleKlick("0")}
+				style={{ gridArea: "11 / 16 / 13 / 17", ...MRT_BUTTON_STYLES }}
+			/>
+		</>
+	);
+};

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/MrtDisplay.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { SetPageParams, useMrtStore } from "_store/pilot/MrtStore";
+import Image, { StaticImageData } from "next/image";
+import PAGE_HOME from "./images/PAGE_Home.png";
+import PAGE_Call from "./images/PAGE_Call.png";
+import PAGE_Off from "./images/PAGE_Off.png";
+import PAGE_STARTUP from "./images/PAGE_Startup.png";
+import { useEffect, useState } from "react";
+import { cn, useDebounce } from "@repo/shared-components";
+import "./MrtDisplay.css";
+import { useSession } from "next-auth/react";
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { fmsStatusDescriptionShort } from "_data/fmsStatusDescription";
+import { useAudioStore } from "_store/audioStore";
+import { ROOMS } from "_data/livekitRooms";
+
+export const MrtDisplay = () => {
+	const { page, setPage, popup } = useMrtStore((state) => state);
+
+	const { connectedAircraft, selectedStation } = usePilotConnectionStore((state) => state);
+	const { room, speakingParticipants, isTalking } = useAudioStore((state) => state);
+	const [pageImage, setPageImage] = useState<{
+		src: StaticImageData;
+		name: SetPageParams["page"];
+	}>({
+		src: PAGE_Off,
+		name: "off",
+	});
+	const [nextImage, setNextImage] = useState<
+		| {
+				src: StaticImageData;
+				name: SetPageParams["page"];
+		  }
+		| undefined
+	>(undefined);
+
+	const session = useSession();
+
+	useDebounce(
+		() => {
+			if (!nextImage) return;
+			setPageImage(nextImage);
+			setNextImage(undefined);
+		},
+		1000,
+		[nextImage],
+	);
+
+	useEffect(() => {
+		console.log("speakingParticipants", speakingParticipants, isTalking, page);
+		if ((speakingParticipants.length > 0 || isTalking) && page === "home") {
+			setPage({
+				page: "voice-call",
+			});
+		}
+	}, [speakingParticipants, isTalking, page, setPage]);
+
+	useDebounce(
+		() => {
+			if (page === "startup") {
+				setPage({
+					page: "home",
+				});
+			}
+		},
+		6000,
+		[page, setPage],
+	);
+
+	useDebounce(
+		() => {
+			if (page === "voice-call" && speakingParticipants.length === 0 && !isTalking) {
+				setPage({
+					page: "home",
+				});
+			}
+		},
+		4000,
+		[page, setPage, speakingParticipants, isTalking],
+	);
+
+	useEffect(() => {
+		switch (page) {
+			case "home":
+				setNextImage({ src: PAGE_HOME, name: "home" });
+				break;
+			case "voice-call":
+				setNextImage({ src: PAGE_Call, name: "voice-call" });
+				break;
+			case "off":
+				setNextImage({ src: PAGE_Off, name: "off" });
+				break;
+			case "startup":
+				setNextImage({ src: PAGE_STARTUP, name: "startup" });
+				break;
+		}
+	}, [page]);
+
+	const DisplayText = ({ pageName }: { pageName: SetPageParams["page"] }) => {
+		return (
+			<div
+				className={cn("font-semibold text-blue-900", !!popup && "filter")}
+				style={{
+					fontFamily: "Bahnschrift",
+				}}
+			>
+				{pageName == "startup" && (
+					<p className="absolute left-[17%] top-[65%] h-[10%] w-[39%] text-center">
+						Bediengerät #{session.data?.user?.publicId}
+					</p>
+				)}
+				{pageName == "home" && (
+					<>
+						<p className="absolute left-[24%] top-[21%] h-[4%] w-[1%] text-xs">
+							{(room?.numParticipants || 1) - 1}
+						</p>
+						<p
+							className={cn(
+								"absolute left-[17%] top-[24%] h-[8%] w-[39%] text-center",
+								!connectedAircraft && "text-red-600",
+							)}
+						>
+							{connectedAircraft && (
+								<>
+									Status {connectedAircraft.fmsStatus} -{" "}
+									{fmsStatusDescriptionShort[connectedAircraft?.fmsStatus || "0"]}
+								</>
+							)}
+							{!connectedAircraft && <>Keine Verbindung</>}
+						</p>
+						<p className="absolute left-[22.7%] top-[38%] h-[8%] w-[34%] text-xs">
+							{room?.name || "Keine RG gefunden"}
+						</p>
+						<p className="absolute left-[28%] top-[44.5%] h-[8%] w-[34%] text-xs">
+							{ROOMS.find((r) => r.name === room?.name)?.id}
+						</p>
+					</>
+				)}
+				{pageName == "voice-call" && (
+					<div>
+						<p className="absolute left-[18%] top-[35%] h-[8%] w-[38%]">
+							{isTalking && selectedStation?.bosCallsignShort}
+							{speakingParticipants.length > 0 &&
+								speakingParticipants.map((p) => p.attributes.role).join(", ")}
+						</p>
+						<p className="absolute left-[18%] top-[53.5%] h-[8%] w-[38%]">
+							{room?.name || "Keine RG gefunden"}
+						</p>
+						<p className="absolute left-[18%] top-[60%] h-[8%] w-[36.7%] text-right">
+							{ROOMS.find((r) => r.name === room?.name)?.id}
+						</p>
+					</div>
+				)}
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<Image
+				src={pageImage.src}
+				alt=""
+				width={1000}
+				height={1000}
+				className={`z-10 col-span-full row-span-full`}
+			/>
+			{nextImage && (
+				<div className="transition-image animate-reveal relative z-20 col-span-full row-span-full">
+					<Image src={nextImage.src} alt="" width={1000} height={1000} className="h-full w-full" />
+					<DisplayText pageName={nextImage.name} />
+				</div>
+			)}
+			<div className="relative z-10 col-span-full row-span-full overflow-hidden">
+				<DisplayText pageName={pageImage.name} />
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,100 @@
+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 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 { 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";
+
+export const MrtPopups = () => {
+	const { sdsReceivedSoundRef } = useSounds();
+
+	const { popup, setPopup, setStringifiedData, stringifiedData } = useMrtStore((state) => state);
+	const { connectedAircraft } = 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 undefined:
+			case null:
+				setPopupImage(null);
+				break;
+		}
+	}, [popup]);
+
+	useDebounce(
+		() => {
+			if (!popup || popup == "sds-received") return;
+			setPopup(null);
+		},
+		3000,
+		[popup],
+	);
+
+	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"] }) => {
+		return (
+			<div
+				className={cn("font-semibold text-blue-900", !!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>
+				)}
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<Image src={popupImage} alt="" className="z-20 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,28 @@
-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";
 
 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 { longBtnPressSoundRef, statusSentSoundRef } = useSounds();
+	const queryClient = useQueryClient();
+	const { selectedStation: station, 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,27 +34,30 @@ export const useButtons = () => {
 		}) => editConnectedAircraftAPI(aircraftId, data),
 	});
 
-	const { setPage } = useMrtStore((state) => state);
+	const { setPage, setPopup, page, popup, setStringifiedData } = useMrtStore((state) => state);
 
-	const handleButton =
-		(button: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "home") => () => {
-			if (connectionStatus !== "connected") return;
+	const handleHold =
+		(button: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "home" | "3l" | "3r") =>
+		async () => {
+			/* if (connectionStatus !== "connected") return; */
+			if (button === "1" && page === "off") {
+				setPage({ page: "startup" });
+				return;
+			}
 			if (!station) return;
+			if (!session.data?.user) 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"
+				button === "8"
 			) {
-				setPage({ page: "sending-status", station });
-
+				longBtnPressSoundRef.current?.play();
+				const delay = Math.random() * 1500 + 500;
 				setTimeout(async () => {
 					await updateAircraftMutation.mutateAsync({
 						aircraftId: connectedAircraft.id,
@@ -49,28 +65,51 @@ export const useButtons = () => {
 							fmsStatus: button,
 						},
 					});
-					setPage({
-						page: "home",
-						station,
-						fmsStatus: button,
+					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: station.id,
+								station,
+								user: getPublicUser(session.data?.user),
+								status: button,
+							},
+						},
 					});
-				}, 1000);
-			} else {
-				setPage({ page: "home", fmsStatus: connectedAircraft.fmsStatus || "6", station });
+					setStringifiedData({ sentSdsText: button });
+					statusSentSoundRef.current?.play();
+					setPopup({ popup: "sds-sent" });
+				}, delay);
 			}
 		};
 
+	const handleKlick =
+		(button: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "home" | "3l" | "3r") =>
+		async () => {
+			//implement Kurzwahl when button is clicked short to dial
+			if (popup == "sds-received" && button === "3r") {
+				setPopup(null);
+			}
+			return false;
+		};
+
 	useEffect(() => {
 		pilotSocket.on("connect", () => {
-			if (!station) return;
-			setPage({ page: "home", fmsStatus: "6", station });
+			const { page } = useMrtStore.getState();
+			if (!station || page !== "off") return;
+			setPage({ page: "startup" });
 		});
+	}, [setPage, station, 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,
+	};
 };