feat: Geräte-Daten aus Redux-Store in POI-Bearbeiten-Modal integriert

- Geräte-Liste wird jetzt direkt aus dem Redux-Store (locationDevicesFromDB) verwendet.
- Dropdown-Menü zeigt alle verfügbaren Geräte aus der Datenbank.
- Beim Öffnen des Modals wird der vorher zugewiesene Gerätname automatisch ausgewählt (Pre-Selection).
- Cleanup und Optimierung: Keine separaten API-Calls mehr im Modal.
- Struktur verbessert durch Auslagerung der Lade-Logik in useInitLocationDevices Hook.

components/pois/PoiUpdateModal.js

@@ -5,10 +5,13 @@ import { useRecoilState } from "recoil";
 import { selectedPoiState } from "../../redux/slices/selectedPoiSlice";
 import { currentPoiState } from "../../redux/slices/currentPoiSlice";
 import { mapLayersState } from "../../redux/slices/mapLayersSlice";
-import { useSelector } from "react-redux";
 import { selectCurrentPoi } from "../../redux/slices/currentPoiSlice";
+import { fetchLocationDevicesFromDB } from "../../redux/slices/db/locationDevicesFromDBSlice";
+import { useSelector, useDispatch } from "react-redux";
 
 const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
+  const dispatch = useDispatch();
+
   const currentPoi = useSelector(selectCurrentPoi);
   const selectedPoi = useRecoilState(selectedPoiState);
   const [mapLayersVisibility] = useRecoilState(mapLayersState);
@@ -43,6 +46,12 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
     Basisgerät: 200,
   };
 
+  const devices = useSelector((state) => state.locationDevicesFromDB.devices);
+
+  useEffect(() => {
+    dispatch(fetchLocationDevicesFromDB());
+  }, [dispatch]);
+
   useEffect(() => {
     if (poiData) {
       setPoiId(poiData.idPoi);
@@ -86,23 +95,10 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
 
   // Fetch location devices and pre-select the current device
   useEffect(() => {
-    const fetchLocationDevices = async () => {
-      try {
-        const response = await fetch("/api/talas5/location_device");
-        const data = await response.json();
-        setLocationDeviceData(data);
-        filterDevices(data);
-
-        if (poiData && poiData.idLD) {
-          const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
-          setDeviceName(selectedDevice ? { value: selectedDevice.name, label: selectedDevice.name } : null);
-        }
-      } catch (error) {
-        console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
-      }
-    };
-    fetchLocationDevices();
-  }, [poiData]);
+    if (devices.length > 0) {
+      filterDevices(devices); // <-- Filter direkt die Redux-Devices
+    }
+  }, [devices]);
 
   // Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
   const filterDevices = (devices) => {
@@ -177,10 +173,18 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
       }))
     : []; // Falls kein Array, dann leeres Array zurückgeben
 
-  const deviceOptions = filteredDevices.map((device) => ({
-    value: device.name,
-    label: device.name,
+  const deviceOptions = devices.map((device) => ({
+    value: device.idLD, // idLD ist die eindeutige ID des Geräts
+    label: device.name, // name ist der Anzeigename im Dropdown
   }));
+  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]);
 
   // Custom styles for react-select
   const customStyles = {