Merge branch 'feature/dropdown-filter' into develop

.env.local

@@ -11,10 +11,9 @@
 #########################
 
 #NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
-#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
+#NEXT_PUBLIC_SERVER_URL="http://10.10.0.30"
 #NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.30"
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png"
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 #########################
 
 

components/DataSheet.js

@@ -38,6 +38,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, use } from "react";
+import React, { useState, useEffect } from "react";
-import ReactDOM from "react-dom";
+import Select from "react-select"; // Importiere react-select
-import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
+import { useSetRecoilState, useRecoilState } from "recoil";
-import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
+import { mapLayersState } from "../../store/atoms/mapLayersState";
 import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
 
 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
@@ -12,11 +12,33 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
-  const setLoadData = useSetRecoilState(readPoiMarkersStore);
+  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom); // Verwende useSetRecoilState
-  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
   const [locationDeviceData, setLocationDeviceData] = useState([]);
-  const [deviceName, setDeviceName] = 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 {
@@ -33,11 +55,11 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         }
 
         const locationDeviceData = await locationDeviceResponse.json();
+        console.log("Geräte von der API:", locationDeviceData); // Geräte-Daten aus der API anzeigen
         setLocationDeviceData(locationDeviceData);
 
-        if (locationDeviceData.length > 0) {
+        // Filtere die Geräte basierend auf den sichtbaren Systemen
-          setDeviceName(locationDeviceData[0].name); // Set initial device name
+        filterDevices(locationDeviceData);
-        }
       } catch (error) {
         console.error("Fehler beim Abrufen der Daten:", error);
       }
@@ -46,16 +68,43 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     fetchInitialData();
   }, []);
 
-  //------------------------------------------------------------------------------------------
+  // Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
-  //-----------------handleSubmit-------------------
+  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();
+
+    if (!poiTypeId) {
+      alert("Bitte wählen Sie einen Typ aus.");
+      return;
+    }
+
     const formData = {
       name,
-      poiTypeId,
+      poiTypeId: poiTypeId.value,
       latitude,
       longitude,
-      idLD: locationDeviceData.find((device) => device.name === deviceName).idLD,
+      idLD: filteredDevices.find((device) => device.name === deviceName?.value).idLD,
     };
 
     const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
@@ -65,15 +114,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     });
 
     if (response.ok) {
-      setTrigger((trigger) => {
+      setTrigger((trigger) => trigger + 1); // Verwenden des Triggers zur Aktualisierung
-        //console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
+      onClose();
-        const newTrigger = trigger + 1;
-        //console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
-        onClose();
-        return newTrigger;
-      });
-
-      // Browser aktualisieren
       window.location.reload();
     } else {
       console.error("Fehler beim Hinzufügen des POI");
@@ -84,47 +126,84 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     }
   };
 
