feat(context-menu): Fix POI hinzufügen Modal und State-Handling
- `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.
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// /config/appVersion
|
||||
export const APP_VERSION = "1.1.32";
|
||||
export const APP_VERSION = "1.1.33";
|
||||
|
||||
Reference in New Issue
Block a user