PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fix missing Address, rename Btns, add copy coords #5

Browse Source
This commit is contained in:
nocnico
2025-05-22 17:40:36 +02:00
parent eb86b8407e
commit 56fb51e6b8
1 changed files with 49 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
apps/dispatch/app/_components/map/ContextMenu.tsx
View File

@@ -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} />