From d166b2468de81d421016eed374ed5b9a85944a51 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 15 Sep 2025 13:38:19 +0200
Subject: [PATCH] feat: AreaDropdown separate from MapLayerControlPanel

---
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 components/mainComponent/MapComponent.js      |  8 +-
 components/uiWidgets/AreaDropdown.js          | 79 +++++++++++++++++++
 .../MapLayersControlPanel.js                  | 49 +++++++++---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 7 files changed, 129 insertions(+), 17 deletions(-)
 create mode 100644 components/uiWidgets/AreaDropdown.js

diff --git a/.env.development b/.env.development
index 830c7431c..07a97f8ba 100644
--- a/.env.development
+++ b/.env.development
@@ -23,4 +23,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.365
+NEXT_PUBLIC_APP_VERSION=1.1.366
diff --git a/.env.production b/.env.production
index 6b8fbbcb5..e8110dc88 100644
--- a/.env.production
+++ b/.env.production
@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.365
+NEXT_PUBLIC_APP_VERSION=1.1.366
diff --git a/components/mainComponent/MapComponent.js b/components/mainComponent/MapComponent.js
index cb363d433..e231694d3 100644
--- a/components/mainComponent/MapComponent.js
+++ b/components/mainComponent/MapComponent.js
@@ -34,6 +34,7 @@ import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js";
 import MapLayersControlPanel from "@/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
 import CoordinateInput from "@/components/uiWidgets/CoordinateInput.js";
 import VersionInfoModal from "@/components/uiWidgets/VersionInfoModal.js";
+import AreaDropdown from "@/components/uiWidgets/AreaDropdown";
 //----------Daten aus API--------------------
 import { fetchPoiDataService } from "@/services/database/pois/fetchPoiDataByIdService.js";
 import AddPOIModal from "@/components/pois/AddPOIModal.js";
