Smart-Dashboard/js/solar/anzeige.js

/* ==========================================================================
   Vollbildanzeige (restricted/anzeige.php): Übersicht, Anlage und Speicher
   für ein festes Display, z.B. den Raspberry Pi mit 800 x 480.

   Dieselben Bausteine wie auf der Solar-Seite, nur anders verdrahtet:
   - immer quer (hochkantUnter: 0), das Display steht quer
   - antippbar sind nur Kreise, die eine andere Ansicht öffnen; Bedienfenster
     (Heizstab, Wallbox) gibt es hier nicht
   - nach LEERLAUF ohne Berührung zurück zur Übersicht
   - MQTT verbindet nach einem Abbruch still neu; der Punkt unten in der
     Leiste zeigt den Zustand (grün verbunden, gelb keine frischen Werte,
     rot getrennt). Kein alert() - am Display ist niemand, der ihn wegklickt.
   - alle NEU_LADEN Stunden lädt die Seite neu, damit ein Browser, der
     wochenlang läuft, keinen Speicher ansammelt und Änderungen am Code
     ankommen
   ========================================================================== */

var mqttData = {};

(function () {
  "use strict";

  const ADRESSE = "wss://mqtt.nas.el-wa.org:443";   // wie in solarMQTT.js
  const LEERLAUF = 2 * 60000;
  const NEU_LADEN = 6 * 3600000;
  const TAKT = typeof anzeigeRuhig !== "undefined" && anzeigeRuhig ? 2000 : 1000;
  const VERALTET = 30000;
  const THEMEN = [
    "solarManager/#",
    "Gartenwasser/vorn/Timers", "Gartenwasser/vorn/status", "Gartenwasser/vorn/WateringToday",
    "Gartenwasser/hinten/Timers", "Gartenwasser/hinten/status", "Gartenwasser/hinten/WateringToday",
  ];

  const $ = id => document.getElementById(id);
  let bild = null, anlage = null, speicher = null;
  let leerlaufUhr = null, geplant = false, verbunden = false, letzteDaten = 0;

  function zeige(name) {
    document.querySelectorAll("[data-anzeige]").forEach(b => b.setAttribute("aria-pressed", b.dataset.anzeige === name ? "true" : "false"));
    document.querySelectorAll("[data-anzeige-flaeche]").forEach(f => { f.hidden = f.dataset.anzeigeFlaeche !== name; });
    wachHalten();
  }

  function wachHalten() {
    clearTimeout(leerlaufUhr);
    leerlaufUhr = setTimeout(() => zeige("fluss"), LEERLAUF);
  }

  function zustand() {
    const punkt = $("anzeigeVerbindung");
    const frisch = Date.now() - letzteDaten < VERALTET;
    const klasse = "anzeige-punkt" + (verbunden && frisch ? " gut" : verbunden ? " warn" : "");
    if (punkt.className !== klasse) {
      punkt.className = klasse;
      punkt.title = verbunden && frisch ? "verbunden" : verbunden ? "verbunden, aber keine frischen Werte" : "Verbindung getrennt – wird neu aufgebaut";
    }
  }

  function uhr() {
    const d = new Date();
    const text = String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
    if ($("anzeigeUhr").textContent !== text) $("anzeigeUhr").textContent = text;
  }

  function aktualisieren() {
    if (geplant) return;
    geplant = true;
    setTimeout(() => {
      geplant = false;
      bild.aktualisieren(mqttData);
      anlage.aktualisieren(mqttData);
      speicher.aktualisieren(mqttData);
    }, TAKT);
  }

  function verbinden() {
    const client = mqtt.connect(ADRESSE, { rejectUnauthorized: false, reconnectPeriod: 5000, connectTimeout: 15000 });
    client.on("connect", () => {
      verbunden = true;
      client.subscribe(THEMEN);
      zustand();
    });
    const weg = () => { verbunden = false; zustand(); };
    client.on("close", weg);
    client.on("offline", weg);
    client.on("error", () => {});
    client.on("message", (topic, nachricht) => {
      mqttData[topic] = nachricht;
      if (topic.endsWith("/Timers")) wateringTimersLastSeen[topic] = Date.now();
      if (topic === "solarManager/P_Load") {
        letzteDaten = Date.now();
        aktualisieren();
      }
    });
  }

  document.addEventListener("DOMContentLoaded", () => {
    const bewaesserung = () => wateringSymboleSetzen(id => document.getElementById(id));

    bild = new Energiefluss($("anzeige-fluss"), {
      einstellungen: typeof energieflussEinstellungen !== "undefined" ? energieflussEinstellungen : {},
      hochkantUnter: 0,
      klickFilter: k => !!k.klick.ansicht,
      onKlick: k => zeige(k.klick.ansicht),
      onGezeichnet: bewaesserung,
    });
    bild.zeichnen();
    anlage = new Anlage($("anzeige-anlage"), { hochkantUnter: 0 });
    anlage.zeichnen();
    speicher = new Speicher($("anzeige-speicher"));
    speicher.zeichnen();

    document.querySelectorAll("[data-anzeige]").forEach(b => b.addEventListener("click", () => zeige(b.dataset.anzeige)));
    document.addEventListener("pointerdown", wachHalten, { passive: true });

    setInterval(() => { uhr(); zustand(); bewaesserung(); }, 1000);
    uhr();
    zustand();
    verbinden();
    setTimeout(() => location.reload(), NEU_LADEN);
  });
})();