Add OSM Objects to Mission

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

@@ -152,6 +152,13 @@ export const ContextMenu = () => {
 							}, [] as any);
 
 							setOpen(true);
+
+							const nodeWay: [number, number][] = [];
+
+							closestToContext.nodes.map((node: { lat: number; lon: number }) =>
+								nodeWay.push([node.lat, node.lon]),
+							);
+
 							setMissionFormValues({
 								addressLat: contextMenu.lat,
 								addressLng: contextMenu.lng,
@@ -159,7 +166,11 @@ export const ContextMenu = () => {
 								addressStreet: `${addressObj.road || "keine Straße"}, ${addressObj.house_number || "keine HN"}`,
 								addressZip: addressObj.postcode || "",
 								state: "draft",
-								addressOSMways: [(exactAddress || closestToContext) as any],
+								addressOSMways: [closestToContext],
+							});
+
+							map.setView([contextMenu.lat, contextMenu.lng], 18, {
+								animate: true,
 							});
 						}}
 					>

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

@@ -6,15 +6,12 @@ import L from "leaflet";
 import { useQuery } from "@tanstack/react-query";
 import { getMissionsAPI } from "querys/missions";
 import { OSMWay } from "@repo/db";
+import { usePannelStore } from "_store/pannelStore";
 
 export const SearchElements = () => {
-	const {
-		searchElements,
-		searchPopup,
-		setSearchPopup,
-		setContextMenu,
-		openMissionMarker,
-	} = useMapStore();
+	const { searchElements, searchPopup, setSearchPopup, setContextMenu, openMissionMarker } =
+		useMapStore();
+	const { missionFormValues, setMissionFormValues } = usePannelStore((state) => state);
 	const missions = useQuery({
 		queryKey: ["missions"],
 		queryFn: () =>
@@ -59,27 +56,31 @@ export const SearchElements = () => {
 					setContextMenu(null);
 				});
 			}
-		}, []);
+		}, [element.wayID]);
 
 		if (!element.nodes) return null;
 		return (
 			<Polygon
 				positions={element.nodes.map((node) => [node.lat, node.lon])}
-				color={
-					searchPopup?.elementId === element.wayID || isActive
-						? "#ff4500"
-						: "#46b7a3"
-				}
+				color={searchPopup?.elementId === element.wayID || isActive ? "#ff4500" : "#46b7a3"}
+				eventHandlers={{
+					click: () => {
+						const addressOSMways = missionFormValues?.addressOSMways || [];
+
+						addressOSMways.push(JSON.parse(JSON.stringify(element)));
+
+						setMissionFormValues({
+							...missionFormValues,
+							addressOSMways,
+						});
+					},
+				}}
 				ref={ref}
 			/>
 		);
 	};
 
-	const SearchElementPopup = ({
-		element,
-	}: {
-		element: (typeof searchElements)[1];
-	}) => {
+	const SearchElementPopup = ({ element }: { element: (typeof searchElements)[1] }) => {
 		if (!searchPopup) return null;
 		return (
 			<Popup
@@ -90,9 +91,7 @@ export const SearchElements = () => {
 			>
 				<div className="bg-base-100/70 border border-rescuetrack w-[250px] text-white pointer-events-auto p-2">
 					<h3 className="text-lg font-bold">
-						{element.tags?.building === "yes"
-							? "Gebäude"
-							: element.tags?.building}
+						{element.tags?.building === "yes" ? "Gebäude" : element.tags?.building}
 						{!element.tags?.building && "unbekannt"}
 					</h3>
 					<p className="">
@@ -102,9 +101,7 @@ export const SearchElements = () => {
 						{element.tags?.["addr:suburb"]} {element.tags?.["addr:postcode"]}
 					</p>
 					<div className="flex flex-col gap-2 mt-2">
-						<button className="btn bg-rescuetrack-highlight">
-							Zum Einsatz Hinzufügen
-						</button>
+						<button className="btn bg-rescuetrack-highlight">Zum Einsatz Hinzufügen</button>
 					</div>
 				</div>
 			</Popup>
@@ -141,12 +138,7 @@ export const SearchElements = () => {
 					)
 				)
 					return null;
-				return (
-					<SearchElement
-						key={`mission-elem-${element.wayID}-${i}`}
-						element={element}
-					/>
-				);
+				return <SearchElement key={`mission-elem-${element.wayID}-${i}`} element={element} />;
 			})}
 			{searchPopup && (
 				<Marker
@@ -155,14 +147,10 @@ export const SearchElements = () => {
 					icon={new L.DivIcon()}
 					opacity={0}
 				>
-					{!searchPopupElement && (
-						<div className="w-20 border border-rescuetrack"></div>
-					)}
+					{!searchPopupElement && <div className="w-20 border border-rescuetrack"></div>}
 				</Marker>
 			)}
-			{searchPopupElement && (
-				<SearchElementPopup element={searchPopupElement} />
-			)}
+			{searchPopupElement && <SearchElementPopup element={searchPopupElement} />}
 		</>
 	);
 };