Prepair: With Recoil atom pass current poi data from MapComponent to poiUpdateModal.js when mouse over

components/MapComponent.js

@@ -1,5 +1,5 @@
 // components/MapComponent.js
-import React, { useEffect, useRef, useState, useMemo } from "react";
+import React, { useEffect, useRef, useState, useMemo, use } from "react";
 //import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
 import L, { marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -22,6 +22,7 @@ import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAto
 import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
 import PoiUpdateModal from "./PoiUpdateModal.js";
 import { selectedPoiState } from "../store/atoms/poiState.js";
+import { currentPoiState } from '../store/atoms/currentPoiState';
 
 //import { createRoot } from "react-dom/client";
 
@@ -34,12 +35,15 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+
   const setSelectedPoi = useSetRecoilState(selectedPoiState);
+
   const openPoiUpdateModal = () => setShowPoiUpdateModal(true);
   const closePoiUpdateModal = () => setShowPoiUpdateModal(false);
   const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
   const [currentPoiData, setCurrentPoiData] = useState(null);
-
+  const setCurrentPoi = useSetRecoilState(currentPoiState);
+  const currentPoi = useRecoilValue(currentPoiState);
   const handlePoiSelect = (poiData) => {
     setSelectedPoi(poiData); // poiData should be the data of the selected POI
     // Open the modal or any other logic
@@ -54,6 +58,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       name: marker.options.name,
       description: marker.options.description,
     });
+    console.log("POI-Daten1:", currentPoiData);
+    
+ 
     fetchPoiData(marker.options.id);
 
     setShowPoiUpdateModal(true);
@@ -71,6 +78,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       name: data.name,
       description: data.description,
     });
+    console.log("POI-Daten2:", currentPoiData);
     setShowPoiUpdateModal(true);
   };
 
@@ -593,7 +601,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     setShowEditModal(true);
   };
   // In der Marker-Erstellungsfunktion
-
+//---------------------------------------------------------
+useEffect(() => {
+  console.log("useEffect current Data:", currentPoiData);
+}, [currentPoiData]);
+//---------------------------------------------------------
   //------------------------------------------
   // API-Daten laden für GisStationsStaticDistrict
   //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
@@ -958,6 +970,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
         const poiData = {
           id: location.idPoi,
+          deviceId: location.idLD,
           typ: poiTypName,
           description: location.description,
         };
@@ -966,12 +979,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         marker.on("mouseover", function () {
           this.openPopup();
           //Informationen in der Konsole anzeigen
-          console.log("poiLayer Marker ID:", location.idPoi);
-          console.log("poiLayer Marker Typ:", poiTypName);
-          console.log("poiLayer Marker Beschreibung:", location.description);
+          //console.log("poiLayer Marker ID:", location.idPoi);
+          //console.log("poiLayer Marker Typ:", poiTypName);
+          //console.log("poiLayer Marker Beschreibung:", location.description);
           //Informationen an handlePoiSelect  übergeben
           handlePoiSelect(poiData);
+<<<<<<< HEAD
           console.log("poiData in MapComponent.js:", poiData);
+=======
+
+          setCurrentPoi(location);
+          console.log("POI-Daten currentPoi:", currentPoi);
+          //console.log("poiData in MapComponent.js:", poiData);
+          
+>>>>>>> b983067 (Prepair: With Recoil atom pass current poi data from MapComponent to poiUpdateModal.js when mouse over)
         });
         marker.on("mouseout", function () {
           this.closePopup();

components/PoiUpdateModal.js

@@ -13,6 +13,10 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
   const [poiTypeId, setPoiTypeId] = useState("");
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [deviceName, setDeviceName] = useState("");
+  const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
+  const [idLocationDevice, setIdLocationDevice] = useState("");
+ 
+  
 
   const [description, setDescription] = useState(
     poiData ? poiData.description : ""
@@ -24,6 +28,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       setPoiId(poiData.idPoi);
       setName(poiData.name);
       setPoiTypeId(poiData.idPoiTyp);
+      setIdLD(poiData.idLD);
 
       setDescription(poiData.description);
       setDeviceName(poiData.idLD);
@@ -36,7 +41,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   }, [poiData]);
 
-  const fetchDeviceNameById = async (idLD) => {
+/*   const fetchDeviceNameById = async (idLD) => {
     try {
       const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
       const data = await response.json();
@@ -44,7 +49,17 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     } catch (error) {
       console.error("Error fetching device name:", error);
     }
-  };
+  }; */
+
+/*     const fetchDeviceNameById = async (idLD) => {
+    try {
+      const response = await fetch(`/api/locationDeviceNameById?idLD=${idLD}`);
+      const data = await response.json();
+      setDeviceName(data.deviceName);
+    } catch (error) {
+      console.error("Error fetching device name:", error);
+    }
+  }; */
 
   // Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
   useEffect(() => {
@@ -107,7 +122,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     fetchPoiTypData();
   }, [selectedPoi]);
 
-  // Fetch device data
+  // Fetch device data um den Gerät Namen in den dropdown menu anzuzeigen also erstmal die Liste der Geräte abrufen
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -115,11 +130,14 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         const data = await response.json();
         //console.log("Standort- und Gerätedaten:", data);
         setLocationDeviceData(data);
+        console.log("Standort- und Gerätedaten poiData:", poiData);
         if (poiData && poiData.idLD) {
           const selectedDevice = data.find(
             (device) => device.id === poiData.idLD
           );
           setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); // Hier wird die ID als initialer Zustand gesetzt
+          console.log("Selected Device:", selectedDevice);
+          console.log("Selected devciceName:", deviceName);
         }
       } catch (error) {
         console.error(
@@ -130,9 +148,32 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     };
     fetchData();
   }, []);
