From 56fb51e6b85de5c2db64410571a4018883eb06e2 Mon Sep 17 00:00:00 2001
From: nocnico <nicolas@syntaxdev.de>
Date: Thu, 22 May 2025 17:40:36 +0200
Subject: [PATCH] Fix missing Address, rename Btns, add copy coords #5

---
 .../app/_components/map/ContextMenu.tsx       | 166 ++++++------------
 1 file changed, 49 insertions(+), 117 deletions(-)

diff --git a/apps/dispatch/app/_components/map/ContextMenu.tsx b/apps/dispatch/app/_components/map/ContextMenu.tsx
index 173e3b99..287a9fd6 100644
--- a/apps/dispatch/app/_components/map/ContextMenu.tsx
+++ b/apps/dispatch/app/_components/map/ContextMenu.tsx
@@ -1,28 +1,25 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { OSMWay } from "@repo/db";
+import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 import { useMapStore } from "_store/mapStore";
 import { usePannelStore } from "_store/pannelStore";
-import {
-	MapPin,
-	MapPinned,
-	Radius,
-	Ruler,
-	Search,
-	RulerDimensionLine,
-	Scan,
-} from "lucide-react";
+import { MapPin, MapPinned, Radius, Ruler, Search, RulerDimensionLine, Scan } from "lucide-react";
 import { useEffect, useState } from "react";
+import toast from "react-hot-toast";
 import { Popup, useMap } from "react-leaflet";
 
 export const ContextMenu = () => {
 	const map = useMap();
-	const { contextMenu, setContextMenu, setSearchElements, setSearchPopup } =
-		useMapStore();
-	const { setMissionFormValues, setOpen } = usePannelStore((state) => state);
+	const { contextMenu, setContextMenu, setSearchElements, setSearchPopup } = useMapStore();
+	const { missionFormValues, setMissionFormValues, setOpen, isOpen } = usePannelStore(
+		(state) => state,
+	);
 	const [showRulerOptions, setShowRulerOptions] = useState(false);
 	const [rulerHover, setRulerHover] = useState(false);
 	const [rulerOptionsHover, setRulerOptionsHover] = useState(false);
 
+	const dispatcherConnected = useDispatchConnectionStore((s) => s.status) === "connected";
+
 	useEffect(() => {
 		setShowRulerOptions(rulerHover || rulerOptionsHover);
 	}, [rulerHover, rulerOptionsHover]);
@@ -45,7 +42,9 @@ export const ContextMenu = () => {
 		};
 	}, [map, contextMenu, setContextMenu, setSearchPopup]);
 
