TALAS als separater layerGroup

components/DataSheet.js

@@ -1,8 +1,11 @@
+//components/DataSheet.js
 import React, { useEffect, useState } from "react";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useRecoilState } from "recoil";
-import { gisStationsStaticDistrictState } from "../features/gisStationState";
+import { gisStationsStaticDistrictState } from "../states/gisStationState";
-import { gisSystemStaticState } from "../features/gisSystemState";
+import { gisSystemStaticState } from "../states/gisSystemState";
+import { mapLayersState } from "../states/mapLayersState";
 function DataSheet() {
+  const [layers, setLayers] = useRecoilState(mapLayersState);
   // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
   const [uniqueSystems, setUniqueSystems] = useState([]);
@@ -14,11 +17,11 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
 
   useEffect(() => {
-    console.log(
+    /* console.log(
       "GisStationsStaticDistrict in DataSheet:",
       GisStationsStaticDistrict
-    );
+    ); */
-    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
+    //console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
 
     // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
     const seenNames = new Set();
@@ -59,24 +62,28 @@ function DataSheet() {
       name: area.Name,
     }));
     setSystemListing(newSystemListing);
-    console.log("System Listing:", systemListing);
+    // console.log("System Listing:", systemListing);
   }, [GisStationsStaticDistrict]);
 
   const [checkedStations, setCheckedStations] = useState({});
 
