Kacheln zeigen frei gewaehlte Messwerte, Heizung nur wo eine haengt

Drei Sachen an den Kacheln und am Raum-Modal.

Die Platzhalter sind nur noch Striche. Vorher stand dort "---- hPa",
gefuellt wurde die Zeile aber mit der Solltemperatur - eine Einheit, die
nie kam, an einer Stelle, die etwas anderes zeigt.

Der Heizungs-Reiter erscheint nur noch, wo auch ein Thermostat haengt.
Frueher entschied das "hat der Raum eine Kachel" - das stimmte, solange
nur Raeume mit Thermostat eine bekamen. Seit auch Kueche und Technik eine
haben, bekamen sie einen Regler fuer eine Heizung, die es dort nicht gibt.
Jetzt zaehlt, ob im Raum ein Geraet der Bedienform "heizung" steht.

Und eine Kachel zeigt jetzt ein bis drei frei gewaehlte Messwerte. In
restricted/rooms.php steht je Raum unter "werte", welche das sind: topic,
optional pfad (Schluessel in einer JSON-Nachricht), einheit, stellen. Ohne
Angabe bleibt es bei den drei Thermostatwerten samt Heizsymbol, also genau
wie bisher - nur diese Raeume zeichnen die Symbole ueberhaupt noch.

Alles kommt live ueber MQTT, auch die beiden Shelly-Zaehler: sie schicken
ihre sechzehn Werte als eine JSON-Nachricht auf Power_EG/status/em:0, aus
der "pfad" den gesuchten Schluessel greift. Der Browser meldet nicht mehr
fest "Raumtemp/#" an, sondern die Zweige, die die Raumtabelle nennt -
derzeit vier statt vierzig einzelner Topics.

Damit steht auf EG Technik die Leistung (gemessen 293 W), auf UG Technik
Leistung und Wasserzaehler (78 W, 400,4 m3). Raeume ohne Messwert tragen
ihren Namen und oeffnen den Raum; ein leeres Rechteck saehe aus wie ein
Fehler.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

js/solar/homeMQTT.js

@@ -13,7 +13,10 @@ const homeMQTT = {
 
         client.on("message", messageReceived);
         client.on("connect", function () {
-            client.subscribe("Raumtemp/#");
+            // Welche Zweige gebraucht werden, sagt die Raumtabelle: seit eine
+            // Kachel jeden Messwert zeigen kann, reicht Raumtemp allein nicht
+            // mehr. homeTopics kommt aus restricted/rooms.php.
+            homeTopics.forEach(function (topic) { client.subscribe(topic); });
         });
         client.on("error", function (error) {
             //alert("MQTT Error: " + error);
@@ -51,25 +54,67 @@ const homeSVG = {
     fillElementArray: function () {
         
     },
+    /**
+     * Eine Nachricht aus dem Baum holen. mqttData ist nach den Teilen des
+     * Topics verschachtelt, siehe setNestedProp() weiter oben.
+     */
+    ausTopic: function (mqttData, topic) {
+        return topic.split("/").reduce(function (zweig, teil) {
+            return zweig && zweig[teil];
+        }, mqttData);
+    },
+
+    /**
+     * Einen Kachelwert lesen und hinschreiben.
+     *
+     * "pfad" ist gesetzt, wenn das Geraet mehrere Werte in einer einzigen
+     * JSON-Nachricht schickt - die beiden Shelly-Zaehler tun das. "stellen"
+     * schneidet Nachkommastellen ab; ohne Angabe bleibt der Text so, wie das
+     * Geraet ihn meldet.
+     */
+    kachelWert: function (mqttData, wert) {
+        const roh = homeSVG.ausTopic(mqttData, wert.topic);
+        if (typeof roh === "undefined") return null;
+        let text = String(roh);
+        if (wert.pfad) {
+            try {
+                const daten = JSON.parse(text);
+                if (!(wert.pfad in daten)) return null;
+                text = String(daten[wert.pfad]);
+            } catch (fehler) {
+                return null;   // noch keine vollstaendige Nachricht
+            }
+        }
+        if (typeof wert.stellen === "number" && text !== "" && !isNaN(Number(text))) {
+            text = Number(text).toFixed(wert.stellen);
+        }
+        // Schmales Leerzeichen zwischen Zahl und Einheit, wie es sich gehoert.
+        return wert.einheit ? text + "\u2009" + wert.einheit : text;
+    },
+
     updateValuesMQTT: function (mqttData) {
-        // homeRooms liefert restricted/rooms.php (in home.php eingebettet).
-        // Jeder Raum bekommt die gleiche Behandlung - Raeume kommen dort dazu,
-        // nicht hier.
+        // homeRooms liefert restricted/rooms.php (in home.php eingebettet),
+        // mitsamt den Werten, die auf der Kachel stehen sollen. Jeder Raum
+        // bekommt die gleiche Behandlung - Raeume und ihre Werte kommen dort
+        // dazu, nicht hier.
         homeRooms.forEach(function (room) {
-            const values = mqttData["Raumtemp"]?.[room.floor]?.[room.mqtt];
-            if (!values) return;   // Topic noch nicht empfangen
             const el = (part) => document.getElementById(room.floor + "_" + part);
 
+            room.werte.forEach(function (wert, i) {
+                const text = homeSVG.kachelWert(mqttData, wert);
+                const feld = el("w" + i + "_" + room.id);
+                if (text !== null && feld) feld.innerHTML = text;
+            });
+
+            // Heizsymbol und Pufferbetrieb gibt es nur, wo ein Thermostat
+            // haengt - anderswo sind die Elemente gar nicht gezeichnet.
+            if (!room.heizung) return;
+            const values = mqttData["Raumtemp"]?.[room.floor]?.[room.mqtt];
+            if (!values) return;
             if (typeof (values["Heating"]) != "undefined")
                 el(room.id + "_heater").setAttribute("display", values["Heating"] == "false" ? "none" : "");
             if (typeof (values["mode"]) != "undefined")
                 el(room.id + "_buffer").setAttribute("display", values["mode"] == "Overheating" ? "" : "none");
-            if (typeof (values["Set Temp[degC]"]) != "undefined")
-                el("pres_" + room.id).innerHTML = Math.floor(values["Set Temp[degC]"]) + "\u2009\u00b0C";
-            if (typeof (values["Temp[degC]"]) != "undefined")
-                el("tmp_" + room.id).innerHTML = values["Temp[degC]"] + "\u2009\u00b0C";
-            if (typeof (values["rHum[%]"]) != "undefined")
-                el("hum_" + room.id).innerHTML = values["rHum[%]"] + "\u2009%rF";
         });
     }