feat: Set default POI type in dropdown based on selected POI

components/MapComponent.js

@@ -10,7 +10,7 @@ import dynamic from "next/dynamic";
 import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
 import DataSheet from "./DataSheet.js";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
 import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
 import { mapLayersState } from "../store/atoms/mapLayersState.js";
@@ -21,6 +21,7 @@ import ShowAddStationPopup from "./ShowAddStationPopup";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
 import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
 import PoiUpdateModal from "./PoiUpdateModal.js";
+import { selectedPoiState } from "../store/atoms/poiState.js";
 
 //import { createRoot } from "react-dom/client";
 
@@ -33,11 +34,17 @@ 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 handlePoiSelect = (poiData) => {
+    setSelectedPoi(poiData); // poiData should be the data of the selected POI
+    // Open the modal or any other logic
+  };
+
   const handleEditPoi = (marker) => {
     console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
     console.log("Selected Marker Description:", marker.options.description);
@@ -71,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();
@@ -930,19 +937,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           ${poiTypName}<br>
         </div>
     `);
-        /**
-            marker.bindPopup(`
-        <div>
-            <b  class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
-            Type: ${poiTypName}<br>
-            Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
-        </div>
-    `);
-     */
+
+        const poiData = {
+          id: location.idPoi,
+          typ: poiTypName,
+          description: location.description,
+        };
 
         // Event-Handler hinzufügen
         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);
+          //Informationen an handlePoiSelect  übergeben
+          handlePoiSelect(poiData);
+          console.log("poiData in MapComponent.js:", poiData);
+          
         });
         marker.on("mouseout", function () {
           this.closePopup();

components/PoiUpdateModal.js

@@ -1,8 +1,12 @@
 // pages/api/poiUpdateModal.js
 //
 import React, { useState, useEffect } from "react";
+import { useRecoilValue } from "recoil";
+import { selectedPoiState } from "../store/atoms/poiState";
+
 
 const PoiUpdateModal = ({ onClose, poiData }) => {
+  const selectedPoi = useRecoilValue(selectedPoiState);
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
   const [name, setName] = useState(poiData ? poiData.name : "");
   const [poiTypData, setPoiTypData] = useState([]);
@@ -89,17 +93,19 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       try {
         const response = await fetch("/api/readPoiTyp");
         const data = await response.json();
-        //console.log("POI Typ Daten:", data);
         setPoiTypData(data);
-        if (data && data.length > 0) {
-          setPoiTypeId(data[0].idPoiTyp); // Set the first type as default
+        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]);
 
   // Fetch device data
   useEffect(() => {
@@ -166,6 +172,12 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   };
 
+  //ausgewählte poi Informationen in Console anzeigen
+  console.log("Selected POI:", selectedPoi);
+  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);
+
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
       <div className="flex items-center mb-4">

components/ShowAddStationPopup.js

@@ -5,6 +5,7 @@ import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
 
+
 const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
   const [name, setName] = useState("");