Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
ISA
2024-05-06 08:15:31 +02:00
parent cc0e3e726a
commit dca6e3db8d
4 changed files with 95 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
components/MapComponent.js
View File

@@ -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(
`<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
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 }) => {
)}
</div>
<DataSheet className="z-50" />
<div

63
components/ShowAddStationPopup.js
View File

@@ -1,22 +1,21 @@
// components/ShowAddStationPopup.js
import React, { useState, useEffect, use } from "react";
import ReactDOM from "react-dom";
import { useRecoilValue ,useRecoilState, useSetRecoilState } from "recoil";
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(() => {
/* 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 (
<form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
@@ -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>

8
config/config.js
View File

@@ -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

4
pages/api/[...path].js
View File

@@ -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