From 11b09c2cda80f74e0601e15fb0657b091fc2cc6c Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 16 May 2024 08:45:04 +0200
Subject: [PATCH] device location dropdaown menu

---
 components/ShowAddStationPopup.js     | 66 +++++++++++++++++++++++++++
 pages/api/talas_v5/location_device.js | 42 +++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 pages/api/talas_v5/location_device.js

diff --git a/components/ShowAddStationPopup.js b/components/ShowAddStationPopup.js
index a52a2ef11..5fb7a7eeb 100644
--- a/components/ShowAddStationPopup.js
+++ b/components/ShowAddStationPopup.js
@@ -14,6 +14,8 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   const [longitude] = useState(latlng.lng.toFixed(5));
   const setLoadData = useSetRecoilState(readPoiMarkersStore);
   const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
+  const [locationDeviceData, setLocationDeviceData] = useState([]);
+  const [deviceName, setDeviceName] = useState("");
 
   /*   useEffect(() => {
     if (map && loadData) {
@@ -81,6 +83,50 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
       map.closePopup();
     }
   };
+  //---------------------------------------------------------------------------------------
+  useEffect(() => {
+    // Funktion zum Abrufen der Daten von der API -> DB talas_v5.location_device
+    const fetchData = async () => {
+      try {
+        const response = await fetch("/api/talas_v5/location_device"); // Pfad zu Ihrem API-Endpunkt
+        const data = await response.json();
+        setLocationDeviceData(data); // Setzt den Zustand mit den abgerufenen Daten
+        console.log("Abgerufene Standort- und Gerätedaten:", data);
+      } catch (error) {
+        console.error(
+          "Fehler beim Abrufen der Standort- und Gerätedaten:",
+          error
+        );
+      }
+    };
+
+    fetchData();
+  }, []); // Leerarray als Dependency, um den Effekt nur beim Laden der Komponente auszuführen
+
+  //------------------------------------------------------------------------------------------
+  useEffect(() => {
+    // Funktion zum Abrufen der Daten von der API -> DB talas_v5.location_device
+    const fetchData = async () => {
+      try {
+        const response = await fetch("/api/talas_v5/location_device");
+        const data = await response.json();
+        setLocationDeviceData(data);
+        if (data.length > 0) {
+          setDeviceName(data[0].name); // Setzen des anfänglichen Gerätenamens
+        }
+        console.log("Abgerufene Standort- und Gerätedaten:", data);
+      } catch (error) {
+        console.error(
+          "Fehler beim Abrufen der Standort- und Gerätedaten:",
+          error
+        );
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  //------------------------------------------------------------------------------------------
 
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
@@ -117,6 +163,26 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
             ))}
         </select>
       </div>
+      {/* {locationDeviceData.----------------------------------------------*/}
+      <div className="flex items-center mb-4">
+        <label htmlFor="deviceName" className="block mr-2 flex-none">
+          deviceName:
+        </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"
+        >
+          {locationDeviceData.map((device, index) => (
+            <option key={index} value={device.name}>
+              {device.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      {/* {locationDeviceData.----------------------------------------------*/}
       <div className="flex items-center mb-4">
         <label htmlFor="lat" className="block mr-2 flex-none">
           Breitengrad:
diff --git a/pages/api/talas_v5/location_device.js b/pages/api/talas_v5/location_device.js
new file mode 100644
index 000000000..8a41f779e
--- /dev/null
+++ b/pages/api/talas_v5/location_device.js
@@ -0,0 +1,42 @@
+// pages/api/talas_v5/location_device.js
+// talas_v5 Datenbank -> location_device Tabelle enthält DAUZ Geräte
+
+import mysql from "mysql";
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+console.log("my dbconfig: ", dbConfig);
+export default function handler(req, res) {
+  const connection = mysql.createConnection(dbConfig);
+
+  connection.connect((err) => {
+    if (err) {
+      console.error("Fehler beim Verbinden:", err.stack);
+      res.status(500).json({ error: "Verbindungsfehler zur Datenbank" });
+      return;
+    }
+
+    console.log("Verbunden als ID", connection.threadId);
+    //Fehler weil, existiertdie Tabelle auf localhost:3000 nicht
+    connection.query(
+      "SELECT idLD, iddevice, iddevice, name FROM location_device WHERE iddevice = 160",
+      (error, results) => {
+        if (error) {
+          console.error("Fehler beim Abrufen der API", error);
+          res.status(500).json({ error: "Fehler bei der Abfrage" });
+          return;
+        }
+
+        // Wichtig: Senden Sie die Antwort zurück
+        res.status(200).json(results);
+
+        connection.end();
+      }
+    );
+  });
+}