POIs visible with checkbox

Start-Dev.ps1

@@ -1,5 +1,5 @@
 # Navigiere zum Verzeichnis deines Projekts
 cd 'C:\inetpub\wwwroot\talas5\nodeMap'
 
-# F<>hre den npm Befehl aus
+# F<>hre den npm Befehl aus
-npm run dev
+npm start

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() {
               <br />
             </React.Fragment>
           ))}
+          <input
+            type="checkbox"
+            checked={poiVisible}
+            onChange={(e) => {
+              const checked = e.target.checked;
+              setPoiVisible(checked);
+              console.log(
+                `POIs sind jetzt ${checked ? "sichtbar" : "nicht sichtbar"}.`
+              );
+            }}
+          />
+          <label className="text-sm ml-2">POIs</label>
         </div>
       </div>
     </div>

components/MapComponent.js

@@ -1,7 +1,14 @@
 // components/MapComponent.js
 
-import React, { useEffect, useRef, useState, useMemo, use } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+} from "react";
 import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
+
 import L, { marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
@@ -26,6 +33,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";
 
@@ -42,6 +52,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     [52.505, 8],
     [52, 8.5],
   ];
+
+  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);
@@ -56,6 +75,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     // 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)) {
@@ -138,6 +168,8 @@ 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:", stationData);
     setShowAddStationPopup(false);
     closePopup(); // Schließt das Popup nach dem Hinzufügen
@@ -284,15 +316,57 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   };
 
   // Kontextmenü Callback für "POI hinzufügen"
-  const addStationCallback = (event) => {
+  /*   const addStationCallback = useCallback(
-    setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
+    (event, hasRights) => {
-    setShowPopup(true); // Popup öffnen
+      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)",
@@ -316,7 +390,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         text: "POI hinzufügen",
         icon: "img/add_station.png",
         className: "background-red",
-        callback: addStationCallback,
+        callback: (event) => addStationCallback(event, hasRights),
       },
 
       {
@@ -333,8 +407,22 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         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 = {
@@ -628,14 +716,27 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //-----------------------------------------------------------
   // Funktion um die Benutzerrechte zu überprüfen
   // serverIP 10.10.0.13 idMap=10 idUser=485
-  const serverURL = "http://10.10.0.13";
+  //const serverURL = "http://10.10.0.13";
-  const c = 10; // Beispielwert für idMap
-  const user = 486; // Beispielwert für idUser
 
+  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
@@ -645,10 +746,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       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(() => {
@@ -834,7 +941,41 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         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, {
@@ -866,7 +1007,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       });
     }
     //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
   //------------------------------------------
@@ -978,7 +1119,45 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       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
@@ -1053,8 +1232,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             console.log("Drag operation not allowed");
           }
         });
-
+        //poiLayer ein - oder ausschalten
-        marker.addTo(poiLayerRef.current);
+        if (poiLayerVisible) {
+          marker.addTo(poiLayerRef.current);
+        }
       });
     }
   }, [
@@ -1064,8 +1245,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     poiReadTrigger,
     isPoiTypLoaded,
     userRights,
+    poiLayerVisible,
   ]);
+  //---------------------------------------------
 
+  //-------------------------------------------------------------------------------
   useEffect(() => {
     if (gisSystemStaticLoaded && map) {
       createAndSetMarkers(1, setTalasMarkers); // TALAS-System

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`;

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);

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: [] });
+    }
+}

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,
+});

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",
+});