nodeMap/components/PoiUpdateModal.js

// pages/api/poiUpdateModal.js 
//
import React, { useState, useEffect } from "react";

const PoiUpdateModal = ({ onClose, poiData }) => {
  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 [description, setDescription] = useState(
    poiData ? poiData.description : ""
  );

  // Log the initial POI data
  useEffect(() => {
    if (poiData) {
      setPoiId(poiData.idPoi);
      setName(poiData.name);
      setPoiTypeId(poiData.idPoiTyp);

      setDescription(poiData.description);
      console.log("Loaded POI Data for editing:", poiData);
      console.log("POI ID:", poiData.idPoi);
      console.log("POI Name:", poiData.name);
      console.log("POI Typ ID:", poiData.idPoiTyp);
      console.log("POI Beschreibung:", poiData.description);
      console.log("POI Geräte-ID:", poiData.idLD);
    }
  }, [poiData]);

  const fetchDeviceNameById = async (idLD) => {
    try {
      const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
      const data = await response.json();
      setDeviceName(data.deviceName);
    } catch (error) {
      console.error("Error fetching device name:", error);
    }
  };

  // Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
  useEffect(() => {
    const fetchDeviceId = async () => {
      if (poiData && poiData.idLD) {
        try {
          const response = await fetch(
            `/api/getDeviceIdById?idLD=${poiData.idLD}`
          );
          const data = await response.json();
          if (data) setDeviceName(data.name);
        } catch (error) {
          console.error("Fehler beim Abrufen der Geräteinformation:", error);
        }
      }
    };

    fetchDeviceId();
  }, [poiData]);

  // Function to handle deleting a POI
  const handleDeletePoi = async () => {
    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
      try {
        const response = await fetch(`/api/deletePoi?id=${poiId}`, {
          method: "DELETE",
        });
        if (response.ok) {
          alert("POI wurde erfolgreich gelöscht.");
          onClose(); // Close the modal
          //Browser neu laden, um die aktualisierte Liste anzuzeigen
          window.location.reload();
        } 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.");
      }
    }
  };

  // Fetch POI types
  useEffect(() => {
    const fetchPoiTypData = async () => {
      try {
        const response = await fetch("/api/readPoiTyp");
        const data = await response.json();
        //console.log("POI Typ Daten:", data);
        setPoiTypData(data);
        if (data && data.length > 0) {
          setPoiTypeId(data[0].idPoiTyp); // Set the first type as default
        }
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
      }
    };
    fetchPoiTypData();
  }, []);

  // Fetch device data
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("/api/talas_v5/location_device");
        const data = await response.json();
        //console.log("Standort- und Gerätedaten:", data);
        setLocationDeviceData(data);
        if (data.length > 0) {
          setDeviceName(data[0].name); // Set initial device name
        }
      } catch (error) {
        console.error(
          "Fehler beim Abrufen der Standort- und Gerätedaten:",
          error
        );
      }
    };
    fetchData();
  }, []);

  // Angenommen, deviceName enthält die Geräte-ID
const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const response = await fetch("/api/updatePoi", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        idPoi: poiId,
        name: name,
        description: description,
        idPoiTyp: poiTypeId,
        idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl
      }),
    });

    if (response.ok) {
      onClose();
      window.location.reload();
    } else {
      const errorResponse = await response.json();
      throw new Error(
        errorResponse.error || "Fehler beim Aktualisieren des POI."
      );
    }
  } catch (error) {
    console.error("Fehler beim Aktualisieren des POI:", error);
    alert("Fehler beim Aktualisieren des POI.");
  }
};



  


  return (
    <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
      <div className="flex items-center mb-4">
      <label htmlFor="description" className="block mr-2 flex-none">
    Beschreibung:
  </label>
  <input
    type="text"
    id="description"
    name="description"
    value={description}
    onChange={(e) => setDescription(e.target.value)}
    placeholder="Beschreibung 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.id}> {/* Stellen Sie sicher, dass device.id eine Ganzzahl ist */}
      {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.map((poiTyp, index) => (
            <option key={index} value={poiTyp.idPoiTyp}>
              {poiTyp.name}
            </option>
          ))}
        </select>
      </div>

      <button
        type="button" // Use button type to prevent form submission
        onClick={handleDeletePoi}
        className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4"
      >
        POI löschen
      </button>

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

export default PoiUpdateModal;