Paul Nothaft
e1180f8e34
Frontend, kleinere Befunde: - Das Standort-Menue liess sich nur wischen oder ueber den Kartenmarker oeffnen. Der Griff ist jetzt ein Knopf mit aria-expanded, damit auch per Tastatur erreichbar; der Umschalter Strasse/Satellit hat aria-pressed und ein Label, das den Zustand nennt. - Der Filterschalter "Nur passende Sensoren anzeigen" wirkte nicht, solange eine Auswahlliste offen war: der Klick-Handler ersetzte das Overlay-DOM, bevor das change-Ereignis des Kontrollkaestchens ausgeliefert wurde. Er wird jetzt vor dem Schliessen der Liste behandelt. - Der Theme-Wechsel zeichnete nicht neu, die Leaflet-Kacheln blieben bis zum naechsten Backend-Update im alten Stil - seit der Dauerkarte auf der Uebersicht deutlich sichtbar. - Toter Code entfernt (fahrzeugGlyphPfade, .dot.neutral) und zwei Kommentare berichtigt, die Gegenteiliges behaupteten. Dokumentation: - AGENTS.md widersprach sich an sechs Stellen. Berichtigt: Fahrterkennung laeuft ueber die Zuendung, nicht ueber WLAN; Datenweg ist flespi, nicht MQTT; Modulzahl und Zeilenzahl stimmen wieder; Entity-IDs werden im Setup-Menue zugeordnet, nicht in einstellungen.py; STANDORT_TRACKER ist belegt, nicht leer. - SPECIFICATION.md beschreibt durchgehend den Stand vor der FMM003- Umstellung. Statt es zu Teilen umzuschreiben und dabei Ungenauigkeiten zu riskieren, steht jetzt ein datierter Hinweis am Anfang, der die drei geaenderten Punkte benennt und auf AGENTS.md verweist. Alles Uebrige des Dokuments gilt unveraendert weiter. - INSTALL.md: Die zirkulaere Schrittfolge (Schritt 4 verweist auf 9, Schritt 7 auf 4) ist als solche benannt und aufgeloest. Die Override-Datei ist mit Pfad genannt, samt dem Hinweis, dass sie gesichert wird. Und die drei mit Test-Entitaeten der Entwicklungsinstanz vorbelegten Rollen sind erwaehnt - auf einer frischen Installation zeigen sie ins Leere. - README, Profilvorlage: WLAN-Reste entfernt, zwei Falschaussagen aus dem ersten Review nachgezogen (Statistik rechnet echt, die 97-Prozent-Volltankungsregel wurde entfernt), Dateiuebersicht um die fuenf fehlenden pyscript-Dateien und entitaeten.py ergaenzt. - update.ps1 liefert jetzt auch shell_beleg_parser.py aus. Die Datei liegt in data/, ist aber Code - Aenderungen am Belegleser, dem einzigen getesteten Teil des Projekts, kamen bisher auf keiner Instanz an. - design/README: Zwei Dateien der Inhaltstabelle liegen gar nicht in dem Ordner, weshalb das Board aus der Repo-Kopie heraus leer bleibt - jetzt vermerkt. Ausserdem die Behauptung berichtigt, die Auflage ruehre audi-dashboard-app.js nicht an: der Stylesheet-Loader wurde dort ergaenzt. Geprueft: Panel laedt, alle neun pyscript-Entitaeten werden veroeffentlicht, Zuordnen und Zuruecksetzen funktionieren, keine neuen Fehler im Protokoll.
80 lines
6.4 KiB
Markdown
80 lines
6.4 KiB
Markdown
# design/ — Entwurf aus Claude Design
|
|
|
|
Export des Claude-Design-Projekts **DataMetric360 App Design**
|
|
(https://claude.ai/design/p/c28a8d4d-ec4e-4178-9e49-ab5b90c02097).
|
|
|
|
Das ist der **Entwurf**, nicht der lauffähige Code. Umgesetzt wird er später in
|
|
`companion-app/` auf Basis der Komponenten aus `design-system/`; die Architektur dahinter steht in
|
|
`../COMPANION_APP_ARCHITECTURE.md`, der Auftrag an den Entwurf in `../DESIGN_BRIEF_DATAMETRIC360.md`.
|
|
|
|
## Inhalt
|
|
|
|
| Pfad | Was |
|
|
|---|---|
|
|
| `DataMetric360.dc.html` | Einstiegsdatei des Entwurfs |
|
|
| `DM360.dc.html` | Die eigentlichen Bildschirme und Zustände |
|
|
| `DataMetric360 Board.dc.html` | Vergleichsansicht: dieselbe App gleichzeitig als Smartphone- und Großbildschirm-Rahmen nebeneinander, mit Bildschirm-/Theme-Umschalter. Steuert beide Rahmen per `postMessage`. |
|
|
| `dm360-host.html` | Lädt `audi-dashboard-app.js` in einem eigenen `<audi-dashboard-panel>`, hängt danach `audi-dashboard-ios.css` in dessen Shadow-Root - der eigentliche Träger hinter dem Board. **Achtung: beide Dateien liegen nicht in diesem Ordner.** Aus der Repo-Kopie heraus bleibt das Board deshalb leer; es läuft nur im Claude-Design-Projekt, wo sie mit hochgeladen sind. |
|
|
| `ios-frame.jsx` | iOS-26-Gerätekachel (Statusleiste, Dynamic Island, Home-Indikator) - reine Optik, keine App-Logik. |
|
|
| `audi-dashboard-ios.css` *(liegt in `../homeassistant/www/`, nicht in diesem Ordner)* | **Die eigentliche Neuerung dieses Exports.** Optik-Auflage über `audi-dashboard.css`: iOS-natives Erscheinungsbild (44-px-Zeilen, transluzente Tab-Leiste, iOS-Schalter) plus - wichtig - die responsive Großbildschirm-Umsetzung per `@container (min-width:860px)` (Tab-Leiste wird zur seitlichen Navigation). **Seit 2026-08-11 in `homeassistant/www/` scharf geschaltet und im Docker-Testcontainer bei 375px und 1280px verifiziert.** Die Auflage selbst ist rein additiv; `audi-dashboard-app.js` wurde nur um den Stylesheet-Loader ergänzt, der sie nachlädt (siehe unten). |
|
|
| `datametric360-ios.css` | Dieselbe Optik-Auflage, aber für die `@audi-dash/ui`-Komponentenklassen (`.ads-*`) statt für die Panel-eigenen Klassen - für später, wenn `companion-app/` eine UI bekommt. |
|
|
| `support.js` | Hilfsfunktionen des Entwurfs |
|
|
| `assets/` | Icons, Logos, Typenschilder und Schriften, die der Entwurf verwendet |
|
|
| `uploads/` | Rohdateien, die ins Design-Projekt hochgeladen wurden (Schriften, Ringe, alle RS-/S-Typenschilder) |
|
|
| `_ds/` | Kompiliertes Bündel des Design-Systems `@audi-dash/ui` - erzeugt aus `../design-system/`, hier nur mitgeliefert, damit der Entwurf für sich allein darstellbar ist. **Nicht von Hand ändern**, sondern `../design-system/` anpassen und neu synchronisieren. |
|
|
|
|
## Stand dieses Exports
|
|
|
|
Heruntergeladen am 2026-08-11 direkt per Claude-Design-MCP (nicht per ZIP). Zwei bekannte Abweichungen,
|
|
die im Design-Projekt bereits als Korrektur beauftragt, in *diesem* Export aber noch nicht enthalten
|
|
sind:
|
|
|
|
1. **Falsches Modell:** zeigt „Audi RS 6 Avant" mit RS-6-Typenschild. Richtig ist der
|
|
**RS 4 Avant competition** (siehe `../SPECIFICATION.md` §1).
|
|
2. **Zu geringer Umfang:** enthält erst die Hauptbildschirme. Es fehlen 16 weitere Seiten, die das
|
|
bestehende HA-Panel bereits hat (Fahrzeugstatus, Fahrzeugdaten, Batterieverlauf, Service,
|
|
Werkstatt, Servicebuch, Versicherung/Steuer, Beitrag, Vertragsdetails, Schutzbrief, Notruf,
|
|
Kfz-Steuer, Reifen, Fahrt-Detail, Tankvorgang-Detail sowie deutlich umfangreichere Einstellungen)
|
|
- vollständige Liste in `../SPECIFICATION.md` §3.
|
|
|
|
**Drittens, neu und wichtig:** das im Board-Entwurf verwendete `audi-dashboard-app.js` weicht vom
|
|
tatsächlich in `../homeassistant/www/` laufenden Stand ab (641 Zeilen Unterschied im Diff). Der
|
|
Design-Entwurf scheint auf einem älteren Stand aufzusetzen und enthält nicht alle seither gemachten
|
|
Anpassungen - u. a. fehlen die Vier-Kacheln-Kurzwahl auf der Übersicht (Fahrzeugstatus/Service/
|
|
Reifen/Tanken), die füllstandsabhängige Balkenfarbe und die Resttank-in-Liter-Angabe. **Deshalb wurde
|
|
nur `audi-dashboard-ios.css` übernommen (reine CSS-Auflage, keine Logik) - `audi-dashboard-app.js`
|
|
selbst wurde NICHT aus diesem Export übernommen**, um diese bereits fertigen Funktionen nicht zu
|
|
verlieren.
|
|
|
|
**Aktivierung 2026-08-11:** `audi-dashboard-ios.css` ist jetzt in
|
|
`../homeassistant/www/audi-dashboard-app.js` (Stylesheet-Loader, ~Zeile 3098) fest verdrahtet - als
|
|
zweiter `<link>` neben `audi-dashboard.css`, rein additiv. Im Docker-Testcontainer bei 375px
|
|
(Handy: `.phone` bleibt `flex`, Tab-Leiste unten) und 1280px (Desktop: `.phone` wird `grid`,
|
|
264px-Seitennavigation, Inhalt bis 860px begrenzt) verifiziert.
|
|
|
|
Dabei zwei Fixes nötig, die für künftige Arbeit an dieser Datei wichtig sind:
|
|
1. **`:host`-Selektoren werden von diesem Browser innerhalb von `@container`-Blöcken verworfen**
|
|
(unbedingtes `:host > div{...}` parst und wirkt, dasselbe innerhalb `@container(){}` verschwindet
|
|
spurlos aus dem CSSOM - kein Syntaxfehler, die Regel fehlt einfach). Der alten `:host > div`-
|
|
Zentrierung aus `audi-dashboard.css` (`max-width:412px`, für die alte Einzelgröße gedacht) musste
|
|
deshalb **unbedingt** statt bedingt (nur ab 860px) die Deckelung genommen werden - auf schmalen
|
|
Bildschirmen macht der Viewport selbst die Breite eng genug, das ist folgenlos.
|
|
2. **`audi-dashboard-version.json` muss bei jeder CSS-/JS-Änderung im Testcontainer hochgezählt
|
|
werden**, sonst liefert der Browser die alte Datei aus dem HTTP-Cache aus, obwohl der Server
|
|
längst die neue hat (an `audi-dashboard-panel.js`'s eigenem Cache-Busting-Mechanismus erkennbar,
|
|
siehe dessen Kommentar). Zusätzlich cacht `window.__audiDashboardStarten` das Ladeergebnis pro
|
|
Browser-Tab - eine SPA-interne Navigation zur selben Panel-URL lädt nicht neu; ein neuer Tab
|
|
(oder echter Hard-Reload) ist bei Verifikationen nötig.
|
|
|
|
Bevor diese Auflage weitergehend produktiv genutzt wird, muss noch geklärt werden, ob/wie sie mit
|
|
zukünftigen Änderungen am aktuellen `audi-dashboard-app.js` zusammenpasst.
|
|
|
|
Dieser Ordner wird beim nächsten Export komplett ersetzt.
|
|
|
|
## Markenrechtlicher Hinweis
|
|
|
|
`assets/` und `uploads/` enthalten die Hausschrift Audi Type, die Ringe und die Typenschilder. Die
|
|
sind lizenz- beziehungsweise markenrechtlich geschützt (`../bauauftrag.md` §8/§12) und nur für diese
|
|
private Installation freigegeben. Dieses Repository ist deshalb privat zu halten. `../design-system/`
|
|
kommt bewusst ohne diese Dateien aus, weil es nach außen (Claude Design) hochgeladen wird.
|