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

edit: show two lines from readGisLines

Browse Source
This commit is contained in:
ISA
2024-06-07 13:06:03 +02:00
parent 0f3cfee98c
commit 4b7a74647a
1 changed files with 38 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/MapComponent.js
View File

@@ -99,15 +99,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
} }
console.log("Selected Marker ID (idPoi):", marker.options.idPoi); //console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
console.log("Selected Marker Description:", marker.options.description); //console.log("Selected Marker Description:", marker.options.description);
setCurrentPoiData({ setCurrentPoiData({
idPoi: marker.options.id, idPoi: marker.options.id,
name: marker.options.name, name: marker.options.name,
description: marker.options.description, description: marker.options.description,
}); });
console.log("POI-Daten1:", currentPoiData); //console.log("POI-Daten1:", currentPoiData);
fetchPoiData(marker.options.id); fetchPoiData(marker.options.id);
@@ -126,7 +126,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
name: data.name, name: data.name,
description: data.description, description: data.description,
}); });
console.log("POI-Daten2:", currentPoiData); //console.log("POI-Daten2:", currentPoiData);
setShowPoiUpdateModal(true); setShowPoiUpdateModal(true);
}; };
@@ -166,9 +166,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const handleAddStation = (stationData) => { const handleAddStation = (stationData) => {
// Station-Daten speichern oder API-Aufruf durchführen // 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); setShowAddStationPopup(false);
closePopup(); // Schließt das Popup nach dem Hinzufügen 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 // Funktion zum Öffnen in einem neuen Tab
function openInNewTab(e, marker) { function openInNewTab(e, marker) {
if (marker && marker.options && marker.options.link) { 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"); window.open(baseUrl + marker.options.link, "_blank");
} else { } else {
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft"); 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 // Funktion zum Öffnen im gleichen Fenster
function openInSameWindow(e, marker) { function openInSameWindow(e, marker) {
if (marker && marker.options && marker.options.link) { 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; window.location.href = baseUrl + marker.options.link;
} else { } else {
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft"); 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 */ ); // Keine Abhängigkeiten, da `hasRights` als Parameter übergeben wird */
const addStationCallback = useCallback( const addStationCallback = useCallback(
(event) => { (event) => {
console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights); //console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
if (hasRights) { if (hasRights) {
setPopupCoordinates(event.latlng); setPopupCoordinates(event.latlng);
setShowPopup(true); setShowPopup(true);
@@ -354,7 +354,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
draggable: true, draggable: true,
progress: undefined, progress: undefined,
}); });
console.log("Benutzer hat keine Berechtigung zum Hinzufügen."); console.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
} }
}, },
[hasRights] [hasRights]
@@ -743,16 +743,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const userRightsIds = rightsArray.map((right) => right.IdRight); const userRightsIds = rightsArray.map((right) => right.IdRight);
setUserRights(userRightsIds); // Speichert die Rechte in den Zustand setUserRights(userRightsIds); // Speichert die Rechte in den Zustand
console.log("Benutzerrechte:", rightsArray); //console.log("Benutzerrechte:", rightsArray);
console.log("Benutzerrechte IDs:", userRightsIds); //console.log("Benutzerrechte IDs:", userRightsIds);
console.log("Benutzerrechte in if :", userRightsIds.includes(56)); //console.log("Benutzerrechte in if :", userRightsIds.includes(56));
setHasRights(userRightsIds.includes(56)); setHasRights(userRightsIds.includes(56));
} catch (error) { } catch (error) {
console.error("Fehler beim Abrufen der Benutzerrechte", error); console.error("Fehler beim Abrufen der Benutzerrechte", error);
} }
}; };
useEffect(() => { 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. }, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert.
// Überprüfen der Benutzerrechte beim Initialisieren der Komponente // Ü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 // 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 }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
//------------------------------------------ //------------------------------------------
function editPoi(marker) { function editPoi(marker) {
// Zugriff auf die Markerdaten // Zugriff auf die Markerdaten
const markerId = marker.options.id; 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 // Hier könnte ein Modal mit Formular geöffnet werden
// Beispiel: openEditModal(markerId); // Beispiel: openEditModal(markerId);
@@ -1136,7 +1136,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const addItemsToMapContextMenu = () => { const addItemsToMapContextMenu = () => {
if (!menuItemAdded) { if (!menuItemAdded) {
console.log("contextMenuItems hasRights:", hasRights); //console.log("contextMenuItems hasRights:", hasRights);
map.contextmenu.addItem({ map.contextmenu.addItem({
text: "POI hinzufügen", text: "POI hinzufügen",
@@ -1170,7 +1170,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const response = await fetch("/api/poi-icons"); const response = await fetch("/api/poi-icons");
const data = await response.json(); const data = await response.json();
setPoiData(data); setPoiData(data);
console.log("poiData icons:", data); //console.log("poiData icons:", data);
}; };
fetchPoiData(); fetchPoiData();
@@ -1185,7 +1185,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const { latitude, longitude } = parsePoint(location.position); const { latitude, longitude } = parsePoint(location.position);
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt"; const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
const deviceName = await fetchDeviceNameById(location.idLD); 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 // 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 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); onLocationUpdate(markerId, newLat, newLng);
}); });
} else { } else {
console.log("Drag operation not allowed"); console.error("Drag operation not allowed");
} }
}); });
//poiLayer ein - oder ausschalten //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) //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( const [linePositions, setLinePositions] = useState([]);
lineCoordinates || [
[52.505, 8],
[52, 8.5],
]
);
//-------------------------------------------------------------------------------------
// GisLines API-Endpoint aufrufen
//-----------------------------------------------------
useEffect(() => { useEffect(() => {
const endpoint = "/api/readGisLines"; const endpoint = "/api/readGisLines";
// Fetch data from the API
fetch(endpoint) fetch(endpoint)
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
throw new Error("Network response was not ok"); throw new Error(`HTTP error! status: ${response.status}`);
} }
return response.json(); return response.json();
}) })
.then((data) => { .then((data) => {
console.log("readGisLines API Response:", data); console.log("readGisLines API Response:", data);
// Check if data is an array and handle it accordingly if (!Array.isArray(data)) {
if (Array.isArray(data)) { throw new Error("Data is not an array");
// 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);
} }
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) => { .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 }, []);
//--------------------------------------------------------- //---------------------------------------------------------