Merge branch 'neuer-branch' into Dev

2024-06-07 13:26:10 +02:00
parent 11a5fe0393 4b7a74647a
commit d5b73f8166
15 changed files with 1739 additions and 9 deletions
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -1,4 +1,8 @@
 // components/MapComponent.js
+<<<<<<< HEAD
+=======
+
+>>>>>>> neuer-branch
 import React, {
  useEffect,
  useRef,
@@ -6,7 +10,10 @@ import React, {
  useMemo,
  useCallback,
 } from "react";
+<<<<<<< HEAD
 //import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
+=======
+>>>>>>> neuer-branch
 import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";

 import L, { marker } from "leaflet";
@@ -48,12 +55,16 @@ const plusRoundIcon = L.icon({
 });

 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+<<<<<<< HEAD
  /*   const linePositions = lineCoordinates || [
    [52.505, 8],
    [52, 8.5],
    [51.5, 8],
    [52.505, 8],
  ]; */
+=======
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+>>>>>>> neuer-branch

  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);

@@ -104,15 +115,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
      return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
    }

-    console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
-    console.log("Selected Marker Description:", marker.options.description);
+    //console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
+    //console.log("Selected Marker Description:", marker.options.description);

    setCurrentPoiData({
      idPoi: marker.options.id,
      name: marker.options.name,
      description: marker.options.description,
    });
-    console.log("POI-Daten1:", currentPoiData);
+    //console.log("POI-Daten1:", currentPoiData);

    fetchPoiData(marker.options.id);

@@ -131,7 +142,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
      name: data.name,
      description: data.description,
    });
-    console.log("POI-Daten2:", currentPoiData);
+    //console.log("POI-Daten2:", currentPoiData);
    setShowPoiUpdateModal(true);
  };

@@ -157,7 +168,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  const lineLayer = new L.LayerGroup();

  const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
+<<<<<<< HEAD
  const baseUrl = "http://localhost/talas5/devices/";
+=======
+  const baseUrl = "http://10.10.0.13/talas5/devices/";
+  //const baseUrl = "http://localhost/talas5/devices/";
+>>>>>>> neuer-branch
  const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
  const [poiTypMap, setPoiTypMap] = useState(new Map());
  const [showPopup, setShowPopup] = useState(false);
@@ -170,9 +186,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {

  const handleAddStation = (stationData) => {
    // Station-Daten speichern oder API-Aufruf durchführen
+<<<<<<< HEAD
    console.log("Neue Station:", userRights.includes(56));

    console.log("Neue Station:", stationData);
+=======
+    //console.log("Neue Station:", userRights.includes(56));
+
+    //console.log("Neue Station:", stationData);
+>>>>>>> neuer-branch
    setShowAddStationPopup(false);
    closePopup(); // Schließt das Popup nach dem Hinzufügen
  };
@@ -261,7 +283,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  // Funktion zum Öffnen in einem neuen Tab
  function openInNewTab(e, marker) {
    if (marker && marker.options && marker.options.link) {
-      console.log("Marker data:", baseUrl + marker.options.link);
+      //console.log("Marker data:", baseUrl + marker.options.link);
      window.open(baseUrl + marker.options.link, "_blank");
    } else {
      console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
@@ -271,7 +293,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  // Funktion zum Öffnen im gleichen Fenster
  function openInSameWindow(e, marker) {
    if (marker && marker.options && marker.options.link) {
-      console.log("Marker data:", baseUrl + marker.options.link);
+      //console.log("Marker data:", baseUrl + marker.options.link);
      window.location.href = baseUrl + marker.options.link;
    } else {
      console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
@@ -344,7 +366,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  ); // Keine Abhängigkeiten, da `hasRights` als Parameter übergeben wird */
  const addStationCallback = useCallback(
    (event) => {
+<<<<<<< HEAD
      console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
+=======
+      //console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
+>>>>>>> neuer-branch
      if (hasRights) {
        setPopupCoordinates(event.latlng);
        setShowPopup(true);
@@ -358,7 +384,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
          draggable: true,
          progress: undefined,
        });
+<<<<<<< HEAD
        console.log("Benutzer hat keine Berechtigung zum Hinzufügen.");
+=======
+        console.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
+>>>>>>> neuer-branch
      }
    },
    [hasRights]
@@ -725,7 +755,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  const port = url.port; // Gibt den Port zurück, leer wenn Standardport verwendet wird
  const protocol = url.protocol; // "http:" oder "https:"
  //const serverURL = `${protocol}//${hostname}`;
+<<<<<<< HEAD
  const serverURL = "http://localhost"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse)
+=======
+  const serverURL = "http://10.10.0.13"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse)
+>>>>>>> neuer-branch
  //const serverURL = "http://localhost:3000";

  const params = new URL(window.location.href).searchParams;
@@ -747,16 +781,26 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
      const userRightsIds = rightsArray.map((right) => right.IdRight);
      setUserRights(userRightsIds); // Speichert die Rechte in den Zustand

+<<<<<<< HEAD
      console.log("Benutzerrechte:", rightsArray);
      console.log("Benutzerrechte IDs:", userRightsIds);
      console.log("Benutzerrechte in if :", userRightsIds.includes(56));
+=======
+      //console.log("Benutzerrechte:", rightsArray);
+      //console.log("Benutzerrechte IDs:", userRightsIds);
+      //console.log("Benutzerrechte in if :", userRightsIds.includes(56));
+>>>>>>> neuer-branch
      setHasRights(userRightsIds.includes(56));
    } catch (error) {
      console.error("Fehler beim Abrufen der Benutzerrechte", error);
    }
  };
  useEffect(() => {
+<<<<<<< HEAD
    console.log("Aktualisierter Status von hasRights: ", hasRights);
+=======
+    //console.log("Aktualisierter Status von hasRights: ", hasRights);
+>>>>>>> neuer-branch
  }, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert.

  // Überprüfen der Benutzerrechte beim Initialisieren der Komponente
@@ -1093,13 +1137,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
        // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
      });
    };
