Smart-Dashboard/js/solar/heatMQTT.js

var mqttData = {};

const solarMQTT = {
    getMQTT: function () {
        const id = Math.random().toString(36).substring(7);
        const topic = "#";
        const connection = "wss://mqtt.nas.el-wa.org:443"
        mqttsolarTreeDone = false;
        // const connection = "ws://username:password@37.97.203.138:8083" // Works
        // const connection = "wss://public:public@public.cloud.shiftr.io" // Works
        const client = mqtt.connect(connection, {
            rejectUnauthorized: false,
        });

        client.on("message", messageReceived);
        client.on("connect", function () {
            client.subscribe("solarManager/#");
            client.subscribe("wattpilot/properties/lmo/state");
            client.subscribe("wattpilot/properties/ftt/state");
            client.subscribe("wattpilot/properties/fte/state");
            client.subscribe("wattpilot/properties/amp/state");
            client.subscribe("wattpilot/properties/car/state");
            client.subscribe("go-eCharger/270003/amp");
            client.subscribe("go-eCharger/270003/ate");
            client.subscribe("go-eCharger/270003/lmo");
            client.subscribe("go-eCharger/270003/att");
            client.subscribe("go-eCharger/270003/car");
            client.subscribe("weatherStation/#");
        });
        client.on("error", function (error) {
            //alert("MQTT Error: " + error);
        });
        client.on('end', function () {
            setTimeout(getMQTT, 5000);
            alert("MQTT Disconnected, try to reconnect in 5 secs.");
        })

        function getNestedProp(obj, path) {
            return path.split('/').reduce((acc, key) => acc && acc[key], obj);
        }
        function setNestedProp(obj, path, value) {
            var schema = obj;  // a moving reference to internal objects within obj
            var pList = path.split('/');
            var len = pList.length;
            for (var i = 0; i < len - 1; i++) {
            var elem = pList[i];
            if (!schema[elem]) schema[elem] = {}
            schema = schema[elem];
            }

            schema[pList[len - 1]] = value;
        }

        function messageReceived(topic, message) {
            setNestedProp(mqttData, topic, message);
            if (topic == "solarManager/P_Load") {
              setTimeout(function () { solarSVG.updateValuesMQTT(mqttData) }, 200); //give the object tree some time to build up and receive all values
            } else if (topic == "weatherStation/windDeg") {
              setTimeout(function () { updateWeatherCards(name => mqttData["weatherStation"]?.[name]) }, 200);
            }
        }
    }
}

const solarSVG = {
    updateCnt: 99,
    updateValuesMQTT: function (mqttData) {
        if (this.updateCnt > 10) {
            this.updateCnt = 0;
            var obj = document.querySelector("object");
            var htmlNode = obj.contentDocument;
            htmlNode.getElementById("PufferOtxt").innerHTML = mqttData["solarManager"]["t_buffT"] + " °C";
            htmlNode.getElementById("PufferMtxt").innerHTML = mqttData["solarManager"]["t_buffM"] + " °C";
            htmlNode.getElementById("PufferUtxt").innerHTML = mqttData["solarManager"]["t_buffB"] + " °C";
            htmlNode.getElementById("heaterVL").innerHTML = mqttData["solarManager"]["t_heatVL"] + " °C";
            htmlNode.getElementById("heaterRL").innerHTML = mqttData["solarManager"]["t_heatRL"] + " °C";
            htmlNode.getElementById("thermeVLfb").innerHTML = mqttData["solarManager"]["t_gasVLu"] + " °C";
            htmlNode.getElementById("thermeVLww").innerHTML = mqttData["solarManager"]["t_gasVLo"] + " °C";
            htmlNode.getElementById("thermeRL").innerHTML = mqttData["solarManager"]["t_gasRL"] + " °C";
            htmlNode.getElementById("fbVL").innerHTML = mqttData["solarManager"]["t_fbVL"] + " °C";
            htmlNode.getElementById("fbRL").innerHTML = mqttData["solarManager"]["t_fbRL"] + " °C";
            htmlNode.getElementById("triac").innerHTML = mqttData["solarManager"]["t_triac"] + " °C";
        }
        this.updateCnt++;
    }

}

var chartSettings = {
    type: 'line',
    options: {
      animation: true,
      plugins: {
        annotation: {
          common: { type: 'box', drawTime: 'beforeDatasetsDraw', yScaleID: 'y-axis-0', backgroundColor: 'rgba(255, 255, 255, 0.05)', init: true },
          annotations: []
        },
        tooltip: {
          position: 'nearest',
          pointStyle: "circle",
          boxWidth: 4,
          usePointStyle: true,
          callbacks: {
            label: function (context) {
              let label = context.dataset.label || '';
              if (label) {
                label += ': ';
              }
              if (context.dataset.yAxisID == "y1") {
                label += Math.round(context.parsed.y * 10) / 10 + " " + "L/min";
              } else {
                if (context.parsed.y !== null) {
                  ret = scale(Math.round(context.parsed.y), false);
                  label += ret[0] + " " + ret[1] + "°C";
                }
              }
              return label;
            },
          },
        },
        legend: {
          position: "bottom",
          labels: {
            pointStyleWidth: 10,
            usePointStyle: true,
            pointStyle: "line",
          }
        },
      },
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
        mode: 'index',
      },
      scales: {
        x: {
          adapters: {
            date: {
              locale: "DE-de"
            }
          },
          ticks: {

          },
          type: 'timestack',
        },
        y: {
          stacked: false,
          display: true,
          position: 'left',
          ticks: {
            callback: value => `${value} °C`,
          },
          title: {
            display: true,
            text: "Temperatur"
          }
        },
        y1: {
          stacked: false,
          display: true,
          position: 'right',
          ticks: {
            callback: value => `${value} L/min`,
          },
          title: {
            display: true,
            text: "Wasserverbrauch"
          },
          data:{}
        }
      }
    }
  };

  var chartData = {};
  const heatChart = new Chart(
    document.querySelector('#heat-chart'),
    Object.assign({}, chartSettings)
  );
  const waterChart = new Chart(
    document.querySelector('#water-chart'),
    Object.assign({}, chartSettings)
  );

  document.addEventListener('readystatechange', function () {
    if (event.target.readyState === "complete") {
      solarMQTT.getMQTT();
      getData(heatChart, 'ajax/getHeaterData.php', { sunrise: { FROM: -24, TO: 0 } });
      getData(waterChart, 'ajax/getWaterData.php', { sunrise: { FROM: -24, TO: 0 } });
    }
  });