Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Verschachtelung von Kabelstrecken-Checkbox unter TALAS hinzugefügt

Browse Source 
- 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.
This commit is contained in:
ISA
2024-12-19 14:34:21 +01:00
parent aef5ec216b
commit 040a7c19ce
1 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/DataSheet.js
View File

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