diff --git a/apps/dispatch/app/_components/map/ContextMenu.tsx b/apps/dispatch/app/_components/map/ContextMenu.tsx index 287a9fd6..544aa5a0 100644 --- a/apps/dispatch/app/_components/map/ContextMenu.tsx +++ b/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, }); }} > diff --git a/apps/dispatch/app/_components/map/SearchElements.tsx b/apps/dispatch/app/_components/map/SearchElements.tsx index 45f95c9f..ab2002b1 100644 --- a/apps/dispatch/app/_components/map/SearchElements.tsx +++ b/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 ( [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 ( { >

- {element.tags?.building === "yes" - ? "Gebäude" - : element.tags?.building} + {element.tags?.building === "yes" ? "Gebäude" : element.tags?.building} {!element.tags?.building && "unbekannt"}

@@ -102,9 +101,7 @@ export const SearchElements = () => { {element.tags?.["addr:suburb"]} {element.tags?.["addr:postcode"]}

- +
@@ -141,12 +138,7 @@ export const SearchElements = () => { ) ) return null; - return ( - - ); + return ; })} {searchPopup && ( { icon={new L.DivIcon()} opacity={0} > - {!searchPopupElement && ( -
- )} + {!searchPopupElement &&
}
)} - {searchPopupElement && ( - - )} + {searchPopupElement && } ); };