84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
"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";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
|
|
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
|
|
import { checkSimulatorConnected } from "@repo/shared-components";
|
|
import { SimConnectionAlert } from "(app)/pilot/_components/SimConnectionAlert";
|
|
import { SettingsBoard } from "_components/left/SettingsBoard";
|
|
import { BugReport } from "_components/left/BugReport";
|
|
|
|
const Map = dynamic(() => import("_components/map/Map"), {
|
|
ssr: false,
|
|
});
|
|
|
|
const PilotPage = () => {
|
|
const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
|
|
// Query will be cached anyway, due to this, displayed Markers are in sync with own Aircraft connection-warning
|
|
const { data: aircrafts } = useQuery({
|
|
queryKey: ["aircrafts"],
|
|
queryFn: () => getConnectedAircraftsAPI(),
|
|
refetchInterval: 10_000,
|
|
});
|
|
|
|
const ownAircraft = aircrafts?.find((aircraft) => aircraft.id === connectedAircraft?.id);
|
|
const simulatorConnected = ownAircraft ? checkSimulatorConnected(ownAircraft) : false;
|
|
return (
|
|
<div className="ease relative flex h-screen w-full flex-1 overflow-hidden transition-all duration-500">
|
|
{/* <MapToastCard2 /> */}
|
|
<div className="relative flex h-full w-full flex-1">
|
|
<div className="absolute left-0 top-1/2 z-20 flex -translate-y-1/2 transform flex-col space-y-2 pl-4">
|
|
<Chat />
|
|
<Report />
|
|
<BugReport />
|
|
</div>
|
|
<div className="flex h-full w-2/3">
|
|
<div className="relative flex h-full flex-1">
|
|
<div className="top-19/20 absolute left-0 z-20 -translate-y-1/2 transform pl-4">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<SettingsBoard />
|
|
</div>
|
|
</div>
|
|
<Map />
|
|
<div className="absolute right-10 top-5 z-20 space-y-2">
|
|
{!simulatorConnected && status === "connected" && (
|
|
<SimConnectionAlert lastUpdated={ownAircraft?.lastHeartbeat} />
|
|
)}
|
|
<ConnectedDispatcher />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex h-full w-1/3">
|
|
<div className="bg-base-300 flex h-full w-full flex-col p-4">
|
|
<h2 className="card-title mb-2">MRT & DME</h2>
|
|
<div className="card bg-base-200 mb-4 shadow-xl">
|
|
<div className="card-body flex h-full w-full items-center justify-center">
|
|
<div className="max-w-150">
|
|
<Mrt />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="card bg-base-200 flex h-1/2 shadow-xl">
|
|
<div className="card-body mb-0 flex h-full w-full items-center justify-center p-4">
|
|
<div className="max-w-140">
|
|
<Dme />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
PilotPage.displayName = "DispatchPage";
|
|
|
|
export default PilotPage;
|