feat: Geräteauswahl und Anzeige beim POI-Handling auf WebService umgestellt

- setupPOIs.js angepasst: Gerätedaten (LD_Name) aus GisStationsStaticDistrict verwendet
- MapComponent.js übergibt WebService-Geräte (`Points`) als gisDevices an setupPOIs
- PoiUpdateModal.js nutzt LD_Name für react-select Dropdown statt name aus DB
- Dropdown-Anzeige und Tooltip-Daten für POIs nun konsistent mit WebService-Geräteliste

components/mainComponent/MapComponent.js

@@ -7,7 +7,7 @@ import "leaflet-contextmenu";
 import "leaflet.smooth_marker_bouncing";
 import "react-toastify/dist/ReactToastify.css";
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
-import PoiUpdateModal from "@/components/pois/PoiUpdateModal.js";
+import PoiUpdateModal from "@/components/pois/poiUpdateModal/PoiUpdateModal.js";
 import { ToastContainer, toast } from "react-toastify";
 import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
 import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js";
@@ -244,6 +244,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [map, locations, poiReadTrigger]);
 
   //--------------------------------------------
+  const { Points: gisDevices = [] } = useSelector(selectGisStationsStaticDistrict);
+
   // POIs auf die Karte zeichnen
   useEffect(() => {
     if (poiData.length === 0) return;
@@ -264,7 +266,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       toast,
       setShowPoiUpdateModal,
       setCurrentPoiData,
-      deviceName,
+      gisDevices,
       dispatch
     );
   }, [

components/pois/AddPOIModal.js

@@ -10,7 +10,7 @@ import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/pois/fetchPo
 
 const AddPOIModal = ({ onClose, map, latlng }) => {
   const dispatch = useDispatch();
-
+  const [selectedDeviceId, setSelectedDeviceId] = useState("");
   const poiTypData = useSelector(state => state.poiTypes.data);
   const status = useSelector(state => state.addPoi.status);
   const error = useSelector(state => state.addPoi.error);
@@ -49,7 +49,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
       poiTypeId: Number(poiTypeId),
       latitude,
       longitude,
-      idLD: locationDeviceData.find(device => device.LD_Name === deviceName)?.IdLD,
+      idLD: Number(selectedDeviceId),
     };
 
     try {
@@ -110,14 +110,14 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
             <select
               id="deviceName"
               name="deviceName"
-              value={deviceName}
-              onChange={e => setDeviceName(e.target.value)}
+              value={selectedDeviceId}
+              onChange={e => setSelectedDeviceId(e.target.value)}
               className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
             >
               <option value="">-- Gerät auswählen --</option>
-              {locationDeviceData.map((device, index) => (
-                <option key={device?.IdLD || index} value={device?.LD_Name}>
-                  {device?.LD_Name || "Unbekanntes Gerät"}
+              {locationDeviceData.map(device => (
+                <option key={device?.IdLD} value={device?.IdLD}>
+                  {device?.LD_Name}
                 </option>
               ))}
             </select>

components/pois/poiUpdateModal/PoiUpdateModal.js

@@ -1,84 +1,41 @@
-// /components/pois/PoiUpdateModal.js
+// @/components/pois/PoiUpdateModal.js
 import React, { useState, useEffect } from "react";
 import Select from "react-select";
 import { useSelector, useDispatch } from "react-redux";
-import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk";
-import { fetchPoiTypThunk } from "../../redux/thunks/database/pois/fetchPoiTypThunk";
-import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
-import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/pois/poiTypSlice";
-import { deletePoiThunk } from "../../redux/thunks/database/pois/deletePoiThunk";
-import { updatePoiThunk } from "../../redux/thunks/database/pois/updatePoiThunk";
+import { fetchLocationDevicesThunk } from "@/redux/thunks/database/fetchLocationDevicesThunk";
+import { fetchPoiTypThunk } from "@/redux/thunks/database/pois/fetchPoiTypThunk";
+import { selectMapLayersState } from "@/redux/slices/mapLayersSlice";
+import { selectPoiTypData, selectPoiTypStatus } from "@/redux/slices/database/pois/poiTypSlice";
+import { deletePoiThunk } from "@/redux/thunks/database/pois/deletePoiThunk";
+import { updatePoiThunk } from "@/redux/thunks/database/pois/updatePoiThunk";
+import { selectSelectedPoi } from "@/redux/slices/database/pois/selectedPoiSlice";
+import { handleSubmit } from "@/components/pois/poiUpdateModal/utils/handlers";
+import { selectCurrentPoi } from "@/redux/slices/database/pois/currentPoiSlice";
+import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
 
 const PoiUpdateModal = ({ onClose, poiData }) => {
   const dispatch = useDispatch();
+
   const mapLayersVisibility = useSelector(selectMapLayersState);
   const poiTypData = useSelector(selectPoiTypData);
   const poiTypStatus = useSelector(selectPoiTypStatus);
-  const devices = useSelector(state => state.locationDevicesFromDB.devices);
+  //const devices = useSelector(state => state.locationDevicesFromDB.devices);
+  const { Points: availableDevices = [] } = useSelector(selectGisStationsStaticDistrict);
 
-  const [poiId, setPoiId] = useState(poiData?.idPoi || "");
-  const [name, setName] = useState(poiData?.name || "");
-  const [description, setDescription] = useState(poiData?.description || "");
+  const poi = useSelector(selectCurrentPoi);
+  const selectedPoi = poi;
+  console.log("Selected POI in PoiUpdateModal:", selectedPoi);
+
+  //const poi = poiData || selectedPoi || {};
+
+  const [poiId, setPoiId] = useState(poi?.idPoi || "");
+  const [name, setName] = useState(poi?.name || "");
+  const [description, setDescription] = useState(poi?.description || "");
   const [deviceName, setDeviceName] = useState(null);
   const [poiTypeId, setPoiTypeId] = useState(null);
 
   const systemNameToIdMap = {};
 
-  useEffect(() => {
-    dispatch(fetchLocationDevicesThunk());
-    if (poiTypStatus === "idle") {
-      dispatch(fetchPoiTypThunk());
-    }
-  }, [dispatch, poiTypStatus]);
-
-  useEffect(() => {
-    if (poiData && devices.length > 0) {
-      const selectedDevice = devices.find(device => device.idLD === poiData.idLD);
-      if (selectedDevice) {
-        setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.name });
-      }
-    }
-  }, [poiData, devices]);
-
-  useEffect(() => {
-    if (poiData && poiTypData.length > 0) {
-      const selectedTyp = poiTypData.find(typ => typ.idPoiTyp === poiData.idPoiTyp);
-      if (selectedTyp) {
-        setPoiTypeId({ value: selectedTyp.idPoiTyp, label: selectedTyp.name });
-      }
-    }
-  }, [poiData, poiTypData]);
-
-  const filterDevices = () => {
-    const activeSystems = Object.keys(mapLayersVisibility).filter(
-      system => mapLayersVisibility[system]
-    );
-    const activeSystemIds = activeSystems
-      .map(system => systemNameToIdMap[system])
-      .filter(id => id !== undefined);
-    return devices.filter(device => activeSystemIds.includes(device.idsystem_typ));
-  };
-
-  const handleSubmit = async event => {
-    event.preventDefault();
-    try {
-      await dispatch(
-        updatePoiThunk({
-          idPoi: poiId,
-          name,
-          description,
-          idPoiTyp: poiTypeId?.value ?? poiData?.idPoiTyp,
-          idLD: deviceName?.value,
-        })
-      ).unwrap();
-      onClose();
-      window.location.reload();
-    } catch (error) {
-      console.error("Fehler beim Aktualisieren des POI:", error);
-      alert("Fehler beim Aktualisieren des POI.");
-    }
-  };
-
   const handleDeletePoi = async () => {
     if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
       try {
@@ -92,6 +49,55 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   };
 
+  useEffect(() => {
+    dispatch(fetchLocationDevicesThunk());
+    if (poiTypStatus === "idle") {
+      dispatch(fetchPoiTypThunk());
+    }
+  }, [dispatch, poiTypStatus]);
+
+  /*   useEffect(() => {
+    console.log("devices in PoiUpdateModal:", devices);
+    if (poi && devices.length > 0) {
+      const selectedDevice = devices.find(device => Number(device.idLD) === Number(poi.idLD));
+      console.log("Selected Device:", selectedDevice);
+      if (selectedDevice) {
+        setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.name });
+      }
+    }
+  }, [poi, devices]); */
+
+  useEffect(() => {
+    console.log("poiTypData in PoiUpdateModal:", poiTypData);
+    if (poi && poiTypData.length > 0) {
+      const selectedTyp = poiTypData.find(typ => Number(typ.idPoiTyp) === Number(poi.idPoiTyp));
+      console.log("Selected Poi Type:", selectedTyp);
+      if (selectedTyp) {
+        setPoiTypeId({ value: selectedTyp.idPoiTyp, label: selectedTyp.name });
+      }
+    }
+  }, [poi, poiTypData]);
+
+  useEffect(() => {
+    console.log("availableDevices in PoiUpdateModal:", availableDevices);
+    if (poiData && availableDevices.length > 0) {
+      const selectedDevice = availableDevices.find(device => device.idLD === poiData.idLD);
+      if (selectedDevice) {
+        setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.LD_Name }); // ✅ auch hier korrigieren
+      }
+    }
+  }, [poiData, availableDevices]);
+
+  const filterDevices = () => {
+    const activeSystems = Object.keys(mapLayersVisibility).filter(
+      system => mapLayersVisibility[system]
+    );
+    const activeSystemIds = activeSystems
+      .map(system => systemNameToIdMap[system])
+      .filter(id => id !== undefined);
+    return devices.filter(device => activeSystemIds.includes(device.idsystem_typ));
+  };
+
   const poiTypeOptions = Array.isArray(poiTypData)
     ? poiTypData.map(poiTyp => ({
         value: poiTyp.idPoiTyp,
@@ -99,9 +105,9 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       }))
     : [];
 
-  const deviceOptions = filterDevices().map(device => ({
+  const deviceOptions = availableDevices.map(device => ({
     value: device.idLD,
-    label: device.name,
+    label: device.LD_Name,
   }));
 
   const customStyles = {

components/pois/poiUpdateModal/utils/handlers.js

@@ -0,0 +1,42 @@
+export const handleSubmit = async ({
+  event,
+  dispatch,
+  poiId,
+  name,
+  description,
+  poiTypeId,
+  deviceName,
+  poi,
+  onClose,
+}) => {
+  event.preventDefault();
+  try {
+    await dispatch(
+      updatePoiThunk({
+        idPoi: poiId,
+        name,
+        description,
+        idPoiTyp: poiTypeId?.value ?? poi?.idPoiTyp,
+        idLD: deviceName?.value,
+      })
+    ).unwrap();
+    onClose();
+    window.location.reload();
+  } catch (error) {
+    console.error("Fehler beim Aktualisieren des POI:", error);
+    alert("Fehler beim Aktualisieren des POI.");
+  }
+};
+
+export const handleDeletePoi = async ({ dispatch, poiId, onClose }) => {
+  if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
+    try {
+      await dispatch(deletePoiThunk(poiId)).unwrap();
+      onClose();
+      window.location.reload();
+    } catch (error) {
+      console.error("Fehler beim Löschen des POI:", error);
+      alert("Fehler beim Löschen des POI.");
+    }
+  }
+};