WIP: POI Update

.env.local

@@ -15,31 +15,31 @@
 #########################
 
 
-DB_HOST=10.10.0.70
+#DB_HOST=10.10.0.70
-DB_USER=root
-DB_PASSWORD="root#$"
-DB_NAME=talas_v5
-DB_PORT=3306
-
-#########################
-
-NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
-NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
-NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
-NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
-#########################
-
-#DB_HOST=192.168.10.168
 #DB_USER=root
 #DB_PASSWORD="root#$"
 #DB_NAME=talas_v5
 #DB_PORT=3306
+
+#########################
+
+#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
+#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
+#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
+#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
+#########################
+
+DB_HOST=192.168.10.168
+DB_USER=root
+DB_PASSWORD="root#$"
+DB_NAME=talas_v5
+DB_PORT=3306
 #########################
 #URLs für den Client (clientseitig)
-#NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/"
+NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/"
-#NEXT_PUBLIC_SERVER_URL="http://192.168.10.168"
+NEXT_PUBLIC_SERVER_URL="http://192.168.10.168"
-#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168"
+NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168"
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
+NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
 
 ######################### online
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

components/MapComponent.js

@@ -257,25 +257,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions);
         requestCount++; // Zähler erhöhen
         localStorage.setItem("fetchWebServiceMap", requestCount);
-        console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
 
         // Fetch GIS Stations Status District
         await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions);
         requestCount++; // Zähler erhöhen
         localStorage.setItem("fetchWebServiceMap", requestCount);
-        console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
 
         // Fetch GIS Stations Measurements
         await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions);
         requestCount++; // Zähler erhöhen
         localStorage.setItem("fetchWebServiceMap", requestCount);
-        console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
 
         // Fetch GIS System Static
         await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions);
         requestCount++; // Zähler erhöhen
         localStorage.setItem("fetchWebServiceMap", requestCount);
-        console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
+        //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`);
       } catch (error) {
         console.error("Error fetching data:", error);
       }
@@ -376,7 +376,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useEffect(() => {
     if (poiData.length === 0) return;
 
-    setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData);
+    setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName);
   }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]);
 
   //---------------------------------------------
