Koala user defined custom colors

[Brett-S-OWB]

Benutzerdefinierte Farben im Koala Theme implementiert und konsistent über mehrere UI-Komponenten hinweg integriert.

Die Farben können nun individuell für verschiedene Entitäten (z. B. Ladepunkte, Fahrzeuge, Komponenten) definiert werden (in ui-settings project) und werden automatisch in der gesamten Oberfläche verwendet.

Diagramme

• Unterstützung benutzerdefinierter Farben im:
  • Energy Flow Chart
  • History Chart
  • Daily Totals Chart

Daily Totals Chart

• Erweiterung der Batterie-Anzeige:
  • Dropdown bei mehreren Batterien
  • Trennlinie zwischen einzelnen Einträgen
• Erweiterung der Ladepunkt-Anzeige:
  • Trennlinie zwischen einzelnen Einträgen
• Verbesserung der Darstellung:
  • Ellipsis (Textverkürzung) für lange Namen bei Batterien und Ladepunkten

Karten (Carousel)
Benutzerdefinierte Farben wurden ergänzt für:

• Charge Point Cards
• Vehicle Cards
• Battery Cards

Tabellenansichten

• Integration der Farben in:
  • Charge Point Tabelle
  • Vehicle Tabelle
• Darstellung als visuelle Farbmarkierung pro Zeile

---

Änderungen an BaseTable
Die bisherige Implementierung der Tabelle hatte zwei unterschiedliche Render-Pfade:
(ChargePointInformation.vue)

• rowExpandable = true (z. B. kleine Screens)
→ BaseTable hat die komplette Tabellenzeile selbst gerendert (#body Slot)
• rowExpandable = false (z. B. große Screens)
→ QTable hat das Rendering übernommen (Default-Verhalten)
  Gleichzeitig wurden Inhalte über body-cell-* Slots vom Parent bereitgestellt.

• Ergebnis:
Zwei unterschiedliche Rendering-Mechanismen je nach Screen-Größe, was zu Inkonsistenzen bei Layout, Spacing und Styling geführt hat.

Problem
Für die neue Funktion einer benutzerdefinierten Farbanzeige pro Zeile (farbiger Indikator / Farbstreifen) war ein konsistenter Zugriff auf die gesamte Zeilenstruktur notwendig.
Durch die unterschiedlichen Render-Pfade war es nicht möglich, diesen Farbindikator zuverlässig und einheitlich darzustellen.

Lösung
Die Tabellenstruktur wurde vereinheitlicht:

• BaseTable rendert jetzt immer die komplette Tabellenzeile (#body Slot wird immer verwendet)
• wird zentral in BaseTable erzeugt
• Parent-Komponenten liefern nur noch den Zelleninhalt über Slots (body-cell-*)
  -Klare Trennung:
• Struktur & Layout → BaseTable
• Inhalt → Parent

Neue Funktion: Farbindikator pro Zeile
Im Zuge der Umstellung wurde ein benutzerdefinierter Farbstreifen pro Tabellenzeile eingeführt:

• Farbe wird über rowColor vom Parent geliefert
• Darstellung erfolgt zentral in BaseTable
• Umsetzung über ein background-image (Gradient), um:
  • vertikale Zentrierung
  • Abstand oben/unten
  • Abstand zum linken Rand

[Brett-S-OWB]

Energy-Flow-Chart: Die SVG-Icons wurden ursprünglich als eigene Vue-Komponenten gekapselt, um sie im Flowchart einfärben zu können. Dies führte jedoch zu unnötig komplexer und tief verschachtelter Struktur.

Als Alternative wurde ein SVG-Sprite geprüft, jedoch verworfen, da die Icons dabei nicht mehr als einzelne, leicht bearbeitbare Dateien im Projekt vorliegen und die Handhabung (insbesondere für dynamische Anpassungen) unflexibel ist.

Stattdessen wurde auf den Vite SVG Loader umgestellt. Dadurch können SVGs direkt als Komponenten importiert werden (?component), bleiben als einzelne Dateien erhalten und lassen sich weiterhin einfach über currentColor dynamisch einfärben. Das reduziert die Komplexität, verbessert Wartbarkeit und Lesbarkeit.

[benderl]

Die Änderungen an den drei Dateien des Cards Display Themes sind aus Versehen rein gekommen?

[Brett-S-OWB]

Die Änderungen an den drei Dateien des Cards Display Themes sind aus Versehen rein gekommen?

Ja das sind sie, ich hatte sie gleichseitig offen, können wir ignorieren.