added DME, fixed sync and bugs. Rewrote setDisplay logic

apps/dispatch/app/pilot/_components/dme/Dme.tsx

@@ -0,0 +1,130 @@
+import { CSSProperties } from "react";
+import sQuadImageNoReflections from "./Melder_NoReflections.png";
+import sQuadReflection from "./reflektion.png";
+import { useButtons } from "./useButtons";
+import { useSounds } from "./useSounds";
+import Image from "next/image";
+import { useDmeStore } from "_store/pilot/dmeStore";
+
+const DME_BUTTON_STYLES: CSSProperties = {
+	cursor: "pointer",
+	zIndex: "9999",
+	backgroundColor: "transparent",
+	border: "none",
+};
+
+export interface DisplayLineProps {
+	style?: CSSProperties;
+	textLeft?: string;
+	textMid?: string;
+	textRight?: string;
+}
+
+const DisplayLine = ({
+	style = {},
+	textLeft,
+	textMid,
+	textRight,
+}: DisplayLineProps) => {
+	const INNER_TEXT_PARTS: CSSProperties = {
+		fontFamily: "Melder",
+		flex: "1",
+		flexBasis: "auto",
+		overflowWrap: "break-word",
+	};
+
+	return (
+		<div
+			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 Dme = () => {
+	useSounds();
+	const { handleButton } = useButtons();
+	const lines = useDmeStore((state) => state.lines);
+
+	return (
+		<div
+			style={{
+				display: "grid",
+				aspectRatio: "1037 / 800",
+				color: "black",
+				height: "auto",
+				width: "auto",
+				maxHeight: "100%",
+				maxWidth: "100%",
+				overflow: "hidden",
+				gridTemplateColumns:
+					"25.84% 6.08% 10.99% 11.57% 11.28% 10.90% 18.71% 4.63%",
+				gridTemplateRows: "2.66% 9.3% 8.9% 7.2% 45.05% 27%",
+			}}
+		>
+			<Image
+				src={sQuadImageNoReflections}
+				alt="sQuadImage"
+				style={{
+					zIndex: 0,
+					height: "100%",
+					width: "100%",
+					gridArea: "1 / 1 / 10 / 10",
+				}}
+			/>
+			<button
+				onClick={handleButton("main")}
+				style={{ gridArea: "2 / 7 / 4 / 8", ...DME_BUTTON_STYLES }}
+			/>
+			<button
+				onClick={handleButton("menu")}
+				style={{ gridArea: "3 / 2 / 4 / 3", ...DME_BUTTON_STYLES }}
+			/>
+			{/* <button
+                    onClick={handleButton('left')}
+                    style={{ gridArea: '3 / 4 / 4 / 5', ...DME_BUTTON_STYLES }}
+                />
+                <button
+                    onClick={handleButton('right')}
+                    style={{ gridArea: '3 / 5 / 4 / 6', ...DME_BUTTON_STYLES }}
+                /> */}
+			<Image
+				src={sQuadReflection}
+				alt="sQuadImage"
+				style={{
+					zIndex: 1,
+					height: "100%",
+					width: "100%",
+					gridArea: "1 / 1 / 10 / 10",
+				}}
+			/>
+			<div
+				id="display"
+				style={{
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "space-between",
+					zIndex: "2",
+					gridArea: "5 / 2 / 6 / 6",
+					padding: "5px",
+					overflowX: "hidden",
+					overflowY: "auto",
+				}}
+			>
+				{lines.map((l, i) => {
+					return <DisplayLine key={`line-${i}`} {...l} />;
+				})}
+			</div>
+		</div>
+	);
+};

apps/dispatch/app/pilot/_components/dme/useButtons.ts

@@ -0,0 +1,33 @@
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { useDmeStore } from "_store/pilot/dmeStore";
+
+import { useSession } from "next-auth/react";
+export const useButtons = () => {
+	const { page, setPage } = useDmeStore((state) => state);
+	const user = useSession().data?.user;
+	const station = usePilotConnectionStore((state) => state.selectedStation);
+
+	const handleButton = (button: "main" | "menu" | "left" | "right") => () => {
+		switch (button) {
+			case "main":
+				if (page === "mission") {
+					setPage({ page: "acknowledge" });
+				}
+				break;
+			case "menu":
+				console.log("home", page, { station, user });
+				if (station && user) {
+					setPage({ page: "home", station, user });
+				} else {
+					setPage({ page: "error", error: "No station or user found" });
+				}
+				break;
+			default:
+				setPage({ page: "error", error: "Button now allowed" });
+
+				break;
+		}
+	};
+
+	return { handleButton };
+};

apps/dispatch/app/pilot/_components/dme/useSounds.ts

@@ -0,0 +1,52 @@
+"use client";
+import { usePilotConnectionStore } from "_store/pilot/connectionStore";
+import { useDmeStore } from "_store/pilot/dmeStore";
+import { useEffect, useRef } from "react";
+
+export const useSounds = () => {
+	const { page, setPage } = useDmeStore((state) => state);
+	const mission = usePilotConnectionStore((state) => state.activeMission);
+
+	const newMissionSound = useRef<HTMLAudioElement | null>(null);
+
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			newMissionSound.current = new Audio("/sounds/Melder3.wav");
+		}
+	}, []);
+
+	useEffect(() => {
+		const timeouts: NodeJS.Timeout[] = [];
+
+		if (page === "new-mission" && newMissionSound.current) {
+			console.log("new-mission", mission);
+			newMissionSound.current.currentTime = 0;
+			newMissionSound.current.volume = 0.3;
+			newMissionSound.current.play();
+			if (mission) {
+				timeouts.push(
+					setTimeout(() => setPage({ page: "mission", mission }), 500),
+				);
+			}
+		} else if (page === "acknowledge") {
+			newMissionSound.current?.pause();
+			if (mission) {
+				timeouts.push(
+					setTimeout(() => setPage({ page: "mission", mission }), 500),
+				);
+			} else {
+				timeouts.push(
+					setTimeout(
+						() => setPage({ page: "error", error: "Einsatz nicht gebunden" }),
+						500,
+					),
+				);
+			}
+		}
+		return () => {
+			timeouts.forEach((t) => {
+				clearTimeout(t);
+			});
+		};
+	}, [page, setPage, mission]);
+};

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

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import { CSSProperties, useEffect } from "react";
 import MrtImage from "./MRT.png";
 import { useButtons } from "./useButtons";
 import { useSounds } from "./useSounds";

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

