From 4b7a74647af58fac43341e190266c3193a18c6b2 Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 7 Jun 2024 13:06:03 +0200 Subject: [PATCH] edit: show two lines from readGisLines --- components/MapComponent.js | 85 +++++++++++++++++--------------------- 1 file changed, 38 insertions(+), 47 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index fc3bd6644..8a68fc397 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -99,15 +99,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt } - console.log("Selected Marker ID (idPoi):", marker.options.idPoi); - console.log("Selected Marker Description:", marker.options.description); + //console.log("Selected Marker ID (idPoi):", marker.options.idPoi); + //console.log("Selected Marker Description:", marker.options.description); setCurrentPoiData({ idPoi: marker.options.id, name: marker.options.name, description: marker.options.description, }); - console.log("POI-Daten1:", currentPoiData); + //console.log("POI-Daten1:", currentPoiData); fetchPoiData(marker.options.id); @@ -126,7 +126,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { name: data.name, description: data.description, }); - console.log("POI-Daten2:", currentPoiData); + //console.log("POI-Daten2:", currentPoiData); setShowPoiUpdateModal(true); }; @@ -166,9 +166,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const handleAddStation = (stationData) => { // Station-Daten speichern oder API-Aufruf durchführen - console.log("Neue Station:", userRights.includes(56)); + //console.log("Neue Station:", userRights.includes(56)); - console.log("Neue Station:", stationData); + //console.log("Neue Station:", stationData); setShowAddStationPopup(false); closePopup(); // Schließt das Popup nach dem Hinzufügen }; @@ -257,7 +257,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Funktion zum Öffnen in einem neuen Tab function openInNewTab(e, marker) { if (marker && marker.options && marker.options.link) { - console.log("Marker data:", baseUrl + marker.options.link); + //console.log("Marker data:", baseUrl + marker.options.link); window.open(baseUrl + marker.options.link, "_blank"); } else { console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft"); @@ -267,7 +267,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Funktion zum Öffnen im gleichen Fenster function openInSameWindow(e, marker) { if (marker && marker.options && marker.options.link) { - console.log("Marker data:", baseUrl + marker.options.link); + //console.log("Marker data:", baseUrl + marker.options.link); window.location.href = baseUrl + marker.options.link; } else { console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft"); @@ -340,7 +340,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { ); // Keine Abhängigkeiten, da `hasRights` als Parameter übergeben wird */ const addStationCallback = useCallback( (event) => { - console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights); + //console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights); if (hasRights) { setPopupCoordinates(event.latlng); setShowPopup(true); @@ -354,7 +354,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { draggable: true, progress: undefined, }); - console.log("Benutzer hat keine Berechtigung zum Hinzufügen."); + console.error("Benutzer hat keine Berechtigung zum Hinzufügen."); } }, [hasRights] @@ -743,16 +743,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const userRightsIds = rightsArray.map((right) => right.IdRight); setUserRights(userRightsIds); // Speichert die Rechte in den Zustand - console.log("Benutzerrechte:", rightsArray); - console.log("Benutzerrechte IDs:", userRightsIds); - console.log("Benutzerrechte in if :", userRightsIds.includes(56)); + //console.log("Benutzerrechte:", rightsArray); + //console.log("Benutzerrechte IDs:", userRightsIds); + //console.log("Benutzerrechte in if :", userRightsIds.includes(56)); setHasRights(userRightsIds.includes(56)); } catch (error) { console.error("Fehler beim Abrufen der Benutzerrechte", error); } }; useEffect(() => { - console.log("Aktualisierter Status von hasRights: ", hasRights); + //console.log("Aktualisierter Status von hasRights: ", hasRights); }, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert. // Überprüfen der Benutzerrechte beim Initialisieren der Komponente @@ -1089,13 +1089,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren }); }; - console.log("trigger in MapComponent.js:", poiReadTrigger); + //console.log("trigger in MapComponent.js:", poiReadTrigger); }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert //------------------------------------------ function editPoi(marker) { // Zugriff auf die Markerdaten const markerId = marker.options.id; - console.log("Bearbeiten des POI mit ID:", markerId); + //console.log("Bearbeiten des POI mit ID:", markerId); // Hier könnte ein Modal mit Formular geöffnet werden // Beispiel: openEditModal(markerId); @@ -1136,7 +1136,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const addItemsToMapContextMenu = () => { if (!menuItemAdded) { - console.log("contextMenuItems hasRights:", hasRights); + //console.log("contextMenuItems hasRights:", hasRights); map.contextmenu.addItem({ text: "POI hinzufügen", @@ -1170,7 +1170,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const response = await fetch("/api/poi-icons"); const data = await response.json(); setPoiData(data); - console.log("poiData icons:", data); + //console.log("poiData icons:", data); }; fetchPoiData(); @@ -1185,7 +1185,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const { latitude, longitude } = parsePoint(location.position); const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt"; const deviceName = await fetchDeviceNameById(location.idLD); - console.log("location.icon:", location); + //console.log("location.icon:", location); // Check if user has the right to drag the marker const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes @@ -1251,7 +1251,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { onLocationUpdate(markerId, newLat, newLng); }); } else { - console.log("Drag operation not allowed"); + console.error("Drag operation not allowed"); } }); //poiLayer ein - oder ausschalten @@ -2037,49 +2037,40 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { ]); //LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265) - const [linePositions, setLinePositions] = useState( - lineCoordinates || [ - [52.505, 8], - [52, 8.5], - ] - ); - //------------------------------------------------------------------------------------- - // GisLines API-Endpoint aufrufen - //----------------------------------------------------- + const [linePositions, setLinePositions] = useState([]); + useEffect(() => { const endpoint = "/api/readGisLines"; - // Fetch data from the API fetch(endpoint) .then((response) => { if (!response.ok) { - throw new Error("Network response was not ok"); + throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then((data) => { console.log("readGisLines API Response:", data); - // Check if data is an array and handle it accordingly - if (Array.isArray(data)) { - // Map over each item to extract the points array - const newLinePositions = data.flatMap((item) => { - // Check if item.points is available and return the transformed points - if (item.points) { - return item.points.map((point) => [point.x, point.y]); - } - return []; // Return an empty array if no points available - }); - console.log("Transformed Line Positions:", newLinePositions); - - // Update state or pass to a function that uses the line positions - setLinePositions(newLinePositions); + if (!Array.isArray(data)) { + throw new Error("Data is not an array"); } + + const newLinePositions = data.map((item) => { + if (item.points && Array.isArray(item.points)) { + return item.points.map((point) => [point.x, point.y]); + } else { + throw new Error("Points missing or not an array"); + } + }); + + console.log("Transformed Line Positions:", newLinePositions); + setLinePositions(newLinePositions); }) .catch((error) => { - console.error("readGisLines Error fetching data:", error); + console.error("Error fetching data:", error.message); }); - }, []); // Empty dependency array means this runs once on mount + }, []); //---------------------------------------------------------