Retrieve data through proxy [...path]

components/MapComponent.js

@@ -1,17 +1,128 @@
+// components/MapComponent.js
 import React, { useEffect, useRef, useState } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import "leaflet-contextmenu";
+import * as config from '../config/config.js';
 const MapComponent = ({ locations, onLocationUpdate }) => {
-  const mapRef = useRef(null);
-  const [map, setMap] = useState(null);
-  const [online, setOnline] = useState(navigator.onLine);
+  const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
+  const [map, setMap] = useState(null); // Zustand der Karteninstanz
+  const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
+  const [dataStatic, setDataStatic] = useState([]); // Zustand für statische Daten
+  const [dataStatus, setDataStatus] = useState([]); // Zustand für Statusdaten
+  const [dataIcons, setDataIcons] = useState([]); // Zustand für Icons
+  const [dataSystem, setDataSystem] = useState([]); // Zustand für Systemdaten
+
+    // Konstanten für die URLs
+    const mapDataStaticUrl = config.mapDataStaticUrl;
+    const mapDataStatusUrl = config.mapDataStatusUrl;
+    const mapDataIconUrl = config.mapDataIconUrl;
+    const mapDataSystemUrl = config.mapDataSystemUrl;
+
+    console.log('dataStatic hier :', dataStatic);
+    console.log('map:', map);
+    //------------------------------------------
+    useEffect(() => {
+      const fetchData = async () => {
+        try {
+          console.log("Datenabruf gestartet...");
+          const response = await fetch(config.mapDataStaticUrl);
+          const jsonResponse = await response.json();
+    
+          // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+          if (jsonResponse && jsonResponse.length > 0 && jsonResponse[0].points) {
+            console.log('dataStatic hier :', dataStatic);
+            console.log('map:', map);
+            setDataStatic(jsonResponse[0].points); // Zugriff auf das erste Objekt und dessen points-Array
+          } else {
+            console.error('Erwartete Daten im "points"-Array nicht gefunden', jsonResponse);
+            setDataStatic([]);
+          }
+        } catch (error) {
+          console.error("Fehler beim Laden der Daten: ", error);
+          setDataStatic([]);
+        }
+      };
+    
+      fetchData();
+    }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+    
+        
+//------------------------------------------
+    useEffect(() => {
+      // Prüfen der Internetverbindung beim Start
+      console.log("Prüfen der Internetverbindung...");
+      checkInternet();
+  
+      // Asynchrones Laden der Kartendaten beim Initialisieren der Komponente
+      const fetchData = async () => {
+        try {
+          console.log("Datenabruf gestartet...");
+          const responses = await Promise.all([
+            fetch(config.mapDataStaticUrl).then(res => res.json()),
+            fetch(config.mapDataStatusUrl).then(res => res.json()),
+            fetch(config.mapDataIconUrl).then(res => res.json()),
+            fetch(config.mapDataSystemUrl).then(res => res.json())
+          ]);
+          console.log("Daten erfolgreich geladen.");
+          setDataStatic(responses[0].Points);
+          setDataStatus(responses[1].Statis);
+          setDataIcons(responses[2].List);
+          setDataSystem(responses[3].Systems.filter(system => system.Allow === 1));
+        } catch (error) {
+          console.error("Fehler beim Laden der Daten: ", error);
+        }
+      };
+  
+      fetchData();
+    }, []);// Leeres Abhängigkeitsarray, um nur beim ersten Mount zu laden
+
+    useEffect(() => {
+      if (map && Array.isArray(dataStatic)) {
+        dataStatic.forEach(item => {
+          const marker = L.marker([item.y, item.x], {  // Verwendung von item.y und item.x statt item.latitude und item.longitude
+            icon: L.icon({
+              iconUrl: '/path/to/icon.png',  // Pfad zum Icon
+              iconSize: [25, 41],            // Größe des Icons
+              iconAnchor: [12, 41],          // Ankerpunkt des Icons
+              popupAnchor: [1, -34],         // Position des Popups relativ zum Icon
+              shadowSize: [41, 41]           // Größe des Schattens
+            })
+          }).addTo(map);
+    
+          // Anpassen des Popups um relevante Daten anzuzeigen
+          marker.bindPopup(`<b>${item.lD_Name}</b><br>${item.device}`).openPopup();
+        });
+      }
+    }, [map, dataStatic]); // Abhängigkeiten des Effekts
+    
+
   const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
   const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+    // Create map layers
+    const TALAS = new L.layerGroup();
+    const ECI = new L.layerGroup();
+    const ULAF = new L.layerGroup();
+    const GSMModem = new L.layerGroup();
+    const CiscoRouter = new L.layerGroup();
+    const WAGO = new L.layerGroup();
+    const Siemens = new L.layerGroup();
+    const OTDR = new L.layerGroup();
+    const WDM = new L.layerGroup();
+    const GMA = new L.layerGroup();
+    const Sonstige = new L.layerGroup();
+    const TALASICL = new L.layerGroup();
 
   let initialMap = [];
 
+  useEffect(() => {
+    console.log("Server URL from config:", config.serverURL);
+    if (typeof window !== "undefined") {
+        console.log("Window height from config:", config.windowHeight);
+    }
+}, []);
+
   // Funktionen zur Überwachung der Internetverbindung
   const checkInternet = () => {
     console.log("Checking internet connectivity...");
@@ -25,6 +136,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       initialMap = L.map(mapRef.current, {
         center: [53.111111, 8.4625],
         zoom: 10,
+        layers: [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL],
         zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
         contextmenu: true,
         contextmenuItems: [