polylines tooltip content

2024-08-10 10:32:37 +02:00
parent b1f7b700ca
commit b7116a1e6f
142 changed files with 14451 additions and 4281 deletions
--- a/components/pois/AddPoiModalWindow.js
+++ b/components/pois/AddPoiModalWindow.js
@@ -0,0 +1,145 @@
+// components/pois/AddPoiModalWindow.js
+import React, { useState, useEffect, use } from "react";
+import ReactDOM from "react-dom";
+import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
+import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
+import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
+
+const AddPoiModalWindow = ({ 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 fetchInitialData = async () => {
+      try {
+        const [poiTypResponse, locationDeviceResponse] = await Promise.all([fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"), fetch("/api/talas5/location_device")]);
+
+        const poiTypData = await poiTypResponse.json();
+        setpoiTypData(poiTypData);
+
+        if (poiTypData.length > 0) {
+          setPoiTypeId(poiTypData[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
+          if (poiTypData[1]) {
+            setPoiTypeName(poiTypData[1].name);
+          }
+        }
+
+        const locationDeviceData = await locationDeviceResponse.json();
+        setLocationDeviceData(locationDeviceData);
+
+        if (locationDeviceData.length > 0) {
+          setDeviceName(locationDeviceData[0].name); // Set initial device name
+        }
+      } catch (error) {
+        console.error("Fehler beim Abrufen der Daten:", error);
+      }
+    };
+
+    fetchInitialData();
+  }, []);
+
+  //------------------------------------------------------------------------------------------
+  //-----------------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;
+      });
+
+      // Browser aktualisieren
+      window.location.reload();
+    } else {
+      console.error("Fehler beim Hinzufügen des POI");
+    }
+
+    if (map && typeof map.closePopup === "function") {
+      map.closePopup();
+    }
+  };
+
+  //-----------------handleSubmit-------------------
+
+  return (
+    <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>
+
+      {/* {locationDeviceData.----------------------------------------------*/}
+      <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>
+      {/* {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">
+          {poiTypData &&
+            poiTypData.map((poiTyp, index) => (
+              <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
+                {poiTyp.name}
+              </option>
+            ))}
+        </select>
+      </div>
+      <div className="flex flex-row items-center justify-center">
+        <div className="flex items-center mb-4">
+          <label htmlFor="lat" className="block mr-2 flex-none text-xs">
+            Lat : {latitude}
+          </label>
+        </div>
+        <div className="flex items-center mb-4">
+          <label htmlFor="lng" className="block mr-2 flex-none text-xs">
+            Lng : {longitude}
+          </label>
+        </div>
+      </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>
+  );
+};
+
+export default AddPoiModalWindow;