PoiUpdateModal filter nach Bereiche

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,
   }));