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"; } from "./_components/AircraftMarkerTabs";
export const FMS_STATUS_COLORS: { [key: string]: string } = { export const FMS_STATUS_COLORS: { [key: string]: string } = {
"0": "rgb(126,0,5)", "0": "rgb(140,10,10)",
"1": "rgb(0,93,0)", "1": "rgb(10,134,25)",
"2": "rgb(0,93,0)", "2": "rgb(10,134,25)",
"3": "rgb(126,0,5)", "3": "rgb(140,10,10)",
"4": "rgb(126,0,5)", "4": "rgb(140,10,10)",
"5": "rgb(126,0,5)", "5": "rgb(231,77,22)",
"6": "rgb(67,67,67)", "6": "rgb(85,85,85)",
"7": "rgb(126,0,5)", "7": "rgb(140,10,10)",
"8": "rgb(186,105,0)", "8": "rgb(186,105,0)",
"9": "rgb(0,93,0)", "9": "rgb(10,134,25)",
}; };
export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = { export const FMS_STATUS_TEXT_COLORS: { [key: string]: string } = {
"0": "rgb(255,39,57)", "0": "rgb(243,27,25)",
"1": "rgb(42,217,42)", "1": "rgb(9,212,33)",
"2": "rgb(42,217,42)", "2": "rgb(9,212,33)",
"3": "rgb(255,39,57)", "3": "rgb(243,27,25)",
"4": "rgb(255,39,57)", "4": "rgb(243,27,25)",
"5": "rgb(255,39,57)", "5": "rgb(251,176,158)",
"6": "rgb(211,211,211)", "6": "rgb(153,153,153)",
"7": "rgb(255,39,57)", "7": "rgb(243,27,25)",
"8": "rgb(255,143,0)", "8": "rgb(255,143,0)",
"9": "rgb(42,217,42)", "9": "rgb(9,212,33)",
}; };
const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => { 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" className="p-2 px-3 flex justify-center items-center cursor-pointer"
style={{ style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
borderBottom:
currentTab === "home"
? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
: "5px solid transparent",
}} }}
onClick={() => handleTabChange("home")} onClick={() => handleTabChange("home")}
> >
@@ -141,6 +145,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
style={{ style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
}} }}
/* onClick={() => handleTabChange("fms")} */
> >
<ChevronsRightLeft className="text-sm" /> <ChevronsRightLeft className="text-sm" />
</div> </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" className="flex justify-center items-center text-5xl font-bold p-2 px-6 cursor-pointer"
style={{ style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, 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")} onClick={() => handleTabChange("fms")}
> >
@@ -158,6 +167,10 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
className="p-2 w-100 cursor-pointer" className="p-2 w-100 cursor-pointer"
style={{ style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
borderBottom:
currentTab === "aircraft"
? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
: "5px solid transparent",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}} }}
onClick={() => handleTabChange("aircraft")} onClick={() => handleTabChange("aircraft")}
@@ -172,6 +185,10 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
className="p-2 w-150 cursor-pointer" className="p-2 w-150 cursor-pointer"
style={{ style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
borderBottom:
currentTab === "mission"
? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
: "5px solid transparent",
whiteSpace: "nowrap", whiteSpace: "nowrap",
}} }}
onClick={() => handleTabChange("mission")} onClick={() => handleTabChange("mission")}
@@ -184,6 +201,10 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
className="p-2 px-4 flex justify-center items-center cursor-pointer" className="p-2 px-4 flex justify-center items-center cursor-pointer"
style={{ style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`, backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
borderBottom:
currentTab === "chat"
? `5px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`
: "5px solid transparent",
}} }}
onClick={() => handleTabChange("chat")} 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 ( return (
<div className="flex gap-2 p-4 justify-center"> <div className="flex gap-2 p-4 justify-center">
{Array.from({ length: 9 }, (_, i) => (i + 1).toString()).map((status) => ( {Array.from({ length: 9 }, (_, i) => (i + 1).toString())
<div .filter((status) => status !== "5") // Exclude status 5
key={status} .map((status) => (
className="flex justify-center items-center min-w-11 min-h-11 cursor-pointer text-3xl font-bold" <div
style={{ key={status}
backgroundColor: className="flex justify-center items-center min-w-11 min-h-11 cursor-pointer text-3xl font-bold"
hoveredStatus === status style={{
? FMS_STATUS_COLORS[status] backgroundColor:
: aircraft.fmsStatus === status hoveredStatus === status
? FMS_STATUS_COLORS[status] ? FMS_STATUS_COLORS[status]
: "var(--color-base-200)", : aircraft.fmsStatus === status
color: aircraft.fmsStatus === status ? "white" : "gray", ? FMS_STATUS_COLORS[status]
}} : "var(--color-base-200)",
onMouseEnter={() => setHoveredStatus(status)} color:
onMouseLeave={() => setHoveredStatus(null)} aircraft.fmsStatus === status
onClick={() => { ? "white"
// Handle status change logic here : hoveredStatus === status
console.log( ? "white"
`Status changed to: ${status} for aircraft ${aircraft.id}`, : "gray",
); }}
}} onMouseEnter={() => setHoveredStatus(status)}
> onMouseLeave={() => setHoveredStatus(null)}
{status} onClick={() => {
</div> // Handle status change logic here
))} console.log(
`Status changed to: ${status} for aircraft ${aircraft.id}`,
);
}}
>
{status}
</div>
))}
</div> </div>
); );
}; };