-  //-----------------handleSubmit-------------------
+  // 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
+    }),
+  };
+
+  // Style für größere Breite des Modals und für Inputs
+  const modalStyles = {
+    // width: "300px", // größere Breite für das Modal
+    //maxWidth: "100%", // responsive, passt sich an
+    //padding: "20px", // Polsterung für das Modal
+    //backgroundColor: "white", // Hintergrundfarbe
+    //borderRadius: "8px", // Abgerundete Ecken
+    //boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)", // Schatten für das Modal
+  };
 
   return (
-    <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
+    <form onSubmit={handleSubmit} style={modalStyles} className="m-0 p-2 w-full">
-      <div className="flex items-center mb-4">
+      <div className="flex flex-col mb-4">
-        <label htmlFor="name" className="block mr-2 flex-none">
+        <label htmlFor="name" className="block mb-2 font-bold text-sm text-gray-700">
-          Name :
+          Beschreibung :
         </label>
-        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" 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>
 
-      {/* {locationDeviceData.----------------------------------------------*/}
+      {/* React Select for Devices */}
-      <div className="flex items-center mb-4">
+      <div className="flex flex-col mb-4">
-        <label htmlFor="deviceName" className="block mr-2 flex-none">
+        <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
           Gerät :
         </label>
-        <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+        <Select
-          {locationDeviceData.map((device, index) => (
+          id="deviceName"
-            <option key={index} value={device.name}>
+          value={deviceName}
-              {device.name}
+          onChange={setDeviceName}
-            </option>
+          options={deviceOptions}
-          ))}
+          placeholder="Gerät auswählen..."
-        </select>
+          isClearable
+          styles={customStyles} // Apply custom styles here
+        />
       </div>
       {/* {locationDeviceData.----------------------------------------------*/}
       <div className="flex items-center mb-4">
         <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
           Typ:
         </label>
-        <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+        <Select
-          {poiTypData &&
+          id="idPoiTyp"
-            poiTypData.map((poiTyp, index) => (
+          value={poiTypeId}
-              <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
+          onChange={setPoiTypeId}
-                {poiTyp.name}
+          options={poiTypeOptions}
-              </option>
+          placeholder="Typ auswählen..."
-            ))}
+          styles={customStyles} // Apply custom styles here
-        </select>
+        />
       </div>
-      <div className="flex flex-row items-center justify-center">
+
-        <div className="flex items-center mb-4">
+      <div className="flex flex-row items-center justify-between mb-4">
-          <label htmlFor="lat" className="block mr-2 flex-none text-xs">
+        <div className="flex flex-col items-center">
+          <label htmlFor="lat" className="block mb-2 text-xs text-gray-700">
             Lat : {latitude}
           </label>
         </div>

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 currentPoi = useRecoilState(currentPoiState);
-  const selectedPoi = useRecoilValue(selectedPoiState);
+  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()}>

hooks/useLineData.js

@@ -144,7 +144,15 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
       }
     };
 
+    const scheduleNextFetch = () => {
+      if (!isCancelled) {
+        fetchData();
+        setTimeout(scheduleNextFetch, 30000);
+      }
+    };
+
     fetchData();
+    scheduleNextFetch();
 
     // Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen
     //const intervalId = setInterval(fetchData, 20000);

pages/api/talas5/location_device.js

@@ -7,25 +7,27 @@ export default async function handler(req, res) {
 
   let connection;
   try {
-    // SQL-Query and parameters
+    // SQL-Query, um die Geräteinformationen aus location_device und devices zu erhalten
-    const sql = "SELECT idLD, iddevice, name FROM location_device WHERE iddevice = ?";
+    const sql = `
-    const params = [160]; // Example parameter
+      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
+    // Führe die Abfrage durch
-    const [results] = await connection.query(sql, params);
+    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/station/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

@@ -20,6 +20,13 @@ export function disablePolylineEvents(polylines) {
 
 // Funktion zum Aktivieren der Polyline-Ereignisse
 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.");
+    return;
+  }
+
+  // Falls Polylinien vorhanden sind, wende die Events an
   polylines.forEach((polyline) => {
     polyline.on("mouseover", (e) => {
       //console.log("Mouseover on polyline", polyline.options);
@@ -191,6 +198,36 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
       localStorage.setItem("lastElementType", "polyline");
       localStorage.setItem("polylineLink", link);
     });
+     */
+    // Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
+    polyline.on("contextmenu", function (e) {
+      const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
+      const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
+
+      const startTime = Date.now(); // Startzeit erfassen
+      localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage
+
+      // Starte einen Intervall-Timer, um die Differenz zu berechnen
+      const countdownInterval = setInterval(() => {
+        const currentTime = Date.now();
+        const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden
+
+        // Speichern der abgelaufenen Zeit in localStorage
+        localStorage.setItem("contextMenuCountdown", elapsedTime);
+
+        // Wenn die Zeit 17 Sekunden erreicht, schließe das Menü
+        if (elapsedTime >= 17) {
+          clearInterval(countdownInterval);
+          const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü
+          contextMenu.hide(); // Kontextmenü schließen
+        }
+      }, 1000); // Jede Sekunde
+
+      const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 30);
+      if (countdown >= 28) {
+        closeMenu();
+      }
+    });
 
     polylines.push(polyline);
     markers.push(...lineMarkers);