From b1809dc5ef5b95b55b2d45d50e885e39e3f8eefe Mon Sep 17 00:00:00 2001 From: nocnico Date: Tue, 13 May 2025 23:48:11 +0200 Subject: [PATCH] Add Aircraft Popup Pages: Aircraft & Mission --- .../_components/map/AircraftMarker.tsx | 27 ++- .../map/_components/AircraftMarkerTabs.tsx | 160 +++++++++++++++--- 2 files changed, 162 insertions(+), 25 deletions(-) diff --git a/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx b/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx index dbbcfafd..e97b48a8 100644 --- a/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx +++ b/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx @@ -23,11 +23,13 @@ import { } from "_components/SmartPopup"; import FMSStatusHistory, { FMSStatusSelector, + MissionTab, RettungsmittelTab, } from "./_components/AircraftMarkerTabs"; import { ConnectedAircraft, Station } from "@repo/db"; import { useQuery } from "@tanstack/react-query"; import { getConnectedAircraftsAPI } from "querys/aircrafts"; +import { getMissionsAPI } from "querys/missions"; export const FMS_STATUS_COLORS: { [key: string]: string } = { "0": "rgb(140,10,10)", @@ -76,22 +78,39 @@ const AircraftPopupContent = ({ [currentTab, aircraft.id, setAircraftTab], ); + const { data: missions } = useQuery({ + queryKey: ["missions"], + queryFn: () => getMissionsAPI(), + }); + + const mission = useMemo(() => { + return missions?.find( + (m) => + (m.state === "running" || m.state === "draft") && + m.missionStationIds.includes(aircraft.Station.id.toString()), + ); + }, [missions, aircraft.Station.id]); + const renderTabContent = useMemo(() => { switch (currentTab) { case "home": - return ; + return ; case "fms": return ; case "aircraft": - return ; + return ; case "mission": - return
Mission Content
; + return mission ? ( + + ) : ( + No mission available + ); case "chat": return
Chat Content
; default: return Error; } - }, [currentTab, aircraft]); + }, [currentTab, aircraft, mission]); const setOpenAircraftMarker = useMapStore( (state) => state.setOpenAircraftMarker, diff --git a/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx b/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx index 012f3472..e180070f 100644 --- a/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx +++ b/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx @@ -1,38 +1,84 @@ "use client"; import React, { useState } from "react"; import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "../AircraftMarker"; -import { ConnectedAircraft, Prisma, Station } from "@repo/db"; +import { ConnectedAircraft, Mission, Prisma, Station } from "@repo/db"; import { toast } from "react-hot-toast"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { editConnectedAircraftAPI } from "querys/aircrafts"; import { useDispatchConnectionStore } from "_store/dispatch/connectionStore"; import { cn } from "helpers/cn"; +import { PersonIcon } from "@radix-ui/react-icons"; +import { + BellRing, + CircleGaugeIcon, + Clock, + CompassIcon, + Component, + GaugeIcon, + Hash, + ListCollapse, + LocateFixed, + MapPin, + Mountain, + Navigation, + RadioTower, + SirenIcon, + Sunset, + TextSearch, +} from "lucide-react"; -const FMSStatusHistory = () => { +const FMSStatusHistory = ({ + aircraft, +}: { + aircraft: ConnectedAircraft & { Station: Station }; +}) => { const dummyData = [ { status: "3", time: "12:00" }, { status: "4", time: "12:30" }, { status: "7", time: "14:54" }, - { status: "8", time: "13:30" }, - { status: "1", time: "13:30" }, + { status: "8", time: "15:30" }, + { status: "1", time: "16:30" }, + { status: "4", time: "17:30" }, + { status: "7", time: "18:54" }, + { status: "8", time: "19:30" }, + { status: "1", time: "20:30" }, + { status: "4", time: "21:30" }, + { status: "7", time: "22:54" }, + { status: "8", time: "23:30" }, + { status: "1", time: "24:30" }, ]; + const aircraftUser = + typeof aircraft.publicUser === "string" + ? JSON.parse(aircraft.publicUser) + : aircraft.publicUser; + return (
+
    +
  • + {aircraftUser.fullName} ( + {aircraftUser.publicId}) +
    • +
+
    - {dummyData.map((entry, index) => ( -
  • - - {entry.status} - - {entry.time} -
    • - ))} + {dummyData + .reverse() + .slice(0, 6) + .map((entry, index) => ( +
  • + + {entry.status} + + {entry.time} +
    • + ))}
); @@ -108,12 +154,84 @@ const FMSStatusSelector = ({ ); }; -const RettungsmittelTab = () => { +const RettungsmittelTab = ({ + aircraft, +}: { + aircraft: ConnectedAircraft & { Station: Station }; +}) => { + const station = aircraft.Station; return ( -
-

Aktuelle Rufgruppe: LST_01

+
+
    +
  • + Aktuelle Rufgruppe: LST_01 +
    • +
  • + Leitstellenbereich: Florian Berlin +
    • +
+
+
+ + {station.is24h ? "24h Betrieb" : "Tagbetrieb"} + + + NVG: {station.hasNvg ? "Ja" : "Nein"} + + + Winch: {station.hasWinch ? "Ja" : "Nein"} + + + {station.aircraftRegistration} + +
+
+
+ + HDG: {aircraft.posHeading}° + + + SPD: {aircraft.posSpeed} kt + + + ALT: {aircraft.posAlt} ft + +
); }; -export { FMSStatusSelector, RettungsmittelTab }; + +const MissionTab = ({ mission }: { mission: Mission }) => { + return ( +
+
    +
  • + {mission.missionKeywordCategory} +
    • +
  • + + {mission.missionKeywordName} +
    • +
  • + + __{new Date().toISOString().slice(0, 10).replace(/-/g, "")} + {mission.id} +
    • +
+
+
+

+ {mission.addressLat} {mission.addressLng} +

+

+ {mission.addressStreet} +

+

+ {mission.addressZip} {mission.addressCity} +

+
+
+ ); +}; +export { FMSStatusSelector, RettungsmittelTab, MissionTab }; export default FMSStatusHistory;