nodeMap/components/AddPOIModal.js

// components/ShowAddStationPopup.js
import React, { useState, useEffect, use } from "react";
import ReactDOM from "react-dom";
import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStoreSlice.js";
import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice.js";

const ShowAddStationPopup = ({ onClose, map, latlng }) => {
  const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
  const [name, setName] = useState("");
  const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
  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);
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [deviceName, setDeviceName] = useState("");

  useEffect(() => {
    const fetchpoiTypData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
        const data = await response.json();
        setpoiTypData(data);
        if (data && data.length > 0) {
          setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
          setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
          console.log("Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp);
        }
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
      }
    };

    fetchpoiTypData();
  }, []);

  //---------------------------------------------------------------------------------------
  /*   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/talas5/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();
  }, []);

  //------------------------------------------------------------------------------------------
  //-----------------handleSubmit-------------------
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = {
      name,
      poiTypeId,
      latitude,
      longitude,
      idLD: locationDeviceData.find((device) => device.name === deviceName).idLD,
    };

    const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData),
    });

    if (response.ok) {
      setTrigger((trigger) => {
        console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
        const newTrigger = trigger + 1;
        console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
        onClose();
        return newTrigger;
      });
    } else {
      console.error("Fehler beim Hinzufügen des POI");
    }

    if (map && typeof map.closePopup === "function") {
      map.closePopup();
    }
  };
  //-----------------handleSubmit-------------------

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[1000]" onClick={onClose}>
      <div className="relative bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
        {/* Schließen-Button */}
        <button onClick={onClose} className="absolute top-2 right-2 text-gray-600 hover:text-gray-900">
          ✖
        </button>

        {/* Modal-Inhalt */}
        <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
          <div className="flex items-center mb-4">
            <label htmlFor="name" className="block mr-2 flex-none">
              Name:
            </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" />
          </div>

          <div className="flex items-center mb-4">
            <label htmlFor="deviceName" className="block mr-2 flex-none">
              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">
              {locationDeviceData.map((device, index) => (
                <option key={index} value={device.name}>
                  {device.name}
                </option>
              ))}
            </select>
          </div>

          <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">
              {poiTypData &&
                poiTypData.map((poiTyp, index) => (
                  <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
                    {poiTyp.name}
                  </option>
                ))}
            </select>
          </div>

          <div className="flex justify-between text-sm text-gray-700 mb-4">
            <span>Lat: {latitude}</span>
            <span>Lng: {longitude}</span>
          </div>

          <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
            POI hinzufügen
          </button>
        </form>
      </div>
    </div>
  );
};

export default ShowAddStationPopup;