From 040a7c19ce9b86b78a990e39123fbe268a3d4320 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 19 Dec 2024 14:34:21 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Verschachtelung=20von=20Kabelstrecken-C?=
 =?UTF-8?q?heckbox=20unter=20TALAS=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Die Checkbox für "Kabelstrecken" wird jetzt als Untermenü unter "TALAS" angezeigt.
- Dynamische Überprüfung von `system.name`, um die Hierarchie von Checkboxen zu definieren.
- Visuelle Einrückung (`ml-6`) implementiert, um die Untermenü-Struktur klar darzustellen.
- Anpassungen für eine klare und intuitive Benutzeroberfläche.
---
 components/DataSheet.js | 49 ++++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/components/DataSheet.js b/components/DataSheet.js
index 0c76c9371..b59c24348 100644
--- a/components/DataSheet.js
+++ b/components/DataSheet.js
@@ -146,20 +146,39 @@ function DataSheet() {
           </div>
         </div>
 
-        {/* Checkboxen in einem gemeinsamen Container */}
+        {/* Checkboxen mit Untermenüs */}
         <div className="flex flex-col gap-2">
           {systemListing.map((system) => (
-            <div className="flex items-center" key={system.id}>
-              <input
-                type="checkbox"
-                checked={mapLayersVisibility[system.key] || false}
-                onChange={(e) => handleCheckboxChange(system.key, e)}
-                id={`system-${system.id}`}
-                disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
-              />
-              <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
-                {system.name}
-              </label>
+            <div key={system.id} className="flex flex-col">
+              <div className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={mapLayersVisibility[system.key] || false}
+                  onChange={(e) => handleCheckboxChange(system.key, e)}
+                  id={`system-${system.id}`}
+                  disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
+                />
+                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
+                  {system.name}
+                </label>
+              </div>
+
+              {/* Untermenü für TALAS */}
+              {system.name === "TALAS" && (
+                <div className="ml-6 flex flex-col gap-1">
+                  <div className="flex items-center">
+                    <input
+                      type="checkbox"
+                      checked={polylineVisible} // Zustand für Kabelstrecken
+                      onChange={handlePolylineCheckboxChange}
+                      id="polyline-checkbox"
+                    />
+                    <label htmlFor="polyline-checkbox" className="text-sm ml-2">
+                      Kabelstrecken
+                    </label>
+                  </div>
+                </div>
+              )}
             </div>
           ))}
 
@@ -170,12 +189,6 @@ function DataSheet() {
             </label>
           </div>
 
-          <div className="flex items-center">
-            <input type="checkbox" checked={polylineVisible} onChange={handlePolylineCheckboxChange} id="polyline-checkbox" />
-            <label htmlFor="polyline-checkbox" className="text-sm ml-2">
-              Kabelstrecken
-            </label>
-          </div>
           {/* Bereiche */}
           <div className="flex items-center">
             <input type="checkbox" checked={bereicheVisible} onChange={handleBereicheCheckboxChange} id="bereiche-checkbox" disabled={editMode} />