+//--------------------------------------------------------------------------------------------
+// Fetch device name basierend auf der Geräte-ID
 
+useEffect(() => {
+  fetch('/api/locationDevices')
+    .then(response => response.json())
+    .then(data => {
+      setLocationDeviceData(data);
+      console.log("Standort- und Gerätedaten 3:", data);
+      console.log("Standort- und Gerätedaten 3 poiData:", poiData);
+      // Findet das Gerät, das der aktuellen IDLD entspricht
+      const currentDevice = data.find(device => device.idLD === poiData?.idLD);
+      if (currentDevice) {
+        setDeviceName(currentDevice.name);
+      }
+    })
+    .catch(error => {
+      console.error('Fehler beim Abrufen der Gerätedaten:', error);
+      setLocationDeviceData([]);
+    });
+}, [poiData?.idLD]);
+
+
+//--------------------------------------------------------------------------------------------
   // Angenommen, deviceName enthält die Geräte-ID
-  const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
+  //const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -177,6 +218,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
   console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id);
   console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ);//als Typ in dropdown menu
   console.log("Selected POI Beschreibung in poiUpdateModal.js:", selectedPoi.description);
+  console.log("Selected POI Gerät deviceId in poiUpdateModal.js:", selectedPoi.deviceId);
 
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
@@ -207,6 +249,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
         >
           {locationDeviceData.map((device, index) => (
+            console.log("device.id und name:", device),
             <option key={index} value={device.id}>
               {device.name}
             </option>
@@ -247,6 +290,9 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       >
         POI aktualisieren
       </button>
+      <div>
+      {deviceName ? <p>Gerätename: {deviceName}</p> : <p>Gerätename wird geladen...</p>}
+    </div>
     </form>
   );
 };

pages/api/locationDevices.js

@@ -0,0 +1,33 @@
+// API in /api/locationDevices.js
+import mysql from 'mysql';
+
+const dbConfig = {
+  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 * FROM location_device WHERE iddevice = 160";
+  connection.query(query, (error, results) => {
+    if (error) {
+      console.error("Fehler beim Abrufen der Geräteinformationen:", error);
+      return res.status(500).json({ error: "Fehler beim Abrufen der Geräteinformationen" });
+    }
+    res.json(results);
+  });
+}

store/atoms/currentPoiState.js

@@ -0,0 +1,7 @@
+// store/atoms/currentPoiState.js
+import { atom } from 'recoil';
+
+export const currentPoiState = atom({
+  key: 'currentPoiState', // Eindeutiger Key, der dieses Atom identifiziert
+  default: null, // Standardwert ist null oder ein leeres Objekt, je nach Bedarf
+});