Merge branch 'develop' of http://10.10.0.12:3000/ISA/nodeMap into develop

components/CircleIcon.js

@@ -0,0 +1,13 @@
+// /components/CircleIcon.js
+// Custom circle icon for draggable markers
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+const circleIcon = L.divIcon({
+  className: "custom-div-icon",
+  html: "<div style='background-color:gray;border-radius:50%;width:10px;height:10px;border: solid black 1px;'></div>",
+  iconSize: [25, 25],
+  iconAnchor: [5, 5],
+});
+
+export default circleIcon;

components/EndIcon.js

@@ -0,0 +1,10 @@
+// Custom circle icon for draggable markers
+import L from "leaflet";
+const endIcon = L.divIcon({
+  className: "custom-end-icon",
+  html: "<div style='background-color: gray; width: 14px; height: 14px; border: solid black 2px;'></div>", // Graues Viereck
+  iconSize: [14, 14],
+  iconAnchor: [7, 7], // Mittelpunkt des Vierecks als Anker
+});
+
+export default endIcon;

components/PoiUpdateModal.js

@@ -1,5 +1,5 @@
 // pages/api/poiUpdateModal.js
-//
+
 import React, { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { selectedPoiState } from "../store/atoms/poiState";
@@ -15,52 +15,24 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [deviceName, setDeviceName] = useState("");
   const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
-  const [idLocationDevice, setIdLocationDevice] = useState("");
 
   const [description, setDescription] = useState(
     poiData ? poiData.description : ""
   );
 
-  // Log the initial POI data
   useEffect(() => {
     if (poiData) {
+      console.log("Initial poiData:", poiData);
       setPoiId(poiData.idPoi);
       setName(poiData.name);
       setPoiTypeId(poiData.idPoiTyp);
       setIdLD(poiData.idLD);
-
       setDescription(poiData.description);
       setDeviceName(poiData.idLD);
       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);
-    }
-  }; */
-
-  /*     const fetchDeviceNameById = async (idLD) => {
-    try {
-      const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?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) {
@@ -82,7 +54,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     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 {
@@ -94,8 +65,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
         );
         if (response.ok) {
           alert("POI wurde erfolgreich gelöscht.");
-          onClose(); // Close the modal
-          //Browser neu laden, um die aktualisierte Liste anzuzeigen
+          onClose();
           window.location.reload();
         } else {
           throw new Error("Fehler beim Löschen des POI.");
@@ -107,7 +77,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   };
 
-  // Fetch POI types
   useEffect(() => {
     const fetchPoiTypData = async () => {
       try {
@@ -127,22 +96,20 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     fetchPoiTypData();
   }, [selectedPoi]);
 
-  // Fetch device data um den Gerät Namen in den dropdown menu anzuzeigen also erstmal die Liste der Geräte abrufen
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch("/api/talas_v5/location_device");
+        // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
+        const response = await fetch(
+          "/api/talas_v5_DB/locationDevice/locationDevices"
+        );
         const data = await response.json();
-        //console.log("Standort- und Gerätedaten:", data);
         setLocationDeviceData(data);
-        console.log("Standort- und Gerätedaten poiData:", poiData);
         if (poiData && poiData.idLD) {
           const selectedDevice = data.find(
             (device) => device.id === poiData.idLD
           );
-          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); // Hier wird die ID als initialer Zustand gesetzt
-          console.log("Selected Device:", selectedDevice);
-          console.log("Selected devciceName:", deviceName);
+          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
         }
       } catch (error) {
         console.error(
@@ -153,18 +120,12 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     };
     fetchData();
   }, []);
-  //--------------------------------------------------------------------------------------------
-  // Fetch device name basierend auf der Geräte-ID
 
   useEffect(() => {
-    console.log("currentPoi von PoiUpdateModal.js : ", currentPoi.idLD);
     fetch("/api/talas_v5_DB/locationDevice/locationDevices")
       .then((response) => response.json())
       .then((data) => {
         setLocationDeviceData(data);
-        console.log("Standort- und Gerätedaten 3:", data);
-        console.log("Standort- und Gerätedaten 3 poiData:", poiData);
-        // Findet das Gerät, das der aktuellen IDLD entspricht
         const currentDevice = data.find(
           (device) => device.idLD === currentPoi.idLD
         );
@@ -178,10 +139,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       });
   }, [poiData?.idLD, currentPoi]);
 
-  //--------------------------------------------------------------------------------------------
-  // 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();
     const idLDResponse = await fetch(
@@ -201,7 +158,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           description: description,
           idPoiTyp: poiTypeId,
           idLD: idLD,
-          //idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl
         }),
       });
 
@@ -220,19 +176,6 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
     }
   };
 
-  //ausgewählte poi Informationen in Console anzeigen
-  console.log("Selected POI:", selectedPoi);
-  console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id);
-  console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ); //als Typ in dropdown menu
-  console.log(
-    "Selected POI Beschreibung in poiUpdateModal.js:",
-    selectedPoi.description
-  );
-  console.log(
-    "Selected POI Gerät deviceId in poiUpdateModal.js:",
-    selectedPoi.deviceId
-  );
-
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
       <div className="flex items-center mb-4">
@@ -261,16 +204,11 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
           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) => (
-              console.log("device.id und name:", device),
-              (
-                <option key={index} value={device.id}>
-                  {device.name}
-                </option>
-              )
-            )
-          )}
+          {locationDeviceData.map((device, index) => (
+            <option key={index} value={device.id}>
+              {device.name}
+            </option>
+          ))}
         </select>
       </div>
 
@@ -294,7 +232,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
       </div>
 
       <button
-        type="button" // Use button type to prevent form submission
+        type="button"
         onClick={handleDeletePoi}
         className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4"
       >

components/ShowAddStationPopup.js

@@ -109,6 +109,9 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
         onClose();
         return newTrigger;
       });
+
+      // Browser aktualisieren
+      window.location.reload();
     } else {
       console.error("Fehler beim Hinzufügen des POI");
     }
@@ -117,6 +120,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
       map.closePopup();
     }
   };
+
   //-----------------handleSubmit-------------------
 
   return (

components/StartIcon.js

@@ -0,0 +1,16 @@
+// Custom triangle icon for draggable markers
+import L from "leaflet";
+
+const startIcon = L.divIcon({
+  className: "custom-start-icon",
+  html: `
+    <svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <polygon points="10,2 18,18 2,18" fill="black" />
+      <polygon points="10,5 16,16 4,16" fill="gray" />
+    </svg>
+  `, // Schwarzes Dreieck innerhalb eines grauen Dreiecks
+  iconSize: [18, 18],
+  iconAnchor: [9, 18],
+});
+
+export default startIcon;

components/useMapContextMenu.js

@@ -0,0 +1,22 @@
+import { useState, useCallback } from "react";
+
+const useMapContextMenu = (map, hasRights, addStationCallback) => {
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+
+  const addItemsToMapContextMenu = useCallback(() => {
+    if (map && !menuItemAdded) {
+      map.contextmenu.addItem({
+        text: "POI hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: (event) => addStationCallback(event, hasRights),
+      });
+
+      setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
+    }
+  }, [map, menuItemAdded, hasRights, addStationCallback]);
+
+  return { addItemsToMapContextMenu };
+};
+
+export default useMapContextMenu;