Merge branch 'feature/dropdown-filter' into develop

components/pois/PoiUpdateModal.js

@@ -1,23 +1,48 @@
 // components/pois/poiUpdateModal.js
 
 import React, { useState, useEffect } from "react";
-import { useRecoilValue } from "recoil";
+import Select from "react-select"; // Importiere react-select
+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("");
   const [locationDeviceData, setLocationDeviceData] = useState([]);
-  const [deviceName, setDeviceName] = 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) {
       //console.log("Initial poiData:", poiData);
@@ -93,6 +118,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
         const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
         const data = await response.json();
         setLocationDeviceData(data);
+        filterDevices(data);
+
         if (poiData && poiData.idLD) {
           const selectedDevice = data.find((device) => device.id === poiData.idLD);
           setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
@@ -122,6 +149,18 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
       });
   }, [poiData?.idLD, currentPoi]);
 
+  // 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)}`);
@@ -155,6 +194,51 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
     }
   };
 
+  const handleDeletePoi = async () => {
+    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
+      try {
+        const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
+          method: "DELETE",
+        });
+        if (response.ok) {
+          onClose();
+          window.location.reload(); // Aktualisiert die Seite nach dem Löschen
+        } else {
+          throw new Error("Fehler beim Löschen des POI.");
+        }
+      } catch (error) {
+        console.error("Fehler beim Löschen des POI:", error);
+        alert("Fehler beim Löschen des POI.");
+      }
+    }
+  };
+
+  // Erstelle Optionen für react-select
+  const poiTypeOptions = poiTypData.map((poiTyp) => ({
+    value: poiTyp.idPoiTyp,
+    label: poiTyp.name,
+  }));
+
+  const deviceOptions = filteredDevices.map((device) => ({
+    value: device.name,
+    label: device.name,
+  }));
+
+  // 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)
+    }),
+    menu: (provided) => ({
+      ...provided,
+      width: "100%",
+      minWidth: "300px", // Ensure the dropdown menu stays at the minimum width
+    }),
+  };
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={onClose}>
       <div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>