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

Aircraft Popup redesign WIP

Browse Source
This commit is contained in:
nocnico
2025-04-16 23:59:12 +02:00
parent d74181c78f
commit 9cbb5fcec9
2 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,14 @@ import { DivIcon, Marker as LMarker, Popup as LPopup } from "leaflet";
import { useMapStore } from "_store/mapStore";
import { Fragment, useCallback, useEffect, useRef, useState } from "react";
import { cn } from "helpers/cn";
import { Cross, House, Minimize2, Route } from "lucide-react";
import {
ChevronsRightLeft,
Cross,
House,
MessageSquareText,
Minimize2,
Route,
} from "lucide-react";
import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
export const FMS_STATUS_COLORS: { [key: string]: string } = {
@@ -54,7 +61,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
<div
className={cn(
"absolute w-[calc(100%+2px)] h-4 z-99",
"absolute w-full h-4 z-99", // Adjust width to full
anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
)}
@@ -81,23 +88,23 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
}}
>
<div
className="p-2 flex justify-center items-center"
className="p-2 px-3 flex justify-center items-center"
style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
}}
>
<House className="text-sm " />
<House className="text-sm" />
</div>
<div
className="p-2 flex justify-center items-center"
className="p-2 px-4 flex justify-center items-center"
style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
}}
>
<Route className="text-sm " />
<ChevronsRightLeft className="text-sm" />
</div>
<div
className="flex justify-center items-center text-2xl p-2"
className="flex justify-center items-center text-5xl font-bold p-2 px-6"
style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
color: `${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]}`,
@@ -106,15 +113,40 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
{aircraft.fmsStatus}
</div>
<div
className="p-2 flex-1 flex justify-center items-center"
className="p-2 w-100"
style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
whiteSpace: "nowrap",
}}
>
<span className="text-white text-base font-medium">
{/* {aircraft.bosName} */} Christophorus 1
<br />
RTH
</span>
</div>
<div
className="p-2 w-150"
style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
whiteSpace: "nowrap",
}}
>
<span className="text-white text-base font-medium">Einsatz</span>
<br />
<span className="text-white text-sm font-medium">__202504161</span>
</div>
<div
className="p-2 px-4 flex justify-center items-center"
style={{
backgroundColor: `${FMS_STATUS_COLORS[aircraft.fmsStatus]}`,
}}
>
<span className="text-sm text-white">Einsatz 250411</span>
<MessageSquareText className="text-sm" />
</div>
</div>
</div>
<div>test</div>
</>
);
};
@@ -244,7 +276,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
closeOnClick={false}
autoPan={false}
wrapperClassName="relative"
className="w-[200px] h-[150px]"
className="w-[502px] h-[220px]"
>
<AircraftPopupContent aircraft={aircraft} />
</SmartPopup>