Dispatch Router-Struktur; AddPenalty Layout gefixed
This commit is contained in:
PxlLoewe
132
apps/dispatch/app/(app)/pilot/_components/dme/Dme.tsx
Normal file
132
apps/dispatch/app/(app)/pilot/_components/dme/Dme.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
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",
|
||||
paddingTop: "10px",
|
||||
paddingLeft: "2px",
|
||||
paddingRight: "2px",
|
||||
overflowX: "hidden",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{lines.map((l, i) => {
|
||||
return <DisplayLine key={`line-${i}`} {...l} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 626 KiB |
BIN
apps/dispatch/app/(app)/pilot/_components/dme/reflektion.png
Normal file
BIN
apps/dispatch/app/(app)/pilot/_components/dme/reflektion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
apps/dispatch/app/(app)/pilot/_components/dme/squad-x15.jpg
Normal file
BIN
apps/dispatch/app/(app)/pilot/_components/dme/squad-x15.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
37
apps/dispatch/app/(app)/pilot/_components/dme/useButtons.ts
Normal file
37
apps/dispatch/app/(app)/pilot/_components/dme/useButtons.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
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" || page === "new-mission") {
|
||||
setPage({ page: "acknowledge" });
|
||||
}
|
||||
break;
|
||||
case "menu":
|
||||
if (page === "mission" || page === "new-mission") {
|
||||
setPage({ page: "acknowledge" });
|
||||
if (station && user) setPage({ page: "home", station, user });
|
||||
break;
|
||||
}
|
||||
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 };
|
||||
};
|
||||
64
apps/dispatch/app/(app)/pilot/_components/dme/useSounds.ts
Normal file
64
apps/dispatch/app/(app)/pilot/_components/dme/useSounds.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getUserAPI } from "_querys/user";
|
||||
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
|
||||
import { useDmeStore } from "_store/pilot/dmeStore";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
export const useSounds = () => {
|
||||
const session = useSession();
|
||||
const { data: user } = useQuery({
|
||||
queryKey: ["user", session.data?.user.id],
|
||||
queryFn: () => getUserAPI(session.data!.user.id),
|
||||
});
|
||||
|
||||
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(() => {
|
||||
if (user?.settingsDmeVolume) {
|
||||
if (newMissionSound.current) {
|
||||
newMissionSound.current.volume = user.settingsDmeVolume;
|
||||
}
|
||||
} else if (newMissionSound.current) {
|
||||
newMissionSound.current.volume = 0.8; // Default volume
|
||||
}
|
||||
}, [user?.settingsDmeVolume]);
|
||||
|
||||
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]);
|
||||
};
|
||||
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: 194 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: 322 KiB |
227
apps/dispatch/app/(app)/pilot/_components/mrt/Mrt.tsx
Normal file
227
apps/dispatch/app/(app)/pilot/_components/mrt/Mrt.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
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,
|
||||
};
|
||||
|
||||
export interface DisplayLineProps {
|
||||
lineStyle?: CSSProperties;
|
||||
style?: CSSProperties;
|
||||
textLeft?: string;
|
||||
textMid?: string;
|
||||
textRight?: string;
|
||||
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"
|
||||
style={{
|
||||
containerName: "mrtContainer",
|
||||
display: "grid",
|
||||
aspectRatio: "1466 / 760",
|
||||
height: "auto",
|
||||
width: "auto",
|
||||
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%",
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
32
apps/dispatch/app/(app)/pilot/_components/mrt/mrt.css
Normal file
32
apps/dispatch/app/(app)/pilot/_components/mrt/mrt.css
Normal file
@@ -0,0 +1,32 @@
|
||||
#mrt-container {
|
||||
container-name: mrtContainer;
|
||||
}
|
||||
|
||||
@container mrtContainer (inline-size < 600px) {
|
||||
#mrt-container .text-1 {
|
||||
font-size: 12px;
|
||||
color: red;
|
||||
}
|
||||
#mrt-container .text-2 {
|
||||
font-size: 99px;
|
||||
}
|
||||
#mrt-container .text-3 {
|
||||
font-size: 25px;
|
||||
}
|
||||
#mrt-container .text-4 {
|
||||
font-size: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
#mrt-container .text-1 {
|
||||
font-size: 10px;
|
||||
}
|
||||
#mrt-container .text-2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
#mrt-container .text-3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
#mrt-container .text-4 {
|
||||
font-size: 25px;
|
||||
}
|
||||
76
apps/dispatch/app/(app)/pilot/_components/mrt/useButtons.ts
Normal file
76
apps/dispatch/app/(app)/pilot/_components/mrt/useButtons.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import { ConnectedAircraft, 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";
|
||||
|
||||
export const useButtons = () => {
|
||||
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: ({
|
||||
aircraftId,
|
||||
data,
|
||||
}: {
|
||||
aircraftId: number;
|
||||
data: Prisma.ConnectedAircraftUpdateInput;
|
||||
}) => editConnectedAircraftAPI(aircraftId, data),
|
||||
});
|
||||
|
||||
const { page, setPage } = useMrtStore((state) => state);
|
||||
|
||||
const handleButton =
|
||||
(button: "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0" | "home") => () => {
|
||||
if (connectionStatus !== "connected") return;
|
||||
if (!station) return;
|
||||
if (!connectedAircraft?.id) return;
|
||||
if (
|
||||
button === "1" ||
|
||||
button === "2" ||
|
||||
button === "3" ||
|
||||
button === "4" ||
|
||||
button === "5" ||
|
||||
button === "6" ||
|
||||
button === "7" ||
|
||||
button === "8" ||
|
||||
button === "9" ||
|
||||
button === "0"
|
||||
) {
|
||||
setPage({ page: "sending-status", station });
|
||||
|
||||
setTimeout(async () => {
|
||||
await updateAircraftMutation.mutateAsync({
|
||||
aircraftId: connectedAircraft.id,
|
||||
data: {
|
||||
fmsStatus: button,
|
||||
},
|
||||
});
|
||||
setPage({
|
||||
page: "home",
|
||||
station,
|
||||
fmsStatus: button,
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
setPage({ page: "home", fmsStatus: connectedAircraft.fmsStatus || "6", station });
|
||||
}
|
||||
};
|
||||
|
||||
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 };
|
||||
};
|
||||
52
apps/dispatch/app/(app)/pilot/_components/mrt/useSounds.ts
Normal file
52
apps/dispatch/app/(app)/pilot/_components/mrt/useSounds.ts
Normal file
@@ -0,0 +1,52 @@
|
||||
"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);
|
||||
|
||||
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,
|
||||
});
|
||||
};
|
||||
}
|
||||
}, [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]);
|
||||
};
|
||||
53
apps/dispatch/app/(app)/pilot/_components/navbar/Navbar.tsx
Normal file
53
apps/dispatch/app/(app)/pilot/_components/navbar/Navbar.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { Connection } from "./_components/Connection";
|
||||
import { Audio } from "_components/Audio/Audio";
|
||||
import { ExitIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
import { Settings } from "_components/navbar/Settings";
|
||||
import ModeSwitchDropdown from "_components/navbar/ModeSwitchDropdown";
|
||||
|
||||
export default function Navbar() {
|
||||
/* const [isDark, setIsDark] = useState(false);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = !isDark;
|
||||
setIsDark(newTheme);
|
||||
document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
newTheme ? "nord" : "dark",
|
||||
);
|
||||
}; */
|
||||
|
||||
return (
|
||||
<div className="navbar bg-base-100 shadow-sm flex gap-5 justify-between">
|
||||
<ModeSwitchDropdown />
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Audio />
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Connection />
|
||||
</div>
|
||||
{/* <ThemeSwap isDark={isDark} toggleTheme={toggleTheme} /> */}
|
||||
<div className="flex items-center">
|
||||
<Settings />
|
||||
<Link
|
||||
href={process.env.NEXT_PUBLIC_HUB_URL || "#!"}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className="btn btn-ghost">
|
||||
<ExternalLinkIcon className="w-4 h-4" /> HUB
|
||||
</button>
|
||||
</Link>
|
||||
<Link href={"/logout"}>
|
||||
<button className="btn btn-ghost">
|
||||
<ExitIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
"use client";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { getStationsAPI } from "_querys/stations";
|
||||
import toast from "react-hot-toast";
|
||||
import { editConnectedAircraftAPI } from "_querys/aircrafts";
|
||||
import { Prisma } from "@repo/db";
|
||||
|
||||
export const ConnectionBtn = () => {
|
||||
const modalRef = useRef<HTMLDialogElement>(null);
|
||||
const connection = usePilotConnectionStore((state) => state);
|
||||
const [form, setForm] = useState<{
|
||||
logoffTime: string | null;
|
||||
selectedStationId: number | null;
|
||||
}>({
|
||||
logoffTime: null,
|
||||
selectedStationId: null,
|
||||
});
|
||||
const [logoffDebounce, setLogoffDebounce] = useState<NodeJS.Timeout | null>(null);
|
||||
|
||||
const { data: stations } = useQuery({
|
||||
queryKey: ["stations"],
|
||||
queryFn: () => getStationsAPI(),
|
||||
});
|
||||
const aircraftMutation = useMutation({
|
||||
mutationFn: ({
|
||||
change,
|
||||
sessionId,
|
||||
}: {
|
||||
sessionId: number;
|
||||
change: Prisma.ConnectedAircraftUpdateInput;
|
||||
}) => editConnectedAircraftAPI(sessionId, change),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (stations && stations.length > 0 && form.selectedStationId === null) {
|
||||
setForm((prevForm) => ({
|
||||
...prevForm,
|
||||
selectedStationId: stations[0]?.id ?? null,
|
||||
}));
|
||||
}
|
||||
}, [stations, form.selectedStationId]);
|
||||
|
||||
useEffect(() => {
|
||||
// Disconnect the socket when the component unmounts
|
||||
return () => {
|
||||
connection.disconnect();
|
||||
};
|
||||
}, [connection.disconnect]);
|
||||
|
||||
const logoffTime = form.logoffTime;
|
||||
|
||||
useEffect(() => {
|
||||
if (!logoffTime || !connection.connectedAircraft) return;
|
||||
|
||||
if (logoffDebounce) clearTimeout(logoffDebounce);
|
||||
|
||||
const timeout = setTimeout(async () => {
|
||||
if (!connection.connectedAircraft?.id) return;
|
||||
await aircraftMutation.mutateAsync({
|
||||
sessionId: connection.connectedAircraft.id,
|
||||
change: {
|
||||
esimatedLogoutTime: logoffTime
|
||||
? new Date(new Date().toDateString() + " " + logoffTime).toISOString()
|
||||
: null,
|
||||
},
|
||||
});
|
||||
modalRef.current?.close();
|
||||
toast.success("Änderung gespeichert!");
|
||||
}, 2000);
|
||||
|
||||
setLogoffDebounce(timeout);
|
||||
|
||||
// Cleanup function to clear timeout
|
||||
return () => {
|
||||
if (logoffDebounce) clearTimeout(logoffDebounce);
|
||||
};
|
||||
}, [logoffTime, connection.connectedAircraft]);
|
||||
|
||||
const session = useSession();
|
||||
const uid = session.data?.user?.id;
|
||||
if (!uid) return null;
|
||||
return (
|
||||
<div className="rounded-box bg-base-200 flex justify-center items-center gap-2 p-1">
|
||||
{connection.message.length > 0 && (
|
||||
<span className="mx-2 text-error">{connection.message}</span>
|
||||
)}
|
||||
|
||||
{connection.status == "connected" ? (
|
||||
<button
|
||||
className="btn btn-sm btn-soft btn-success"
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
modalRef.current?.showModal();
|
||||
}}
|
||||
>
|
||||
Verbunden
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
modalRef.current?.showModal();
|
||||
}}
|
||||
className="btn btn-sm btn-soft btn-info"
|
||||
>
|
||||
{connection.status == "disconnected" ? "Verbinden" : connection.status}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<dialog ref={modalRef} className="modal">
|
||||
<div className="modal-box flex flex-col items-center justify-center">
|
||||
{connection.status == "connected" ? (
|
||||
<h3 className="text-lg font-bold mb-5">
|
||||
Verbunden als{" "}
|
||||
<span className="text-info"><{connection.selectedStation?.bosCallsign}></span>
|
||||
</h3>
|
||||
) : (
|
||||
<h3 className="text-lg font-bold mb-5">Als Pilot anmelden</h3>
|
||||
)}
|
||||
{connection.status !== "connected" && (
|
||||
<fieldset className="fieldset w-full">
|
||||
<label className="floating-label w-full text-base">
|
||||
<span>Station</span>
|
||||
<select
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
selectedStationId: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
value={form.selectedStationId ?? ""}
|
||||
className="input w-full"
|
||||
>
|
||||
{stations?.map((station) => (
|
||||
<option key={station.id} value={station.id}>
|
||||
{station.bosCallsign}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
)}
|
||||
<fieldset className="fieldset w-full mt-2">
|
||||
<label className="floating-label w-full text-base">
|
||||
<span>Logoff Zeit (LCL)</span>
|
||||
<input
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setForm({
|
||||
...form,
|
||||
logoffTime: value,
|
||||
});
|
||||
}}
|
||||
value={form.logoffTime ?? ""}
|
||||
type="time"
|
||||
className="input w-full"
|
||||
/>
|
||||
</label>
|
||||
{connection.status == "disconnected" && (
|
||||
<p className="fieldset-label">Du kannst diese Zeit später noch anpassen.</p>
|
||||
)}
|
||||
</fieldset>
|
||||
<div className="modal-action flex justify-between w-full">
|
||||
<form method="dialog" className="w-full flex justify-between">
|
||||
<button className="btn btn-soft">Zurück</button>
|
||||
{connection.status == "connected" ? (
|
||||
<button
|
||||
className="btn btn-soft btn-error"
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
connection.disconnect();
|
||||
}}
|
||||
>
|
||||
Verbindung Trennen
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
onSubmit={() => false}
|
||||
onClick={() => {
|
||||
const selectedStation = stations?.find(
|
||||
(station) =>
|
||||
station.id === parseInt(form.selectedStationId?.toString() || ""),
|
||||
);
|
||||
if (selectedStation) {
|
||||
connection.connect(
|
||||
uid,
|
||||
form.selectedStationId?.toString() || "",
|
||||
form.logoffTime || "",
|
||||
selectedStation,
|
||||
session.data!.user,
|
||||
);
|
||||
}
|
||||
}}
|
||||
className="btn btn-soft btn-info"
|
||||
>
|
||||
{connection.status == "disconnected" ? "Verbinden" : connection.status}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Connection = () => {
|
||||
return (
|
||||
<div>
|
||||
<ConnectionBtn />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
|
||||
|
||||
interface ThemeSwapProps {
|
||||
isDark: boolean;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
export const ThemeSwap: React.FC<ThemeSwapProps> = ({
|
||||
isDark,
|
||||
toggleTheme,
|
||||
}) => {
|
||||
return (
|
||||
<label className="swap swap-rotate">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="theme-controller"
|
||||
checked={isDark}
|
||||
onChange={toggleTheme}
|
||||
/>
|
||||
<MoonIcon className="swap-off h-5 w-5 fill-current" />
|
||||
<SunIcon className="swap-on h-5 w-5 fill-current" />
|
||||
</label>
|
||||
);
|
||||
};
|
||||
27
apps/dispatch/app/(app)/pilot/layout.tsx
Normal file
27
apps/dispatch/app/(app)/pilot/layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { Metadata } from "next";
|
||||
import Navbar from "./_components/navbar/Navbar";
|
||||
import { getServerSession } from "api/auth/[...nextauth]/auth";
|
||||
import { Error } from "_components/Error";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "VAR: Pilot",
|
||||
description: "Die neue VAR Leitstelle.",
|
||||
};
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
const session = await getServerSession();
|
||||
|
||||
if (!session?.user.permissions.includes("PILOT"))
|
||||
return <Error title="Zugriff verweigert" statusCode={403} />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
}
|
||||
59
apps/dispatch/app/(app)/pilot/page.tsx
Normal file
59
apps/dispatch/app/(app)/pilot/page.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { Mrt } from "(app)/pilot/_components/mrt/Mrt";
|
||||
import { Chat } from "../../_components/left/Chat";
|
||||
import { Report } from "../../_components/left/Report";
|
||||
import { Dme } from "(app)/pilot/_components/dme/Dme";
|
||||
import dynamic from "next/dynamic";
|
||||
import { ConnectedDispatcher } from "tracker/_components/ConnectedDispatcher";
|
||||
|
||||
const Map = dynamic(() => import("_components/map/Map"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const DispatchPage = () => {
|
||||
return (
|
||||
<div className="relative flex-1 flex transition-all duration-500 ease w-full h-screen overflow-hidden">
|
||||
{/* <MapToastCard2 /> */}
|
||||
<div className="flex flex-1 relative w-full h-full">
|
||||
<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
|
||||
<Chat />
|
||||
<div className="mt-2">
|
||||
<Report />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-2/3 h-full">
|
||||
<div className="relative flex flex-1 h-full">
|
||||
<Map />
|
||||
<div className="absolute top-5 right-10 z-99999">
|
||||
<ConnectedDispatcher />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-1/3 h-full">
|
||||
<div className="flex flex-col w-full h-full p-4 bg-base-300">
|
||||
<h2 className="card-title mb-2">MRT & DME</h2>
|
||||
<div className="card bg-base-200 shadow-xl mb-4">
|
||||
<div className="card-body w-full h-full flex items-center justify-center">
|
||||
<div className=" max-w-150">
|
||||
<Mrt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card bg-base-200 shadow-xl h-1/2 flex">
|
||||
<div className="card-body w-full h-full p-4 mb-0 flex items-center justify-center">
|
||||
<div className=" max-w-140">
|
||||
<Dme />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
DispatchPage.displayName = "DispatchPage";
|
||||
|
||||
export default DispatchPage;
|
||||
7
apps/dispatch/app/(app)/pilot/socket.ts
Normal file
7
apps/dispatch/app/(app)/pilot/socket.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
"use client";
|
||||
import { io, Socket } from "socket.io-client";
|
||||
|
||||
export const pilotSocket: Socket = io(process.env.NEXT_PUBLIC_DISPATCH_SERVER_URL, {
|
||||
autoConnect: false,
|
||||
transports: ["websocket"],
|
||||
});
|
||||
Reference in New Issue
Block a user