diff --git a/Start-Dev.ps1 b/Start-Dev.ps1 index f098b4545..5e17fcf15 100644 --- a/Start-Dev.ps1 +++ b/Start-Dev.ps1 @@ -1,5 +1,5 @@ # Navigiere zum Verzeichnis deines Projekts cd 'C:\inetpub\wwwroot\talas5\nodeMap' -# Führe den npm Befehl aus -npm run dev +# F�hre den npm Befehl aus +npm start diff --git a/components/DataSheet.js b/components/DataSheet.js index f12c0f086..0c41ffa51 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -6,8 +6,11 @@ import { gisSystemStaticState } from "../store/atoms/gisSystemState"; import { mapLayersState } from "../store/atoms/mapLayersState"; import { selectedAreaState } from "../store/atoms/selectedAreaState"; import { zoomTriggerState } from "../store/atoms/zoomTriggerState"; +import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible"; function DataSheet() { + const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState); + const setSelectedArea = useSetRecoilState(selectedAreaState); const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState); @@ -142,6 +145,18 @@ function DataSheet() {
))} + { + const checked = e.target.checked; + setPoiVisible(checked); + console.log( + `POIs sind jetzt ${checked ? "sichtbar" : "nicht sichtbar"}.` + ); + }} + /> + diff --git a/components/MapComponent.js b/components/MapComponent.js index fc1c10ad4..da963d1e0 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -1,5 +1,11 @@ // components/MapComponent.js -import React, { useEffect, useRef, useState, useMemo, use } from "react"; +import React, { + useEffect, + useRef, + useState, + useMemo, + useCallback, +} from "react"; //import ReactDOM from "react-dom/client"; // Import from 'react-dom/client' import L, { marker } from "leaflet"; import "leaflet/dist/leaflet.css"; @@ -25,6 +31,9 @@ import { selectedPoiState } from "../store/atoms/poiState.js"; import { currentPoiState } from "../store/atoms/currentPoiState"; import { ToastContainer, toast } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; +import { mapIdState, userIdState } from "../store/atoms/urlParameterState"; +import { set } from "lodash"; +import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible"; //import { createRoot } from "react-dom/client"; @@ -37,6 +46,13 @@ const plusRoundIcon = L.icon({ }); const MapComponent = ({ locations, onLocationUpdate }) => { + const poiLayerVisible = useRecoilValue(poiLayerVisibleState); + + const [contextMenuItems, setContextMenuItems] = useState([]); + const [isRightsLoaded, setIsRightsLoaded] = useState(false); + const [hasRights, setHasRights] = useState(false); + const [mapId, setMapId] = useRecoilState(mapIdState); + const [userId, setUserId] = useRecoilState(userIdState); const [showAddStationPopup, setShowAddStationPopup] = useState(false); const [userRights, setUserRights] = useState(null); const setSelectedPoi = useSetRecoilState(selectedPoiState); @@ -51,6 +67,17 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Open the modal or any other logic }; + useEffect(() => { + const params = new URL(window.location.href).searchParams; + setMapId(params.get("m")); + setUserId(params.get("u")); + }, [setMapId, setUserId]); + useEffect(() => { + fetchUserRights().then(() => { + setIsRightsLoaded(true); + }); + }, []); // Lade die Berechtigungen beim Initialisieren der Komponente + const handleEditPoi = (marker) => { // Prüfung, ob der Benutzer die notwendigen Rechte hat if (!userRights || !userRights.includes(56)) { @@ -132,6 +159,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const handleAddStation = (stationData) => { // Station-Daten speichern oder API-Aufruf durchführen + console.log("Neue Station:", userRights.includes(56)); + console.log("Neue Station:", stationData); setShowAddStationPopup(false); closePopup(); // Schließt das Popup nach dem Hinzufügen @@ -278,15 +307,57 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }; // Kontextmenü Callback für "POI hinzufügen" - const addStationCallback = (event) => { - setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden - setShowPopup(true); // Popup öffnen - }; + /* const addStationCallback = useCallback( + (event, hasRights) => { + console.log("Kontextmenü-Callback für 'POI hinzufügen' aufgerufen"); + console.log(event); + console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights); + + if (hasRights) { + setPopupCoordinates(event.latlng); + setShowPopup(true); + } else { + toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.log("Benutzer hat keine Berechtigung zum Hinzufügen."); + } + }, + [hasRights, isRightsLoaded] + ); // Keine Abhängigkeiten, da `hasRights` als Parameter übergeben wird */ + const addStationCallback = useCallback( + (event) => { + console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights); + if (hasRights) { + setPopupCoordinates(event.latlng); + setShowPopup(true); + } else { + toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.log("Benutzer hat keine Berechtigung zum Hinzufügen."); + } + }, + [hasRights] + ); // Abhängigkeit zu hasRights hinzufügen + //-----Kontextmenu----ende------------ //-------------------------------------------------------------------------------- // Verwende useMemo, um die Kontextmenü-Items nur zu initialisieren, wenn notwendig - const contextMenuItems = useMemo( + /* const contextMenuItems = useMemo( () => [ { text: "Station öffnen (Tab)", @@ -310,7 +381,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { text: "POI hinzufügen", icon: "img/add_station.png", className: "background-red", - callback: addStationCallback, + callback: (event) => addStationCallback(event, hasRights), }, { @@ -327,8 +398,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => { callback: centerHere, }, ], - [] - ); + [hasRights] + ); */ + /* useEffect(() => { + if (hasRights) { + setContextMenuItems([ + { + text: "POI hinzufügen test", + icon: "img/add_station.png", + className: "background-red", + callback: (event) => addStationCallback(event), + }, + // Weitere Menüpunkte... + ]); + } + }, [isRightsLoaded, hasRights]); + */ //---------------------------------------------------------------------------------- //------------------------------------------ */ const layerNames = { @@ -622,14 +707,27 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //----------------------------------------------------------- // Funktion um die Benutzerrechte zu überprüfen // serverIP 10.10.0.13 idMap=10 idUser=485 - const serverURL = "http://10.10.0.13"; - const c = 10; // Beispielwert für idMap - const user = 486; // Beispielwert für idUser + //const serverURL = "http://10.10.0.13"; + const url = new URL(window.location.href); + const hostname = url.hostname; // Gibt den Hostnamen (IP oder Domain) zurück + const port = url.port; // Gibt den Port zurück, leer wenn Standardport verwendet wird + const protocol = url.protocol; // "http:" oder "https:" + //const serverURL = `${protocol}//${hostname}`; + const serverURL = "http://10.10.0.13"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) + //const serverURL = "http://localhost:3000"; + + const params = new URL(window.location.href).searchParams; + //const serverURL = `${protocol}//${hostname}${port ? `:${port}` : ""}`; + + const c = params.get("m"); // Beispielwert für idMap + const user = params.get("u"); // Beispielwert für idUser + //console.log("serverURL:", serverURL); const fetchUserRights = async () => { try { const response = await fetch( `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}` + //`${serverURL}/api/rights?idMap=${c}&idUser=${user}` ); const data = await response.json(); const rightsArray = data.Rights; // Nehmen an, dass 'Rights' das Array von Rechten ist @@ -639,10 +737,16 @@ const MapComponent = ({ locations, onLocationUpdate }) => { 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); } }; + useEffect(() => { + 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 useEffect(() => { @@ -828,7 +932,41 @@ const MapComponent = ({ locations, onLocationUpdate }) => { maxZoom: 15, // Maximale Zoomstufe zoomControl: false, contextmenu: true, - contextmenuItems: contextMenuItems, + contextmenuItems: [ + { + text: "Station öffnen (Tab)", + icon: "/img/screen_new.png", + callback: (e) => { + const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat + openInNewTab(e, clickedMarker); + }, + }, + { + text: "Station öffnen", + icon: "/img/screen_same.png", + //callback: (e) => openInSameWindow(e, marker), + callback: (e) => { + const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat + openInSameWindow(e, clickedMarker); + }, + }, + "-", // Divider + + { + text: "Koordinaten anzeigen", + icon: "img/not_listed_location.png", + callback: showCoordinates, + }, + "-", // Divider + { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn }, + { text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut }, + { + text: "Hier zentrieren", + icon: "img/center_focus.png", + callback: centerHere, + }, + "-", // Divider + ], }); L.tileLayer(online ? onlineTileLayer : offlineTileLayer, { @@ -860,7 +998,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }); } //console.log("trigger in MapComponent.js:", poiReadTrigger); - }, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig + }, [mapRef, map, poiReadTrigger, contextMenuItems]); // Prüfe die Abhängigkeiten sorgfältig // poiTyp Daten hinzufügen //------------------------------------------ @@ -972,7 +1110,45 @@ const MapComponent = ({ locations, onLocationUpdate }) => { return "Unbekannt"; } }; + //-------------------------------------------------- + /* useEffect(() => { + fetchUserRights().then(() => { + setIsRightsLoaded(true); // Stellen Sie sicher, dass Sie diesen Status verwenden, um die Initialisierung zu kontrollieren. + }); +}, []); */ + /* useEffect(() => { + if (map && !map.contextmenu) { + map.contextmenu = new L.Control.ContextMenu({ + contextmenu: true, + contextmenuWidth: 140, + contextmenuItems: [], // Starten mit einem leeren Array oder initialen Einträgen + }).addTo(map); + } + }, [map]); */ + const addItemsToMapContextMenu = () => { + console.log("contextMenuItems hasRights:", hasRights); + + map.contextmenu.addItem({ + text: "POI hinzufügen", + icon: "img/add_station.png", + className: "background-red", + callback: (event) => addStationCallback(event, hasRights), + }); + }; + //-------------------------------------------------- + useEffect(() => { + if (map && poiLayerRef.current && isPoiTypLoaded) { + addItemsToMapContextMenu(); + } + }, [ + map, + locations, + onLocationUpdate, + poiReadTrigger, + isPoiTypLoaded, + userRights, + ]); //------------------------------------------ // poiLayerRef(poiDbLayer) POI hinzufügen @@ -1047,8 +1223,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => { console.log("Drag operation not allowed"); } }); - - marker.addTo(poiLayerRef.current); + //poiLayer ein - oder ausschalten + if (poiLayerVisible) { + marker.addTo(poiLayerRef.current); + } }); } }, [ @@ -1058,8 +1236,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { poiReadTrigger, isPoiTypLoaded, userRights, + poiLayerVisible, ]); + //--------------------------------------------- + //------------------------------------------------------------------------------- useEffect(() => { if (gisSystemStaticLoaded && map) { createAndSetMarkers(1, setTalasMarkers); // TALAS-System diff --git a/config/config.js b/config/config.js index 30f5e05dc..113032163 100644 --- a/config/config.js +++ b/config/config.js @@ -22,6 +22,9 @@ if (typeof window !== "undefined") { c = url.searchParams.get("m") || "10"; // Ein Parameter aus der URL, Standardwert ist '10' 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' + console.log(`Parameter 'idMap' : ${c}`); + console.log(`Parameter 'idUser': ${user}`); + // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen //http://localhost:3000/?m=10&u=485 mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484 @@ -30,8 +33,9 @@ if (typeof window !== "undefined") { mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; - /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`; + //http://10.10.0.13/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=12&idUser=484 + /* 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`; diff --git a/pages/api/readPoiTyp.js b/pages/api/readPoiTyp.js index 8f69a9f53..34803f0cd 100644 --- a/pages/api/readPoiTyp.js +++ b/pages/api/readPoiTyp.js @@ -1,8 +1,8 @@ // pages/api/readPoiTyp.js -import mysql from 'mysql'; +import mysql from "mysql"; const pool = mysql.createPool({ - connectionLimit: 10, + //connectionLimit: 10, host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, @@ -13,7 +13,7 @@ const pool = mysql.createPool({ export default function handler(req, res) { if (req.method === "GET") { const query = "SELECT * FROM poityp"; - + pool.query(query, (error, results) => { if (error) { console.error("Fehler beim Abfragen der Datenbank:", error); diff --git a/pages/api/rights.js b/pages/api/rights.js new file mode 100644 index 000000000..507228147 --- /dev/null +++ b/pages/api/rights.js @@ -0,0 +1,29 @@ +// pages/api/rights.js + +export default function handler(req, res) { + const { idMap, idUser } = req.query; + + // Beispielhafte Rechte, die je nach idMap und idUser variieren können + const rights = { + '10': [ + { IdRight: 1, Name: "Zugriff auf Dashboard" }, + { IdRight: 56, Name: "Erweiterte Berechtigungen" } + ], + '2': [ + { IdRight: 2, Name: "Zugriff auf Einstellungen" } + ], + '1': [ + { IdRight: 10, Name: "Admin-Zugriff" }, + { IdRight: 11, Name: "Zugriff auf alle Daten" } + ] + }; + + // Prüfung, ob eine gültige idMap und idUser vorhanden sind + if (rights[idMap] && idUser === '484') { + // Rückgabe der spezifischen Rechte basierend auf der idMap und idUser + res.status(200).json({ Rights: rights[idMap] }); + } else { + // Rückgabe leerer Rechte für ungültige idMap oder andere Benutzer + res.status(200).json({ Rights: [] }); + } +} diff --git a/store/atoms/poiLayerVisible.js b/store/atoms/poiLayerVisible.js new file mode 100644 index 000000000..e682d18a0 --- /dev/null +++ b/store/atoms/poiLayerVisible.js @@ -0,0 +1,9 @@ +// /store/atoms/poiLayerVisible.js +// Recoil atom for the visibility of the POI layer +// +import { atom } from "recoil"; + +export const poiLayerVisibleState = atom({ + key: "poiLayerVisibleState", + default: true, +}); diff --git a/store/atoms/urlParameterState.js b/store/atoms/urlParameterState.js new file mode 100644 index 000000000..a5e679da8 --- /dev/null +++ b/store/atoms/urlParameterState.js @@ -0,0 +1,13 @@ +import { atom } from "recoil"; + +// Atom für die Speicherung der mapId aus der URL +export const mapIdState = atom({ + key: "mapIdState", // Eindeutiger Schlüssel (innerhalb des gesamten Projekts) + default: "10", // Standardwert +}); + +// Atom für die Speicherung der userId aus der URL +export const userIdState = atom({ + key: "userIdState", + default: "484", +});