From 5545e603bf4d3d85da011a50d9dc75fbcd4055b6 Mon Sep 17 00:00:00 2001
From: PxlLoewe <72106766+PxlLoewe@users.noreply.github.com>
Date: Tue, 8 Apr 2025 09:45:21 -0700
Subject: [PATCH] added hightlight

---
 .../_components/map/SearchElements.tsx        |  19 ++++++++++--------
 apps/dispatch/app/globals.css                 |   5 +++++
 grafana/grafana.db                            | Bin 1122304 -> 1122304 bytes
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx b/apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx
index 0b38f009..dc2cc159 100644
--- a/apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx
+++ b/apps/dispatch/app/(dispatch)/_components/map/SearchElements.tsx
@@ -5,7 +5,8 @@ import { Marker, Polygon, Polyline, Popup } from "react-leaflet";
 import L from "leaflet";
 
 export const SearchElements = () => {
-	const { searchElements, searchPopup, setSearchPopup } = useMapStore();
+	const { searchElements, searchPopup, setSearchPopup, setPopup } =
+		useMapStore();
 	const poppupRef = useRef<LMarker>(null);
 
 	useEffect(() => {
@@ -25,9 +26,7 @@ export const SearchElements = () => {
 
 		useEffect(() => {
 			if (ref.current) {
-				console.log(ref.current);
 				ref.current.on("click", () => {
-					console.log("click");
 					const center = ref.current.getBounds().getCenter();
 					setSearchPopup({
 						isOpen: true,
@@ -35,7 +34,7 @@ export const SearchElements = () => {
 						lng: center.lng,
 						elementId: element.id,
 					});
-					console.log(element);
+					setPopup(null);
 				});
 			}
 		}, []);
@@ -44,12 +43,16 @@ export const SearchElements = () => {
 			<Polygon
 				key={element.id}
 				positions={element.nodes.map((node) => [node.lat, node.lon])}
-				color="#46b7a3"
+				color={searchPopup?.elementId === element.id ? "#ff4500" : "#46b7a3"}
 				ref={ref}
 			/>
 		);
 	};
-
+	console.log("searchPopup", searchPopup);
+	const searchPopupElement = searchElements.find(
+		(element) => element.id === searchPopup?.elementId,
+	);
+	console.log("searchPopupElement", searchPopupElement);
 	return (
 		<>
 			{searchElements.map((element) => {
@@ -63,8 +66,8 @@ export const SearchElements = () => {
 					opacity={0}
 				>
 					<Popup>
-						<div className="absolute z-1000 opacity-100 pointer-events-auto w-[500px] text-white">
-							<div className="bg-red-600 w-7 h-6">test</div>
+						<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>
 				</Marker>
diff --git a/apps/dispatch/app/globals.css b/apps/dispatch/app/globals.css
index db106d6d..bb7f5ae0 100644
--- a/apps/dispatch/app/globals.css
+++ b/apps/dispatch/app/globals.css
@@ -3,6 +3,11 @@
 	themes: dark, nord;
 }
 
+@theme {
+	--color-rescuetrack: #46b7a3;
+	--color-rescuetrack-highlight: #ff4500;
+}
+
 .leaflet-popup-tip-container {
 	display: none;
 }
diff --git a/grafana/grafana.db b/grafana/grafana.db
index 56a32b1557b5c659f5bd8431cad7a3ec8f2d6f38..6f86d6716cb0f59a54dc399a81b7c6ccd149d7b2 100644
GIT binary patch
delta 87
zcmZoT;L>owWr8$g)<hX+#;nGK)&$1Z1g6#m=GFw3)&$np1h&=$_N@sVrTVNr>0g6P
g+i&S}05K;Ja{)0o5c2>rFA(zqG5_{k`T}Yn0BY_au>b%7

delta 87
zcmZoT;L>owWr8$g`a~IL#`MO7)&$1Z1g6#m=GFw3)&$np1h&=$_N@sVrTVO$>0eG3
hw%^j{0Afxc<^p1FAm#yLULfWJV*c&7^aa#D004wLAzA<c