-    console.log("trigger in MapComponent.js:", poiReadTrigger);
+    //console.log("trigger in MapComponent.js:", poiReadTrigger);
  }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
  //------------------------------------------
  function editPoi(marker) {
    // Zugriff auf die Markerdaten
    const markerId = marker.options.id;
-    console.log("Bearbeiten des POI mit ID:", markerId);
+    //console.log("Bearbeiten des POI mit ID:", markerId);

    // Hier könnte ein Modal mit Formular geöffnet werden
    // Beispiel: openEditModal(markerId);
@@ -1137,6 +1181,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
      }).addTo(map);
    }
  }, [map]); */
+<<<<<<< HEAD
  const addItemsToMapContextMenu = () => {
    console.log("contextMenuItems hasRights:", hasRights);

@@ -1150,15 +1195,41 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  //--------------------------------------------------
  useEffect(() => {
    if (map && poiLayerRef.current && isPoiTypLoaded) {
+=======
+
+  const addItemsToMapContextMenu = () => {
+    if (!menuItemAdded) {
+      //console.log("contextMenuItems hasRights:", hasRights);
+
+      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
+    }
+  };
+
+  useEffect(() => {
+    if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {
+>>>>>>> neuer-branch
      addItemsToMapContextMenu();
    }
  }, [
    map,
+<<<<<<< HEAD
    locations,
    onLocationUpdate,
    poiReadTrigger,
    isPoiTypLoaded,
    userRights,
+=======
+    poiLayerRef,
+    isPoiTypLoaded,
+    menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
+>>>>>>> neuer-branch
  ]);
  //------------------------------------------

@@ -1171,7 +1242,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
      const response = await fetch("/api/poi-icons");
      const data = await response.json();
      setPoiData(data);
+<<<<<<< HEAD
      console.log("poiData icons:", data);
+=======
+      //console.log("poiData icons:", data);
+>>>>>>> neuer-branch
    };

    fetchPoiData();
@@ -1186,7 +1261,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
        const { latitude, longitude } = parsePoint(location.position);
        const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
        const deviceName = await fetchDeviceNameById(location.idLD);
+<<<<<<< HEAD
        console.log("location.icon:", location);
+=======
+        //console.log("location.icon:", location);
+>>>>>>> neuer-branch

        // Check if user has the right to drag the marker
        const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes
@@ -1252,7 +1331,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
              onLocationUpdate(markerId, newLat, newLng);
            });
          } else {
-            console.log("Drag operation not allowed");
+            console.error("Drag operation not allowed");
          }
        });
        //poiLayer ein - oder ausschalten
@@ -2037,6 +2116,42 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
    ulafMarkers,
  ]);

+  //LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
+  const [linePositions, setLinePositions] = useState([]);
+
+  useEffect(() => {
+    const endpoint = "/api/readGisLines";
+
+    fetch(endpoint)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log("readGisLines API Response:", data);
+
+        if (!Array.isArray(data)) {
+          throw new Error("Data is not an array");
+        }
+
+        const newLinePositions = data.map((item) => {
+          if (item.points && Array.isArray(item.points)) {
+            return item.points.map((point) => [point.x, point.y]);
+          } else {
+            throw new Error("Points missing or not an array");
+          }
+        });
+
+        console.log("Transformed Line Positions:", newLinePositions);
+        setLinePositions(newLinePositions);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error.message);
+      });
+  }, []);
+
  //---------------------------------------------------------

  return (