Merge branch 'temp-branch' into Dev

.env.local

@@ -1,6 +1,7 @@
 
 DB_HOST=localhost
 #DB_HOST=192.168.10.58
+#DB_HOST=10.10.0.13
 DB_USER=root
 DB_PASSWORD="root#$"
 DB_NAME=talas_v5

10.10.0.13 config.txt

@@ -0,0 +1,34 @@
+Port 3000 Freigabe ?
+
+node -v v20.12.1
+----------------------
+Start-Dev.ps1
+	cd 'C:\inetpub\wwwroot\talas5\nodeMap'
+	npm run dev
+-------------
+	
+.env.local
+	DB_HOST=localhost
+	
+--------------
+in /config/config.js
+	10 und 484 entfernen
+	
+-------------------
+MapComponent.js
+	URL von onlineTileLayer und offlineTileLayer URL eingeben und Port 3000
+		"http://localhost:3000/mapTiles/{z}/{x}/{y}.png";
+		
+	baseurl
+	 const baseUrl = "http://localhost/talas5/devices/";
+	serverURL
+	  const serverURL = "http://localhost";
+	  
+------------------
+In C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx
+	"http://localhost:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+	
+--------------------
+In pages/api/[...path].js
+	  target: "http://localhost", 
+	  

MapTypC.aspx

@@ -0,0 +1,47 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/Standard.Master" AutoEventWireup="true" CodeBehind="MapTypC.aspx.cs" Inherits="TALAS_V5.MessagesMap.MapTypC" %>
+<%@ Register assembly="DevExpress.Web.v19.2, Version=19.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
+
+<asp:Content ID="NaviContent" ContentPlaceHolderID="NaviContent" runat="server">
+</asp:Content>
+
+<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
+
+<style>
+    .responsive-iframe-wrapper {
+        position: relative  !important;
+        width: 100%  !important;
+        height: 97.2vh  !important; /* Setzt die Höhe des Wrappers auf die Höhe des Viewports */
+        overflow: hidden  !important; /* Verhindert Scrollbalken innerhalb des Wrappers */
+		padding: 0 0 0 0  !important;
+		margin: 0 0 0 0  !important;
+    }
+    .responsive-iframe-wrapper iframe {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0  !important;
+        width: 100%  !important;
+        height: 100%  !important;
+        border: none  !important; /* Removes the border */
+    }
+</style>
+
+
+<div class="responsive-iframe-wrapper">
+    <iframe frameborder="0"></iframe>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var url = new URL(window.location.href);
+    var mValue = url.searchParams.get("m");
+    var uValue = url.searchParams.get("u");
+
+    // Setzen der src-Eigenschaft des iframe mit den abgerufenen Parametern
+    document.querySelector('.responsive-iframe-wrapper iframe').src = 
+       // "http://10.10.0.70:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+       //"http://10.10.0.13:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+       "http://localhost:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+});
+</script>
+
+</asp:Content>

Start-Dev.ps1

@@ -1,5 +1,6 @@
 # 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
+

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, {
-import React, { useEffect, useRef, useState, useMemo, use } from "react";
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+} from "react";
+//import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
 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";
 
@@ -38,12 +48,21 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
-  const linePositions = lineCoordinates || [
+  /*   const linePositions = lineCoordinates || [
     [52.505, 8],
     [52, 8.5],
     [51.5, 8],
     [52.505, 8],
-  ];
+  ]; */
+
+  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);
@@ -58,6 +77,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)) {
@@ -110,7 +140,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
   //const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
   //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-  const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
+  const onlineTileLayer = "http://localhost:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -127,7 +157,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const lineLayer = new L.LayerGroup();
 
   const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
-  const baseUrl = "http://10.10.0.13/talas5/devices/";
+  const baseUrl = "http://localhost/talas5/devices/";
   const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);
@@ -140,6 +170,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
@@ -286,15 +318,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)",
@@ -318,7 +392,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),
       },
 
       {
@@ -335,8 +409,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 = {
@@ -630,14 +718,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://localhost"; // 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
@@ -647,10 +748,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(() => {
@@ -836,7 +943,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, {
@@ -868,7 +1009,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
   //------------------------------------------
@@ -980,11 +1121,61 @@ 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
   //--------------------------------------------
+  const [poiData, setPoiData] = useState([]);
+
+  useEffect(() => {
+    const fetchPoiData = async () => {
+      const response = await fetch("/api/poi-icons");
+      const data = await response.json();
+      setPoiData(data);
+      console.log("poiData icons:", data);
+    };
+
+    fetchPoiData();
+  }, []);
 
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded) {
@@ -995,13 +1186,22 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         const { latitude, longitude } = parsePoint(location.position);
         const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
         const deviceName = await fetchDeviceNameById(location.idLD);
+        console.log("location.icon:", location);
 
         // 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
-
+        // Finde das passende Icon aus poiData
+        const matchingIcon = poiData.find(
+          (poi) => poi.idPoi === location.idPoi
+        );
+        const iconUrl = matchingIcon
+          ? `/img/icons/pois/${matchingIcon.path}`
+          : "/img/icons/pois/default-icon.png";
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
             iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
+            //iconUrl: `/img/icons/pois/poi-marker-icon-${location.icon}.png`, //die kommen nicht aus poi sonder aus poityp tabelle
+            iconUrl: iconUrl,
             iconSize: [25, 41],
             iconAnchor: [12, 41],
             popupAnchor: [1, -34],
@@ -1055,8 +1255,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);
+        }
       });
     }
   }, [
@@ -1066,8 +1268,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     poiReadTrigger,
     isPoiTypLoaded,
     userRights,
+    poiLayerVisible,
   ]);
+  //---------------------------------------------
 
+  //-------------------------------------------------------------------------------
   useEffect(() => {
     if (gisSystemStaticLoaded && map) {
       createAndSetMarkers(1, setTalasMarkers); // TALAS-System

config/config.js

@@ -19,8 +19,11 @@ 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") || "10"; // Ein Parameter aus der URL, Standardwert ist '10'
+  c = url.searchParams.get("m"); // 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'
+  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(`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
@@ -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/[...path].js

@@ -3,7 +3,8 @@ import { createProxyMiddleware } from "http-proxy-middleware";
 
 export default createProxyMiddleware({
   //target: "http://192.168.10.58:3001",
-  target: "http://10.10.0.13", // Ziel-URL des Proxys
+  //target: "http://10.10.0.13", // Ziel-URL des Proxys
+  target: "http://localhost", // Ziel-URL des Proxys
   //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
   changeOrigin: true,
   pathRewrite: {

pages/api/poi-icons.js

@@ -0,0 +1,36 @@
+// pages/api/poi-icons.js
+import mysql from "mysql";
+
+const dbConfig = {
+  //host: "10.10.0.13",
+  //host: "localhost",
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+const connection = mysql.createConnection(dbConfig);
+connection.connect((err) => {
+  if (err) {
+    console.error("Fehler beim Verbinden:", err.stack);
+    return;
+  }
+});
+export default function handler(req, res) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ error: "Nur GET Methode erlaubt" });
+  }
+
+  const query = `SELECT p.idPoi, i.path
+  FROM poi p
+  JOIN poiTyp pt ON p.idPoiTyp = pt.idPoiTyp
+  JOIN poiicons i ON pt.icon = i.idpoiicons;`;
+  connection.query(query, (error, results) => {
+    if (error) {
+      console.error("Fehler beim Abrufen der icons:", error);
+      return res.status(500).json({ error: "Fehler beim Abrufen der icons" });
+    }
+    res.json(results);
+  });
+}

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