From 5a3111ea5fcb7d436e2e77a4d2a4af1590262194 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 29 Nov 2024 11:49:40 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Anzeigenamen=20f=C3=BCr=20System-Checkb?=
 =?UTF-8?q?oxen=20korrigiert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Anpassung der System-Checkboxen im DataSheet, um statt interner Schlüssel die lesbaren Namen (z. B. "GSM Modem") anzuzeigen.
- Interne Schlüssel bleiben für die Logik unverändert.
- Verbesserung der Benutzerfreundlichkeit durch klarere Bezeichnungen in der UI.
---
 components/DataSheet.js | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/components/DataSheet.js b/components/DataSheet.js
index c707c7e33..6528191b5 100644
--- a/components/DataSheet.js
+++ b/components/DataSheet.js
@@ -52,9 +52,6 @@ function DataSheet() {
       }
       return isUnique;
     });
-    console.log("filterdArea GisStationsStaticDistrict:", filteredAreas);
-    console.log("GisSystemStatic:", GisSystemStatic);
-    console.log("allowedSystems:", allowedSystems);
 
     setStationListing(
       filteredAreas.map((area, index) => ({
@@ -65,11 +62,9 @@ function DataSheet() {
 
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
-      const formattedName = item.Name.replace(/[\s\-]+/g, "");
-      console.log(formattedName);
-      const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
+      const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
       if (isUnique) {
-        seenSystemNames.add(formattedName);
+        seenSystemNames.add(item.Name);
       }
       return isUnique;
     });
@@ -77,20 +72,20 @@ function DataSheet() {
     setSystemListing(
       filteredSystems.map((system, index) => ({
         id: index + 1,
-        name: system.Name.replace(/[\s\-]+/g, ""),
+        name: system.Name, // Verwende den Originalnamen für die Anzeige
+        key: system.Name.replace(/[\s\-]+/g, ""), // Internen Schlüssel für die MapLayersVisibility-Logik
       }))
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
 
-  const handleCheckboxChange = (name, event) => {
+  const handleCheckboxChange = (key, event) => {
     const { checked } = event.target;
-
     setMapLayersVisibility((prev) => {
       const newState = {
         ...prev,
-        [name]: checked,
+        [key]: checked,
       };
-      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); // Store in localStorage
+      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
       return newState;
     });
   };
@@ -110,7 +105,9 @@ function DataSheet() {
     setPolylineVisible(checked);
     localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage
   };
+  //---------------------------
 
+  //---------------------------
   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">
       <div className="flex flex-col gap-4 p-4">
@@ -134,9 +131,14 @@ function DataSheet() {
           {systemListing.map((system) => (
             <React.Fragment key={system.id}>
               <div className="flex items-center">
-                <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
+                <input
+                  type="checkbox"
+                  checked={mapLayersVisibility[system.key] || false} // Schlüssel für Logik
+                  onChange={(e) => handleCheckboxChange(system.key, e)} // Schlüssel für Logik
+                  id={`system-${system.id}`}
+                />
                 <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
-                  {system.name}
+                  {system.name} {/* Anzeigename */}
                 </label>
               </div>
             </React.Fragment>