Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
isa
2024-05-26 15:14:16 +02:00
committed by ISA
parent bf4d86406b
commit 77ac959dcf
4 changed files with 117 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/MapComponent.js
View File

@@ -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();