Gerät in Popup anzeigen

.env.local

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

components/MapComponent.js

@@ -78,8 +78,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const zoomTrigger = useRecoilValue(zoomTriggerState);
   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 = "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
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -888,6 +888,23 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     // Beispiel: openEditModal(markerId);
   }
 
+  //------------------------------------------
+
+  const fetchDeviceNameById = async (idLD) => {
+    try {
+      const response = await fetch(`/api/locationDeviceNameById?idLD=${idLD}`);
+      const data = await response.json();
+      if (response.ok) {
+        return data.name;
+      } else {
+        throw new Error(data.error || "Gerät nicht gefunden");
+      }
+    } catch (error) {
+      console.error("Fehler beim Abrufen des Gerätenamens:", error);
+      return "Unbekannt";
+    }
+  };
+
   //------------------------------------------
   //          poiLayerRef(poiDbLayer)  POI   hinzufügen
   //--------------------------------------------
@@ -899,14 +916,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       poiLayerRef.current = new L.LayerGroup().addTo(map);
 
       // Fügen Sie die aktualisierten Marker hinzu
-      locations.forEach((location) => {
+      locations.forEach(async (location) => {
         const { latitude, longitude } = parsePoint(location.position);
         const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
         console.log("poiTypName in poiLayer:", poiTypName);
         //console.log("location.idPoiTyp poiLayer:", location.idPoiTyp);
         console.log("location.idPoiTyp poiLayer:", location);
         console.log("location.idPoiTyp:", location.idPoiTyp);
-
+        const deviceName = await fetchDeviceNameById(location.idLD);
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
             iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
@@ -923,7 +940,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             {
               text: "POI Bearbeiten", //git stash save "POI Bearbeiten"
 
-              icon: "/img/edit_icon.png",
+              icon: "/img/poi-edit.png",
               callback: () => handleEditPoi(marker),
             },
           ],
@@ -934,7 +951,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.bindPopup(`
         <div>
             <b  class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
-          ${poiTypName}<br>
+            ${deviceName}<br> <!-- Gerät:-->
+          ${poiTypName}<br> <!-- Typ:-->
         </div>
     `);
 
@@ -954,7 +972,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           //Informationen an handlePoiSelect  übergeben
           handlePoiSelect(poiData);
           console.log("poiData in MapComponent.js:", poiData);
-          
         });
         marker.on("mouseout", function () {
           this.closePopup();

config/config.js

@@ -24,17 +24,17 @@ if (typeof window !== "undefined") {
 
   // 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
+  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}`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
 
-    mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+  /*    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`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
 }
 
 // Export der definierten Variablen und URLs, damit sie in anderen Teilen der Anwendung verwendet werden können

pages/api/[...path].js

@@ -2,8 +2,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://192.168.10.58:3001",
+  target: "http://10.10.0.13", // Ziel-URL des Proxys
   //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
   changeOrigin: true,
   pathRewrite: {