PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Korrekte Farben, show selected tab, remove Status 5 from StatusSelector

Browse Source
This commit is contained in:
nocnico
2025-04-21 03:18:39 +02:00
parent 948c76f559
commit 5449044062
2 changed files with 71 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx
View File

@@ -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")} */
>
<ChevronsRightLeft className="text-sm" />
</div>
@@ -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")}
>

55
apps/dispatch/app/dispatch/_components/map/_components/AircraftMarkerTabs.tsx
View File

@@ -38,31 +38,38 @@ const FMSStatusSelector = ({ aircraft }: { aircraft: Aircraft }) => {
return (
<div className="flex gap-2 p-4 justify-center">
{Array.from({ length: 9 }, (_, i) => (i + 1).toString()).map((status) => (
<div
key={status}
className="flex justify-center items-center min-w-11 min-h-11 cursor-pointer text-3xl font-bold"
style={{
backgroundColor:
hoveredStatus === status
? FMS_STATUS_COLORS[status]
: aircraft.fmsStatus === status
{Array.from({ length: 9 }, (_, i) => (i + 1).toString())
.filter((status) => status !== "5") // Exclude status 5
.map((status) => (
<div
key={status}
className="flex justify-center items-center min-w-11 min-h-11 cursor-pointer text-3xl font-bold"
style={{
backgroundColor:
hoveredStatus === status
? FMS_STATUS_COLORS[status]
: "var(--color-base-200)",
color: aircraft.fmsStatus === 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}
</div>
))}
: 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}
</div>
))}
</div>
);
};