-	if (!contextMenu) return null;
+	if (!contextMenu || !dispatcherConnected) return null;
+
+	const einsatzBtnText = missionFormValues && isOpen ? "Position übernehmen" : "Einsatz erstellen";
 
 	const addOSMobjects = async () => {
 		const res = await fetch(
@@ -67,9 +66,7 @@ export const ContextMenu = () => {
 				return {
 					wayID: e.id,
 					nodes: e.nodes.map((nodeId: string) => {
-						const node = data.elements.find(
-							(element: any) => element.id === nodeId,
-						);
+						const node = data.elements.find((element: any) => element.id === nodeId);
 						return {
 							lat: node.lat,
 							lon: node.lon,
@@ -100,45 +97,44 @@ export const ContextMenu = () => {
 					{/* Top Button */}
 					<button
 						className="btn btn-circle bg-rescuetrack w-10 h-10 absolute left-1/2 top-0 pointer-events-auto opacity-80 tooltip tooltip-top tooltip-accent"
-						data-tip="Nächstes Element übernehmen"
+						data-tip={einsatzBtnText}
 						style={{ transform: "translateX(-50%)" }}
 						onClick={async () => {
 							const address = await fetch(
 								`https://nominatim.openstreetmap.org/reverse?lat=${contextMenu.lat}&lon=${contextMenu.lng}&format=json`,
 							);
 							const data = (await address.json()) as {
-								address: {
-									ISO3166_2_lvl4: string;
-									country: string;
-									country_code: string;
-									county: string;
-									house_number: string;
-									municipality: string;
-									postcode: string;
-									road: string;
-									state: string;
-									city: string;
-									town: string;
+								address?: {
+									ISO3166_2_lvl4?: string;
+									country?: string;
+									country_code?: string;
+									county?: string;
+									house_number?: string;
+									municipality?: string;
+									postcode?: string;
+									road?: string;
+									state?: string;
+									city?: string;
+									town?: string;
 								};
-								display_name: string;
-								importance: number;
-								lat: string;
-								licence: string;
-								lon: string;
-								name: string;
-								osm_id: number;
-								osm_type: string;
-								place_id: number;
-								place_rank: number;
-								type: string;
+								display_name?: string;
+								importance?: number;
+								lat?: string;
+								licence?: string;
+								lon?: string;
+								name?: string;
+								osm_id?: number;
+								osm_type?: string;
+								place_id?: number;
+								place_rank?: number;
+								type?: string;
 							};
+							const addressObj = data.address ?? {};
 							const objects = await addOSMobjects();
 							const exactAddress = objects.find((object) => {
 								return (
-									object.tags["addr:street"] == data.address.road &&
-									object.tags["addr:housenumber"]?.includes(
-										data.address.house_number,
-									)
+									object.tags["addr:street"] == addressObj.road &&
+									object.tags["addr:housenumber"]?.includes(addressObj.house_number ?? "")
 								);
 							});
 							const closestToContext = objects.reduce((prev, curr) => {
@@ -147,24 +143,21 @@ export const ContextMenu = () => {
 								const currLat = curr.nodes?.[0]?.lat ?? 0;
 								const currLon = curr.nodes?.[0]?.lon ?? 0;
 								const prevDistance = Math.sqrt(
-									Math.pow(prevLat - contextMenu.lat, 2) +
-										Math.pow(prevLon - contextMenu.lng, 2),
+									Math.pow(prevLat - contextMenu.lat, 2) + Math.pow(prevLon - contextMenu.lng, 2),
 								);
 								const currDistance = Math.sqrt(
-									Math.pow(currLat - contextMenu.lat, 2) +
-										Math.pow(currLon - contextMenu.lng, 2),
+									Math.pow(currLat - contextMenu.lat, 2) + Math.pow(currLon - contextMenu.lng, 2),
 								);
 								return prevDistance < currDistance ? prev : curr;
-							});
+							}, [] as any);
 
 							setOpen(true);
-							console.log(data.address.road);
 							setMissionFormValues({
 								addressLat: contextMenu.lat,
 								addressLng: contextMenu.lng,
-								addressCity: data.address.city || data.address.town || "",
-								addressStreet: `${data.address.road || "keine Straße"}, ${data.address.house_number || "keine HN"}`,
-								addressZip: data.address.postcode || "",
+								addressCity: addressObj.city || addressObj.town || "",
+								addressStreet: `${addressObj.road || "keine Straße"}, ${addressObj.house_number || "keine HN"}`,
+								addressZip: addressObj.postcode || "",
 								state: "draft",
 								addressOSMways: [(exactAddress || closestToContext) as any],
 							});
@@ -187,70 +180,9 @@ export const ContextMenu = () => {
 						data-tip="Koordinaten kopieren"
 						style={{ transform: "translateX(-50%)" }}
 						onClick={async () => {
-							const address = await fetch(
-								`https://nominatim.openstreetmap.org/reverse?lat=${contextMenu.lat}&lon=${contextMenu.lng}&format=json`,
-							);
-							const data = (await address.json()) as {
-								address: {
-									ISO3166_2_lvl4: string;
-									country: string;
-									country_code: string;
-									county: string;
-									house_number: string;
-									municipality: string;
-									postcode: string;
-									road: string;
-									state: string;
-									city: string;
-									town: string;
-								};
-								display_name: string;
-								importance: number;
-								lat: string;
-								licence: string;
-								lon: string;
-								name: string;
-								osm_id: number;
-								osm_type: string;
-								place_id: number;
-								place_rank: number;
-								type: string;
-							};
-							const objects = await addOSMobjects();
-							const exactAddress = objects.find((object) => {
-								return (
-									object.tags["addr:street"] == data.address.road &&
-									object.tags["addr:housenumber"]?.includes(
-										data.address.house_number,
-									)
-								);
-							});
-							const closestToContext = objects.reduce((prev, curr) => {
-								const prevLat = prev.nodes?.[0]?.lat ?? 0;
-								const prevLon = prev.nodes?.[0]?.lon ?? 0;
-								const currLat = curr.nodes?.[0]?.lat ?? 0;
-								const currLon = curr.nodes?.[0]?.lon ?? 0;
-								const prevDistance = Math.sqrt(
-									Math.pow(prevLat - contextMenu.lat, 2) +
-										Math.pow(prevLon - contextMenu.lng, 2),
-								);
-								const currDistance = Math.sqrt(
-									Math.pow(currLat - contextMenu.lat, 2) +
-										Math.pow(currLon - contextMenu.lng, 2),
-								);
-								return prevDistance < currDistance ? prev : curr;
-							}, [] as any);
-
-							setOpen(true);
-							setMissionFormValues({
-								addressLat: contextMenu.lat,
-								addressLng: contextMenu.lng,
-								addressCity: data.address.city || data.address.town || "",
-								addressStreet: `${data.address.road || "keine Straße"}, ${data.address.house_number || "keine HN"}`,
-								addressZip: data.address.postcode || "",
-								state: "draft",
-								addressOSMways: [(exactAddress || closestToContext) as any],
-							});
+							const coords = `${contextMenu.lat}, ${contextMenu.lng}`;
+							await navigator.clipboard.writeText(coords);
+							toast.success("Koordinaten in die Zwischenablage kopiert!");
 						}}
 					>
 						<MapPin size={20} />