From dca6e3db8dde3ec3fb4dfaa8c354df2f7a68482f Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 6 May 2024 08:15:31 +0200 Subject: [PATCH] =?UTF-8?q?Fix:=20Zuverl=C3=A4ssige=20Anzeige=20von=20poiT?= =?UTF-8?q?ypName=20mit=20Fremdschl=C3=BCssel=20in=20den=20Markern=20siche?= =?UTF-8?q?rgestellt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Implementierung der Fremdschlüssel-Logik für die `poiTyp`-Daten in `MapComponent`. - Nutzung einer Map, um die Fremdschlüssel-Beziehung zwischen `poiTyp`-IDs und deren Namen effizient zu verwalten. - Sicherstellung, dass `poiTypName` korrekt in Marker-Popups angezeigt wird, indem die Fremdschlüssel-Beziehung geprüft wird. - Verbesserte Bedingungsprüfung sorgt dafür, dass die Popups nun die richtigen `poiTypName`-Werte anzeigen, oder als Fallback "Unbekannt" verwendet wird. - Effekt-Logik wurde so angepasst, dass Marker nur aktualisiert werden, wenn die `poiTyp`-Daten vollständig geladen sind. --- components/MapComponent.js | 94 +++++++++++++++++++------------ components/ShowAddStationPopup.js | 63 ++++++++++----------- config/config.js | 8 +-- pages/api/[...path].js | 4 +- 4 files changed, 95 insertions(+), 74 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 4112ccf6b..00e1ee262 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -18,13 +18,17 @@ import { selectedAreaState } from "../store/atoms/selectedAreaState.js"; import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js"; import { poiTypState } from "../store/atoms/poiTypState.js"; import ShowAddStationPopup from "./ShowAddStationPopup"; -import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom'; +import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom"; //import { createRoot } from "react-dom/client"; const MapComponent = ({ locations, onLocationUpdate }) => { - + const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false); + const [poiTypMap, setPoiTypMap] = useState(new Map()); const [showPopup, setShowPopup] = useState(false); - const [popupCoordinates, setPopupCoordinates] = useState({ lat: 52.52, lng: 13.4050 }); // Beispielkoordinaten + const [popupCoordinates, setPopupCoordinates] = useState({ + lat: 52.52, + lng: 13.405, + }); // Beispielkoordinaten const openPopup = () => setShowPopup(true); const closePopup = () => setShowPopup(false); @@ -39,7 +43,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { setShowPopup(true); }; - const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom); const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker @@ -277,7 +280,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { zoomControl: false, contextmenu: true, contextmenuItems: [ - { text: "Station hinzufügen", callback: addStationCallback }, + { text: "Station hinzufügen", callback: addStationCallback }, { text: "Station öffnen (Tab)", icon: "img/screen_new.png", @@ -347,6 +350,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { } } //---------------------------------- + // poiTyp Daten hinzufügen //------------------------------------------ // Funktion zum Abrufen der poiTyp Daten @@ -360,7 +364,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => { console.error("Fehler beim Abrufen der poiTyp Daten:", error); } }; - console.log("trigger in MapComponent.js in fetchPoiTypData:", poiReadTrigger); + console.log( + "trigger in MapComponent.js in fetchPoiTypData:", + poiReadTrigger + ); fetchPoiTypData(); }, []); @@ -429,14 +436,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => { loadData(); }; - // Kontextmenü Callback für "Station hinzufügen" - const addStationCallback = (event) => { - setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden - setShowPopup(true); // Popup öffnen - }; + // Kontextmenü Callback für "Station hinzufügen" + const addStationCallback = (event) => { + setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden + setShowPopup(true); // Popup öffnen + }; //-----Kontextmenu----ende------------ // Ensure this function is only called when map is initialized and available -/* const showAddStationPopup = (e, map) => { + /* const showAddStationPopup = (e, map) => { const container = L.DomUtil.create("div"); // Create a root container for the React component inside the popup @@ -458,7 +465,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }; */ // Inside your ShowAddStationPopup component -/* useEffect(() => { + /* useEffect(() => { // Cleanup function to unmount React component return () => { if (container._reactRoot) { @@ -470,7 +477,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //------------------------------------------ // Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi) -/* async function handleSubmit(event) { + /* async function handleSubmit(event) { event.preventDefault(); const form = event.target; @@ -545,7 +552,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => { return path; } + //------------------------------------------ + // Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern + useEffect(() => { + const fetchPoiTypData = async () => { + try { + const response = await fetch("/api/readPoiTyp"); + const data = await response.json(); + const map = new Map(); + data.forEach((item) => map.set(item.idPoiTyp, item.name)); + setPoiTypMap(map); + setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen + console.log("poiTypMap:", map); + const poiTypName = poiTypMap.get(0) || "Unbekannt"; + console.log("poiTypName:", poiTypName); + } catch (error) { + console.error("Fehler beim Abrufen der poiTyp-Daten:", error); + } + }; + fetchPoiTypData(); + }, []); //------------------------------------------ let dbLayer = null; useEffect(() => { @@ -576,25 +603,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => { map.removeLayer(poiLayerRef.current); poiLayerRef.current = new L.LayerGroup().addTo(map); } - locations.forEach((location) => { - // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren - }); + locations.forEach((location) => { + // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren + }); }; console.log("trigger in MapComponent.js:", poiReadTrigger); - }, [map,locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert + }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert + //------------------------------------------ - // poiLayerRef - //-------------------------------------------- + // poiLayerRef(poiDbLayer) POI hinzufügen + //-------------------------------------------- useEffect(() => { - if (map && poiLayerRef.current) { + if (map && poiLayerRef.current && isPoiTypLoaded) { // Entfernen Sie die bestehende Ebene und erstellen Sie eine neue map.removeLayer(poiLayerRef.current); poiLayerRef.current = new L.LayerGroup().addTo(map); - + // Fügen Sie die aktualisierten Marker hinzu locations.forEach((location) => { const { latitude, longitude } = parsePoint(location.position); + const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt "; const marker = L.marker([latitude, longitude], { icon: L.icon({ iconUrl: "/img/icons/green-marker-icon.png", @@ -605,14 +634,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => { draggable: true, id: location.idPoi, }); - + // Popup konfigurieren marker.bindPopup( - `${location.description || "Unbekannt"}
Type: ${ - location.idPoiTyp || "N/A" - }
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}` + `${location.description || "Unbekannt"}
Type: ${poiTypName}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}` ); - + // Event-Handler hinzufügen marker.on("mouseover", function () { this.openPopup(); @@ -620,7 +647,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { marker.on("mouseout", function () { this.closePopup(); }); - + marker.on("dragend", (e) => { const newLat = e.target.getLatLng().lat; const newLng = e.target.getLatLng().lng; @@ -630,13 +657,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => { console.log("trigger in MapComponent.js:", poiReadTrigger); }); }); - + marker.addTo(poiLayerRef.current); }); } - - }, [map, locations, onLocationUpdate,poiReadTrigger]); - + }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]); + //------------------------------------------ function parsePoint(position) { @@ -1522,8 +1548,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Logik zur Aktualisierung der Map hier hinzufügen // Beispiel: Daten neu laden oder aktualisieren - -}, [poiReadTrigger]); + }, [poiReadTrigger]); //--------------------------------------------------------- return ( @@ -1572,7 +1597,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { )} -
{ - - const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden + const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden const [name, setName] = useState(""); const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string + const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string const [latitude] = useState(latlng.lat.toFixed(5)); const [longitude] = useState(latlng.lng.toFixed(5)); const setLoadData = useSetRecoilState(readPoiMarkersStore); const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom); - -/* useEffect(() => { + /* useEffect(() => { if (map && loadData) { console.log("Map and loadData are defined in ShowAddStationPopup.js", map); @@ -27,15 +26,16 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => { } }, [map, loadData]); */ -// In Kontextmenü-Formular Typen anzeigen + // In Kontextmenü-Formular Typen anzeigen useEffect(() => { - const fetchPoiTypData2 = async () => { + const fetchpoiTypData = async () => { try { const response = await fetch("/api/readPoiTyp"); const data = await response.json(); - setPoiTypData2(data); + setpoiTypData(data); if (data && data.length > 0) { setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType + setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType console.log( "Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp @@ -46,44 +46,41 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => { } }; - fetchPoiTypData2(); + fetchpoiTypData(); }, []); -//-----------------handleSubmit------------------- -const handleSubmit = async (event) => { - event.preventDefault(); - const formData = { + //-----------------handleSubmit------------------- + const handleSubmit = async (event) => { + event.preventDefault(); + const formData = { name, poiTypeId, latitude, longitude, - }; + }; - const response = await fetch("/api/addLocation", { + const response = await fetch("/api/addLocation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), - }); + }); - if (response.ok) { + if (response.ok) { setTrigger((trigger) => { - console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert - const newTrigger = trigger + 1; - console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert - onClose(); - return newTrigger; + console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert + const newTrigger = trigger + 1; + console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert + onClose(); + return newTrigger; }); - } else { + } else { console.error("Fehler beim Hinzufügen des POI"); - } + } - if (map && typeof map.closePopup === "function") { + if (map && typeof map.closePopup === "function") { map.closePopup(); - } -}; - - - + } + }; return (
@@ -112,8 +109,8 @@ const handleSubmit = async (event) => { 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) => ( + {poiTypData && + poiTypData.map((poiTyp, index) => ( diff --git a/config/config.js b/config/config.js index a466755ed..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