Fix: Zuverlässige Anzeige von poiTypName mit Fremdschlüssel in den Markern sichergestellt

- 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.
2024-05-06 08:15:31 +02:00
parent cc0e3e726a
commit dca6e3db8d
4 changed files with 95 additions and 74 deletions
--- 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
@@ -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();
  }, []);

@@ -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(() => {
@@ -582,12 +609,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    };
    console.log("trigger in MapComponent.js:", poiReadTrigger);
  }, [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);
@@ -595,6 +623,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
      // 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",
@@ -608,9 +637,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {

        // Popup konfigurieren
        marker.bindPopup(
-          `<b>${location.description || "Unbekannt"}</b><br>Type: ${
-            location.idPoiTyp || "N/A"
-          }<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
+          `<b>${location.description || "Unbekannt"}</b><br>Type: ${poiTypName}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
        );

        // Event-Handler hinzufügen
@@ -634,8 +661,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
        marker.addTo(poiLayerRef.current);
      });
    }
-   
-  }, [map, locations, onLocationUpdate,poiReadTrigger]);
+  }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);

  //------------------------------------------

@@ -1522,7 +1548,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {

    // Logik zur Aktualisierung der Map hier hinzufügen
    // Beispiel: Daten neu laden oder aktualisieren
-
  }, [poiReadTrigger]);
  //---------------------------------------------------------

@@ -1572,7 +1597,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
        )}
      </div>

-
      <DataSheet className="z-50" />

      <div
--- a/components/ShowAddStationPopup.js
+++ b/components/ShowAddStationPopup.js
@@ -3,19 +3,18 @@ import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
 import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
-import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom';
+import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";

 const ShowAddStationPopup = ({ onClose, map, latlng }) => {
- 
-  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(() => {
    if (map && loadData) {
      
@@ -29,13 +28,14 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {

  // 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,7 +46,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
      }
    };

-    fetchPoiTypData2();
+    fetchpoiTypData();
  }, []);

  //-----------------handleSubmit-------------------
@@ -82,9 +82,6 @@ const handleSubmit = async (event) => {
    }
  };

-
-  
-
  return (
    <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
      <div className="flex items-center mb-4">
@@ -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) => (
              <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
                {poiTyp.name}
              </option>
--- 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
--- 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