# Container Show Page - Umstrukturierung

## Übersicht
Die Container-Detailseite wurde modularisiert und besser organisiert für einfachere Wartung und bessere Code-Struktur.

## Neue Dateistruktur

### JavaScript-Module
```
public/js/container/
├── show.js              # Haupt-Manager für die Seite
├── anlagendaten.js      # Anlagendaten-Management
├── documents.js         # Dokumenten-Management (bereits vorhanden)
├── calendar.js          # Kalender-Management (TODO)
└── export.js            # Export-Management (TODO)
```

### CSS-Dateien
```
public/css/container/
└── show.css             # Styles für die Container-Seite
```

### Templates
```
templates/container/
├── show.html.twig       # Haupttemplate
├── show.html.twig.backup  # Backup der Originaldatei
├── _documents.html.twig # Dokumenten-Tab (bereits modular)
└── partials/            # Teil-Templates
    ├── _anlagendaten.html.twig  (TODO)
    ├── _kalender.html.twig      (TODO)
    ├── _dashboard.html.twig     (TODO)
    └── _export.html.twig        (TODO)
```

### Backups
```
public/js/backup/
├── container-anlagendaten.js
├── container-anlagendaten.js.backup
├── container-documents.js
├── container-show.js
└── container-show.js.backup
```

## Änderungen

### 1. JavaScript-Modularisierung
- Alle JavaScript-Funktionalitäten wurden in separate Module aufgeteilt
- Jede Funktionalität hat eine eigene Klasse (Container Show Pattern)
- Bessere Wartbarkeit und Testbarkeit

### 2. CSS-Auslagerung
- Alle Inline-Styles wurden in `public/css/container/show.css` ausgelagert
- Bessere Performance durch Browser-Caching
- Einfacher zu pflegen

### 3. Backup-System
- Alle ursprünglichen Dateien wurden in `public/js/backup/` gesichert
- `.backup`-Erweiterung für zusätzliche Sicherung
- Einfaches Zurückkehren bei Problemen

## Migration

### Schritt 1: Template aktualisieren
Im Template `show.html.twig` die Pfade anpassen:

**Alte Pfade:**
```twig
<link rel="stylesheet" href="{{ asset('css/container.css') }}">
<script src="{{ asset('js/container-documents.js') }}"></script>
```

**Neue Pfade:**
```twig
<link rel="stylesheet" href="{{ asset('css/container/show.css') }}">
<script src="{{ asset('js/container/anlagendaten.js') }}"></script>
<script src="{{ asset('js/container/show.js') }}"></script>
```

### Schritt 2: Script-Reihenfolge
Die Scripts müssen in folgender Reihenfolge geladen werden:
1. `anlagendaten.js` - Definiert `AnlagendatenManager`
2. `show.js` - Verwendet `AnlagendatenManager`

### Schritt 3: Cache leeren
```bash
php bin/console cache:clear
```

## Rollback-Strategie

Falls Probleme auftreten:

1. **JavaScript zurückstellen:**
```bash
Copy-Item "public\js\backup\container-*.js" "public\js\" -Force
```

2. **CSS entfernen:**
```bash
Remove-Item "public\css\container\show.css"
```

3. **Template zurückstellen:**
```bash
Copy-Item "templates\container\show.html.twig.backup" "templates\container\show.html.twig" -Force
```

## Vorteile der neuen Struktur

1. **Bessere Wartbarkeit:** Jede Funktionalität in separater Datei
2. **Wiederverwendbarkeit:** Module können in anderen Teilen verwendet werden
3. **Testbarkeit:** Einfacher zu testen durch isolierte Module
4. **Performance:** CSS-Caching durch separate Datei
5. **Skalierbarkeit:** Einfaches Hinzufügen neuer Module

## Nächste Schritte

1. ✅ Backups erstellt
2. ✅ JavaScript-Module erstellt und verschoben
3. ✅ CSS ausgelagert
4. ⏳ Tab-Contents in Partial-Templates aufteilen
5. ⏳ Template aktualisieren (Pfade und Includes)
6. ⏳ Testen der Funktionalität
7. ⏳ Kalender- und Export-Module erstellen

## Erstellt am
26. Oktober 2025

## Autor
AI Assistant (Claude Sonnet 4.5)