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

Position übernehmen beim bearbeiten von Einsätzen ändert nun die Position von Einsätzen

Browse Source
This commit is contained in:
PxlLoewe
2025-06-17 21:00:21 -07:00
parent d39039e149
commit fe77ef2c03
7 changed files with 54 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { OSMWay } from "@repo/db";
import { OSMWay, Prisma } from "@repo/db";
import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
import { useMapStore } from "_store/mapStore";
import { usePannelStore } from "_store/pannelStore";
@@ -8,6 +8,8 @@ import { getOsmAddress } from "_querys/osm";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { Popup, useMap } from "react-leaflet";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { editMissionAPI } from "_querys/missions";
export const ContextMenu = () => {
const map = useMap();
@@ -19,9 +21,8 @@ export const ContextMenu = () => {
setSearchPopup,
toggleSearchElementSelection,
} = useMapStore();
const { missionFormValues, setMissionFormValues, setOpen, isOpen } = usePannelStore(
(state) => state,
);
const { missionFormValues, setMissionFormValues, setOpen, isOpen, editingMissionId } =
usePannelStore((state) => state);
const [showRulerOptions, setShowRulerOptions] = useState(false);
const [rulerHover, setRulerHover] = useState(false);
const [rulerOptionsHover, setRulerOptionsHover] = useState(false);
@@ -54,7 +55,7 @@ export const ContextMenu = () => {
const einsatzBtnText = missionFormValues && isOpen ? "Position übernehmen" : "Einsatz erstellen";
const addOSMobjects = async () => {
const addOSMobjects = async (ignorePreviosSelected?: boolean) => {
const res = await fetch(
`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(`
[out:json];
@@ -73,7 +74,7 @@ export const ContextMenu = () => {
.map((e: any) => {
const elementInMap = searchElements.find((el) => el.wayID === e.id);
return {
isSelected: elementInMap?.isSelected ?? false,
isSelected: ignorePreviosSelected ? false : (elementInMap?.isSelected ?? false),
wayID: e.id,
nodes: e.nodes.map((nodeId: string) => {
const node = data.elements.find((element: any) => element.id === nodeId);
@@ -111,7 +112,7 @@ export const ContextMenu = () => {
style={{ transform: "translateX(-50%)" }}
onClick={async () => {
const { parsed } = await getOsmAddress(contextMenu.lat, contextMenu.lng);
const objects = await addOSMobjects();
const objects = await addOSMobjects(true);
const closestToContext = objects.reduce((prev, curr) => {
const prevLat = prev.nodes?.[0]?.lat ?? 0;
const prevLon = prev.nodes?.[0]?.lon ?? 0;
@@ -135,10 +136,11 @@ export const ContextMenu = () => {
);
if (closestToContext) {
toggleSearchElementSelection(closestToContext.wayID);
toggleSearchElementSelection(closestToContext.wayID, true);
}
setMissionFormValues({
...missionFormValues,
...parsed,
state: "draft",
addressLat: contextMenu.lat,

26
apps/dispatch/app/_components/map/MissionMarkers.tsx
View File

@@ -1,5 +1,5 @@
import { Marker, useMap } from "react-leaflet";
import { DivIcon, Marker as LMarker, Popup as LPopup } from "leaflet";
import { DivIcon, LatLngExpression, Marker as LMarker, Popup as LPopup } from "leaflet";
import { useMapStore } from "_store/mapStore";
import { usePannelStore } from "_store/pannelStore";
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -175,7 +175,7 @@ const MissionPopupContent = ({
hpgLocationLat: mission.hpgLocationLat ?? undefined,
hpgLocationLng: mission.hpgLocationLng ?? undefined,
});
setEditingMission(true, mission.id);
setEditingMission(mission.id);
setOpen(true);
}}
>
@@ -208,6 +208,7 @@ const MissionPopupContent = ({
const MissionMarker = ({ mission }: { mission: Mission }) => {
const map = useMap();
const [hideMarker, setHideMarker] = useState(false);
const { editingMissionId, missionFormValues } = usePannelStore((state) => state);
const markerRef = useRef<LMarker>(null);
const popupRef = useRef<LPopup>(null);
@@ -329,11 +330,28 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
</div>`;
};
const markerPosition = useMemo<LatLngExpression>(() => {
return [
editingMissionId === mission.id && missionFormValues?.addressLat
? missionFormValues.addressLat
: mission.addressLat,
editingMissionId === mission.id && missionFormValues?.addressLng
? missionFormValues.addressLng
: mission.addressLng,
];
}, [
editingMissionId,
mission.addressLat,
mission.addressLng,
missionFormValues?.addressLat,
missionFormValues?.addressLng,
]);
return (
<Fragment key={mission.id}>
<Marker
ref={markerRef}
position={[mission.addressLat, mission.addressLng]}
position={markerPosition}
icon={
new DivIcon({
iconAnchor: [0, 0],
@@ -348,7 +366,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
}}
id={`mission-${mission.id.toString()}`}
ref={popupRef}
position={[mission.addressLat, mission.addressLng]}
position={markerPosition}
autoClose={false}
closeOnClick={false}
autoPan={false}

11
apps/dispatch/app/_components/map/SearchElements.tsx
View File

@@ -1,5 +1,5 @@
import { useMapStore } from "_store/mapStore";
import { Marker, Polygon, Popup } from "react-leaflet";
import { Polygon } from "react-leaflet";
import { useQuery } from "@tanstack/react-query";
import { getMissionsAPI } from "_querys/missions";
import { usePannelStore } from "_store/pannelStore";
@@ -26,14 +26,7 @@ export const SearchElements = () => {
useEffect(() => {
if (pannelOpen) {
const missionEdited = missions?.find((m) => m.id === editingMissionId);
if (missionEdited) {
const elements = missionEdited.addressOSMways.map((e) => ({
...(e as unknown as OSMWay),
isSelected: true,
}));
setSearchElements(elements);
}
// OSM Elements wirden in ContextMenu.tsx gesetzt
} else {
const openMissions = openMissionMarker.map((m) => {
const mission = missions?.find((mi) => mi.id === m.id);