/*
* Škoda-Seite.
*
* Zwei Quellen, bewusst getrennt:
*
* MQTT Ladestand, Verriegelung, Reichweite, Ladezustand, Restladezeit und
* die Wallbox-Leistung kommen laufend über solarManager/# herein und
* aktualisieren die Anzeige sofort.
*
* Ajax Alles, was nur in der Tabelle skoda steht - Türen, Fenster, Licht,
* Klappen, Kilometerstand, Position, Klima, Ladeziel - sowie sämtliche
* Auswertungen. Beim Laden einmal, danach minütlich.
*
* Das Fahrzeug meldet Türen und Licht nur, wenn es sich meldet; zwischen zwei
* Abrufen liegen im Ruhezustand bis zu einer Stunde. Die Anzeige nennt deshalb
* immer auch das Alter des Standes, statt einen alten Wert als aktuell
* auszugeben.
*
* Der Ladestand hat keine eigene Anzeige mehr: er steckt in der Akkuplatte der
* Fahrzeuggrafik - Füllhöhe, Zielmarke, Prozent und Reichweite setzt
* zeichneAkku(). Was sich nicht zeichnen lässt, steht in den Kennzahlen
* daneben (zeichneKennzahlen).
*/
var mqttData = {};
const solarMQTT = {
getMQTT: function () {
const connection = "wss://mqtt.nas.el-wa.org:443";
const client = mqtt.connect(connection, { rejectUnauthorized: false });
client.on("message", function (topic, message) {
mqttData[topic] = message;
if (topic.startsWith("solarManager/ev") || topic === "solarManager/P_PV"
|| topic === "solarManager/P_Grid") {
planeLiveAnzeige();
}
});
client.on("connect", function () { client.subscribe("solarManager/#"); });
client.on("error", function () { /* stille Wiederverbindung durch mqtt.js */ });
}
};
/* ------------------------------------------------------------------ Hilfen */
const $ = (id) => document.getElementById(id);
/** MQTT-Nutzlast als Zahl. Fehlt das Thema noch, kommt null. */
function mqZahl(name) {
const v = mqttData["solarManager/" + name];
if (v === undefined || v === null) return null;
const z = Number(String(v));
return Number.isFinite(z) ? z : null;
}
/** MQTT-Nutzlast als Text. */
function mqText(name) {
const v = mqttData["solarManager/" + name];
return (v === undefined || v === null) ? null : String(v);
}
const nf = (n, k = 0) => (n === null || n === undefined || !Number.isFinite(Number(n)))
? "–" : Number(n).toLocaleString("de-DE", { minimumFractionDigits: k, maximumFractionDigits: k });
/** Sekunden als "vor 3 min" / "vor 2 h 15 min" / "vor 4 Tagen". */
function seit(sekunden) {
if (sekunden === null || sekunden === undefined) return "";
const s = Math.max(0, Math.round(sekunden));
if (s < 90) return "vor " + s + " s";
const m = Math.round(s / 60);
if (m < 90) return "vor " + m + " min";
const h = Math.floor(s / 3600);
if (h < 36) return "vor " + h + " h " + Math.round((s - h * 3600) / 60) + " min";
return "vor " + Math.round(s / 86400) + " Tagen";
}
function zeitpunkt(iso, mitJahr = false) {
if (!iso) return "–";
const d = new Date(String(iso).replace(" ", "T"));
if (isNaN(d)) return "–";
return d.toLocaleString("de-DE", {
day: "2-digit", month: "2-digit", year: mitJahr ? "numeric" : undefined,
hour: "2-digit", minute: "2-digit"
});
}
/** Minuten als "1 h 35 min". */
function dauer(minuten) {
const m = Math.round(Number(minuten));
if (!Number.isFinite(m) || m <= 0) return "–";
if (m < 60) return m + " min";
return Math.floor(m / 60) + " h " + (m % 60) + " min";
}
/* --------------------------------------------------------------- Hinweise */
/*
* Erklärungen zu einer Zahl - woher sie stammt, was sie nicht abdeckt.
*
* Im title stehen sie am Zeiger gut, auf einem Berührungsgerät aber nirgends:
* Überfahren gibt es dort nicht, und der title erscheint nie. Das übliche
* Mittel dagegen ist, aus der Erklärung etwas Anfassbares zu machen - einen
* Auslöser, der Fokus annehmen kann, und ein Fenster, das beim nächsten
* Tippen daneben oder mit Esc wieder verschwindet. Genau das leistet ein
* Popover mit den Auslösern "focus hover": tippen öffnet, danebentippen
* schliesst, für Maus und Tastatur bleibt es beim Überfahren und Tabben.
*
* Damit das gefunden wird, trägt der Auslöser sichtbar ein Zeichen - die
* Klasse hat-hinweis setzt es. Eine Erklärung, die niemand vermutet, ist so
* gut wie keine.
*/
/** Erklärung an ein Element hängen; ohne Text wird sie wieder entfernt. */
function setzeHinweis(el, text) {
if (!el) return;
// Ohne Bootstrap bleibt der title. Weniger gut, aber nicht nichts.
if (typeof bootstrap === "undefined" || !bootstrap.Popover) {
if (text) el.title = text; else el.removeAttribute("title");
return;
}
const alt = bootstrap.Popover.getInstance(el);
if (alt) alt.dispose();
el.removeAttribute("title"); // sonst zeigt der Browser beides
if (!text) {
el.classList.remove("hat-hinweis");
["tabindex", "role", "aria-label"].forEach(a => el.removeAttribute(a));
return;
}
el.classList.add("hat-hinweis");
el.setAttribute("tabindex", "0"); // ohne Fokus kein Antippen auf iOS
el.setAttribute("role", "button");
el.setAttribute("aria-label", "Erklärung anzeigen");
new bootstrap.Popover(el, {
content: text,
trigger: "focus hover",
placement: "top",
container: "body", // sonst schneidet die Kachel ab
customClass: "skoda-erklaerung"
});
}
/**
* Erklärungen unterhalb eines Knotens auflösen, bevor er neu gebaut wird.
* Ein offenes Fenster gehört zu seinem Auslöser - verschwindet der aus dem
* Dokument, bliebe es sonst am Bildschirm stehen.
*/
function loeseHinweise(wurzel) {
if (!wurzel || typeof bootstrap === "undefined" || !bootstrap.Popover) return;
wurzel.querySelectorAll(".hat-hinweis").forEach(function (el) {
const p = bootstrap.Popover.getInstance(el);
if (p) p.dispose();
});
}
async function hole(was, extra = "") {
const antwort = await fetch("ajax/skoda.php?was=" + was + extra, { cache: "no-store" });
if (!antwort.ok) throw new Error("HTTP " + antwort.status);
return antwort.json();
}
function leer(text) {
return '
' + text + "
";
}
/* ------------------------------------------------------- Zustand des Autos */
/*
* Die Zustandswörter der API in Anzeige übersetzen. UNKNOWN ist ausdrücklich
* kein Nein: das Fahrzeug sagt dann, dass es den Zustand selbst nicht kennt,
* und die Anzeige darf daraus kein beruhigendes "geschlossen" machen.
*/
const OFFEN_WERTE = ["OPEN", "OPENED", "TRUNK_OPENED", "NO", "UNLOCKED"];
const ZUSTANDSWORT = {
OPEN: "offen", OPENED: "offen", TRUNK_OPENED: "Kofferraum offen",
CLOSED: "zu", LOCKED: "verriegelt", UNLOCKED: "entriegelt",
ON: "an", OFF: "aus", YES: "ja", NO: "nein",
UNKNOWN: "unbekannt", UNSUPPORTED: "nicht vorhanden"
};
const TEILE = [
{ id: "teil-doors", feld: "doors", name: "Türen", zu: "CLOSED" },
{ id: "teil-windows", feld: "windows", name: "Fenster", zu: "CLOSED" },
{ id: "teil-trunk", feld: "trunk", name: "Heckklappe", zu: "CLOSED" },
{ id: "teil-bonnet", feld: "bonnet", name: "Motorhaube", zu: "CLOSED" },
{ id: "teil-lights", feld: "lights", name: "Licht", zu: "OFF" }
];
/**
* Die Teile in der Fahrzeuggrafik mit ihren Einträgen koppeln - dieselbe
* Wirkung wie umgekehrt, nur von der Grafik aus angestossen. Die Gruppen
* stehen fest im Markup, also genügt einmaliges Verdrahten beim Seitenaufbau.
*/
function koppleFahrzeugTeile() {
document.querySelectorAll("#skodaAuto .teil[id]").forEach(function (knoten) {
const id = knoten.id;
knoten.addEventListener("pointerenter", function (e) {
if (e.pointerType === "mouse") hervorheben(id, true);
});
knoten.addEventListener("pointerleave", function (e) {
if (e.pointerType === "mouse") hervorheben(id, false);
});
knoten.addEventListener("click", () => hervorheben(id, "um"));
knoten.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); hervorheben(id, "um"); }
});
});
}
/**
* Ein Fahrzeugteil und seinen Eintrag gemeinsam hervorheben.
*
* @param an true / false, oder "um" zum Umschalten (Tippen)
*/
function hervorheben(id, an) {
const knoten = $(id);
const chip = document.querySelector('.skoda-teile .chip[data-teil="' + id + '"]');
const soll = (an === "um") ? !(knoten && knoten.classList.contains("hervor")) : an;
if (knoten) knoten.classList.toggle("hervor", soll);
if (chip) chip.classList.toggle("hervor", soll);
}
function zeichneTeile(stand) {
const leiste = $("skodaTeile");
if (!leiste) return;
leiste.innerHTML = "";
TEILE.forEach(function (t) {
const wert = stand ? stand[t.feld] : null;
const knoten = $(t.id);
const anzeige = (wert === null || wert === undefined || wert === "")
? "unbekannt"
: (ZUSTANDSWORT[wert] || String(wert).toLowerCase());
const licht = t.feld === "lights" && wert === "ON";
const offen = !licht && wert && OFFEN_WERTE.indexOf(wert) >= 0;
if (knoten) {
knoten.classList.toggle("offen", !!offen);
knoten.classList.toggle("an", !!licht);
}
const chip = document.createElement("span");
chip.className = "chip" + (offen ? " offen" : "") + (licht ? " an" : "");
chip.textContent = t.name + ": " + anzeige;
chip.dataset.teil = t.id;
/*
* Eintrag und Fahrzeugteil zeigen aufeinander, damit auch ohne
* Farbunterscheidung klar ist, was gemeint ist.
*
* Mit Maus genügt das Überfahren. Auf einem Berührungsgerät gibt es das
* nicht - dort bleibt ein :hover nach dem Antippen sogar hängen. Deshalb
* schaltet ein Tippen die Hervorhebung um, und zwar auf beiden Seiten.
*/
chip.addEventListener("pointerenter", function (e) {
if (e.pointerType === "mouse") hervorheben(t.id, true);
});
chip.addEventListener("pointerleave", function (e) {
if (e.pointerType === "mouse") hervorheben(t.id, false);
});
chip.addEventListener("click", () => hervorheben(t.id, "um"));
leiste.appendChild(chip);
});
}
/* -------------------------------------------------------------- Live-Block */
/*
* Der Live-Block ist die Fahrzeugkachel: die Draufsicht mit dem Ladestand in
* der Akkuplatte und die Kennzahlen daneben.
*
* Er arbeitet in drei Schritten. liveWerte() sammelt aus MQTT und Tabelle
* einen Satz fertiger Werte, jede zeichne*-Funktion zeigt genau einen Bereich
* davon, und zeichneLive() ruft sie der Reihe nach auf. Keine der
* Zeichenfunktionen holt sich selbst etwas - sie bekommen alles übergeben und
* bleiben dadurch einzeln prüfbar und für sich verwendbar.
*/
let livePlanung = null;
function planeLiveAnzeige() {
if (livePlanung) return; // höchstens fünfmal je Sekunde
livePlanung = setTimeout(function () { livePlanung = null; zeichneLive(); }, 200);
}
let letzterStand = null; // letzte Zeile aus der Tabelle
/*
* Maße der Akkuplatte in Einheiten der viewBox. Sie stehen genau einmal hier
* und einmal im Markup (restricted/skoda.php); wer die Platte verschiebt,
* ändert beides.
*/
const AKKU = { oben: 108, hoehe: 270 };
/* Zustand der Platte. Die Klasse sitzt am