-  const handleCheckboxChange = (id) => {
+  const handleCheckboxChange = (layerName) => {
     setCheckedStations((prev) => ({
       ...prev,
-      [id]: !prev[id],
+      [layerName]: !prev[layerName],
+    }));
+    setLayers((prevLayers) => ({
+      ...prevLayers,
+      [layerName]: !prevLayers[layerName],
     }));
   };
 
   const handleStationChange = (event) => {
-    console.log("Station selected:", event.target.value);
+    // console.log("Station selected:", event.target.value);
   };
 
   const resetView = () => {
-    console.log("View has been reset");
+    // console.log("View has been reset");
   };
 
   return (
@@ -115,7 +122,7 @@ function DataSheet() {
               id={`box-${station.id}`}
               className="accent-blue-500 checked:bg-blue-500"
               checked={checkedStations[station.id] || false}
-              onChange={() => handleCheckboxChange(station.id)}
+              onChange={() => handleCheckboxChange(station.name)}
             />
             <label
               htmlFor={`box-${station.id}`}

components/MapComponent.js

@@ -9,11 +9,13 @@ import dynamic from "next/dynamic";
 import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
 import DataSheet from "../components/DataSheet";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
-import { gisStationsStaticDistrictState } from "../features/gisStationState";
+import { gisStationsStaticDistrictState } from "../states/gisStationState";
-import { gisSystemStaticState } from "../features/gisSystemState";
+import { gisSystemStaticState } from "../states/gisSystemState";
+import { mapLayersState } from "../states/mapLayersState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+  const layerVisibility = useRecoilValue(mapLayersState);
   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
@@ -174,7 +176,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
         if (jsonResponse && jsonResponse.Systems) {
           setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
-          console.log("GisSystemStatic:", jsonResponse.Systems);
+          /* console.log(
+            "GisSystemStatic in MapComponent.js :",
+            jsonResponse.Systems
+          ); */
         } else {
           console.error(
             'Erwartete Daten im "Systems"-Array nicht gefunden',
@@ -755,10 +760,18 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
 
       marker.addTo(map);
+
+      /*  if (marker[GisStationsStatusDistrict.IdLD].options.system === 1) {
+        if (namesArray.includes("TALAS")) {
+          marker[GisStationsStatusDistrict.IdLD].addTo(TALAS);
+          console.log("TALAS system added");
+        }
+      } */
     });
 
     // Marker für GisStationsStaticDistrict
     GisStationsStaticDistrict.forEach((station) => {
+      //console.log("station 222:", station);
       // Filter für Statusobjekte dieser spezifischen Station
       const matchingStatuses = GisStationsStatusDistrict.filter(
         (status) => status.IdLD === station.IdLD
@@ -829,6 +842,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
         marker.bounce(3);
       }
+      //-------------------------------------------------------------------------------------------------------------------------
+      //-------------------------------------------------------------------------------------------------------------------------
+
       // Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
       if (station.LD_Name === "GMA Littwin (TEST)") {
         marker
@@ -855,6 +871,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           )
           .addTo(GMA);
       }
+
+      //console.log("station.System:", station.System);
+      //Durchsuche GisSystemStatic und gib in der console den Attribute Name aus
+
+      //console.log("GisSystem:", GisSystemStatic);
+      //-------------------------------------------------------------------------------------------------------------------------
+      //-------------------------------------------------------------------------------------------------------------------------
       // Marker zu OMS und der Karte hinzufügen
       oms.addMarker(marker);
       marker.addTo(map).bindPopup(`
@@ -865,11 +888,199 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         ${statusInfo}<br>
       `);
       let LocID = station.IdLocation;
+      //console.log("station test :", station);
+
+      //alle Layers anzeigen unter GMA sind alle
+      // console.log("TALAS Layers:", TALAS);
+
+      //TALAS Layer entfernen
+      // map.removeLayer(layers.TALAS);
+      // wenn station.LD_Name = "GMA Littwin (TEST)" dann entferne den Marker
+      /*  if (station.LD_Name === "GMA Littwin (TEST)") {
+        map.removeLayer(marker);
+      }
+      // wenn station.LD_Name = "CPL Bentheim" dann entferne den Marker
+      if (station.LD_Name === "CPL Bentheim") {
+        map.removeLayer(marker);
+      } */
+      map.removeLayer(marker);
     });
   }, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
 
+  //-------------------------------------------------------------------------------------------------------------------------
+  //GisStationsStatusDistrict
+  //const [talasSystem, setTalasSystem] = useState({});
+  const [layerTALAS, setLayerTALAS] = useState([]);
+
+  // GisSystemStatic Daten laden und Systemdaten speichern
+  // Systeminformationen aus GisSystemStatic aktualisieren--------------1
+
+  useEffect(() => {
+    if (!map || !GisStationsStaticDistrict) return;
+    
+    // Clear existing markers to prevent duplicates
+    TALAS.clearLayers();
+  
+    // Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
+    if (!oms) {
+      setOms(new OverlappingMarkerSpiderfier(map, {
+        // Konfigurationen für OverlappingMarkerSpiderfier
+        keepSpiderfied: true
+      }));
+    }
+  
+    GisStationsStaticDistrict.forEach(station => {
+      if (parseInt(station.System) === 1) {
+        const icon = L.icon({
+          iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
+          iconSize: [25, 41],
+          iconAnchor: [12, 41] // iconAnchor set to the tip of the icon
+        });
+  
+        const marker = L.marker([station.X, station.Y], { icon });
+        
+        // Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
+        marker.addTo(TALAS);
+        oms.addMarker(marker);
+  
+        // Adjust the popup anchor based on your icon's appearance
+        marker.bindPopup(`
+          <b>${station.LD_Name}</b><br>
+          ${station.Device}<br>
+          ${station.Area_Short} (${station.Area_Name})<br>
+          ${station.Location_Short} (${station.Location_Name})<br>
+        `, {
+          offset: L.point(0, -20),
+          autoClose: false
+        });
+  
+        // Events for mouse interactions
+        marker.on('mouseover', () => marker.openPopup());
+        marker.on('mouseout', () => marker.closePopup());
+      }
+    });
+  
+    // Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
+    TALAS.addTo(map);
+  
+  }, [map, GisStationsStaticDistrict, oms]);
+  
+  
+
+//---------------------------------------------------------------------------------
+const [activeLayer, setActiveLayer] = useState(null);
+
+useEffect(() => {
+  if (!map) return;
+
+  // Erstelle eine Funktion, um alle Layer zu entfernen
+  const removeLayers = () => {
+    [TALAS, ECI, ULAF, GSMModem, CiscoRouter, WAGO, Siemens, OTDR, WDM, GMA, Sonstige, TALASICL].forEach(layer => {
+      if (map.hasLayer(layer)) {
+        map.removeLayer(layer);
+      }
+    });
+  };
+
+  // Entferne alle Layer zuerst
+  removeLayers();
+
+  // Füge nur den aktiven Layer hinzu, wenn er definiert ist
+  if (activeLayer && map.hasLayer(activeLayer) === false) {
+    activeLayer.addTo(map);
+  }
+}, [activeLayer, map]); // Abhängigkeiten von activeLayer und map
+
+useEffect(() => {
+  // Setze TALAS als aktiven Layer, wenn die entsprechenden Daten geladen sind
+  if (GisStationsStaticDistrict.length > 0) {
+    setActiveLayer(TALAS); // Diese Funktion aktualisiert den aktiven Layer, der dann im anderen useEffect behandelt wird
+  }
+}, [GisStationsStaticDistrict]); // Reagiere auf Änderungen in GisStationsStaticDistrict
+
+
+  // Verwenden von Systemdaten zur Aktualisierung der LayerGroup-----------3
+  useEffect(() => {
+    console.log("Verarbeitung der talasSystem-Daten:", layerTALAS);
+    // Hier könnten Sie Ihre Leaflet LayerGroup-Aktionen ausführen
+  }, [layerTALAS]);
+
+  //console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
+
+  //------------------------------------------
+  /*   useEffect(() => {
+    if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)
+      return;
+
+    // Alte Marker löschen
+    map.eachLayer((layer) => {
+      if (layer instanceof L.Marker) {
+        map.removeLayer(layer);
+      }
+    });
+
+    // Neuen Markern basierend auf den System IDs zuordnen
+    GisStationsStaticDistrict.forEach((station) => {
+      // Finden des entsprechenden System-Objekts
+      const system = GisSystemStatic.find((s) => s.IdSystem === station.System);
+      console.log("System idsystem:", system);
+      console.log("Station system:", station);
+      //station Object zu layerGroup hinzufügen
+
+      if (system) {
+        const marker = L.marker([station.X, station.Y], {
+          icon: L.icon({
+            iconUrl: "default-icon.png",
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41],
+          }),
+        });
+
+        // Marker dem entsprechenden Layer hinzufügen
+        if (layers[system.LayerName]) {
+          layers[system.LayerName].addLayer(marker);
+        }
+        //zeige alle Marker des Layers an
+        //console.log("Layer GMA:", TALAS);
+
+        // Optional: Popup oder Tooltip hinzufügen
+        marker.bindPopup(
+          `Station: ${station.LD_Name}<br>System: ${system.Name}`
+        );
+      }
+    });
+    console.log("layerGroup GMA :", GMA._layers);
+    console.log("layer TALAS :", layers.GMA._layers);
+  }, [map, GisStationsStaticDistrict, GisSystemStatic]); */
+
+  //------------------------------------------
+  /*   useEffect(() => {
+    if (map) {
+      Object.keys(layerVisibility).forEach((layerName) => {
+        const layer = layers[layerName];
+        if (layer) {
+          console.log(
+            `Updating layer ${layerName}: ${layerVisibility[layerName] ? "add" : "remove"}`
+          );
+          if (layerVisibility[layerName]) {
+            map.addLayer(layer);
+          } else {
+            map.removeLayer(layer);
+          }
+        } else {
+          console.error(
+            "Versuch, nicht definierten Layer zu manipulieren:",
+            layerName
+          );
+        }
+      });
+    }
+  }, [layerVisibility, map]); */
+
   //------------------------------------------ */
-  let uniqueIdLDsData = [];
+  /*   let uniqueIdLDsData = [];
   let Tooltip = [];
 
   for (let index = 0; index < uniqueIdLDsData.length; index++) {
@@ -910,7 +1121,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       )
       .openTooltip()
       .addTo(GMA);
-  }
+  } */
 
   //------------------------------------------
 

config/config.js

@@ -31,17 +31,17 @@ if (typeof window !== "undefined") {
   user = url.searchParams.get("u") || "485"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485'
 
   // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
-  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
+  /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
 
-  /*  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+   mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
 
   // URLs zu Offline-Daten, falls benötigt
 }

features/gisStationState.js

@@ -1,7 +0,0 @@
-// Pfad: features/gisStationState.js
-import { atom } from 'recoil';
-
-export const gisStationsStaticDistrictState = atom({
-  key: 'gisStationsStaticDistrict', // Eindeutiger Schlüssel (innerhalb des Projekts)
-  default: [], // Standardwert (Anfangszustand)
-});

pages/api/[...path].js

@@ -2,8 +2,8 @@
 import { createProxyMiddleware } from "http-proxy-middleware";
 
 export default createProxyMiddleware({
-  target: "http://10.10.0.13", // Ziel-URL des Proxys
+  //target: "http://10.10.0.13", // Ziel-URL des Proxys
-  //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
+  target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
   changeOrigin: true,
   pathRewrite: {
     "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert

states/gisStationState.js

@@ -0,0 +1,7 @@
+// Pfad: states/gisStationState.js
+import { atom } from "recoil";
+
+export const gisStationsStaticDistrictState = atom({
+  key: "gisStationsStaticDistrict", // Eindeutiger Schlüssel (innerhalb des Projekts)
+  default: [], // Standardwert (Anfangszustand)
+});

states/gisSystemState.js

@@ -1,4 +1,4 @@
-// Pfad: features/gisStationState.js
+// Pfad: states/gisStationState.js
 import { atom } from "recoil";
 
 export const gisSystemStaticState = atom({

states/mapLayersState.js

@@ -0,0 +1,24 @@
+// states/mapLayersState.js
+import { atom } from "recoil";
+
+export const mapLayersState = atom({
+  key: "mapLayersState", // Eindeutiger Schlüssel für das Atom
+  default: {
+    // Standardwerte für jeden Layer
+    TALAS: false,
+    ECI: false,
+    ULAF: false,
+    GSMModem: false,
+    CiscoRouter: false,
+    WAGO: false,
+    Siemens: false,
+    OTDR: false,
+    WDM: false,
+    GMA: false,
+    Messstellen: false,
+    TALASICL: false,
+    DAUZ: false,
+    SMSFunkmodem: false,
+    Sonstige: false,
+  },
+});