diff --git a/components/MapComponent.js b/components/MapComponent.js index ed26f29cc..ddc8e5ae6 100644 --- a/components/MapComponent.js +++ b/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(); diff --git a/components/PoiUpdateModal.js b/components/PoiUpdateModal.js index 231e790ca..987e85396 100644 --- a/components/PoiUpdateModal.js +++ b/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 (
@@ -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), @@ -247,6 +290,9 @@ const PoiUpdateModal = ({ onClose, poiData }) => { > POI aktualisieren +
+ {deviceName ?

Gerätename: {deviceName}

:

Gerätename wird geladen...

} +
); }; diff --git a/pages/api/locationDevices.js b/pages/api/locationDevices.js new file mode 100644 index 000000000..827a90567 --- /dev/null +++ b/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); + }); +} diff --git a/store/atoms/currentPoiState.js b/store/atoms/currentPoiState.js new file mode 100644 index 000000000..8912dc3cc --- /dev/null +++ b/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 +});