427 lines
25 KiB
JavaScript
427 lines
25 KiB
JavaScript
|
||
const homeMQTT = {
|
||
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("Raumtemp/#");
|
||
});
|
||
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);
|
||
setTimeout(function () { homeSVG.updateValuesMQTT(mqttData) }, 200); //give the object tree some time to build up and receive all values
|
||
}
|
||
}
|
||
}
|
||
|
||
const homeSVG = {
|
||
updateCnt: 99,
|
||
fillElementArray: function () {
|
||
|
||
},
|
||
updateValuesMQTT: function (mqttData) {
|
||
var htmlNode = document
|
||
//OG
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["Heating"] == "false") htmlNode.getElementById('OG_wozi_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('OG_wozi_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["mode"] == "Overheating") htmlNode.getElementById('OG_wozi_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('OG_wozi_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_pres_wozi').innerHTML = Math.floor(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_tmp_wozi').innerHTML = mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('OG_hum_wozi').innerHTML = mqttData["Raumtemp"]["OG"]["Wohnzimmer"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Bad"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Bad"]["Heating"] == "false") htmlNode.getElementById('OG_bad_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('OG_bad_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Bad"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Bad"]["mode"] == "Overheating") htmlNode.getElementById('OG_bad_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('OG_bad_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Bad"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_pres_bad').innerHTML = Math.floor(mqttData["Raumtemp"]["OG"]["Bad"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Bad"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_tmp_bad').innerHTML = mqttData["Raumtemp"]["OG"]["Bad"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Bad"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('OG_hum_bad').innerHTML = mqttData["Raumtemp"]["OG"]["Bad"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["Heating"] == "false") htmlNode.getElementById('OG_schlafen_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('OG_schlafen_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["mode"] == "Overheating") htmlNode.getElementById('OG_schlafen_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('OG_schlafen_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_pres_schlafen').innerHTML = Math.floor(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_tmp_schlafen').innerHTML = mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('OG_hum_schlafen').innerHTML = mqttData["Raumtemp"]["OG"]["Schlafzimmer"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["KiZi"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["KiZi"]["Heating"] == "false") htmlNode.getElementById('OG_kizi_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('OG_kizi_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["KiZi"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["KiZi"]["mode"] == "Overheating") htmlNode.getElementById('OG_kizi_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('OG_kizi_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["KiZi"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_pres_kizi').innerHTML = Math.floor(mqttData["Raumtemp"]["OG"]["KiZi"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["KiZi"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_tmp_kizi').innerHTML = mqttData["Raumtemp"]["OG"]["KiZi"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["KiZi"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('OG_hum_kizi').innerHTML = mqttData["Raumtemp"]["OG"]["KiZi"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Buero"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Buero"]["Heating"] == "false") htmlNode.getElementById('OG_buero_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('OG_buero_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Buero"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["OG"]["Buero"]["mode"] == "Overheating") htmlNode.getElementById('OG_buero_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('OG_buero_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Buero"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_pres_buero').innerHTML = Math.floor(mqttData["Raumtemp"]["OG"]["Buero"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Buero"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('OG_tmp_buero').innerHTML = mqttData["Raumtemp"]["OG"]["Buero"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["OG"]["Buero"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('OG_hum_buero').innerHTML = mqttData["Raumtemp"]["OG"]["Buero"]["rHum[%]"]+" %rF";
|
||
|
||
//EG
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["Heating"] == "false") htmlNode.getElementById('EG_wozi_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('EG_wozi_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["mode"] == "Overheating") htmlNode.getElementById('EG_wozi_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('EG_wozi_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_pres_wozi').innerHTML = Math.floor(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_tmp_wozi').innerHTML = mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('EG_hum_wozi').innerHTML = mqttData["Raumtemp"]["EG"]["Wohnzimmer"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Bad"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Bad"]["Heating"] == "false") htmlNode.getElementById('EG_bad_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('EG_bad_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Bad"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Bad"]["mode"] == "Overheating") htmlNode.getElementById('EG_bad_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('EG_bad_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Bad"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_pres_bad').innerHTML = Math.floor(mqttData["Raumtemp"]["EG"]["Bad"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Bad"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_tmp_bad').innerHTML = mqttData["Raumtemp"]["EG"]["Bad"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Bad"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('EG_hum_bad').innerHTML = mqttData["Raumtemp"]["EG"]["Bad"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Schlafen"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Schlafen"]["Heating"] == "false") htmlNode.getElementById('EG_schlafen_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('EG_schlafen_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Schlafen"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Schlafen"]["mode"] == "Overheating") htmlNode.getElementById('EG_schlafen_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('EG_schlafen_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Schlafen"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_pres_schlafen').innerHTML = Math.floor(mqttData["Raumtemp"]["EG"]["Schlafen"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Schlafen"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_tmp_schlafen').innerHTML = mqttData["Raumtemp"]["EG"]["Schlafen"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Schlafen"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('EG_hum_schlafen').innerHTML = mqttData["Raumtemp"]["EG"]["Schlafen"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Florian"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Florian"]["Heating"] == "false") htmlNode.getElementById('EG_kizi_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('EG_kizi_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Florian"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Florian"]["mode"] == "Overheating") htmlNode.getElementById('EG_kizi_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('EG_kizi_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Florian"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_pres_kizi').innerHTML = Math.floor(mqttData["Raumtemp"]["EG"]["Florian"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Florian"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_tmp_kizi').innerHTML = mqttData["Raumtemp"]["EG"]["Florian"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Florian"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('EG_hum_kizi').innerHTML = mqttData["Raumtemp"]["EG"]["Florian"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Magdalena"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Magdalena"]["Heating"] == "false") htmlNode.getElementById('EG_buero_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('EG_buero_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Magdalena"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["EG"]["Magdalena"]["mode"] == "Overheating") htmlNode.getElementById('EG_buero_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('EG_buero_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Magdalena"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_pres_buero').innerHTML = Math.floor(mqttData["Raumtemp"]["EG"]["Magdalena"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Magdalena"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('EG_tmp_buero').innerHTML = mqttData["Raumtemp"]["EG"]["Magdalena"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["EG"]["Magdalena"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('EG_hum_buero').innerHTML = mqttData["Raumtemp"]["EG"]["Magdalena"]["rHum[%]"]+" %rF";
|
||
//UG
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Kueche"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["UG"]["Kueche"]["Heating"] == "false") htmlNode.getElementById('UG_kueche_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('UG_kueche_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Kueche"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["UG"]["Kueche"]["mode"] == "Overheating") htmlNode.getElementById('UG_kueche_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('UG_kueche_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Kueche"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('UG_pres_kueche').innerHTML = Math.floor(mqttData["Raumtemp"]["UG"]["Kueche"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Kueche"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('UG_tmp_kueche').innerHTML = mqttData["Raumtemp"]["UG"]["Kueche"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Kueche"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('UG_hum_kueche').innerHTML = mqttData["Raumtemp"]["UG"]["Kueche"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Buero"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["UG"]["Buero"]["Heating"] == "false") htmlNode.getElementById('UG_buero_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('UG_buero_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Buero"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["UG"]["Buero"]["mode"] == "Overheating") htmlNode.getElementById('UG_buero_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('UG_buero_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Buero"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('UG_pres_buero').innerHTML = Math.floor(mqttData["Raumtemp"]["UG"]["Buero"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Buero"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('UG_tmp_buero').innerHTML = mqttData["Raumtemp"]["UG"]["Buero"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Buero"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('UG_hum_buero').innerHTML = mqttData["Raumtemp"]["UG"]["Buero"]["rHum[%]"]+" %rF";
|
||
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Bad"]["Heating"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["UG"]["Bad"]["Heating"] == "false") htmlNode.getElementById('UG_bad_heater').setAttribute("display", "none");
|
||
else htmlNode.getElementById('UG_bad_heater').setAttribute("display", "");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Bad"]["mode"]) != "undefined"){
|
||
if(mqttData["Raumtemp"]["UG"]["Bad"]["mode"] == "Overheating") htmlNode.getElementById('UG_bad_buffer').setAttribute("display", "");
|
||
else htmlNode.getElementById('UG_bad_buffer').setAttribute("display", "none");
|
||
}
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Bad"]["Set Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('UG_pres_bad').innerHTML = Math.floor(mqttData["Raumtemp"]["UG"]["Bad"]["Set Temp[degC]"])+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Bad"]["Temp[degC]"]) != "undefined")
|
||
htmlNode.getElementById('UG_tmp_bad').innerHTML = mqttData["Raumtemp"]["UG"]["Bad"]["Temp[degC]"]+" °C";
|
||
if(typeof(mqttData["Raumtemp"]["UG"]["Bad"]["rHum[%]"]) != "undefined")
|
||
htmlNode.getElementById('UG_hum_bad').innerHTML = mqttData["Raumtemp"]["UG"]["Bad"]["rHum[%]"]+" %rF";
|
||
|
||
}
|
||
|
||
}
|
||
|
||
var currentFloor = "OG";
|
||
|
||
function addClass(el, classNameToAdd){
|
||
el.className += ' ' + classNameToAdd;
|
||
}
|
||
|
||
function removeClass(el, classNameToRemove){
|
||
var elClass = ' ' + el.className + ' ';
|
||
while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
|
||
elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
|
||
}
|
||
el.className = elClass;
|
||
}
|
||
|
||
function switchTab(newtab){
|
||
newContent = document.getElementById(newtab);
|
||
newTabBtn = document.getElementById(newtab+"-tab");
|
||
removeClass(document.getElementById("actions-OG-tab"),"active");
|
||
removeClass(document.getElementById("actions-EG-tab"),"active");
|
||
removeClass(document.getElementById("actions-UG-tab"),"active");
|
||
|
||
removeClass(document.getElementById("actions-OG"),"active show");
|
||
removeClass(document.getElementById("actions-EG"),"active show");
|
||
removeClass(document.getElementById("actions-UG"),"active show");
|
||
addClass(newTabBtn,"active");
|
||
addClass(newContent,"active show");
|
||
|
||
|
||
}
|
||
|
||
|
||
function switchFloor(floor){
|
||
if(currentFloor == floor)
|
||
return;
|
||
const targetIn = document.getElementById(floor+'_Info');
|
||
const targetOut = document.getElementById(currentFloor+'_Info');
|
||
var blendIn = new KeyframeEffect(
|
||
targetIn, [{opacity: '0'},{opacity: '100'}],
|
||
{
|
||
duration: 500,
|
||
easing: "ease-in-out",
|
||
fill: "forwards",
|
||
iterations: 1,
|
||
}
|
||
);
|
||
var blendOut = new KeyframeEffect(
|
||
targetOut, [{opacity: '100'},{opacity: '0'}],
|
||
{
|
||
duration: 500,
|
||
easing: "ease-in-out",
|
||
fill: "forwards",
|
||
iterations: 1,
|
||
}
|
||
);
|
||
var inAnim = new Animation(blendIn,document.timeline);
|
||
var outAnim = new Animation(blendOut,document.timeline);
|
||
targetIn.setAttribute("display","");
|
||
outAnim.onfinish= (event) => {
|
||
targetOut.setAttribute("display","none");
|
||
};
|
||
inAnim.play();
|
||
outAnim.play();
|
||
currentFloor = floor;
|
||
}
|
||
|
||
|
||
var modalEV = new bootstrap.Modal(document.getElementById('modalEV'), {
|
||
keyboard: false
|
||
});
|
||
var offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvas'), {
|
||
keyboard: false
|
||
});
|
||
|
||
var mqttData = {};
|
||
|
||
function openHeaterSettings(heater){
|
||
openModal(heater)
|
||
}
|
||
|
||
document.addEventListener('readystatechange', function () {
|
||
if (event.target.readyState === "complete") {
|
||
homeMQTT.getMQTT();
|
||
this.getElementById("meteogram").innerHTML = "<iframe src='"+meteogramURL+"' frameborder='0' scrolling=NO' allowtransparency='true' sandbox='allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox' style='width: 100%;height: 500px;border: 0;overflow: hidden;'></iframe><!-- DO NOT REMOVE THIS LINK --><a href='https://www.meteoblue.com/de/wetter/woche/index' target='_blank' rel='noopener'></a>";
|
||
}
|
||
});
|
||
|
||
function loadingHTML(msg) {
|
||
return "<div class='m-4'><div class='spinner-border' role='status'><span class='visually-hidden'>Loading...</span></div> " + msg + "</div>"
|
||
}
|
||
|
||
function openModal(heater) {
|
||
var contentURL = "./ajax/roomtemp.php?heater="+heater;
|
||
let heaterMQTT = heater.toString().split("_");
|
||
document.getElementById("modal-title").innerHTML = "Thermostat "+heater.replace("_"," ").replace("ue","ü").replace("ae","ä").replace("oe","ö");
|
||
modalBodyElement = document.getElementById("modal-body");
|
||
modalBodyElement.innerHTML = loadingHTML("Wird geladen...");
|
||
document.getElementById("modalSaveBtn").addEventListener("click", submitFormAjax);
|
||
document.getElementById("modalSaveBtn").contentURL = contentURL;
|
||
modalEV.show();
|
||
fetch(contentURL, {
|
||
method: 'GET',
|
||
headers: {
|
||
'X-Requested-From-Modal': 'a',
|
||
'Requested-With-Ajax': 'ajax'
|
||
}
|
||
})
|
||
.then(response => response.text())
|
||
.then(html => {
|
||
modalBodyElement.innerHTML = html;
|
||
var slider = document.getElementById("modal-slider");
|
||
var span = document.getElementById("modal-slider-label");
|
||
slider.oninput = function () {
|
||
sliderPrcnt=(slider.value-10)*5;
|
||
slider.style.setProperty("--background-size", `${sliderPrcnt}%`);
|
||
marginValue = sliderPrcnt;
|
||
if (marginValue < 10) {
|
||
marginValue = marginValue - 0.4 * marginValue;
|
||
} else if (marginValue < 85) {
|
||
marginValue = marginValue - 4;
|
||
}
|
||
else {
|
||
marginValue = marginValue - 4 - 0.5 * (marginValue - 85);
|
||
}
|
||
span.setAttribute('style', 'margin-left:' + marginValue + '%;');
|
||
span.innerHTML = this.value + " °C";
|
||
}
|
||
|
||
if(typeof(mqttData["Raumtemp"][heaterMQTT[0]][heaterMQTT[1]]["Set Temp[degC]"])!= "undefined")
|
||
slider.setAttribute("value",mqttData["Raumtemp"][heaterMQTT[0]][heaterMQTT[1]]["Set Temp[degC]"]);
|
||
else
|
||
slider.setAttribute("value",10);
|
||
slider.dispatchEvent(new Event('input'));
|
||
})
|
||
.catch(error => {
|
||
modalBodyElement.innerHTML += error.message;
|
||
});
|
||
}
|
||
|
||
function submitFormAjax(event) {
|
||
let xmlhttp = window.XMLHttpRequest ?
|
||
new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
|
||
|
||
xmlhttp.onreadystatechange = function () {
|
||
if (this.readyState === 4 && this.status === 200){
|
||
setTimeout(function () { modalEV.hide() }, 700);
|
||
alert(xmlhttp.responseText);
|
||
}
|
||
}
|
||
const form = document.getElementById('modalEV').querySelector('form');
|
||
post = "";
|
||
// Get interesting form elements
|
||
const formElements = Array.from(form.elements);
|
||
for (let i = 0; i < formElements.length; i++) {
|
||
if(formElements[i].name){
|
||
if (formElements[i].type == "radio" && formElements[i].checked) {
|
||
post += formElements[i].name + "=" + encodeURIComponent(formElements[i].value) + "&";
|
||
} else if(formElements[i].type == "checkbox" && formElements[i].checked){
|
||
post += formElements[i].name + "=" + encodeURIComponent(formElements[i].value) + "&";
|
||
} else if(formElements[i].type == "button" && !formElements[i].classList.contains("accordion-button")){
|
||
post += formElements[i].name + "=" + encodeURIComponent(formElements[i].innerHTML) + "&";
|
||
}else if(formElements[i].type != "checkbox" && formElements[i].type != "radio") {
|
||
post += formElements[i].name + "=" + encodeURIComponent(formElements[i].value) + "&";
|
||
}
|
||
}
|
||
}
|
||
xmlhttp.open("POST", event.currentTarget.contentURL, true);
|
||
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||
document.getElementById('modalEV').querySelector('.modal-body').innerHTML = loadingHTML("Änderungen werden übernommen...");
|
||
xmlhttp.send(post);
|
||
return false;
|
||
} |