Update-Kacheln zu einer zusammengefuehrt
Die App hatte "App-Update" (OTA-Buendel) und "Version" (Integration) als zwei Kacheln nebeneinander - zweimal dieselbe Frage. Jetzt eine Kachel "Version" mit zwei benannten, durch eine Haarlinie getrennten Abschnitten; ohne das staenden zwei gleich aussehende "Update installieren"-Knoepfe untereinander, ohne dass man ihnen ansieht, was sie erneuern. Die Unterueberschrift "Integration" erscheint nur, wenn wirklich ein zweiter Abschnitt folgt (otaMoeglich()) - sonst waere es eine Unterteilung ohne zweiten Teil. Wo es kein OTA gibt, also im Panel und in der App im Browser, sieht die Kachel damit aus wie zuvor. Das Panel bekommt den App-Abschnitt nicht: die App traegt ihre Dateien fest gebuendelt und kann veralten, das Panel laedt sie bei jedem Aufruf neu. Eine geplante Abweichung. Nachgemessen: Panel 216px, App im Browser 203px, gleicher Inhalt; die Gestaltung des zweiten Abschnitts durch Einsetzen gegengeprueft. 299 Tests gruen, 0 Tracebacks. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -11763,3 +11763,37 @@ den ersten Eintrag zurueck. Das Badge haengt an "RS 6" und war nie betroffen.
|
||||
|
||||
Nachgemessen: zehn Eintraege, laengster "RS 3 Limousine" mit 115px bei 142px
|
||||
Platz - nichts wird mehr abgeschnitten.
|
||||
|
||||
## CW. Zwei Update-Kacheln wurden eine (2026.9.5.16)
|
||||
|
||||
Vorgabe des Eigentuemers: *"In Einstellungen gibt es zwei Update Kacheln.
|
||||
Einmal fuer die Integration einmal fuer die App. Fuehre beides zusammen in eine
|
||||
Kachel"* - und dazu: *"Der Bereich fuer die App soll im Panel einfach fehlen und
|
||||
die Kachel kleiner sein"*.
|
||||
|
||||
Die App hatte "App-Update" (das OTA-Buendel) und "Version" (die Integration)
|
||||
nebeneinander. Es ist zweimal dieselbe Frage - was laeuft hier, und gibt es
|
||||
etwas Neueres. Jetzt eine Kachel "Version" mit zwei Abschnitten.
|
||||
|
||||
**Warum die Abschnitte benannt und getrennt sind:** ohne das staenden zwei
|
||||
gleich aussehende "Update installieren"-Knoepfe untereinander, ohne dass man
|
||||
ihnen ansieht, was sie erneuern. `.dm-abschnitt` traegt die Haarlinie am
|
||||
ZWEITEN Abschnitt (Geschwister-Selektor), damit der erste keinen Strich direkt
|
||||
unter der Kachelueberschrift bekommt.
|
||||
|
||||
**Die Unterueberschrift "Integration" erscheint nur, wenn wirklich ein zweiter
|
||||
Abschnitt folgt** (`otaMoeglich()`). Sonst staende eine Unterteilung ohne
|
||||
zweiten Teil da. Damit sieht die Kachel ueberall dort, wo es kein OTA gibt -
|
||||
Panel, App im Browser - genauso aus wie vorher.
|
||||
|
||||
**Das Panel bleibt unangetastet.** Es kennt den App-Abschnitt gar nicht und
|
||||
soll ihn nicht bekommen: die App traegt ihre Dateien fest gebuendelt und kann
|
||||
veralten, das Panel laedt sie bei jedem Aufruf neu (siehe
|
||||
`daten/appVersion.ts`). Eine geplante Abweichung, kein Versehen.
|
||||
|
||||
Nachgemessen: Panel-Kachel 216px, App im Browser 203px, beide mit demselben
|
||||
Inhalt und ohne App-Abschnitt; der Unterschied kommt aus der Kachelpolsterung.
|
||||
Die Gestaltung des zweiten Abschnitts gegengeprueft, indem einer eingesetzt
|
||||
wurde: Haarlinie 0.8px, 16px Abstand und 16px Polster darueber, Abschnittskopf
|
||||
14px ueber seinem Inhalt. Der Abschnitt selbst ist nur in der nativen Huelle zu
|
||||
sehen - im Browser ist `otaMoeglich()` falsch.
|
||||
|
||||
@@ -730,48 +730,30 @@ export function Einstellungen({
|
||||
</Tile>
|
||||
|
||||
|
||||
{otaMoeglich() && (
|
||||
<Tile>
|
||||
<span className="ads-eyebrow">App-Update</span>
|
||||
{otaUpdateVerfuegbar && otaBuendel ? (
|
||||
<>
|
||||
<Werteliste
|
||||
kinder={
|
||||
<Wertzeile
|
||||
label="Verfügbare Version"
|
||||
wert={otaBuendel.version}
|
||||
zusatz={`${Math.round(otaBuendel.bytes / 1024)} KB`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<p className="dm-erklaerung">
|
||||
Lädt die Oberfläche neu und startet die App neu. Fahrzeugprofil, Fahrten und
|
||||
Tankvorgänge sind davon nicht betroffen — die liegen in Home Assistant.
|
||||
</p>
|
||||
<div className="dm-knopfreihe">
|
||||
<ActionButton onClick={() => void otaAusloesen()} disabled={otaLaeuft}>
|
||||
{otaLaeuft ? "Lade Update …" : "Update installieren"}
|
||||
</ActionButton>
|
||||
</div>
|
||||
{otaFehler && <p className="dm-fehler">{otaFehler}</p>}
|
||||
</>
|
||||
) : (
|
||||
<p className="dm-erklaerung">
|
||||
{otaBuendel
|
||||
? `Diese App ist aktuell (${eigeneVersion() ?? "unbekannte Version"}).`
|
||||
: "Der Server hat gerade kein Update-Bündel hinterlegt."}
|
||||
</p>
|
||||
)}
|
||||
</Tile>
|
||||
)}
|
||||
|
||||
|
||||
{/* Installierte Fassung und ihr Update stehen in EINER Kachel: es ist
|
||||
dieselbe Sache aus zwei Blickwinkeln, und zwei Kacheln nebeneinander
|
||||
zwangen zum Vergleichen zweier Zahlen ueber eine Kachelgrenze hinweg
|
||||
(Vorgabe des Eigentuemers, 04.09.2026). */}
|
||||
(Vorgabe des Eigentuemers, 04.09.2026).
|
||||
|
||||
Seit dem 05.09.2026 gilt das auch fuer die App selbst: sie hatte eine
|
||||
eigene Kachel "App-Update" daneben, obwohl es dieselbe Frage ist -
|
||||
"was laeuft hier, und gibt es etwas Neueres". Zusammengelegt auf
|
||||
Vorgabe des Eigentuemers.
|
||||
|
||||
Die beiden Abschnitte sind BENANNT und durch eine Haarlinie getrennt.
|
||||
Ohne das staenden zwei gleich aussehende "Update installieren"-Knoepfe
|
||||
untereinander, ohne dass man ihnen ansieht, was sie erneuern. Das
|
||||
Panel kennt nur den Integrationsteil - die App traegt ihre Dateien
|
||||
fest gebuendelt, das Panel laedt sie bei jedem Aufruf neu. */}
|
||||
<Tile>
|
||||
<span className="ads-eyebrow">Version</span>
|
||||
|
||||
<div className="dm-abschnitt">
|
||||
{/* Nur wenn darunter wirklich ein zweiter Abschnitt folgt. Ohne den
|
||||
staende "Integration" allein unter "Version" - eine Unterteilung
|
||||
ohne zweiten Teil, genau wie im Panel, das den App-Abschnitt gar
|
||||
nicht kennt. */}
|
||||
{otaMoeglich() && <span className="ads-eyebrow">Integration</span>}
|
||||
<Werteliste
|
||||
kinder={
|
||||
<Wertzeile
|
||||
@@ -876,6 +858,47 @@ export function Einstellungen({
|
||||
!updatePruefenLaeuft &&
|
||||
!updateInstallierenLaeuft &&
|
||||
!updateNeustartLaeuft && <p className="dm-fehler">{integrationUpdate.fehler}</p>}
|
||||
</div>
|
||||
|
||||
{otaMoeglich() && (
|
||||
<div className="dm-abschnitt">
|
||||
<span className="ads-eyebrow">App</span>
|
||||
<Werteliste
|
||||
kinder={
|
||||
<Wertzeile label="Installiert" wert={eigeneVersion() ?? "unbekannt"} zusatz="Diese App" />
|
||||
}
|
||||
/>
|
||||
{otaUpdateVerfuegbar && otaBuendel ? (
|
||||
<>
|
||||
<Werteliste
|
||||
kinder={
|
||||
<Wertzeile
|
||||
label="Verfügbare Version"
|
||||
wert={otaBuendel.version}
|
||||
zusatz={`${Math.round(otaBuendel.bytes / 1024)} KB`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<p className="dm-erklaerung">
|
||||
Lädt die Oberfläche neu und startet die App neu. Fahrzeugprofil, Fahrten und
|
||||
Tankvorgänge sind davon nicht betroffen — die liegen in Home Assistant.
|
||||
</p>
|
||||
<div className="dm-knopfreihe">
|
||||
<ActionButton onClick={() => void otaAusloesen()} disabled={otaLaeuft}>
|
||||
{otaLaeuft ? "Lade Update …" : "Update installieren"}
|
||||
</ActionButton>
|
||||
</div>
|
||||
{otaFehler && <p className="dm-fehler">{otaFehler}</p>}
|
||||
</>
|
||||
) : (
|
||||
<p className="dm-erklaerung">
|
||||
{otaBuendel
|
||||
? "Diese App ist aktuell."
|
||||
: "Der Server hat gerade kein Update-Bündel hinterlegt."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Tile>
|
||||
|
||||
{/* Debug-Mode: Zugaenge, Dongle und der letzte Datensatz des Geraets.
|
||||
|
||||
@@ -1653,6 +1653,29 @@ button.dm-listenzeile {
|
||||
aus dem Blick geraten. */
|
||||
/* Zwei gleichrangige Knöpfe nebeneinander - der Aufbau allein, ohne Aussage
|
||||
darüber, wozu sie dienen. Das QR-Blatt setzt hier „Abbrechen" und „Bild
|
||||
auswählen" hin und speichert gar nichts.
|
||||
|
||||
Bis zum 05.09.2026 hieß auch das `dm-speicherleiste`. Der Name log: bei
|
||||
einer Suche nach allen Speicherleisten des Projekts kam das QR-Blatt als
|
||||
Treffer heraus, obwohl es dort nichts zu speichern gibt (vom Eigentümer
|
||||
richtiggestellt). Eine Klasse soll eine Sache bedeuten. */
|
||||
/* Zwei benannte Abschnitte in EINER Kachel, durch eine Haarlinie getrennt.
|
||||
|
||||
Gebraucht in "Version": dort stehen seit dem 05.09.2026 die Integration
|
||||
und die App untereinander, jede mit eigenem Stand und eigenem
|
||||
Update-Knopf. Ohne Benennung und Trennung staenden dort zwei gleich
|
||||
aussehende "Update installieren"-Knoepfe, ohne dass man ihnen ansieht,
|
||||
was sie erneuern.
|
||||
|
||||
Die Linie sitzt am ZWEITEN Abschnitt (Geschwister-Selektor), damit der
|
||||
erste keinen Strich direkt unter der Kachelueberschrift bekommt. */
|
||||
.dm-abschnitt + .dm-abschnitt {
|
||||
margin-top: var(--sp-4);
|
||||
padding-top: var(--sp-4);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* Die Ueberschrift eines Abschnitts ist kein direktes Kind der Kachel, die
|
||||
Regel .ads-tile > .ads-eyebrow:first-child greift hier also nicht. */
|
||||
.dm-abschnitt > .ads-eyebrow:first-child {
|
||||
display: block;
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":"2026.9.5.14","sha256":"d684e56da92c19722a2a64098806e6ac8aa8d9ee18b6e624dfe2a0c73a76d3b2","bytes":324512,"gebaut":"2026-09-05T08:58:40Z"}
|
||||
{"version":"2026.9.5.16","sha256":"0e0e8054be5aff66e649b872c00b809be6151b6e63e0e4d902342ed8d7b6b6c4","bytes":324571,"gebaut":"2026-09-05T09:19:12Z"}
|
||||
Binary file not shown.
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"domain": "audi_dashboard",
|
||||
"name": "Audi Dashboard",
|
||||
"version": "2026.9.5.14",
|
||||
"version": "2026.9.5.16",
|
||||
"documentation": "https://gitea.nothaft.cloud/paul/audi-app/src/branch/main/README.md",
|
||||
"issue_tracker": "https://gitea.nothaft.cloud/paul/audi-app/issues",
|
||||
"codeowners": [
|
||||
|
||||
Reference in New Issue
Block a user