From f69f54dba91c934b7e8c66fdccaf7a195bbe321e Mon Sep 17 00:00:00 2001 From: ismailali1553 Date: Fri, 17 Jan 2025 19:13:29 +0100 Subject: [PATCH] Modal wird angezeigt, aber muss noch angepasst werden --- components/CoordinateModal.js | 29 ++++++++++++++ components/MapComponent.js | 18 ++++++++- components/useMapContextMenu.js | 68 +++++++++------------------------ 3 files changed, 65 insertions(+), 50 deletions(-) create mode 100644 components/CoordinateModal.js diff --git a/components/CoordinateModal.js b/components/CoordinateModal.js new file mode 100644 index 000000000..a6ad623b6 --- /dev/null +++ b/components/CoordinateModal.js @@ -0,0 +1,29 @@ +// components/CoordinateModal.js +import React from "react"; + +const CoordinateModal = ({ isOpen, onClose, coordinates }) => { + if (!isOpen) return null; + + return ( +
+
+

Koordinaten

+

Koordinaten: {coordinates}

+ + +
+
+ ); +}; + +export default CoordinateModal; diff --git a/components/MapComponent.js b/components/MapComponent.js index 0a944eb63..674c773e7 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -26,7 +26,7 @@ import { fetchPoiData, fetchUserRights } from "../services/apiService.js"; import { APP_VERSION } from "../config/appVersion"; import * as layers from "../config/layers.js"; import { initializeMap } from "../utils/initializeMap.js"; -import { addItemsToMapContextMenu } from "./useMapContextMenu.js"; +import addItemsToMapContextMenu from "./useMapContextMenu.js"; import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js"; import useBereicheMarkersLayer from "../hooks/layers/useBereicheMarkersLayer.js"; @@ -63,6 +63,7 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS import { useSelector, useDispatch } from "react-redux"; import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice"; import CoordinateInput from "./CoordinateInput"; +import CoordinateModal from "./CoordinateModal"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); @@ -76,6 +77,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const [locationDeviceData, setLocationDeviceData] = useState([]); const [priorityConfig, setPriorityConfig] = useState([]); const [menuItemAdded, setMenuItemAdded] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + const closeModal = () => setIsModalOpen(false); + const openModalWithCoordinates = (e) => { + const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`; + setCurrentCoordinates(coordinates); + setIsModalOpen(true); + }; + const [currentCoordinates, setCurrentCoordinates] = useState(""); const poiLayerVisible = useRecoilValue(poiLayerVisibleState); const [isRightsLoaded, setIsRightsLoaded] = useState(false); const [hasRights, setHasRights] = useState(false); @@ -912,6 +921,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }; //-------------------------------------------- + useEffect(() => { + if (map && !menuItemAdded) { + addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, openModalWithCoordinates, hasRights, setShowPopup, setPopupCoordinates); + } + }, [map, menuItemAdded, hasRights]); + //-------------------------------------------- return ( <> @@ -937,6 +952,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+
diff --git a/components/useMapContextMenu.js b/components/useMapContextMenu.js index 6a59bbf8e..b65db4175 100644 --- a/components/useMapContextMenu.js +++ b/components/useMapContextMenu.js @@ -1,52 +1,13 @@ -// /components/useMapContextMenu.js +// components/useMapContextMenu.js import { toast } from "react-toastify"; -import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Assuming these are imported correctly - -const zoomInCallback = (e, map) => { - zoomIn(e, map); -}; - -const zoomOutCallback = (map) => { - zoomOut(map); -}; - -const centerHereCallback = (e, map) => { - centerHere(e, map); -}; -// Funktion zum Anzeigen der Koordinaten -const showCoordinates = (e) => { - alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)); -}; -// Kontextmenü Callback für "POI hinzufügen" -const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => { - const editMode = localStorage.getItem("editMode") === "true"; - hasRights = editMode ? hasRights : undefined; - if (hasRights) { - setPopupCoordinates(event.latlng); - setShowPopup(true); - } else { - toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", { - position: "top-center", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - } -}; - -export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates) => { - // Überprüfe den Bearbeitungsmodus in localStorage - const editMode = localStorage.getItem("editMode") === "true"; - hasRights = editMode ? hasRights : undefined; +import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; +const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openModalWithCoordinates, hasRights, setShowPopup, setPopupCoordinates) => { if (!menuItemAdded && map && map.contextmenu) { map.contextmenu.addItem({ text: "Koordinaten anzeigen", icon: "img/not_listed_location.png", - callback: showCoordinates, + callback: openModalWithCoordinates, }); map.contextmenu.addItem({ separator: true }); @@ -54,32 +15,41 @@ export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, h map.contextmenu.addItem({ text: "Reinzoomen", icon: "img/zoom_in.png", - callback: (e) => zoomInCallback(e, map), + callback: (e) => zoomIn(e, map), }); map.contextmenu.addItem({ text: "Rauszoomen", icon: "img/zoom_out.png", - callback: () => zoomOutCallback(map), + callback: () => zoomOut(map), }); map.contextmenu.addItem({ text: "Hier zentrieren", icon: "img/center_focus.png", - callback: (e) => centerHereCallback(e, map), + callback: (e) => centerHere(e, map), }); - // wenn localStorage Variable editMode true ist, dann wird der Button "POI hinzufügen" angezeigt - if (editMode) { + if (localStorage.getItem("editMode") === "true") { map.contextmenu.addItem({ separator: true }); map.contextmenu.addItem({ text: "POI hinzufügen", icon: "img/add_station.png", className: "background-red", - callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates), + callback: (event) => { + const editMode = localStorage.getItem("editMode") === "true"; + if (editMode && hasRights) { + setPopupCoordinates(event.latlng); + setShowPopup(true); + } else { + toast.error("Benutzer hat keine Berechtigung zum Hinzufügen."); + } + }, }); } setMenuItemAdded(true); } }; + +export default addItemsToMapContextMenu;