@@ -666,7 +666,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         map.whenReady(() => {
           setTimeout(() => {
             if (map.contextmenu) {
-              console.log("Contextmenu ist vorhanden");
+              //console.log("Contextmenu ist vorhanden");
             } else {
               console.warn("Contextmenu ist nicht verfügbar.");
             }

components/gisPolylines/PolylineContextMenu.js

@@ -0,0 +1,26 @@
+// /components/gisPolylines/PolylineContextMenu.js
+import React from "react";
+
+const PolylineContextMenu = ({ position, onAddPoint, onRemovePoint, onClose }) => {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: position.y,
+        left: position.x,
+        backgroundColor: "white",
+        border: "1px solid black",
+        padding: "10px",
+        zIndex: 1000,
+      }}
+    >
+      <ul>
+        <li onClick={onAddPoint}>Stützpunkt hinzufügen</li>
+        <li onClick={onRemovePoint}>Stützpunkt entfernen</li>
+        <li onClick={onClose}>Schließen</li>
+      </ul>
+    </div>
+  );
+};
+
+export default PolylineContextMenu;

components/pois/PoiUpdateModal.js

@@ -1,5 +1,3 @@
-// components/pois/poiUpdateModal.js
-
 import React, { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { selectedPoiState } from "../../store/atoms/poiState";
@@ -8,6 +6,7 @@ import { currentPoiState } from "../../store/atoms/currentPoiState";
 const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const currentPoi = useRecoilValue(currentPoiState);
   const selectedPoi = useRecoilValue(selectedPoiState);
+
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
   const [name, setName] = useState(poiData ? poiData.name : "");
   const [poiTypData, setPoiTypData] = useState([]);
@@ -15,36 +14,73 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [deviceName, setDeviceName] = useState("");
   const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
-
   const [description, setDescription] = useState(poiData ? poiData.description : "");
 
+  // Fetch and set POI data
   useEffect(() => {
     if (poiData) {
-      //console.log("Initial poiData:", poiData);
       setPoiId(poiData.idPoi);
       setName(poiData.name);
       setPoiTypeId(poiData.idPoiTyp);
       setIdLD(poiData.idLD);
       setDescription(poiData.description);
-      setDeviceName(poiData.idLD);
-      //console.log("Loaded POI Data for editing:", poiData);
     }
   }, [poiData]);
 
+  // Fetch POI types and pre-select the current POI type
   useEffect(() => {
-    const fetchDeviceId = async () => {
+    const fetchPoiTypData = async () => {
-      if (poiData && poiData.idLD) {
+      const cachedPoiTypData = localStorage.getItem("poiTypData");
+      if (cachedPoiTypData) {
+        const data = JSON.parse(cachedPoiTypData);
+        setPoiTypData(data);
+        if (poiData) {
+          setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID
+        }
+      } else {
         try {
-          const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
+          const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
           const data = await response.json();
-          if (data) setDeviceName(data.name);
+          setPoiTypData(data);
+          localStorage.setItem("poiTypData", JSON.stringify(data));
+          if (poiData) {
+            setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID
+          }
         } catch (error) {
-          console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
+          console.error("Fehler beim Abrufen der poiTyp Daten:", error);
         }
       }
     };
+    fetchPoiTypData();
+  }, [poiData]);
 
-    fetchDeviceId();
+  // Fetch location devices and pre-select the current device
+  useEffect(() => {
+    const fetchLocationDevices = async () => {
+      const cachedDeviceData = localStorage.getItem("locationDeviceData");
+      if (cachedDeviceData) {
+        const data = JSON.parse(cachedDeviceData);
+        setLocationDeviceData(data);
+        if (poiData) {
+          const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
+          setDeviceName(selectedDevice ? selectedDevice.name : ""); // Pre-select the current device
+        }
+      } else {
+        try {
+          const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
+          const data = await response.json();
+          setLocationDeviceData(data);
+          localStorage.setItem("locationDeviceData", JSON.stringify(data));
+          if (poiData) {
+            const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
+            setDeviceName(selectedDevice ? selectedDevice.name : ""); // Pre-select the current device
+          }
+        } catch (error) {
+          console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
+        }
+      }
+    };
+    fetchLocationDevices();
   }, [poiData]);
 
   const handleDeletePoi = async () => {
@@ -54,79 +90,24 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
           method: "DELETE",
         });
         if (response.ok) {
-          //alert("POI wurde erfolgreich gelöscht.");
           onClose();
           window.location.reload();
         } else {
           throw new Error("Fehler beim Löschen des POI.");
         }
       } catch (error) {
-        console.error("Fehler beim Löschen des POI 2:", error);
+        console.error("Fehler beim Löschen des POI:", error);
         alert("Fehler beim Löschen des POI.");
       }
     }
   };
 
