Mrt Button bug
This commit is contained in:
PxlLoewe
151
apps/dispatch/app/(app)/pilot/_components/mrt/MrtButtons.tsx
Normal file
151
apps/dispatch/app/(app)/pilot/_components/mrt/MrtButtons.tsx
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
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 }}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
270
apps/dispatch/app/(app)/pilot/_components/mrt/MrtDisplay.tsx
Normal file
270
apps/dispatch/app/(app)/pilot/_components/mrt/MrtDisplay.tsx
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
"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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
@@ -76,7 +76,6 @@ export const ConnectionBtn = () => {
|
|||||||
const session = useSession();
|
const session = useSession();
|
||||||
const uid = session.data?.user?.id;
|
const uid = session.data?.user?.id;
|
||||||
if (!uid) return null;
|
if (!uid) return null;
|
||||||
console.log(bookings);
|
|
||||||
return (
|
return (
|
||||||
<div className="rounded-box bg-base-200 flex items-center justify-center gap-2 p-1">
|
<div className="rounded-box bg-base-200 flex items-center justify-center gap-2 p-1">
|
||||||
{connection.message.length > 0 && (
|
{connection.message.length > 0 && (
|
||||||
|
|||||||
Reference in New Issue
Block a user