tobias
e1d570992e
Drei zusammengehörige Teile in einem Repository: - homeassistant/ Das fertige, im Einsatz befindliche Home-Assistant-Panel (panel_custom Custom Element + pyscript-Backend). Echte Fahrzeug- und Personendaten (fahrzeugprofil.json, fahrten.jsonl, tankvorgaenge.jsonl, Tankbelege) bleiben per .gitignore außen vor; die anonymisierte Vorlage fahrzeugprofil.example.json ist mit dabei. - design-system/ Eigenständige React-Komponentenbibliothek (@audi-dash/ui), die die visuelle Sprache des Panels nachbildet - ohne Audi-Markenzeichen und ohne die lizenzierte Hausschrift. Dient als Grundlage für Claude Design. War bis hierher ein eigenes Repository und ist in dieses eingeschmolzen worden. - companion-app/ Datenschicht der neuen App DataMetric360 (iOS/Android via Capacitor, zusätzlich als Iframe im HA-Dashboard). Noch ohne Oberfläche: REST- und WebSocket-Zugriff auf Home Assistant plus Warteschlange für Änderungen ohne Netz. Ersetzt das eingespritzte hass-Objekt, das nur innerhalb des HA-Frontends existiert. Dazu die Projektdokumentation: SPECIFICATION.md (Ist-Stand des Panels), COMPANION_APP_ARCHITECTURE.md (Architekturentscheidungen der neuen App), AUDIT_2026-08-10.md, DESIGN_BRIEF_DATAMETRIC360.md und der ursprüngliche Bauauftrag. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import * as React from "react";
|
|
import { IconButton } from "@audi-dash/ui";
|
|
|
|
function Root({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="ads-root" data-theme="nacht" style={{ padding: 16, display: "inline-block" }}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const GearIcon = (
|
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.6">
|
|
<circle cx="12" cy="12" r="3.2" />
|
|
<path d="M12 2.5v3M12 18.5v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2.5 12h3M18.5 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1" />
|
|
</svg>
|
|
);
|
|
|
|
const BackIcon = (
|
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8">
|
|
<path d="M15 5l-7 7 7 7" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
|
|
const CloseIcon = (
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
|
|
<path d="M6 6l12 12M18 6L6 18" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
|
|
export function Default() {
|
|
return (
|
|
<Root>
|
|
<div style={{ display: "flex", gap: 12 }}>
|
|
<IconButton aria-label="Zurück">{BackIcon}</IconButton>
|
|
<IconButton aria-label="Einstellungen">{GearIcon}</IconButton>
|
|
<IconButton aria-label="Schließen">{CloseIcon}</IconButton>
|
|
</div>
|
|
</Root>
|
|
);
|
|
}
|
|
|
|
export function Disabled() {
|
|
return (
|
|
<Root>
|
|
<div style={{ display: "flex", gap: 12 }}>
|
|
<IconButton aria-label="Einstellungen" disabled>
|
|
{GearIcon}
|
|
</IconButton>
|
|
</div>
|
|
</Root>
|
|
);
|
|
}
|