diff --git a/components/pois/PoiUpdateModal.js b/components/pois/PoiUpdateModal.js index f2f195c07..ab086b39b 100644 --- a/components/pois/PoiUpdateModal.js +++ b/components/pois/PoiUpdateModal.js @@ -1,29 +1,27 @@ // /components/pois/PoiUpdateModal.js import React, { useState, useEffect } from "react"; -import Select from "react-select"; // Importiere react-select -import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk"; +import Select from "react-select"; import { useSelector, useDispatch } from "react-redux"; -import { selectMapLayersState } from "../../redux/slices/mapLayersSlice"; +import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk"; import { fetchPoiTypThunk } from "../../redux/thunks/database/fetchPoiTypThunk"; +import { selectMapLayersState } from "../../redux/slices/mapLayersSlice"; import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/poiTypSlice"; import { deletePoiThunk } from "../../redux/thunks/database/deletePoiThunk"; -import { getDeviceIdByNameThunk } from "../../redux/thunks/database/getDeviceIdByNameThunk"; import { updatePoiThunk } from "../../redux/thunks/database/updatePoiThunk"; -const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { +const PoiUpdateModal = ({ onClose, poiData }) => { const dispatch = useDispatch(); const mapLayersVisibility = useSelector(selectMapLayersState); - const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : ""); - const [name, setName] = useState(poiData ? poiData.name : ""); - const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select - const [filteredDevices, setFilteredDevices] = useState([]); - const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : null); // Verwende null für react-select - const [idLD, setIdLD] = useState(poiData ? poiData.idLD : ""); - const [description, setDescription] = useState(poiData ? poiData.description : ""); const poiTypData = useSelector(selectPoiTypData); const poiTypStatus = useSelector(selectPoiTypStatus); + const devices = useSelector((state) => state.locationDevicesFromDB.devices); + + const [poiId, setPoiId] = useState(poiData?.idPoi || ""); + const [name, setName] = useState(poiData?.name || ""); + const [description, setDescription] = useState(poiData?.description || ""); + const [deviceName, setDeviceName] = useState(null); + const [poiTypeId, setPoiTypeId] = useState(null); - // Map von Systemnamen zu IDs (wie zuvor) const systemNameToIdMap = { TALAS: 1, ECI: 2, @@ -43,66 +41,51 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { Basisgerät: 200, }; - const devices = useSelector((state) => state.locationDevicesFromDB.devices); - useEffect(() => { dispatch(fetchLocationDevicesThunk()); - }, [dispatch]); - - useEffect(() => { - if (poiData) { - setPoiId(poiData.idPoi); - setName(poiData.name); - setPoiTypeId(poiData.idPoiTyp); // Setze den Typ-ID - setIdLD(poiData.idLD); - setDescription(poiData.description); - } - }, [poiData]); - - // Fetch POI types and set the current POI type in the react-select dropdown - useEffect(() => { if (poiTypStatus === "idle") { dispatch(fetchPoiTypThunk()); } }, [dispatch, poiTypStatus]); - // Fetch location devices and pre-select the current device useEffect(() => { - if (devices.length > 0) { - filterDevices(devices); // <-- Filter direkt die Redux-Devices + if (poiData && devices.length > 0) { + const selectedDevice = devices.find((device) => device.idLD === poiData.idLD); + if (selectedDevice) { + setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.name }); + } } - }, [devices]); + }, [poiData, devices]); - // Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern) - const filterDevices = (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]); - - // Mappe aktive Systeme auf ihre ids const activeSystemIds = activeSystems.map((system) => systemNameToIdMap[system]).filter((id) => id !== undefined); - - // Filtere die Geräte nach aktiven Systemen basierend auf idsystem_typ - const filtered = devices.filter((device) => activeSystemIds.includes(device.idsystem_typ)); - setFilteredDevices(filtered); + return devices.filter((device) => activeSystemIds.includes(device.idsystem_typ)); }; const handleSubmit = async (event) => { event.preventDefault(); - try { - const idLD = deviceName?.value; - await dispatch( updatePoiThunk({ idPoi: poiId, name, description, idPoiTyp: poiTypeId?.value ?? poiData?.idPoiTyp, - idLD: deviceName?.value, // ← direkt die ID aus react-select + idLD: deviceName?.value, }) ).unwrap(); - onClose(); - window.location.reload(); // oder: dispatch(incrementTrigger()); + window.location.reload(); } catch (error) { console.error("Fehler beim Aktualisieren des POI:", error); alert("Fehler beim Aktualisieren des POI."); @@ -122,48 +105,31 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { } }; - // Erstelle Optionen für react-select const poiTypeOptions = Array.isArray(poiTypData) ? poiTypData.map((poiTyp) => ({ value: poiTyp.idPoiTyp, label: poiTyp.name, })) - : []; // Falls kein Array, dann leeres Array zurückgeben + : []; - 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 + const deviceOptions = filterDevices().map((device) => ({ + value: device.idLD, + label: device.name, })); - 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 = { control: (provided) => ({ ...provided, width: "100%", - minWidth: "300px", // Minimum width for the dropdown - maxWidth: "100%", // Maximum width (you can adjust this if needed) + minWidth: "300px", + maxWidth: "100%", }), menu: (provided) => ({ ...provided, width: "100%", - minWidth: "300px", // Ensure the dropdown menu stays at the minimum width + minWidth: "300px", }), }; - console.log("→ Sende POI-Daten:", { - idPoi: poiId, - name, - description, - idPoiTyp: poiTypeId?.value, - idLD, - }); return (