# 🚀 Quick-Start: Dashboard Installation

## ⚡ 3-Minuten-Setup

### Schritt 1: Datei auswählen (10 Sekunden)

Wähle **eine** der drei Varianten:

- 📊 **Standard** → `battery_optimizer_dashboard.yaml` (Desktop)
- 📱 **Kompakt** → `battery_optimizer_dashboard_compact.yaml` (Tablet)
- ⚡ **Minimal** → `battery_optimizer_dashboard_minimal.yaml` (Smartphone)

**Meine Empfehlung für dich:** **KOMPAKT** - beste Balance!

---

### Schritt 2: Dashboard hinzufügen (2 Minuten)

#### Option A: Über die UI (Einfachste Methode)

1. Home Assistant öffnen
2. Klick auf **"Einstellungen"** → **"Dashboards"**
3. Klick auf **"+ Dashboard hinzufügen"**
4. Wähle **"Neue Ansicht vom Scratch erstellen"**
5. Name: `Batterie Optimierung`
6. Icon: `mdi:battery-charging`
7. Klick auf **"Erstellen"**
8. Klick auf **⋮** (3 Punkte oben rechts) → **"Rohe Konfiguration bearbeiten"**
9. Lösche alles und füge den Inhalt der YAML-Datei ein
10. Klick auf **"Speichern"**

#### Option B: Via Datei (Für Fortgeschrittene)

```bash
# Auf deinem Home Assistant Server:
cd /config
mkdir -p dashboards
cp battery_optimizer_dashboard_compact.yaml dashboards/

# In configuration.yaml oder dashboards.yaml ergänzen:
lovelace:
  mode: yaml
  dashboards:
    battery-optimizer:
      mode: yaml
      filename: dashboards/battery_optimizer_dashboard_compact.yaml
      title: Batterie
      icon: mdi:battery-charging
      show_in_sidebar: true
```

Dann Home Assistant neu starten.

---

### Schritt 3: Entity-IDs anpassen (30 Sekunden)

**Suchen & Ersetzen** in der YAML-Datei:

Öffne die Dashboard-Konfiguration und ersetze diese Platzhalter mit deinen echten Entity-IDs:

```yaml
# WICHTIG: Prüfe deine echten Entity-IDs unter:
# Entwicklerwerkzeuge → Zustände

# Ersetze:
sensor.battery_charging_plan_status
# Mit (wenn anders):
sensor.deine_plan_status_entity

# Ersetze:
sensor.battery_next_charge_time
# Mit:
sensor.deine_next_charge_entity

# Etc. für alle anderen Entities
```

**Tipp:** Nutze Suchen & Ersetzen (Strg+H) in deinem Editor!

---

### Schritt 4: Fertig! (0 Sekunden)

✅ Dashboard ist einsatzbereit!

Navigiere zu: **Sidebar** → **"Batterie Optimierung"**

---

## 🔧 Häufige Anpassungen

### Fehlende Entity entfernen

Falls eine Entity nicht existiert, einfach auskommentieren oder löschen:

```yaml
# entities:
#   - entity: sensor.nicht_vorhanden  # ← Auskommentiert mit #
#     name: Nicht verfügbar
```

### Farben ändern

```yaml
# Plotly Graph Farben anpassen:
line:
  color: '#FF5722'  # Deine Wunschfarbe (Hex-Code)
```

Online Color Picker: https://htmlcolorcodes.com/

### Graph-Zeitraum anpassen

```yaml
hours_to_show: 24  # Von 48h auf 24h ändern
```

### Spalten-Layout ändern

```yaml
# Von 2 auf 3 Spalten:
- type: horizontal-stack
  cards:
    - card1
    - card2
    - card3  # ← Hinzufügen
```

---

## ✅ Checklist

- [ ] Dashboard-Variante ausgewählt
- [ ] YAML-Datei in Home Assistant eingefügt
- [ ] Entity-IDs überprüft und angepasst
- [ ] Dashboard gespeichert
- [ ] Browser-Cache geleert (Strg+Shift+R)
- [ ] Dashboard getestet auf verschiedenen Geräten

---

## 🆘 Hilfe bei Problemen

### Problem: "Entity not found"

**Lösung:** 
```yaml
# Prüfe in Developer Tools → States:
# Existiert die Entity wirklich?
# Falls nein: Auskommentieren oder durch existierende Entity ersetzen
```

### Problem: Plotly Graph zeigt nichts

**Lösung:**
```yaml
# 1. Prüfe ob Entity historische Daten hat:
#    Developer Tools → History → Entity auswählen

# 2. Prüfe Recorder-Integration:
#    configuration.yaml sollte haben:
recorder:
  db_url: sqlite:////config/home-assistant_v2.db
  purge_keep_days: 7
  include:
    entities:
      - sensor.openems_ess0_activepower
      # ... alle anderen wichtigen Entities
```

### Problem: Power Flow Card zeigt Fehler

**Lösung:**
```yaml
# Installiere über HACS:
# HACS → Frontend → Suche "Power Flow Card Plus" → Installieren
# Dann Browser-Cache leeren (Strg+Shift+R)
```

### Problem: Bubble Cards nicht gefunden

**Lösung:**
```yaml
# Installiere über HACS:
# HACS → Frontend → Suche "Bubble Card" → Installieren
# Home Assistant neu starten
# Browser-Cache leeren
```

---

## 🎨 Nächste Schritte

Nach erfolgreicher Installation kannst du:

1. **Card-mod nutzen** für individuelles Styling
2. **Conditional Cards** für kontextabhängige Anzeigen
3. **Template-Sensoren** für zusätzliche Berechnungen
4. **Plan-Historie** implementieren (siehe vorheriger Chat)
5. **InfluxDB-Integration** für Langzeitanalyse

---

## 💡 Pro-Tipps

### Mobile Optimierung

```yaml
# Füge card_mod für bessere Mobile-Ansicht hinzu:
card_mod:
  style: |
    ha-card {
      font-size: 0.9em;  /* Kleinere Schrift auf Mobile */
    }
    @media (max-width: 768px) {
      ha-card {
        padding: 8px !important;  /* Weniger Padding */
      }
    }
```

### Dark Mode Support

Alle Dashboards sind Dark-Mode-kompatibel! 
Die Farben passen sich automatisch an.

### Performance-Tipp

```yaml
# Reduziere Refresh-Rate für bessere Performance:
refresh_interval: 300  # Alle 5 Minuten statt jede Minute
```

---

## 📞 Support

Bei weiteren Fragen:

1. **Entity-IDs prüfen**: Developer Tools → States
2. **Logs checken**: Settings → System → Logs
3. **Browser-Konsole**: F12 → Console (für Frontend-Fehler)

---

**Viel Erfolg! 🎉**

Bei Problemen: Schicke mir einen Screenshot des Fehlers + deine YAML-Config.