tobias
4a58021670
Drei zusammenhaengende Runden, alle live bei 375x812 gegen audi_ha_test geprueft und in beiden Codebasen angewandt. Paritaetsrunde 2: der gemeinsame Rahmen war das eigentliche Problem - Seitenrand, Kachelabstaende, Kopfleiste, Tableiste und vier Bausteine des Design-Systems trugen noch den Stand vor der iOS-Entscheidung. Dazu sieben Bildschirme neu aufgebaut. Zwei Panel-Fehler dabei mitbehoben: teaser() zeigte unter "Letzte Fahrt" den aeltesten Datensatz, und "Daten bearbeiten" war ein toter Knopf. Paritaetsrunde 3: das Panel hat nie Audi Type gerendert. @font-face in einem Shadow Root wird ignoriert - Schriftschnitte registriert der Browser pro Dokument, nie pro Shadow Tree. Die drei Schnitte liegen jetzt in audi-dashboard-schriften.css und werden ins Dokument gehaengt. Damit erledigt sich eine ganze Reihe von "die Schrift sieht anders aus"-Eindruecken: die beiden Anwendungen zeigten tatsaechlich verschiedene Schriften. Ausserdem "Daten bearbeiten" im Panel gebaut und portiert, das Zeilenmenue entfernt und die letzten neun Bildschirme angeglichen. Designpruefung: die fuenf Punkte der Reihenfolge. Beim vierten hat das Messen den Befund veraendert - gezaehlt waren die deklarierten Groessen, wirksam war laengst eine saubere Sieben-Schritt-Skala mit 27 Ausreissern; die sind jetzt auf den naechsten Schritt gezogen, keiner verschiebt sich um mehr als 1px. Zuletzt: die Standortvorschau zeichnete die falsche Nadel (das Panel wechselt den Icon-Satz ab 34px, die App nahm immer den grossen), und der Kopfabstand der App ist auf den sicheren Bereich reduziert - die 56px des Panels liegen dort unter der Kopfleiste von Home Assistant, in der nativen Huelle steht darueber nichts. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
131 lines
3.4 KiB
TypeScript
131 lines
3.4 KiB
TypeScript
/**
|
|
* Flacher Navigationszustand — kein Router-Paket.
|
|
*
|
|
* Übernommen aus dem alten HA-Panel (`route` + `ZURUECK`): Die App hat keinen
|
|
* Verlaufsstapel, sondern genau eine aktuelle Seite und eine feste Tabelle,
|
|
* welche Seite der Zurück-Pfeil ansteuert. Das ist bewusst so geblieben —
|
|
* die Verschachtelung ist flach genug (höchstens drei Ebenen), und ein Router
|
|
* würde nur Gewicht ohne Nutzen bringen.
|
|
*/
|
|
|
|
export const HAUPTBEREICHE = ["home", "audi", "trips", "stat", "fuel"] as const
|
|
|
|
export type Hauptbereich = (typeof HAUPTBEREICHE)[number]
|
|
|
|
export type SeitenName =
|
|
| Hauptbereich
|
|
// Unterseiten von "Mein Audi"
|
|
| "ident"
|
|
| "battverlauf"
|
|
| "battliste"
|
|
| "service"
|
|
| "werkstatt"
|
|
| "sbuch"
|
|
| "reifen"
|
|
| "vers"
|
|
| "beitrag"
|
|
| "vertrag"
|
|
| "vertragsdetails"
|
|
| "schutz"
|
|
| "notruf"
|
|
| "steuer"
|
|
// Detailseiten der Listen
|
|
| "trip"
|
|
| "fill"
|
|
// Sonstige
|
|
| "sicherheit"
|
|
| "tuerenklappen"
|
|
| "standort"
|
|
| "live"
|
|
| "einst"
|
|
|
|
export interface Route {
|
|
name: SeitenName
|
|
/** Datensatz-Kennung bei Detailseiten (Fahrt, Tankvorgang, Servicebuch). */
|
|
id?: string
|
|
}
|
|
|
|
/**
|
|
* Ziel des Zurück-Pfeils je Unterseite. Seiten, die hier fehlen, sind
|
|
* Hauptbereiche und zeigen keinen Zurück-Pfeil.
|
|
*/
|
|
export const ZURUECK: Partial<Record<SeitenName, SeitenName>> = {
|
|
trip: "trips",
|
|
fill: "fuel",
|
|
service: "audi",
|
|
reifen: "audi",
|
|
ident: "audi",
|
|
battverlauf: "audi",
|
|
battliste: "battverlauf",
|
|
vers: "audi",
|
|
beitrag: "vers",
|
|
vertrag: "vers",
|
|
vertragsdetails: "vers",
|
|
schutz: "vertragsdetails",
|
|
steuer: "vers",
|
|
notruf: "vers",
|
|
werkstatt: "service",
|
|
sbuch: "service",
|
|
einst: "home",
|
|
sicherheit: "home",
|
|
tuerenklappen: "sicherheit",
|
|
standort: "home",
|
|
live: "home",
|
|
}
|
|
|
|
/**
|
|
* Überschrift je Seite — wortgleich mit dem Kopf, den `render()` im Panel
|
|
* setzt (`head[1]`, audi-dashboard-app.js). Neun Titel wichen davon ab
|
|
* (Fahrzeugdaten/Batterie/Versicherung & Steuer/Beitrag/Notruf/Werkstatt/
|
|
* Wartungsplan/Fahrt/Tankvorgang); das waren keine Entscheidungen, sondern
|
|
* Drift. `live` hat keine Panel-Entsprechung (companion-app-eigener Screen).
|
|
*/
|
|
export const TITEL: Record<SeitenName, string> = {
|
|
home: "Übersicht",
|
|
audi: "Mein Audi",
|
|
trips: "Fahrten",
|
|
stat: "Statistik",
|
|
fuel: "Tanken",
|
|
ident: "Identität und Technik",
|
|
battverlauf: "Batteriespannung",
|
|
battliste: "Messwerte",
|
|
service: "Service",
|
|
werkstatt: "Autohaus",
|
|
sbuch: "Eintrag",
|
|
reifen: "Reifen",
|
|
vers: "Versicherung/Steuer",
|
|
beitrag: "Beitrag anpassen",
|
|
vertrag: "Vertrag",
|
|
vertragsdetails: "Vertragsdetails",
|
|
schutz: "Schutzbrief",
|
|
notruf: "Rufnummern",
|
|
steuer: "Kfz-Steuer",
|
|
trip: "Einzelfahrt",
|
|
fill: "Einzelbeleg",
|
|
sicherheit: "Fahrzeugstatus",
|
|
tuerenklappen: "Türen und Klappen",
|
|
standort: "Standort",
|
|
live: "Fahrt läuft",
|
|
einst: "Einstellungen",
|
|
}
|
|
|
|
export function istHauptbereich(name: SeitenName): name is Hauptbereich {
|
|
return (HAUPTBEREICHE as readonly string[]).includes(name)
|
|
}
|
|
|
|
/**
|
|
* Der Hauptbereich, zu dem eine Seite gehört — bestimmt, welcher Eintrag in
|
|
* Tab-Leiste bzw. Seitenleiste hervorgehoben wird. Folgt der ZURUECK-Kette
|
|
* nach oben.
|
|
*/
|
|
export function bereichVon(name: SeitenName): Hauptbereich {
|
|
let aktuell: SeitenName = name
|
|
for (let tiefe = 0; tiefe < 5; tiefe++) {
|
|
if (istHauptbereich(aktuell)) return aktuell
|
|
const eltern = ZURUECK[aktuell]
|
|
if (!eltern) return "home"
|
|
aktuell = eltern
|
|
}
|
|
return "home"
|
|
}
|