feat: Anzeigenamen für System-Checkboxen korrigiert

- 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

@@ -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>