From 544904406233b913b54af92ca4374656825f60cc Mon Sep 17 00:00:00 2001 From: nocnico Date: Mon, 21 Apr 2025 03:18:39 +0200 Subject: [PATCH] Korrekte Farben, show selected tab, remove Status 5 from StatusSelector --- .../_components/map/AircraftMarker.tsx | 59 +++++++++++++------ .../map/_components/AircraftMarkerTabs.tsx | 55 +++++++++-------- 2 files changed, 71 insertions(+), 43 deletions(-) diff --git a/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx b/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx index 5ed8559e..03b87e33 100644 --- a/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx +++ b/apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx @@ -23,29 +23,29 @@ import FMSStatusHistory, { } from "./_components/AircraftMarkerTabs"; export const FMS_STATUS_COLORS: { [key: string]: string } = { - "0": "rgb(126,0,5)", - "1": "rgb(0,93,0)", - "2": "rgb(0,93,0)", - "3": "rgb(126,0,5)", - "4": "rgb(126,0,5)", - "5": "rgb(126,0,5)", - "6": "rgb(67,67,67)", - "7": "rgb(126,0,5)", + "0": "rgb(140,10,10)", + "1": "rgb(10,134,25)", + "2": "rgb(10,134,25)", + "3": "rgb(140,10,10)", + "4": "rgb(140,10,10)", + "5": "rgb(231,77,22)", + "6": "rgb(85,85,85)", + "7": "rgb(140,10,10)", "8": "rgb(186,105,0)", - "9": "rgb(0,93,0)", + "9": "rgb(10,134,25)", }; export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = { - "0": "rgb(255,39,57)", - "1": "rgb(42,217,42)", - "2": "rgb(42,217,42)", - "3": "rgb(255,39,57)", - "4": "rgb(255,39,57)", - "5": "rgb(255,39,57)", - "6": "rgb(211,211,211)", - "7": "rgb(255,39,57)", + "0": "rgb(243,27,25)", + "1": "rgb(9,212,33)", + "2": "rgb(9,212,33)", + "3": "rgb(243,27,25)", + "4": "rgb(243,27,25)", + "5": "rgb(251,176,158)", + "6": "rgb(153,153,153)", + "7": "rgb(243,27,25)", "8": "rgb(255,143,0)", - "9": "rgb(42,217,42)", + "9": "rgb(9,212,33)", }; const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { @@ -131,6 +131,10 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { className="p-2 px-3 flex justify-center items-center cursor-pointer" style={{ backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, + borderBottom: + currentTab === "home" + ? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}` + : "5px solid transparent", }} onClick={() => handleTabChange("home")} > @@ -141,6 +145,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { style={{ backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, }} + /* onClick={() => handleTabChange("fms")} */ > @@ -148,7 +153,11 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { className="flex justify-center items-center text-5xl font-bold p-2 px-6 cursor-pointer" style={{ backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, - color: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`, + borderBottom: + currentTab === "fms" + ? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}` + : "5px solid transparent", + color: "white", }} onClick={() => handleTabChange("fms")} > @@ -158,6 +167,10 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { className="p-2 w-100 cursor-pointer" style={{ backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, + borderBottom: + currentTab === "aircraft" + ? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}` + : "5px solid transparent", whiteSpace: "nowrap", }} onClick={() => handleTabChange("aircraft")} @@ -172,6 +185,10 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { className="p-2 w-150 cursor-pointer" style={{ backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, + borderBottom: + currentTab === "mission" + ? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}` + : "5px solid transparent", whiteSpace: "nowrap", }} onClick={() => handleTabChange("mission")} @@ -184,6 +201,10 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { className="p-2 px-4 flex justify-center items-center cursor-pointer" style={{ backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, + borderBottom: + currentTab === "chat" + ? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}` + : "5px solid transparent", }} onClick={() => handleTabChange("chat")} > diff --git a/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx b/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx index 106a68d3..e8758908 100644 --- a/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx +++ b/apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx @@ -38,31 +38,38 @@ const FMSStatusSelector = ({ aircraft }: { aircraft: Aircraft }) => { return (
- {Array.from({ length: 9 }, (_, i) => (i + 1).toString()).map((status) => ( -
(i + 1).toString()) + .filter((status) => status !== "5") // Exclude status 5 + .map((status) => ( +
setHoveredStatus(status)} - onMouseLeave={() => setHoveredStatus(null)} - onClick={() => { - // Handle status change logic here - console.log( - `Status changed to: ${status} for aircraft ${aircraft.id}`, - ); - }} - > - {status} -
- ))} + : aircraft.fmsStatus === status + ? FMS_STATUS_COLORS[status] + : "var(--color-base-200)", + color: + aircraft.fmsStatus === status + ? "white" + : hoveredStatus === status + ? "white" + : "gray", + }} + onMouseEnter={() => setHoveredStatus(status)} + onMouseLeave={() => setHoveredStatus(null)} + onClick={() => { + // Handle status change logic here + console.log( + `Status changed to: ${status} for aircraft ${aircraft.id}`, + ); + }} + > + {status} +
+ ))}
); };