@@ -1,115 +1,23 @@
-import { useSession } from "next-auth/react";
+import { ConnectedAircraft } from "@repo/db";
 import { usePilotConnectionStore } from "_store/pilot/connectionStore";
 import { useMrtStore } from "_store/pilot/MrtStore";
+import { pilotSocket } from "pilot/socket";
 import { editConnectedAircraftAPI } from "querys/aircrafts";
-import { Station } from "@repo/db";
-import { DisplayLineProps } from "pilot/_components/mrt/Mrt";
-
-export const fmsStatusDescription: { [key: string]: string } = {
-	NaN: "Keine Daten",
-	"0": "Prio. Sprechwunsch",
-	"1": "Frei auf Funk",
-	"2": "Einsatzbereit am LRZ",
-	"3": "Auf dem Weg",
-	"4": "Am Einsatzort",
-	"5": "Sprechwunsch",
-	"6": "Nicht einsatzbereit",
-	"7": "Patient aufgenommen",
-	"8": "Am Transportziel",
-	"9": "Fremdanmeldung",
-	E: "Indent/Abbruch/Einsatzbefehl abgebrochen",
-	C: "Anmelden zur Übernahme des Einsatzes",
-	F: "Kommen über Draht",
-	H: "Fahren auf Wache",
-	J: "Sprechaufforderung",
-	L: "Lagebericht abgeben",
-	P: "Einsatz mit Polizei/Pause machen",
-	U: "Ungültiger Status",
-	c: "Status korrigieren",
-	d: "Transportziel angeben",
-	h: "Zielklinik verständigt",
-	o: "Warten, alle Abfrageplätze belegt",
-	u: "Verstanden",
-};
-
-export const getSendingLines = (station: Station): DisplayLineProps[] => {
-	return [
-		{
-			textLeft: `VAR#.${station?.bosCallsign}123`,
-			style: { fontWeight: "bold" },
-			textSize: "2",
-		},
-		{ textLeft: "ILS VAR#", textSize: "3" },
-		{
-			textMid: "sending...",
-			style: { fontWeight: "bold" },
-			textSize: "4",
-		},
-		{
-			textLeft: "Status wird gesendet...",
-			textSize: "1",
-		},
-	];
-};
-
-export const getHomeLines = (
-	station: Station,
-	fmsStatus: string,
-): DisplayLineProps[] => {
-	return [
-		{
-			textLeft: `VAR#.${station?.bosCallsign}`,
-			style: { fontWeight: "bold" },
-			textSize: "2",
-		},
-		{ textLeft: "ILS VAR#", textSize: "3" },
-		{
-			textLeft: fmsStatus,
-			style: { fontWeight: "extrabold" },
-			textSize: "4",
-		},
-		{
-			textLeft: fmsStatusDescription[fmsStatus],
-			textSize: "1",
-		},
-	];
-};
-
-export const getNewStatusLines = (
-	station: Station,
-	fmsStatus: string,
-): DisplayLineProps[] => {
-	return [
-		{
-			textLeft: `VAR#.${station?.bosCallsign}`,
-			style: { fontWeight: "bold" },
-			textSize: "2",
-		},
-		{ textLeft: "ILS VAR#", textSize: "3" },
-		{
-			textLeft: fmsStatus,
-			style: { fontWeight: "extrabold" },
-			textSize: "4",
-		},
-		{
-			textLeft: fmsStatusDescription[fmsStatus],
-			textSize: "1",
-		},
-	];
-};
+import { useEffect } from "react";
 
 export const useButtons = () => {
-	const user = useSession().data?.user;
 	const station = usePilotConnectionStore((state) => state.selectedStation);
 	const connectedAircraft = usePilotConnectionStore(
 		(state) => state.connectedAircraft,
 	);
+	const connectionStatus = usePilotConnectionStore((state) => state.status);
 
-	const { page, setLines } = useMrtStore((state) => state);
+	const { page, setPage } = useMrtStore((state) => state);
 
 	const handleButton =
 		(button: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0") =>
 		() => {
+			if (connectionStatus !== "connected") return;
 			if (!station) return;
 			if (!connectedAircraft?.id) return;
 			if (
@@ -125,16 +33,32 @@ export const useButtons = () => {
 				button === "0"
 			) {
 				if (page !== "home") return;
-				setLines(getSendingLines(station));
+				setPage({ page: "sending-status", station });
 
 				setTimeout(async () => {
 					await editConnectedAircraftAPI(connectedAircraft!.id, {
 						fmsStatus: button,
 					});
-					setLines(getNewStatusLines(station, button));
+					setPage({
+						page: "home",
+						station,
+						fmsStatus: button,
+					});
 				}, 1000);
 			}
 		};
 
+	useEffect(() => {
+		pilotSocket.on("connect", () => {
+			if (!station) return;
+			setPage({ page: "home", fmsStatus: "6", station });
+		});
+
+		pilotSocket.on("aircraft-update", () => {
+			if (!station) return;
+			setPage({ page: "new-status", station });
+		});
+	}, [setPage, station]);
+
 	return { handleButton };
 };

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

@@ -1,66 +1,53 @@
 "use client";
 import { usePilotConnectionStore } from "_store/pilot/connectionStore";
 import { useMrtStore } from "_store/pilot/MrtStore";
-import { editConnectedAircraftAPI } from "querys/aircrafts";
 import { useEffect, useRef } from "react";
 
-const MRTstatusSound = new Audio("/sounds/MRT-status.mp3");
-const MrtMessageReceivedSound = new Audio("/sounds/MRT-message-received.mp3");
-
 export const useSounds = () => {
 	const mrtState = useMrtStore((state) => state);
 	const { connectedAircraft, selectedStation } = usePilotConnectionStore(
 		(state) => state,
 	);
 
-	const fmsStatus = connectedAircraft?.fmsStatus || "NaN";
-
-	const previousFmsStatus = useRef(fmsStatus || "6");
-	const timeout = useRef<NodeJS.Timeout>(null);
+	const setPage = useMrtStore((state) => state.setPage);
+	const MRTstatusSoundRef = useRef<HTMLAudioElement>(null);
+	const MrtMessageReceivedSoundRef = useRef<HTMLAudioElement>(null);
 
 	useEffect(() => {
-		const handleSoundEnd = () => {
-			mrtState.setPage("home");
-		};
+		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;
+				setPage({
+					page: "home",
+					station: selectedStation,
+					fmsStatus: connectedAircraft?.fmsStatus,
+				});
+			};
+		}
+	}, [connectedAircraft?.fmsStatus, selectedStation, setPage]);
 
-		const playSound = (sound: HTMLAudioElement) => {
-			sound.play();
-			sound.addEventListener("ended", handleSoundEnd);
-		};
+	const fmsStatus = connectedAircraft?.fmsStatus || "NaN";
 
+	useEffect(() => {
 		if (!connectedAircraft) return;
 		if (mrtState.page === "new-status") {
-			if (fmsStatus === "J") {
-				playSound(MrtMessageReceivedSound);
-
-				timeout.current = setTimeout(() => {
-					editConnectedAircraftAPI(connectedAircraft.id, {
-						fmsStatus: previousFmsStatus.current,
-					});
-				}, 5000);
-			} else if (previousFmsStatus.current !== fmsStatus) {
-				playSound(MRTstatusSound);
+			if (fmsStatus === "J" || fmsStatus === "c") {
+				MrtMessageReceivedSoundRef.current?.play();
 			} else {
-				handleSoundEnd();
-			}
-			if (!timeout.current) {
-				previousFmsStatus.current = fmsStatus || "6";
+				MRTstatusSoundRef.current?.play();
 			}
 		}
-		return () => {
-			if (timeout.current) clearTimeout(timeout.current);
-			[MRTstatusSound, MrtMessageReceivedSound].forEach((sound) => {
-				sound.removeEventListener("ended", handleSoundEnd);
-				sound.pause();
-				sound.currentTime = 0;
-			});
-		};
-	}, [
-		mrtState,
-		fmsStatus,
-		connectedAircraft,
-		selectedStation,
-		previousFmsStatus,
-		timeout,
-	]);
+	}, [mrtState, fmsStatus, connectedAircraft, selectedStation]);
 };

apps/dispatch/app/pilot/_components/navbar/Connection.tsx

@@ -67,7 +67,7 @@ export const ConnectionBtn = () => {
 							</span>
 						</h3>
 					) : (
-						<h3 className="text-lg font-bold mb-5">Als Disponent anmelden</h3>
+						<h3 className="text-lg font-bold mb-5">Als Pilot anmelden</h3>
 					)}
 					<fieldset className="fieldset w-full">
 						<label className="floating-label w-full text-base">