Revert "PR v2.0.7"
This commit is contained in:
PxlLoewe
@@ -14,7 +14,7 @@ export const ConnectionBtn = () => {
|
||||
const connection = useDispatchConnectionStore((state) => state);
|
||||
const [form, setForm] = useState({
|
||||
logoffTime: "",
|
||||
selectedZone: "VAR_LST_RD_01",
|
||||
selectedZone: "LST_01",
|
||||
ghostMode: false,
|
||||
});
|
||||
const changeDispatcherMutation = useMutation({
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { useEffect } from "react"; // ...existing code...
|
||||
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, setNightMode, page } = useMrtStore((state) => state);
|
||||
|
||||
useEffect(() => {
|
||||
const checkNightMode = () => {
|
||||
const currentHour = new Date().getHours();
|
||||
setNightMode(currentHour >= 22 || currentHour < 8);
|
||||
};
|
||||
|
||||
checkNightMode(); // Initial check
|
||||
const intervalId = setInterval(checkNightMode, 60000); // Check every minute
|
||||
|
||||
return () => clearInterval(intervalId); // Cleanup on unmount
|
||||
}, [setNightMode]); // ...existing code...
|
||||
|
||||
return (
|
||||
<Image
|
||||
src={nightMode && page !== "off" ? NIGHT_BASE_IMG : DAY_BASE_IMG}
|
||||
alt=""
|
||||
className="z-30 col-span-full row-span-full"
|
||||
/>
|
||||
);
|
||||
};
|
||||
BIN
apps/dispatch/app/(app)/pilot/_components/mrt/MRT.png
Normal file
BIN
apps/dispatch/app/(app)/pilot/_components/mrt/MRT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
BIN
apps/dispatch/app/(app)/pilot/_components/mrt/MRT_MESSAGE.png
Normal file
BIN
apps/dispatch/app/(app)/pilot/_components/mrt/MRT_MESSAGE.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
@@ -1,9 +1,22 @@
|
||||
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 { MrtBase } from "./Base";
|
||||
import { MrtDisplay } from "./MrtDisplay";
|
||||
import { MrtButtons } from "./MrtButtons";
|
||||
import { MrtPopups } from "./MrtPopups";
|
||||
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,
|
||||
};
|
||||
|
||||
export interface DisplayLineProps {
|
||||
lineStyle?: CSSProperties;
|
||||
@@ -14,7 +27,45 @@ 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"
|
||||
@@ -27,16 +78,150 @@ export const Mrt = () => {
|
||||
maxHeight: "100%",
|
||||
maxWidth: "100%",
|
||||
color: "white",
|
||||
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%",
|
||||
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%",
|
||||
}}
|
||||
>
|
||||
<MrtPopups />
|
||||
<MrtDisplay />
|
||||
<MrtButtons />
|
||||
<MrtBase />
|
||||
{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,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
import { CSSProperties, useRef } from "react";
|
||||
import { useButtons } from "./useButtons";
|
||||
|
||||
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(handleTimeoutExpired, 500);
|
||||
};
|
||||
|
||||
const handleTimeoutExpired = () => {
|
||||
timeoutRef.current = null;
|
||||
if (onHold) {
|
||||
onHold();
|
||||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<>
|
||||
{/* BELOW DISPLAY */}
|
||||
<MrtButton
|
||||
onClick={handleKlick("arrow-left")}
|
||||
onHold={handleHold("arrow-left")}
|
||||
style={{ gridArea: "14 / 4 / 15 / 5", ...MRT_BUTTON_STYLES }}
|
||||
/>
|
||||
<MrtButton
|
||||
onClick={handleKlick("arrow-down")}
|
||||
onHold={handleHold("arrow-down")}
|
||||
style={{ gridArea: "14 / 6 / 15 / 7", ...MRT_BUTTON_STYLES }}
|
||||
/>
|
||||
<MrtButton
|
||||
onClick={handleKlick("arrow-up")}
|
||||
onHold={handleHold("arrow-up")}
|
||||
style={{ gridArea: "14 / 8 / 15 / 9", ...MRT_BUTTON_STYLES }}
|
||||
/>
|
||||
<MrtButton
|
||||
onClick={handleKlick("arrow-right")}
|
||||
onHold={handleHold("arrow-right")}
|
||||
style={{ gridArea: "14 / 10 / 15 / 11", ...MRT_BUTTON_STYLES }}
|
||||
/>
|
||||
|
||||
<MrtButton
|
||||
onClick={handleKlick("wheel-knob")}
|
||||
onHold={handleHold("wheel-knob")}
|
||||
style={{ gridArea: "14 / 2 / 15 / 4", ...MRT_BUTTON_STYLES }}
|
||||
/>
|
||||
{/* LINE SELECT KEY */}
|
||||
<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 }}
|
||||
/>
|
||||
{/* NUM PAD */}
|
||||
<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 }}
|
||||
/>
|
||||
<MrtButton
|
||||
onHold={handleHold("end-call")}
|
||||
onClick={handleKlick("end-call")}
|
||||
style={{ gridArea: "13 / 16 / 15 / 17", ...MRT_BUTTON_STYLES }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@@ -1,270 +0,0 @@
|
||||
"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_HOME_NO_GROUP from "./images/PAGE_Home_no_group.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, useRef, 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, setPopup, setStringifiedData, stringifiedData } = useMrtStore(
|
||||
(state) => state,
|
||||
);
|
||||
const callEstablishedRef = useRef(false);
|
||||
const session = useSession();
|
||||
const { connectedAircraft, selectedStation } = usePilotConnectionStore((state) => state);
|
||||
const { room, speakingParticipants, isTalking, state } = 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);
|
||||
|
||||
useDebounce(
|
||||
() => {
|
||||
if (!nextImage) return;
|
||||
setPageImage(nextImage);
|
||||
setNextImage(undefined);
|
||||
},
|
||||
1000,
|
||||
[nextImage],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
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 === "startup") {
|
||||
setPopup({
|
||||
popup: "login",
|
||||
});
|
||||
}
|
||||
},
|
||||
7500,
|
||||
[page, setPage],
|
||||
);
|
||||
|
||||
useDebounce(
|
||||
() => {
|
||||
if (page === "voice-call" && speakingParticipants.length === 0 && !isTalking) {
|
||||
setPage({
|
||||
page: "home",
|
||||
});
|
||||
}
|
||||
},
|
||||
4000,
|
||||
[page, setPage, speakingParticipants, isTalking],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const timeouts: NodeJS.Timeout[] = [];
|
||||
if (page === "voice-call") {
|
||||
setStringifiedData({
|
||||
callTextHeader: "Wählen",
|
||||
});
|
||||
timeouts.push(
|
||||
setTimeout(() => {
|
||||
setStringifiedData({
|
||||
callTextHeader: "Anruf...",
|
||||
});
|
||||
}, 500),
|
||||
|
||||
setTimeout(() => {
|
||||
setStringifiedData({
|
||||
callTextHeader: "Gruppenruf",
|
||||
});
|
||||
}, 800),
|
||||
setTimeout(() => {
|
||||
callEstablishedRef.current = true;
|
||||
}, 1500),
|
||||
);
|
||||
}
|
||||
return () => {
|
||||
timeouts.forEach((t) => clearTimeout(t));
|
||||
};
|
||||
}, [page, setStringifiedData]);
|
||||
|
||||
useDebounce(
|
||||
() => {
|
||||
if (isTalking && page === "voice-call") {
|
||||
setStringifiedData({
|
||||
callTextHeader: "Sprechen",
|
||||
});
|
||||
}
|
||||
},
|
||||
1500,
|
||||
[page, isTalking],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isTalking && page === "voice-call" && callEstablishedRef.current) {
|
||||
console.log("SET TO SPRECHEN", stringifiedData.callTextHeader);
|
||||
setStringifiedData({
|
||||
callTextHeader: "Sprechen",
|
||||
});
|
||||
} else if (
|
||||
!isTalking &&
|
||||
page === "voice-call" &&
|
||||
stringifiedData.callTextHeader === "Sprechen"
|
||||
) {
|
||||
setStringifiedData({
|
||||
callTextHeader: "Gruppenruf",
|
||||
});
|
||||
}
|
||||
}, [page, stringifiedData.callTextHeader, isTalking, setStringifiedData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (page !== "voice-call") {
|
||||
callEstablishedRef.current = false;
|
||||
}
|
||||
|
||||
switch (page) {
|
||||
case "home":
|
||||
if (state == "connected") {
|
||||
setNextImage({ src: PAGE_HOME, name: "home" });
|
||||
} else {
|
||||
setNextImage({ src: PAGE_HOME_NO_GROUP, 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, state]);
|
||||
|
||||
const DisplayText = ({ pageName }: { pageName: SetPageParams["page"] }) => {
|
||||
return (
|
||||
<div
|
||||
className={cn("font-semibold text-[#000d60]", !!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-[25%] 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-[37.8%] flex h-[5%] w-[34%] items-center text-xs">
|
||||
{state == "connected" ? room?.name : "Keine RG gewählt"}
|
||||
</p>
|
||||
<p className="absolute left-[28%] top-[44.5%] h-[8%] w-[34%] text-xs">
|
||||
{state == "connected" && ROOMS.find((r) => r.name === room?.name)?.id}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{pageName == "voice-call" && (
|
||||
<div>
|
||||
<p className="absolute left-[18%] top-[18.8%] flex h-[10%] w-[37%] items-center">
|
||||
{stringifiedData.callTextHeader}
|
||||
</p>
|
||||
<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={cn(popup && "brightness-75 filter", "z-10 col-span-full row-span-full")}
|
||||
/>
|
||||
{nextImage && (
|
||||
<div
|
||||
className={cn(
|
||||
popup && "brightness-75 filter",
|
||||
"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={cn(
|
||||
popup && "brightness-75 filter",
|
||||
"relative z-10 col-span-full row-span-full overflow-hidden",
|
||||
)}
|
||||
>
|
||||
<DisplayText pageName={pageImage.name} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,152 +0,0 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 MiB |
@@ -1,58 +1,15 @@
|
||||
import { getPublicUser, MissionSdsStatusLog, Prisma } from "@repo/db";
|
||||
import { 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, 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";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
|
||||
export const useButtons = () => {
|
||||
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 station = usePilotConnectionStore((state) => state.selectedStation);
|
||||
const connectedAircraft = usePilotConnectionStore((state) => state.connectedAircraft);
|
||||
const connectionStatus = usePilotConnectionStore((state) => state.status);
|
||||
const updateAircraftMutation = useMutation({
|
||||
mutationKey: ["edit-pilot-connected-aircraft"],
|
||||
mutationFn: ({
|
||||
@@ -64,161 +21,56 @@ export const useButtons = () => {
|
||||
}) => editConnectedAircraftAPI(aircraftId, data),
|
||||
});
|
||||
|
||||
const { setPage, setPopup, page, popup, setStringifiedData, stringifiedData } = useMrtStore(
|
||||
(state) => state,
|
||||
);
|
||||
const { setPage } = useMrtStore((state) => state);
|
||||
|
||||
const role =
|
||||
(pilotState == "connected" && selectedStation?.bosCallsignShort) ||
|
||||
session.data?.user?.publicId;
|
||||
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 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,
|
||||
},
|
||||
});
|
||||
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(),
|
||||
setTimeout(async () => {
|
||||
await updateAircraftMutation.mutateAsync({
|
||||
aircraftId: connectedAircraft.id,
|
||||
data: {
|
||||
direction: "to-lst",
|
||||
stationId: selectedStation.id,
|
||||
station: selectedStation,
|
||||
user: getPublicUser(session.data?.user),
|
||||
status: button,
|
||||
fmsStatus: 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;
|
||||
};
|
||||
});
|
||||
setPage({
|
||||
page: "home",
|
||||
station,
|
||||
fmsStatus: button,
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
setPage({ page: "home", fmsStatus: connectedAircraft.fmsStatus || "6", station });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
pilotSocket.on("connect", () => {
|
||||
const { page } = useMrtStore.getState();
|
||||
if (!selectedStation || page !== "off") return;
|
||||
setPage({ page: "startup" });
|
||||
if (!station) return;
|
||||
setPage({ page: "home", fmsStatus: "6", station });
|
||||
});
|
||||
}, [setPage, selectedStation, setPopup]);
|
||||
|
||||
return { handleKlick, handleHold };
|
||||
pilotSocket.on("aircraft-update", () => {
|
||||
if (!station) return;
|
||||
setPage({ page: "new-status", station });
|
||||
});
|
||||
}, [setPage, station]);
|
||||
|
||||
return { handleButton };
|
||||
};
|
||||
|
||||
@@ -1,39 +1,52 @@
|
||||
"use client";
|
||||
import { useAudioStore } from "_store/audioStore";
|
||||
import { RoomEvent } from "livekit-client";
|
||||
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
|
||||
import { useMrtStore } from "_store/pilot/MrtStore";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
export const useSounds = () => {
|
||||
const { room } = useAudioStore((state) => state);
|
||||
const longBtnPressSoundRef = useRef<HTMLAudioElement>(null);
|
||||
const statusSentSoundRef = useRef<HTMLAudioElement>(null);
|
||||
const sdsReceivedSoundRef = useRef<HTMLAudioElement>(null);
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
longBtnPressSoundRef.current = new Audio("/sounds/1504.wav");
|
||||
statusSentSoundRef.current = new Audio("/sounds/403.wav");
|
||||
sdsReceivedSoundRef.current = new Audio("/sounds/775.wav");
|
||||
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,
|
||||
});
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
}, [connectedAircraft?.fmsStatus, selectedStation, setPage, mrtState.page]);
|
||||
|
||||
const fmsStatus = connectedAircraft?.fmsStatus || "NaN";
|
||||
|
||||
useEffect(() => {
|
||||
const handleRoomConnected = () => {
|
||||
// Play a sound when connected to the room
|
||||
// connectedSound.play();
|
||||
statusSentSoundRef.current?.play();
|
||||
console.log("Room connected - played sound");
|
||||
};
|
||||
room?.on(RoomEvent.Connected, handleRoomConnected);
|
||||
|
||||
return () => {
|
||||
room?.off(RoomEvent.Connected, handleRoomConnected);
|
||||
};
|
||||
}, [room]);
|
||||
|
||||
return {
|
||||
longBtnPressSoundRef,
|
||||
statusSentSoundRef,
|
||||
sdsReceivedSoundRef,
|
||||
};
|
||||
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]);
|
||||
};
|
||||
|
||||
@@ -76,6 +76,7 @@ export const ConnectionBtn = () => {
|
||||
const session = useSession();
|
||||
const uid = session.data?.user?.id;
|
||||
if (!uid) return null;
|
||||
console.log(bookings);
|
||||
return (
|
||||
<div className="rounded-box bg-base-200 flex items-center justify-center gap-2 p-1">
|
||||
{connection.message.length > 0 && (
|
||||
|
||||
@@ -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,20 +94,10 @@ const PilotPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full w-1/3 min-w-[500px]">
|
||||
<div className="flex h-full w-1/3">
|
||||
<div className="bg-base-300 flex h-full w-full flex-col p-4">
|
||||
<div className="flex justify-between">
|
||||
<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>
|
||||
<h2 className="card-title mb-2">MRT & DME</h2>
|
||||
<div
|
||||
className="tooltip tooltip-left mb-4"
|
||||
data-tip="Dadurch wird der Einsatz erneut an den Desktop-Client gesendet."
|
||||
|
||||
Reference in New Issue
Block a user