From fb25f3a39dccf9a5f343eefec1a2559ceffcfe37 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 3 May 2024 07:20:51 +0200 Subject: [PATCH] Fix: Ensure proper map object is passed to ShowAddStationPopup The ShowAddStationPopup component was failing to close popups because it was using an uninitialized 'map' object. This commit changes the reference from 'map' to 'initMap' at the point where ShowAddStationPopup is rendered. This ensures that the correct map instance is being used, resolving the TypeError related to undefined properties when attempting to close the popup. This change is critical for maintaining the functionality of our map interactions, particularly in scenarios where dynamic components are rendered based on user actions. --- components/MapComponent.js | 2 +- components/ShowAddStationPopup.js | 32 +++++++++++++++++++------------ config/config.js | 8 ++++---- pages/api/[...path].js | 4 ++-- 4 files changed, 27 insertions(+), 19 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 63ba08810..ea5ffad56 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -415,7 +415,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Create a root container for the React component inside the popup const root = ReactDOM.createRoot(container); - root.render(); + root.render(); // Create and configure the popup L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap); diff --git a/components/ShowAddStationPopup.js b/components/ShowAddStationPopup.js index 78eac25e2..06c5a674b 100644 --- a/components/ShowAddStationPopup.js +++ b/components/ShowAddStationPopup.js @@ -16,7 +16,10 @@ const ShowAddStationPopup = ({ map, latlng }) => { setPoiTypData2(data); if (data && data.length > 0) { setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType - console.log("Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp); + console.log( + "Initial poiTypeId set in ShowAddStationPopup.js :", + data[0].idPoiTyp + ); } } catch (error) { console.error("Fehler beim Abrufen der poiTyp Daten:", error); @@ -28,24 +31,28 @@ const ShowAddStationPopup = ({ map, latlng }) => { const handleSubmit = (event) => { event.preventDefault(); - const formData = { + const formData = { name, // Name der Station poiTypeId, // Typ der Station, logged as idPoiTyp latitude, // Breitengrad longitude, // Längengrad - }; + }; - fetch('/api/addLocation', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, + fetch("/api/addLocation", { + method: "POST", + headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) - .then((response) => response.json()) - .then((data) => console.log(data)) // Handle the response data - .catch((error) => console.error(error)); // Handle any errors + .then((response) => response.json()) + .then((data) => console.log(data)) // Handle the response data + .catch((error) => console.error(error)); // Handle any errors - // Close the popup - //map.closePopup(); + // Check if map is not undefined and call closePopup + if (map && typeof map.closePopup === "function") { + map.closePopup(); + } else { + console.error("Map object is undefined or closePopup is not a function"); + } }; return ( @@ -75,7 +82,8 @@ const ShowAddStationPopup = ({ map, latlng }) => { onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" > - {poiTypData2 && poiTypData2.map((poiTyp, index) => ( + {poiTypData2 && + poiTypData2.map((poiTyp, index) => ( diff --git a/config/config.js b/config/config.js index 05a2539f9..8f777e4fc 100644 --- a/config/config.js +++ b/config/config.js @@ -23,17 +23,17 @@ if (typeof window !== "undefined") { user = url.searchParams.get("u") || "484"; // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card' // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen -/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484 + mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484 mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`; mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`; mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`; - mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */ + mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; - mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`; + /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`; mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`; mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`; mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`; - mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; + mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */ } // Export der definierten Variablen und URLs, damit sie in anderen Teilen der Anwendung verwendet werden können diff --git a/pages/api/[...path].js b/pages/api/[...path].js index 49efc5183..299b2253b 100644 --- a/pages/api/[...path].js +++ b/pages/api/[...path].js @@ -2,8 +2,8 @@ import { createProxyMiddleware } from "http-proxy-middleware"; export default createProxyMiddleware({ - //target: "http://10.10.0.13", // Ziel-URL des Proxys - target: "http://192.168.10.187:3000", // Ziel-URL des Proxys + target: "http://10.10.0.13", // Ziel-URL des Proxys + //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys changeOrigin: true, pathRewrite: { "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert