WIP: noch Design für POI hinzufügen

components/DataSheet.js

@@ -52,6 +52,9 @@ function DataSheet() {
       }
       return isUnique;
     });
+    console.log("filterdArea GisStationsStaticDistrict:", filteredAreas);
+    console.log("GisSystemStatic:", GisSystemStatic);
+    console.log("allowedSystems:", allowedSystems);
 
     setStationListing(
       filteredAreas.map((area, index) => ({

components/pois/AddPoiModalWindow.js

@@ -1,8 +1,8 @@
 // components/pois/AddPoiModalWindow.js
 import React, { useState, useEffect } from "react";
 import Select from "react-select"; // Importiere react-select
-import { useSetRecoilState } from "recoil";
-import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
+import { useRecoilState } from "recoil";
+import { mapLayersState } from "../../store/atoms/mapLayersState";
 import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
 
 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
@@ -11,10 +11,33 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
-  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
+  const setTrigger = useRecoilState(poiReadFromDbTriggerAtom);
   const [locationDeviceData, setLocationDeviceData] = useState([]);
+  const [filteredDevices, setFilteredDevices] = useState([]); // Gefilterte Geräte
   const [deviceName, setDeviceName] = useState(null); // Verwende null für react-select
+  const [mapLayersVisibility] = useRecoilState(mapLayersState); // Um die aktiven Layer zu erhalten
 
+  // 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,
+  };
+
+  // API-Abfrage, um die Geräte zu laden
   useEffect(() => {
     const fetchInitialData = async () => {
       try {
@@ -24,7 +47,11 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         setpoiTypData(poiTypData);
 
         const locationDeviceData = await locationDeviceResponse.json();
+        console.log("Geräte von der API:", locationDeviceData); // Geräte-Daten aus der API anzeigen
         setLocationDeviceData(locationDeviceData);
+
+        // Filtere die Geräte basierend auf den sichtbaren Systemen
+        filterDevices(locationDeviceData);
       } catch (error) {
         console.error("Fehler beim Abrufen der Daten:", error);
       }
@@ -33,10 +60,32 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     fetchInitialData();
   }, []);
 
+  // Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
+  const filterDevices = (devices) => {
+    const activeSystems = Object.keys(mapLayersVisibility).filter((system) => mapLayersVisibility[system]);
+    console.log("Aktive Systeme:", activeSystems); // Anzeigen der aktiven Systeme
+
+    // Mappe aktive Systeme auf ihre ids
+    const activeSystemIds = activeSystems.map((system) => systemNameToIdMap[system]).filter((id) => id !== undefined);
+    console.log("Aktive System-IDs:", activeSystemIds); // Anzeigen der aktiven System-IDs
+
+    // Filtere die Geräte nach aktiven Systemen basierend auf idsystem_typ
+    const filtered = devices.filter((device) => activeSystemIds.includes(device.idsystem_typ));
+    console.log("Gefilterte Geräte:", filtered); // Gefilterte Geräte anzeigen
+
+    setFilteredDevices(filtered); // Setze die gefilterten Geräte
+  };
+
+  // Wenn mapLayersVisibility sich ändert, filtere die Geräte erneut
+  useEffect(() => {
+    if (locationDeviceData.length > 0) {
+      filterDevices(locationDeviceData);
+    }
+  }, [mapLayersVisibility, locationDeviceData]);
+
   const handleSubmit = async (event) => {
     event.preventDefault();
 
-    // Check for valid poiTypeId
     if (!poiTypeId) {
       alert("Bitte wählen Sie einen Typ aus.");
       return;
@@ -44,10 +93,10 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
 
     const formData = {
       name,
-      poiTypeId: poiTypeId.value, // Verwende den Wert von react-select
+      poiTypeId: poiTypeId.value,
       latitude,
       longitude,
-      idLD: locationDeviceData.find((device) => device.name === deviceName?.value).idLD,
+      idLD: filteredDevices.find((device) => device.name === deviceName?.value).idLD,
     };
 
     const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
@@ -59,7 +108,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     if (response.ok) {
       setTrigger((trigger) => trigger + 1);
       onClose();
-      // Browser aktualisieren
       window.location.reload();
     } else {
       console.error("Fehler beim Hinzufügen des POI");
@@ -76,53 +124,26 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     label: poiTyp.name,
   }));
 
-  const deviceOptions = locationDeviceData.map((device) => ({
+  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 (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
       <div className="flex flex-col mb-4">
-        {" "}
-        {/* Changed to flex-col for vertical alignment */}
         <label htmlFor="name" className="block mb-2 font-bold text-sm text-gray-700">
           Beschreibung :
         </label>
-        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Beschreibung der POI" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
+        <input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
       </div>
 
       {/* React Select for Devices */}
       <div className="flex flex-col mb-4">
-        {" "}
-        {/* Ensures consistent spacing */}
         <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
           Gerät :
         </label>
-        <Select
-          id="deviceName"
-          value={deviceName}
-          onChange={setDeviceName}
-          options={deviceOptions} // Options for filtering
-          placeholder="Gerät auswählen..." // Ensure the placeholder is always shown
-          isClearable={true} // Allow clearing the selection
-          styles={customStyles} // Apply custom styles
-        />
+        <Select id="deviceName" value={deviceName} onChange={setDeviceName} options={deviceOptions} placeholder="Gerät auswählen..." isClearable />
       </div>
 
       {/* React Select for POI Types */}
@@ -130,19 +151,10 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
           Typ:
         </label>
-        <Select
-          id="idPoiTyp"
-          value={poiTypeId}
-          onChange={setPoiTypeId}
-          options={poiTypeOptions} // Options for filtering
-          placeholder="Typ auswählen..."
-          styles={customStyles} // Apply custom styles
-        />
+        <Select id="idPoiTyp" value={poiTypeId} onChange={setPoiTypeId} options={poiTypeOptions} placeholder="Typ auswählen..." />
       </div>
 
       <div className="flex flex-row items-center justify-between mb-4">
-        {" "}
-        {/* Ensure proper alignment */}
         <div className="flex flex-col items-center">
           <label htmlFor="lat" className="block mb-2 text-xs text-gray-700">
             Lat : {latitude}

pages/api/talas5/location_device.js

@@ -7,26 +7,27 @@ export default async function handler(req, res) {
 
   let connection;
   try {
-    // SQL-Query and parameters
-    const sql = "SELECT idLD, iddevice, name FROM location_device ORDER BY name";
-    //const params = [160]; // Example parameter
+    // SQL-Query, um die Geräteinformationen aus location_device und devices zu erhalten
+    const sql = `
+      SELECT ld.idLD, ld.iddevice, ld.name, d.idsystem_typ 
+      FROM location_device ld
+      JOIN devices d ON ld.iddevice = d.iddevice
+      ORDER BY ld.name
+    `;
 
-    // Get a connection from the pool
     connection = await pool.getConnection();
 
-    // Execute the query
-    //const [results] = await connection.query(sql, params);
+    // Führe die Abfrage durch
     const [results] = await connection.query(sql);
 
-    // Check if results are empty
     if (!results.length) {
       return res.status(404).json({ error: "Keine Geräte gefunden" });
     }
 
-    // Respond with the results
+    // Geben Sie die Daten zurück
     res.status(200).json(results);
   } catch (error) {
-    // Log and return error
+    // Loggen Sie den Fehler und geben Sie ihn zurück
     console.error("Fehler beim Abrufen der Geräteinformationen:", error);
     res.status(500).json({ error: "Fehler beim Abrufen der Geräteinformationen" });
   } finally {

pages/api/talas_v5_DB/device/getDevices.js

@@ -0,0 +1,32 @@
+// /pages/api/talas_v5_DB/device/getDevices.js
+import getPool from "../../../../utils/mysqlPool"; // Import Singleton-Pool
+
+// API-Handler
+export default async function handler(req, res) {
+  const pool = getPool(); // Singleton-Pool verwenden
+
+  let connection;
+  try {
+    // Lade die Daten der aktiven Systeme aus localStorage, z.B. über einen Parameter oder Body
+    const { activeSystems } = req.body || []; // Array von aktiven system_typ IDs
+
+    // SQL-Query: Verknüpfe die Tabellen location_device, devices und system_typ
+    const sql = `SELECT * FROM devices`;
+
+    connection = await pool.getConnection();
+
+    // Führe die Abfrage mit den aktiven Systems durch
+    const [results] = await connection.query(sql);
+
+    if (!results.length) {
+      return res.status(404).json({ error: "Keine passenden Geräte gefunden" });
+    }
+
+    res.status(200).json(results);
+  } catch (error) {
+    console.error("Fehler beim Abrufen der gefilterten Geräteinformationen:", error);
+    res.status(500).json({ error: "Fehler beim Abrufen der Geräteinformationen" });
+  } finally {
+    if (connection) connection.release();
+  }
+}

utils/setupPolylines.js

@@ -25,7 +25,7 @@ export function disablePolylineEvents(polylines) {
 export function enablePolylineEvents(polylines, lineColors) {
   // Überprüfe, ob polylines definiert ist und ob es Elemente enthält
   if (!polylines || polylines.length === 0) {
-    console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
+    //console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
     return;
   }