From d4ffe3aa0ea38ee23f3896ae22820c62f62b5aba Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 26 Apr 2024 14:49:30 +0200
Subject: [PATCH] =?UTF-8?q?Textinhalt=20der=20Dropdown-Option=20mit=20der?=
 =?UTF-8?q?=20Marker-Eigenschaft=20=C3=BCberein=20und=20Reinzoomen,=20funk?=
 =?UTF-8?q?tioniert=20noch=20nicht=20bei=20alle=20Dropdown-Elemente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DataSheet.js    | 21 +++++++++++++++------
 components/MapComponent.js | 22 ++++++++++++++++++++++
 config/config.js           |  2 +-
 states/gisStationState.js  |  7 -------
 states/gisSystemState.js   |  7 -------
 states/mapLayersState.js   | 24 ------------------------
 store/selectedAreaState.js |  7 +++++++
 7 files changed, 45 insertions(+), 45 deletions(-)
 delete mode 100644 states/gisStationState.js
 delete mode 100644 states/gisSystemState.js
 delete mode 100644 states/mapLayersState.js
 create mode 100644 store/selectedAreaState.js

diff --git a/components/DataSheet.js b/components/DataSheet.js
index 429e88066..80fd00779 100644
--- a/components/DataSheet.js
+++ b/components/DataSheet.js
@@ -1,10 +1,13 @@
+//components/DataSheet.js
 import React, { useEffect, useState } from "react";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/gisStationState";
 import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
+import { selectedAreaState } from "../store/selectedAreaState";
 
 function DataSheet() {
+  const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] =
     useRecoilState(mapLayersState);
   const [stationListing, setStationListing] = useState([]);
@@ -13,6 +16,14 @@ function DataSheet() {
     gisStationsStaticDistrictState
   );
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
+  // In deiner Dropdown onChange Funktion
+  const handleAreaChange = (event) => {
+    const selectedIndex = event.target.options.selectedIndex;
+    const areaName = event.target.options[selectedIndex].text;
+    setSelectedArea(areaName);
+    console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole
+    console.log("event.target:", event.target);
+  };
 
   useEffect(() => {
     // Identify allowed system IDs
@@ -29,11 +40,11 @@ function DataSheet() {
         !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
       if (isUnique) {
         seenNames.add(item.Area_Name);
-        console.log("Unique area:", item.Area_Name);
+        //console.log("Unique area:", item.Area_Name);
       }
       return isUnique;
     });
-    console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
+    //console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
 
     // Set the station listings
     setStationListing(
@@ -77,9 +88,7 @@ function DataSheet() {
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
           <select
-            onChange={(event) =>
-              console.log("Station selected:", event.target.value)
-            }
+            onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1"
           >
diff --git a/components/MapComponent.js b/components/MapComponent.js
index ea0edfaad..5b75d792e 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -13,6 +13,7 @@ import { useRecoilState, useRecoilValue } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/gisStationState";
 import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
+import { selectedAreaState } from "../store/selectedAreaState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -739,6 +740,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
               iconAnchor: [12, 41],
               popupAnchor: [1, -34],
             }),
+            areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
             zIndexOffset: zIndexOffset,
             bounceOnAdd: !!statis,
           });
@@ -1454,6 +1456,26 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
 
   //------------------------------------------ */
+  const selectedArea = useRecoilValue(selectedAreaState);
+
+  useEffect(() => {
+    if (selectedArea && map) {
+      // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
+      const marker = talasMarkers.find(
+        (marker) => marker.options.areaName === selectedArea
+      );
+      if (marker) {
+        map.flyTo(marker.getLatLng(), 14); // Zoomstufe anpassen nach Bedarf
+      }
+    }
+  }, [selectedArea, map]); // Abhängigkeiten beinhalten selectedArea und map
+
+  const findMyMarker = (areaName) => {
+    // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
+    return talasMarkers.find((marker) => marker.options.areaName === areaName);
+  };
+
+  //------------------------------------------
 
   return (
     <>
diff --git a/config/config.js b/config/config.js
index 99ea75628..147cefac6 100644
--- a/config/config.js
+++ b/config/config.js
@@ -31,7 +31,7 @@ if (typeof window !== "undefined") {
   user = url.searchParams.get("u") || "484"; // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card'
 
   // 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}`; //idMap: 10, idUser: 484
   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}`;
diff --git a/states/gisStationState.js b/states/gisStationState.js
deleted file mode 100644
index e373a6271..000000000
--- a/states/gisStationState.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// Pfad: states/gisStationState.js
-import { atom } from "recoil";
-
-export const gisStationsStaticDistrictState = atom({
-  key: "gisStationsStaticDistrict", // Eindeutiger Schlüssel (innerhalb des Projekts)
-  default: [], // Standardwert (Anfangszustand)
-});
diff --git a/states/gisSystemState.js b/states/gisSystemState.js
deleted file mode 100644
index 28cec0ad1..000000000
--- a/states/gisSystemState.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// Pfad: states/gisStationState.js
-import { atom } from "recoil";
-
-export const gisSystemStaticState = atom({
-  key: "gisSystemStatic", // Eindeutiger Schlüssel (innerhalb des Projekts)
-  default: [], // Standardwert (Anfangszustand)
-});
diff --git a/states/mapLayersState.js b/states/mapLayersState.js
deleted file mode 100644
index 4d24f2a64..000000000
--- a/states/mapLayersState.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// 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
-    show_TALAS: true,
-    show_ECI: true,
-    // show_ULAF: false,
-    show_GSMModem: true,
-    show_CiscoRouter: true,
-    show_WAGO: true,
-    show_Siemens: true,
-    show_OTDR: true,
-    show_WDM: true,
-    show_GMA: true,
-    show_Messstellen: true,
-    show_TALASICL: true,
-    show_DAUZ: true,
-    show_SMSFunkmodem: true,
-    show_Sonstige: true,
-  },
-});
diff --git a/store/selectedAreaState.js b/store/selectedAreaState.js
new file mode 100644
index 000000000..c010c4172
--- /dev/null
+++ b/store/selectedAreaState.js
@@ -0,0 +1,7 @@
+// In deinem Recoil store
+import { atom } from "recoil";
+
+export const selectedAreaState = atom({
+  key: "selectedAreaState", // unique ID (with respect to other atoms/selectors)
+  default: null, // default value (aka initial value)
+});