device location dropdaown menu

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: