mirror of
https://github.com/esphome/esphome-docs.git
synced 2024-11-16 10:55:21 +01:00
7be6c6536a
Add js click handlers for the web UI buttons added in
b1f9c9a6e0a3dce73507e6b60782987ee2459f48 in the esphome repository.
Since this change doesn't make the .js file incompatible with esphome
versions before the referenced commit I guess there's no need to
rename the file to -v2.
There are probably better ways to write those click handlers, for
example we could have a common function to launch the POST request to a
URL that it reads from the button object like this:
var button_onclick = function(evt) {
const xhr = new XMLHttpRequest();
xhr.open("POST", evt.target.onlick_post_url, true);
xhr.send();
};
row.children[2].children[0].addEventListener('click', button_onlick);
row.children[2].children[0].onclick_post_url = '/light/' + id.substr(6) + '/toggle';
The only problem with this is that iirc ``evt.target`` is
browser-specific.
74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
const source = new EventSource("/events");
|
||
|
||
source.addEventListener('log', function (e) {
|
||
const log = document.getElementById("log");
|
||
let klass = '';
|
||
if (e.data.startsWith("[1;31m")) {
|
||
klass = 'e';
|
||
} else if (e.data.startsWith("[0;33m")) {
|
||
klass = 'w';
|
||
} else if (e.data.startsWith("[0;32m")) {
|
||
klass = 'i';
|
||
} else if (e.data.startsWith("[0;35m")) {
|
||
klass = 'c';
|
||
} else if (e.data.startsWith("[0;36m")) {
|
||
klass = 'd';
|
||
} else if (e.data.startsWith("[0;37m")) {
|
||
klass = 'v';
|
||
} else {
|
||
log.innerHTML += e.data + '\n';
|
||
}
|
||
log.innerHTML += '<span class="' + klass + '">' + e.data.substr(7, e.data.length - 10) + "</span>\n";
|
||
});
|
||
|
||
source.addEventListener('state', function (e) {
|
||
const data = JSON.parse(e.data);
|
||
document.getElementById(data.id).children[1].innerText = data.state;
|
||
});
|
||
|
||
const states = document.getElementById("states");
|
||
let i = 0, row;
|
||
for (; row = states.rows[i]; i++) {
|
||
if (row.classList.contains("switch")) {
|
||
(function(id) {
|
||
row.children[2].children[0].addEventListener('click', function () {
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open("POST", '/switch/' + id.substr(7) + '/toggle', true);
|
||
xhr.send();
|
||
});
|
||
})(row.id);
|
||
}
|
||
if (row.classList.contains("fan")) {
|
||
(function(id) {
|
||
row.children[2].children[0].addEventListener('click', function () {
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open("POST", '/fan/' + id.substr(4) + '/toggle', true);
|
||
xhr.send();
|
||
});
|
||
})(row.id);
|
||
}
|
||
if (row.classList.contains("light")) {
|
||
(function(id) {
|
||
row.children[2].children[0].addEventListener('click', function () {
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open("POST", '/light/' + id.substr(6) + '/toggle', true);
|
||
xhr.send();
|
||
});
|
||
})(row.id);
|
||
}
|
||
if (row.classList.contains("cover")) {
|
||
(function(id) {
|
||
row.children[2].children[0].addEventListener('click', function () {
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open("POST", '/cover/' + id.substr(6) + '/open', true);
|
||
xhr.send();
|
||
});
|
||
row.children[2].children[1].addEventListener('click', function () {
|
||
const xhr = new XMLHttpRequest();
|
||
xhr.open("POST", '/cover/' + id.substr(6) + '/close', true);
|
||
xhr.send();
|
||
});
|
||
})(row.id);
|
||
}
|
||
}
|