From a5e86f7fa59552fe619fd39f630bf8f99da46b23 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 15 Jul 2024 16:08:57 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20POIs=20k=C3=B6nnen=20per=20Drag=20und=20?= =?UTF-8?q?Drop=20verschoben=20werden=20auf=20die=20Map?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/MapComponent.js | 36 ++++++++++----- config/config.js | 43 +++++++++--------- services/apiService.js | 63 +++++++++++++++----------- utils/markerUtils.js | 91 ++++++++++++++++++++++++-------------- 4 files changed, 142 insertions(+), 91 deletions(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 5a9097623..e74abc33a 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -147,8 +147,9 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useEffect(() => { fetchUserRights().then(() => { setIsRightsLoaded(true); + console.log("Benutzerrechte in useEffect in MapComponent:", userRights); }); - }, []); // Lade die Berechtigungen beim Initialisieren der Komponente + }, [urls.SERVER_URL]); // Lade die Berechtigungen beim Initialisieren der Komponente const [showVersionInfoModal, setShowVersionInfoModal] = useState(false); const zoomTrigger = useRecoilValue(zoomTriggerState); @@ -557,14 +558,21 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { fetchUserRights(); }, []); */ useEffect(() => { - if (serverURL) { - fetchUserRights(serverURL).then((rights) => { - setUserRights(rights); - setIsRightsLoaded(true); - setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat - }); - } - }, [serverURL]); // Läuft, wenn serverURL sich ändert + console.log( + "Server URL ist verfügbar:", + config.url.origin, + "idMap:", + config.idMap, + "idUser:", + config.idUser + ); + fetchUserRights().then((rights) => { + console.log("Benutzerrechte in server URL:", rights); + setUserRights(rights); + setIsRightsLoaded(true); + setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat + }); + }, [urls.SERVER_URL]); // Läuft, wenn serverURL sich ändert // Anzeigen von Modals basierend auf Benutzerrechten useEffect(() => { @@ -1047,7 +1055,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { { text: "POI Bearbeiten", icon: "/img/poi-edit.png", - callback: () => handleEditPoi(marker), + callback: () => + handleEditPoi( + marker, + userRights, + setCurrentPoiData, + setShowPoiUpdateModal, + fetchPoiData, + toast + ), }, ], }); diff --git a/config/config.js b/config/config.js index f5a9978ea..007ada29e 100644 --- a/config/config.js +++ b/config/config.js @@ -5,9 +5,9 @@ const mapVersion = "0.5.3"; // Die Version der verwendeten Karte const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird const fullSideMenu = false; // Einstellung, ob ein vollständiges Seitenmenü verwendet wird const serverURL = "/api"; // Die Basis-URL des Servers, von dem Daten bezogen werden - +console.log("serverURL in config:", serverURL); // Initialisieren von Variablen, die später im Browserkontext gesetzt werden -let windowHeight, url_string, url, c, user; +let windowHeight, url_string, url, idMap, idUser; //Online Daten let mapGisStationsStaticDistrictUrl, mapGisStationsStatusDistrictUrl, @@ -22,28 +22,27 @@ if (typeof window !== "undefined") { windowHeight = window.innerHeight; // Die Höhe des Browserfensters url_string = window.location.href; // Die vollständige URL als String url = new URL(url_string); // Die URL als URL-Objekt, um Teile der URL einfacher zu handhaben - c = url.searchParams.get("m"); // Ein Parameter aus der URL, Standardwert ist '10' - user = url.searchParams.get("u"); // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card' + console.log("URL in config:", url); + console.log("URL origin in config:", url.origin); //http://localhost:3000 + idMap = url.searchParams.get("m"); // Ein Parameter aus der URL, Standardwert ist '10' + idUser = url.searchParams.get("u"); // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card' - console.log(`Parameter 'idMap' : ${c}`); - console.log(`Parameter 'idUser': ${user}`); - - console.log(`Parameter 'idMap' : ${c}`); - console.log(`Parameter 'idUser': ${user}`); + console.log(`Parameter 'idMap' : ${idMap}`); + console.log(`Parameter 'idUser': ${idUser}`); // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen //http://localhost:3000/?m=10&u=485 //-----------------Von WebService------------------------------------------------ - 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}`; + mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`; //idMap: 10, idUser: 484 + mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`; + mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${idMap}`; + mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; - //webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`; + //webserviceGisLinesStatusUrl = `http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`; webserviceGisLinesStatusUrl = `http://localhost:3000/api/linesColorApi`; - //webserviceGisLinesStatusUrl = `http://192.168.10.14/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${c}`; + //webserviceGisLinesStatusUrl = `http://192.168.10.14/talas5/ClientData/WebServiceMap.asmx/GisLinesStatus?idMap=${idMap}`; //http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484 @@ -53,11 +52,11 @@ if (typeof window !== "undefined") { mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */ - /* mapGisStationsStaticDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; - mapGisStationsStatusDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`; - mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsMeasurements?idMap=${c}`; - mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/gisStationsMeasurementsSQL?idMap=${c}`; - mapGisSystemStaticUrl = `${serverURL}/api/talas5/webserviceMap/GisSystemStatic?idMap=${c}&idUser=${user}`; + /* mapGisStationsStaticDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStaticDistrict?idMap=${idMap}&idUser=${idUser}`; + mapGisStationsStatusDistrictUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`; + mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/GisStationsMeasurements?idMap=${idMap}`; + mapGisStationsMeasurementsUrl = `${serverURL}/api/talas5/webserviceMap/gisStationsMeasurementsSQL?idMap=${idMap}`; + mapGisSystemStaticUrl = `${serverURL}/api/talas5/webserviceMap/GisSystemStatic?idMap=${idMap}&idUser=${idUser}`; mapDataIconUrl = `${serverURL}/api/talas5/webserviceMap/GetIconsStatic`; */ } @@ -70,8 +69,8 @@ export { windowHeight, url_string, url, - c, - user, + idMap, + idUser, mapGisStationsStaticDistrictUrl, mapGisStationsStatusDistrictUrl, mapGisStationsMeasurementsUrl, diff --git a/services/apiService.js b/services/apiService.js index 173910df8..4cd8fed0e 100644 --- a/services/apiService.js +++ b/services/apiService.js @@ -1,4 +1,7 @@ // services/apiService.js +import * as config from "../config/config"; +import { setPriorityConfig } from "../utils/utils"; +import * as urls from "../config/urls"; export const fetchGisStatusStations = async (idMap, idUser) => { try { @@ -81,31 +84,6 @@ export const checkInternet = () => { .catch(() => setOnline(false)); }; -// ---------------------------------------------- -export const fetchUserRights = async (serverURL) => { - try { - const response = await fetch( - `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}` - //`${serverURL}/api/talas5/webserviceMap/GisSystemStatic?idMap=${c}&idUser=${user}` //Berechtigung zum hinzufügen von POIs in der Karte - //`${serverURL}/api/rights?idMap=${c}&idUser=${user}` - ); - const data = await response.json(); - //console.log("Benutzerrechte:", data); - const rightsArray = data.Rights; // Nehmen an, dass 'Rights' das Array von Rechten ist - - // Speichert die IDs der Rechte in einem Array - 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)); - setHasRights(userRightsIds.includes(56)); - } catch (error) { - console.error("Fehler beim Abrufen der Benutzerrechte", error); - } -}; - // ---------------------------------------------- export const fetchDeviceNameById = async (idLD) => { try { @@ -126,3 +104,38 @@ export const fetchDeviceNameById = async (idLD) => { return "Unbekannt"; } }; + +// ---------------------------------------------- +// services/apiService.js +export const fetchUserRights = async () => { + try { + const response = await fetch( + `${urls.SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${config.idMap}&idUser=${config.idUser}` + ); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + console.log("Benutzerrechte in fetchRights:", data); + + // Überprüfen der Struktur der Antwort + if (!data || !data.Rights || !Array.isArray(data.Rights)) { + throw new Error("Invalid response structure"); + } + + const rightsArray = data.Rights; // Nehmen an, dass 'Rights' das Array von Rechten ist + console.log("rightsArray in apiService:", rightsArray); + + // Speichert die IDs der Rechte in einem Array + const userRightsIds = rightsArray.map((right) => right.IdRight); + + // Wenn alles gut geht, logge die erfolgreichen Abschluss + console.log("Benutzerrechte erfolgreich abgerufen:", userRightsIds); + return userRightsIds; + } catch (error) { + console.error("Fehler beim Abrufen der Benutzerrechte", error); + return []; + } +}; diff --git a/utils/markerUtils.js b/utils/markerUtils.js index ddf47e3cb..da7417e3b 100644 --- a/utils/markerUtils.js +++ b/utils/markerUtils.js @@ -1,6 +1,8 @@ // /utils/markerUtils.js import circleIcon from "../components/CircleIcon"; import { saveLineData, redrawPolyline } from "./mapUtils"; +import L from "leaflet"; +import { toast } from "react-toastify"; export const insertNewMarker = (closestPoints, newPoint, lineData, map) => { const newMarker = L.marker(newPoint, { @@ -31,40 +33,6 @@ export const insertNewMarker = (closestPoints, newPoint, lineData, map) => { }); }; -export const handleEditPoi = ( - marker, - userRights, - setCurrentPoiData, - setShowPoiUpdateModal, - fetchPoiData, - toast -) => { - // Prüfung, ob der Benutzer die notwendigen Rechte hat - if (!userRights || !userRights.includes(56)) { - toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", { - position: "top-center", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - console.log("Benutzer hat keine Berechtigung zum Bearbeiten."); - return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt - } - - setCurrentPoiData({ - idPoi: marker.options.id, - name: marker.options.name, - description: marker.options.description, - }); - - fetchPoiData(marker.options.id); - - setShowPoiUpdateModal(true); -}; - export const removeMarker = (marker, lineData, currentZoom, currentCenter) => { // Save zoom and center to localStorage //localStorage.setItem("mapZoom", currentZoom); @@ -92,3 +60,58 @@ export const removeMarker = (marker, lineData, currentZoom, currentCenter) => { window.location.reload(); } }; + +export const handleEditPoi = ( + marker, + userRights, + setCurrentPoiData, + setShowPoiUpdateModal, + fetchPoiData, + toast // Hier toast als Parameter erhalten +) => { + console.log("Selected Marker ID (idPoi):", marker.options.id); + console.log("Selected Marker Description:", marker.options.description); + console.log("User Rights:", userRights); + + // Sicherstellen, dass userRights ein Array ist + if (!Array.isArray(userRights)) { + console.error("User Rights is not an array:", userRights); + toast.error("Benutzerrechte sind ungültig.", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + return; + } + + console.log("User Rights includes 56:", userRights.includes(56)); + + // Prüfung, ob der Benutzer die notwendigen Rechte hat + if (!userRights.includes(56)) { + toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.log("Benutzer hat keine Berechtigung zum Bearbeiten."); + return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt + } + + setCurrentPoiData({ + idPoi: marker.options.id, + name: marker.options.name, + description: marker.options.description, + }); + + fetchPoiData(marker.options.id); + + setShowPoiUpdateModal(true); +};