Added Context menu for building

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

@@ -1,6 +1,6 @@
 import { useMapStore } from "_store/mapStore";
 import { Marker as LMarker } from "leaflet";
-import { Ref, use, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Marker, Polygon, Polyline, Popup } from "react-leaflet";
 import L from "leaflet";
 
@@ -8,14 +8,31 @@ export const SearchElements = () => {
 	const { searchElements, searchPopup, setSearchPopup, setPopup } =
 		useMapStore();
 	const poppupRef = useRef<LMarker>(null);
+	const intervalRef = useRef<NodeJS.Timeout>(null);
+	const searchPopupElement = searchElements.find(
+		(element) => element.id === searchPopup?.elementId,
+	);
 
 	useEffect(() => {
-		if (searchPopup?.isOpen) {
-			poppupRef.current?.openPopup();
-		} else {
-			poppupRef.current?.closePopup();
-		}
-	}, [searchPopup]);
+		intervalRef.current = setInterval(() => {
+			if (searchPopup?.isOpen) {
+				poppupRef.current?.openPopup();
+			} else {
+				poppupRef.current?.closePopup();
+			}
+		}, 100);
+		poppupRef.current?.on("popupclose", () => {
+			setSearchPopup(undefined);
+		});
+		return () => {
+			if (poppupRef.current) {
+				poppupRef.current.off("popupclose");
+			}
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+			}
+		};
+	}, [searchPopup, searchPopupElement]);
 
 	const SearchElement = ({
 		element,
@@ -48,11 +65,37 @@ export const SearchElements = () => {
 			/>
 		);
 	};
-	console.log("searchPopup", searchPopup);
-	const searchPopupElement = searchElements.find(
-		(element) => element.id === searchPopup?.elementId,
-	);
-	console.log("searchPopupElement", searchPopupElement);
+
+	const SearchElementPopup = ({
+		element,
+	}: {
+		element: (typeof searchElements)[1];
+	}) => {
+		return (
+			<Popup>
+				<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}
+					</h3>
+					<p className="">
+						{element.tags?.["addr:street"]} {element.tags?.["addr:housenumber"]}
+					</p>
+					<p className="">
+						{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>
+					</div>
+				</div>
+			</Popup>
+		);
+	};
+
+	console.log("searchPopupElement", searchPopupElement, searchPopup);
 	return (
 		<>
 			{searchElements.map((element) => {
@@ -65,11 +108,12 @@ export const SearchElements = () => {
 					icon={new L.DivIcon()}
 					opacity={0}
 				>
-					<Popup>
-						<div className="absolute z-1000 opacity-100 pointer-events-auto w-[250px] text-white border-rescuetrack border-2 bg-base-100/70">
-							<div className="p-1 text-xl text-center">OSM-Element</div>
-						</div>
-					</Popup>
+					{searchPopupElement && (
+						<SearchElementPopup element={searchPopupElement} />
+					)}
+					{!searchPopupElement && (
+						<div className="w-20 border border-rescuetrack"></div>
+					)}
 				</Marker>
 			)}
 		</>