-  useEffect(() => {
-    const fetchPoiTypData = async () => {
-      try {
-        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
-        const data = await response.json();
-        setPoiTypData(data);
-        if (selectedPoi && data) {
-          const matchingType = data.find((pt) => pt.name === selectedPoi.typ);
-          if (matchingType) {
-            setPoiTypeId(matchingType.idPoiTyp);
-          }
-        }
-      } catch (error) {
-        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
-      }
-    };
-    fetchPoiTypData();
-  }, [selectedPoi]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
-        const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
-        const data = await response.json();
-        setLocationDeviceData(data);
-        if (poiData && poiData.idLD) {
-          const selectedDevice = data.find((device) => device.id === poiData.idLD);
-          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
-          //console.log("Selected Device in poiUpdate:", selectedDevice);
-        }
-      } catch (error) {
-        console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
-      }
-    };
-    fetchData();
-  }, []);
-
-  useEffect(() => {
-    fetch("/api/talas_v5_DB/locationDevice/locationDevices")
-      .then((response) => response.json())
-      .then((data) => {
-        setLocationDeviceData(data);
-        const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
-        if (currentDevice) {
-          setDeviceName(currentDevice.name);
-          //console.log("Current Device name in poiUpdate:", currentDevice.name);
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler beim Abrufen der Gerätedaten:", error);
-        setLocationDeviceData([]);
-      });
-  }, [poiData?.idLD, currentPoi]);
-
   const handleSubmit = async (event) => {
     event.preventDefault();
     const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
     const idLDData = await idLDResponse.json();
     const idLD = idLDData.idLD;
+
     try {
       const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
         method: "POST",
@@ -176,8 +157,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
               Gerät:
             </label>
             <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-              {locationDeviceData.map((device, index) => (
+              {locationDeviceData.map((device) => (
-                <option key={index} value={device.id}>
+                <option key={device.idLD} value={device.name}>
                   {device.name}
                 </option>
               ))}
@@ -189,8 +170,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
               Typ:
             </label>
             <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-              {poiTypData.map((poiTyp, index) => (
+              {poiTypData.map((poiTyp) => (
-                <option key={index} value={poiTyp.idPoiTyp}>
+                <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
                   {poiTyp.name}
                 </option>
               ))}

hooks/useMapComponentState.js

@@ -1,5 +1,5 @@
 // hooks/useMapComponentState.js
-import { useState, useRef } from "react";
+import { useState, useEffect } from "react";
 import usePoiTypData from "./usePoiTypData";
 import { useRecoilValue } from "recoil";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
@@ -12,6 +12,26 @@ export const useMapComponentState = () => {
   const [menuItemAdded, setMenuItemAdded] = useState(false);
   const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
 
+  // Fetch devices when the component is mounted
+  useEffect(() => {
+    const fetchDeviceData = async () => {
+      try {
+        const response = await fetch("/api/talas5/location_device"); // API call to get devices
+        const data = await response.json();
+        setLocationDeviceData(data); // Set the device data
+
+        // Optional: set a default deviceName if needed
+        if (data.length > 0) {
+          setDeviceName(data[0].name); // Set the first device's name
+        }
+      } catch (error) {
+        console.error("Error fetching device data:", error);
+      }
+    };
+
+    fetchDeviceData();
+  }, []); // Runs only once when the component is mounted
+
   return {
     poiTypData,
     isPoiTypLoaded,

pages/api/talas5/location_device.js

@@ -8,14 +8,15 @@ export default async function handler(req, res) {
   let connection;
   try {
     // SQL-Query and parameters
-    const sql = "SELECT idLD, iddevice, name FROM location_device WHERE iddevice = ?";
+    const sql = "SELECT idLD, iddevice, name FROM location_device ORDER BY name";
-    const params = [160]; // Example parameter
+    //const params = [160]; // Example parameter
 
     // Get a connection from the pool
     connection = await pool.getConnection();
 
     // Execute the query
-    const [results] = await connection.query(sql, params);
+    //const [results] = await connection.query(sql, params);
+    const [results] = await connection.query(sql);
 
     // Check if results are empty
     if (!results.length) {

pages/api/talas_v5_DB/locationDevice/locationDevices.js

@@ -8,7 +8,8 @@ export default async function handler(req, res) {
     return res.status(405).json({ error: "Nur GET Methode erlaubt" });
   }
 
-  const query = "SELECT * FROM location_device WHERE iddevice = 160";
+  //const query = "SELECT * FROM location_device WHERE iddevice = 160";
+  const query = "SELECT * FROM location_device ORDER BY name";
 
   let connection;
 

utils/setupPOIs.js

@@ -76,12 +76,13 @@ export const setupPOIs = async (
         marker.bindPopup(`
           <div>
             <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
-            ${deviceName}<br>
+            ${deviceName || "unbekannt"} <br>
             ${poiTypName}<br>
           </div>
         `);
 
         marker.on("mouseover", function () {
+          console.log("Device Name:", deviceName); // Debugging
           handlePoiSelect(
             {
               id: location.idPoi,
@@ -92,12 +93,10 @@ export const setupPOIs = async (
             },
             setSelectedPoi,
             setLocationDeviceData,
-            setDeviceName,
+            setDeviceName, // Stelle sicher, dass dies korrekt funktioniert
             poiLayerRef,
             poiTypMap
           );
-          setCurrentPoi(location);
-          this.openPopup();
 
           localStorage.setItem("lastElementType", "marker");
           localStorage.setItem("markerLink", this.options.link);