Modal wird angezeigt, aber muss noch angepasst werden

components/CoordinateModal.js

@@ -0,0 +1,29 @@
+// components/CoordinateModal.js
+import React from "react";
+
+const CoordinateModal = ({ isOpen, onClose, coordinates }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
+      <div className="bg-white p-6 rounded-lg shadow-lg w-80">
+        <h2 className="text-lg font-bold mb-2">Koordinaten</h2>
+        <p className="mb-4">Koordinaten: {coordinates}</p>
+        <button
+          onClick={() => {
+            navigator.clipboard.writeText(coordinates);
+            alert("Koordinaten kopiert!");
+          }}
+          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        >
+          Kopieren
+        </button>
+        <button onClick={onClose} className="mt-2 bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">
+          Schließen
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CoordinateModal;

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 }) => {
 
       <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
       <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
+      <CoordinateModal isOpen={isModalOpen} onClose={closeModal} coordinates={currentCoordinates} />
 
       <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
         <div className="flex justify-between items-center">

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;