tobias
838ea7f362
Neuer Vergleichsentwurf (Smartphone + Großbildschirm nebeneinander) direkt per Claude-Design-MCP importiert. Enthaelt die responsive Grossbildschirm-Umsetzung (Tab-Leiste wird zur Seitennavigation ab 860px) als reine CSS-Auflage. audi-dashboard-app.js aus dem Export weicht 641 Zeilen vom produktiven Stand ab (fehlende Vier-Kacheln-Kurzwahl, Balkenfarbe, Resttank-Liter) - deshalb NICHT uebernommen, nur die CSS-Auflage (audi-dashboard-ios.css) nach homeassistant/www/ kopiert, aber noch nicht in die Panel-Ladelogik eingebunden. Entscheidung zur Aktivierung und zur Aufloesung der JS-Abweichung steht noch aus.
74 lines
2.4 KiB
HTML
74 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>DataMetric360 Panel</title>
|
|
<style>
|
|
html, body { margin: 0; height: 100%; background: #0C1014; overflow: hidden; }
|
|
audi-dashboard-panel { display: block; width: 100%; height: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="audi-dashboard-app.js"></script>
|
|
<script>
|
|
/* Das Panel erst nach dem Skript erzeugen: liegt es schon im HTML, wertet
|
|
customElements.define() es noch waehrend der Skriptauswertung auf und
|
|
connectedCallback greift auf MOCK_HASS zu, bevor die Konstante steht. */
|
|
document.body.appendChild(document.createElement('audi-dashboard-panel'));
|
|
/* Eigenes Dokument je Rahmen: audi-dashboard-app.js haelt ROOT/HOST/route
|
|
modulweit, zwei Panels im selben Dokument wuerden sich ueberschreiben.
|
|
Ein iframe pro Groesse gibt jeder Fassung ihren eigenen Zustand. */
|
|
const panel = document.querySelector('audi-dashboard-panel');
|
|
panel.dataset.theme = 'nacht';
|
|
|
|
/* iOS/CI-Auflage in den Shadow-Root haengen, nach der eigenen audi-dashboard.css */
|
|
(function auflage() {
|
|
if (!panel.shadowRoot) { setTimeout(auflage, 100); return; }
|
|
if (panel.shadowRoot.querySelector('link[data-ios]')) return;
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.dataset.ios = '1';
|
|
link.href = 'audi-dashboard-ios.css';
|
|
panel.shadowRoot.appendChild(link);
|
|
})();
|
|
|
|
function zeige(screen) {
|
|
const r = panel.shadowRoot;
|
|
if (!r) return false;
|
|
if (screen === 'einst') {
|
|
const b = r.getElementById('ringsbtn');
|
|
if (!b) return false;
|
|
b.click();
|
|
return true;
|
|
}
|
|
const tab = r.querySelector('.tab[data-tab="' + screen + '"]');
|
|
if (!tab) return false;
|
|
tab.click();
|
|
return true;
|
|
}
|
|
|
|
let letzterScreen = null;
|
|
window.addEventListener('message', (e) => {
|
|
const m = e.data && e.data.dm360;
|
|
if (!m) return;
|
|
if (m.theme) panel.dataset.theme = m.theme;
|
|
if (m.screen && m.screen !== letzterScreen) {
|
|
let n = 0;
|
|
const t = setInterval(() => { if (zeige(m.screen) || ++n > 40) clearInterval(t); }, 80);
|
|
letzterScreen = m.screen;
|
|
}
|
|
});
|
|
|
|
/* Elternseite anstupsen, sobald das Panel steht */
|
|
(function bereit(n) {
|
|
if (panel.shadowRoot && panel.shadowRoot.querySelector('.phone')) {
|
|
parent.postMessage({ dm360bereit: true }, '*');
|
|
return;
|
|
}
|
|
if (n < 80) setTimeout(() => bereit(n + 1), 100);
|
|
})(0);
|
|
</script>
|
|
</body>
|
|
</html>
|