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

apps/dispatch/app/_components/SmartPopup.tsx

@@ -21,8 +21,8 @@ export const useConflict = (id: string, mode: "popup" | "marker") => {
 	// get markers and check if they are overlapping
 	const ownMarker =
 		mode === "popup"
-			? document.querySelector(`#popup-${id}`)
-			: document.querySelector(`#marker-${id}`);
+			? document.querySelector(`#popup-domain-${id}`)
+			: document.querySelector(`#marker-domain-${id}`);
 
 	if (!otherMarkers || !ownMarker) return "topleft";
 
@@ -55,18 +55,16 @@ export const useConflict = (id: string, mode: "popup" | "marker") => {
 	};
 
 	const centerOfOverlappingMarkers = markersPosition.reduce(
-		(acc, pos) => {
-			if (acc.x === 0 && acc.y === 0) return pos;
-			return {
-				x: (acc.x + pos.x) / 2,
-				y: (acc.y + pos.y) / 2,
-			};
-		},
-		{
-			x: 0,
-			y: 0,
-		},
+		(acc, pos) => ({
+			x: acc.x + pos.x,
+			y: acc.y + pos.y,
+		}),
+		{ x: 0, y: 0 },
 	);
+
+	centerOfOverlappingMarkers.x /= markersPosition.length;
+	centerOfOverlappingMarkers.y /= markersPosition.length;
+
 	if (marksersInCluster.length > 1) {
 		if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
 			if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
@@ -137,7 +135,7 @@ export const SmartPopup = (
 			>
 				<div
 					data-id={id}
-					id={`popup-${id}`}
+					id={`popup-domain-${id}`}
 					className={cn(
 						"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
 						anchor.includes("left") && "-translate-x-1/2",

apps/dispatch/app/_store/mapStore.ts

@@ -10,9 +10,15 @@ interface MapStore {
 		center: L.LatLngExpression;
 		zoom: number;
 	};
-	openMissionMarker: string[];
+	openMissionMarker: {
+		id: string;
+		tab: "home" | "";
+	}[];
 	setOpenMissionMarker: (mission: { open: string[]; close: string[] }) => void;
-	openAircraftMarker: string[];
+	openAircraftMarker: {
+		id: string;
+		tab: "home" | "fms" | "aircraft" | "mission" | "chat";
+	}[];
 	setOpenAircraftMarker: (mission: { open: string[]; close: string[] }) => void;
 	searchElements: {
 		id: number;

apps/dispatch/app/_store/missionsStore.ts

@@ -18,9 +18,9 @@ export const useMissionsStore = create<MissionStore>((set) => ({
 			addressZip: "10178",
 			missionAdditionalInfo: "Additional info",
 			missionCategory: "AB_Atmung",
-			missionKeyword: "Zunehmende Atemnot",
+			missionKeyword: "Zunehmende Beschwerden",
+			missionSummary: "AB1_0",
 			missionPatientInfo: "M/10",
-			missionSummary: "Summary",
 		},
 	],
 	setMissions: (missions) => set({ missions }),

apps/dispatch/app/dispatch/_components/map/AircraftMarker.tsx

@@ -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",

apps/dispatch/app/dispatch/_components/map/MissionMarkers.tsx

@@ -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>