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

fixed border mission marker; changed type of mapStore for State management in marker

Browse Source
This commit is contained in:
PxlLoewe
2025-04-16 21:31:08 -07:00
parent 9cbb5fcec9
commit 6a827b4127
11 changed files with 140 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,7 +61,7 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
<div
className={cn(
"absolute w-full h-4 z-99", // Adjust width to full
"absolute w-[calc(100%+2px)] h-4 z-99", // As offset is 2px, we need to add 2px to the width
anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
)}
@@ -213,6 +213,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
) => {
return `<div
id="marker-${aircraft.id}"
class="${cn(
"relative w-[140px] transform flex items-center gap-2 px-2 z-100",
anchor.includes("right") && "-translate-x-full",
@@ -245,7 +246,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
</span>
<div
data-id="${aircraft.id}"
id="marker-${aircraft.id}"
id="marker-domain-${aircraft.id}"
class="${cn(
"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
anchor.includes("left") && "-translate-x-1/2",

25
apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx
View File

@@ -6,16 +6,18 @@ import { Fragment, useCallback, useEffect, useRef, useState } from "react";
import { cn } from "helpers/cn";
import { Cross, House, Minimize2, Route } from "lucide-react";
import { SmartPopup, useConflict, useSmartPopup } from "_components/SmartPopup";
import { Mission } from "@repo/db";
import { Mission, MissionState } from "@repo/db";
export const MISSION_STATUS_COLORS: { [key: string]: string } = {
draft: "0092b8",
export const MISSION_STATUS_COLORS: Record<MissionState, string> = {
draft: "#0092b8",
running: "#155dfc",
finished: "#155dfc",
};
export const MISSION_STATUS_TEXT_COLORS: { [key: string]: string } = {
draft: "00d3f2",
export const MISSION_STATUS_TEXT_COLORS: Record<MissionState, string> = {
draft: "#00d3f2",
running: "#50a2ff",
finished: "#50a2ff",
};
const MissionPopupContent = ({ mission }: { mission: Mission }) => {
@@ -166,8 +168,9 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
) => {
return `<div
id="marker-${mission.id}"
class="${cn(
"relative w-[140px] transform flex items-center gap-2 px-2 z-100",
"relative w-[100px] transform flex items-center gap-2 px-2 z-100",
anchor.includes("right") && "-translate-x-full",
anchor.includes("bottom") && "-translate-y-full",
)}"
@@ -187,18 +190,12 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
${anchor.includes("top") ? `border-top: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};` : `border-bottom: 3px solid ${MISSION_STATUS_TEXT_COLORS[mission.state]};`}
"
></div>
<span
class="font-semibold text-xl"
style="color: ${MISSION_STATUS_TEXT_COLORS[mission.state]};"
>
${mission.state}
</span>
<span class="text-white text-[15px]">
${mission.missionSummary}
</span>
<div
data-id="${mission.id}"
id="marker-${mission.id}"
id="marker-domain-${mission.id}"
class="${cn(
"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
anchor.includes("left") && "-translate-x-1/2",
@@ -229,7 +226,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
closeOnClick={false}
autoPan={false}
wrapperClassName="relative"
className="w-[200px] h-[150px]"
className="w-[300px] h-[150px]"
>
<MissionPopupContent mission={mission} />
</SmartPopup>