@@ -164,6 +165,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);
+  const [showAreaDropdown, setShowAreaDropdown] = useState(false);
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
@@ -1133,7 +1135,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       {GisStationsStaticDistrict &&
         GisStationsStaticDistrict.Points?.length > 0 &&
-        showLayersPanel && (
+        showLayersPanel &&
+        !showAreaDropdown && (
           <MapLayersControlPanel
             className="z-50"
             handlePolylineCheckboxChange={handlePolylineCheckboxChange}
@@ -1157,13 +1160,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         )}
         {/* Marker-Icon (line-md) */}
         <button
-          onClick={() => {}}
+          onClick={() => setShowAreaDropdown(v => !v)}
           aria-label="Marker"
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title="Marker"
         >
           <MapMarkerIcon className="h-8 w-8" />
         </button>
+        {showAreaDropdown && <AreaDropdown onClose={() => setShowAreaDropdown(false)} />}
         {/*Lupe: Koordinatensuche ein-/ausblenden */}
         <button
           onClick={() => setShowCoordinateInput(v => !v)}
diff --git a/components/uiWidgets/AreaDropdown.js b/components/uiWidgets/AreaDropdown.js
new file mode 100644
index 000000000..39a4cdc12
--- /dev/null
+++ b/components/uiWidgets/AreaDropdown.js
@@ -0,0 +1,79 @@
+// /components/uiWidgets/AreaDropdown.js
+import React, { useEffect, useMemo } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { setSelectedArea } from "@/redux/slices/selectedAreaSlice";
+import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
+import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
+
+/**
+ * Kleines Dropdown zur Auswahl der Station (Area_Name),
+ * nutzt dieselbe Datenquelle wie das MapLayersControlPanel.
+ */
+const AreaDropdown = ({ onClose }) => {
+  const dispatch = useDispatch();
+  const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || {};
+  const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
+
+  // Erlaubte Systeme: Allow === 1 und Map === 1
+  const allowedSystems = useMemo(() => {
+    return new Set(
+      (Array.isArray(GisSystemStatic) ? GisSystemStatic : [])
+        .filter(sys => sys.Allow === 1 && sys.Map === 1)
+        .map(sys => sys.IdSystem)
+    );
+  }, [GisSystemStatic]);
+
+  // Uniqe Areas basierend auf Allowed Systems
+  const areaOptions = useMemo(() => {
+    const points = GisStationsStaticDistrict?.Points || [];
+    const seen = new Set();
+    const filtered = points.filter(p => {
+      if (!p?.Area_Name) return false;
+      if (!allowedSystems.has(p.System)) return false;
+      if (seen.has(p.Area_Name)) return false;
+      seen.add(p.Area_Name);
+      return true;
+    });
+    return filtered.map(p => ({ label: p.Area_Name, value: p.IdLD }));
+  }, [GisStationsStaticDistrict, allowedSystems]);
+
+  const handleChange = e => {
+    const selectedIndex = e.target.options.selectedIndex;
+    const label = e.target.options[selectedIndex].text;
+    dispatch(setSelectedArea(label));
+    onClose?.();
+  };
+
+  // Schließe mit ESC
+  useEffect(() => {
+    const onKey = e => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  return (
+    <div className="absolute top-16 right-3 z-[60]">
+      <div className="bg-white rounded-md shadow-lg p-3 border border-gray-200 min-w-[220px]">
+        <div className="text-sm font-semibold mb-2">Station wählen</div>
+        <select
+          onChange={handleChange}
+          className="border p-2 rounded w-full"
+          defaultValue="__default__"
+        >
+          <option value="__default__" disabled>
+            Bitte wählen…
+          </option>
+          {areaOptions.map(opt => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default AreaDropdown;
diff --git a/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js b/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
index 7153f1ca2..a7bfc5ce1 100644
--- a/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
+++ b/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
@@ -241,28 +241,55 @@ function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
   }, [GisStationsStaticDistrict]);
   //---------------------------
 
+  // Polyline (Kabelstrecken) abhängig von TALAS (system-1)
+  const onPolylineToggle = checked => {
+    if (editMode) return;
+
+    // Wenn Nutzer Kabelstrecken einschaltet, aber TALAS aktuell ausgeblendet ist,
+    // dann TALAS automatisch aktivieren (sofern erlaubt)
+    const talasKey = "system-1";
+    const talasVisible = !!mapLayersVisibility[talasKey];
+    if (checked && isTalasAllowed && !talasVisible) {
+      dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
+
+      // Persistiere Sichtbarkeit map/user-spezifisch
+      const mapId2 = localStorage.getItem("currentMapId");
+      const userId2 = localStorage.getItem("currentUserId");
+      const mapStorageKey =
+        mapId2 && userId2 ? `mapLayersVisibility_m${mapId2}_u${userId2}` : "mapLayersVisibility";
+      localStorage.setItem(
+        mapStorageKey,
+        JSON.stringify({ ...mapLayersVisibility, [talasKey]: true })
+      );
+
+      // Event feuern wie an anderer Stelle
+      setTimeout(() => {
+        const event = new Event("visibilityChanged");
+        window.dispatchEvent(event);
+      }, 0);
+    }
+
+    // Sichtbarkeit der Kabelstrecken setzen
+    handlePolylineCheckboxChange(checked);
+  };
+
   //---------------------------
   return (
     <div
       id="mainDataSheet"
-      className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg"
+      className="absolute top-16 right-3 w-1/6 min-w-[300px] max-w-[200px] z-10 bg-white p-2 rounded-lg shadow-lg"
     >
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between space-x-2">
-          <select
+          {/* 
+                  <select
             onChange={handleAreaChange}
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1 font-semibold"
             style={{ minWidth: "150px", maxWidth: "200px" }}
           >
             <option value="Station wählen">Station wählen</option>
-            {/*
-              ...new Map(
-                (GisStationsStaticDistrict.Points || [])
-                  .filter(p => !!p.Area_Name)
-                  .map(p => [p.Area_Name, p])
-              ).values(),
-            */}
+
             {[
               ...new Map(
                 (GisStationsStaticDistrict.Points || [])
@@ -275,6 +302,8 @@ function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
               </option>
             ))}
           </select>
+        */}
+
           {/*
           <div className="flex items-center space-x-2">
             <EditModeToggle />
@@ -312,7 +341,7 @@ function MapLayersControlPanel({ handlePolylineCheckboxChange }) {
                     <input
                       type="checkbox"
                       checked={kabelstreckenVisible}
-                      onChange={e => handlePolylineCheckboxChange(e.target.checked)}
+                      onChange={e => onPolylineToggle(e.target.checked)}
                       id="polyline-checkbox"
                       disabled={!isTalasAllowed || editMode}
                     />
diff --git a/package-lock.json b/package-lock.json
index 591e6580d..58b90cb57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.365",
+  "version": "1.1.366",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.365",
+      "version": "1.1.366",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
diff --git a/package.json b/package.json
index 8fc9121ff..382abe239 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.365",
+  "version": "1.1.366",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",