diff --git a/components/pois/PoiUpdateModal.js b/components/pois/PoiUpdateModal.js index b862c6fc3..932a21dfc 100644 --- a/components/pois/PoiUpdateModal.js +++ b/components/pois/PoiUpdateModal.js @@ -1,23 +1,46 @@ // /components/pois/PoiUpdateModal.js import React, { useState, useEffect } from "react"; import Select from "react-select"; // Importiere react-select -import { useRecoilValue } from "recoil"; +import { useRecoilState } from "recoil"; import { selectedPoiState } from "../../store/atoms/poiState"; import { currentPoiState } from "../../store/atoms/currentPoiState"; +import { mapLayersState } from "../../store/atoms/mapLayersState"; const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { - const currentPoi = useRecoilValue(currentPoiState); - const selectedPoi = useRecoilValue(selectedPoiState); + const currentPoi = useRecoilState(currentPoiState); + const selectedPoi = useRecoilState(selectedPoiState); + const [mapLayersVisibility] = useRecoilState(mapLayersState); const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : ""); const [name, setName] = useState(poiData ? poiData.name : ""); const [poiTypData, setPoiTypData] = useState([]); const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select const [locationDeviceData, setLocationDeviceData] = useState([]); + 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 : ""); + // Map von Systemnamen zu IDs (wie zuvor) + const systemNameToIdMap = { + TALAS: 1, + ECI: 2, + ULAF: 3, + GSMModem: 5, + CiscoRouter: 6, + WAGO: 7, + Siemens: 8, + OTDR: 9, + WDM: 10, + GMA: 11, + Messdatensammler: 12, + Messstellen: 13, + TALASICL: 100, + DAUZ: 110, + SMSFunkmodem: 111, + Basisgerät: 200, + }; + useEffect(() => { if (poiData) { setPoiId(poiData.idPoi); @@ -66,6 +89,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { 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); @@ -78,6 +102,18 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { fetchLocationDevices(); }, [poiData]); + // Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern) + const filterDevices = (devices) => { + 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); + }; + const handleSubmit = async (event) => { event.preventDefault(); const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName?.value)}`); @@ -137,7 +173,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { label: poiTyp.name, })); - const deviceOptions = locationDeviceData.map((device) => ({ + const deviceOptions = filteredDevices.map((device) => ({ value: device.name, label: device.name, }));