From ffb76857c797afa87938a5ae74e08366285a5d11 Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismailali1553@gmail.com>
Date: Sun, 9 Mar 2025 09:37:01 +0100
Subject: [PATCH] =?UTF-8?q?feat(context-menu):=20Fix=20POI=20hinzuf=C3=BCg?=
 =?UTF-8?q?en=20Modal=20und=20State-Handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `useMapContextMenu.js`:
  - `openPoiModal` in `addItemsToMapContextMenu` integriert, um Zugriff auf `setShowCoordinatesModal` und `setShowPoiModal` zu ermöglichen.
  - `setShowCoordinatesModal` wird korrekt als Parameter übergeben und verwaltet.
  - `POI hinzufügen`-Eintrag im Kontextmenü wurde verbessert.

- `MapComponent.js`:
  - `setShowCoordinatesModal`, `setShowPoiModal` und `setPopupCoordinates` werden jetzt korrekt an `addItemsToMapContextMenu` übergeben.
  - `ShowAddStationPopup` Modal öffnet sich jetzt korrekt und überlagert die Seite.
  - UI-Verbesserungen für Modale und Fix für doppeltes Öffnen von Modalen.

Fixes: Problem, dass mehrere Modale gleichzeitig geöffnet wurden und `setShowCoordinatesModal` nicht definiert war.
---
 components/mainComponent/MapComponent.js | 24 ++++++++++++++++++++----
 components/useMapContextMenu.js          | 24 ++++++++++++++++--------
 config/appVersion.js                     |  2 +-
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js
index 06e5a6a80..cef38ab3d 100644
--- a/components/mainComponent/MapComponent.js
+++ b/components/mainComponent/MapComponent.js
@@ -174,10 +174,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [newCoords, setNewCoords] = useState(null);
   const [tempMarker, setTempMarker] = useState(null);
 
+  const [showPoiModal, setShowPoiModal] = useState(false);
+  const [showCoordinatesModal, setShowCoordinatesModal] = useState(false);
+  const [popupCoordinates, setPopupCoordinates] = useState(null);
+  /* 
   const [popupCoordinates, setPopupCoordinates] = useState({
     lat: 52.52,
     lng: 13.405,
-  });
+  }); */
   const [popupVisible, setPopupVisible] = useState(false);
 
   const handleAddStation = (stationData) => {
@@ -1007,12 +1011,20 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   }, [map, menuItemAdded, hasRights]); */
   //--------------------------------------------
-
   useEffect(() => {
     if (map && !menuItemAdded) {
-      addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, openPopupWithCoordinates);
+      addItemsToMapContextMenu(
+        map,
+        menuItemAdded,
+        setMenuItemAdded,
+        setShowCoordinatesModal,
+        setShowPoiModal,
+        setPopupCoordinates,
+        openPopupWithCoordinates // Diese Funktion wird jetzt übergeben!
+      );
     }
   }, [map, menuItemAdded]);
+
   //--------------------------------------------
   //  Beim ersten Client-Render den Wert aus localStorage laden
   useEffect(() => {
@@ -1034,7 +1046,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   return (
     <>
-      {popupVisible && <ShowAddStationPopup latlng={popupCoordinates} onClose={() => setPopupVisible(false)} map={map} />}
+      {/* Zeigt das Koordinaten-Modal, wenn `showCoordinatesModal` true ist */}
+      {showCoordinatesModal && <CoordinateModal latlng={popupCoordinates} onClose={() => setShowCoordinatesModal(false)} />}
+
+      {/* Zeigt das POI-Modal, wenn `showPoiModal` true ist */}
+      {showPoiModal && <ShowAddStationPopup latlng={popupCoordinates} onClose={() => setShowPoiModal(false)} />}
       <ToastContainer />
       <div>{showPoiUpdateModal && <PoiUpdateModal onClose={() => setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</div>
 
diff --git a/components/useMapContextMenu.js b/components/useMapContextMenu.js
index 6bf04dcdc..03b847b50 100644
--- a/components/useMapContextMenu.js
+++ b/components/useMapContextMenu.js
@@ -3,7 +3,20 @@ import { toast } from "react-toastify";
 import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils";
 
 // components/useMapContextMenu.js
-const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopupWithCoordinates) => {
+const addItemsToMapContextMenu = (
+  map,
+  menuItemAdded,
+  setMenuItemAdded,
+  setShowCoordinatesModal,
+  setShowPoiModal,
+  setPopupCoordinates,
+  openPopupWithCoordinates // Hier wird die Funktion als Parameter hinzugefügt
+) => {
+  const openPoiModal = (e) => {
+    setShowCoordinatesModal(false); // ✅ Jetzt verfügbar, weil als Parameter übergeben
+    setPopupCoordinates(e.latlng);
+    setShowPoiModal(true);
+  };
   if (!menuItemAdded && map && map.contextmenu) {
     map.contextmenu.addItem({
       text: "Koordinaten anzeigen",
@@ -61,16 +74,11 @@ const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopu
       console.log("map :", map);
       console.log("editMode localStorage:", localStorage.getItem("editMode"));
       console.log("editMode:", editMode);
+
       map.contextmenu.addItem({
         text: "POI hinzufügen",
         icon: "/img/add_station.png",
-        callback: openPopupWithCoordinates, // Statt alert wird die Funktion zum Öffnen des Popups genutzt
-
-        /*     callback: (e) => {
-          alert("POI hinzufügen an: " + e.latlng.lat + ", " + e.latlng.lng);
-          // Falls du ein Modal-Fenster zum Hinzufügen verwenden möchtest:
-          // ShowAddStationPopup({ latlng: e.latlng, onClose: () => {} });
-        }, */
+        callback: openPoiModal, // Jetzt mit Zugriff auf `setShowPoiModal`
       });
     }
   }
diff --git a/config/appVersion.js b/config/appVersion.js
index 6a2b72e83..704e526af 100644
--- a/config/appVersion.js
+++ b/config/appVersion.js
@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.32";
+export const APP_VERSION = "1.1.33";