POIs visible with checkbox

2024-05-30 09:35:16 +02:00
parent ec302cfee2
commit 3218000bea
8 changed files with 273 additions and 22 deletions
--- 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
--- 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() {
              <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>
--- 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
--- 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`;
--- 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);
--- a/pages/api/rights.js
+++ 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: [] });
+    }
+}
--- a/store/atoms/poiLayerVisible.js
+++ 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,
+});
--- a/store/atoms/urlParameterState.js
+++ 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",
+});