Upstream/esphome-docs
1
0
Fork 0
mirror of https://github.com/esphome/esphome-docs.git synced 2025-01-12 20:10:50 +01:00
Code Issues Projects Releases Wiki Activity

Add webserver-v1.js click handlers for Cover buttons (#521)

Browse Source 
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.
This commit is contained in:
Andrew Zaborowski 2020-04-09 16:12:21 +02:00 committed by GitHub
parent 88816f1acc
commit 7be6c6536a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_static/webserver-v1.js
View File

@ -56,4 +56,18 @@ for (; row = states.rows[i]; i++) {
});
})(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);
}
}

2
_static/webserver-v1.min.js vendored
View File

@ -1 +1 @@
const source=new EventSource("/events");source.addEventListener("log",function(a){const b=document.getElementById("log");let c="";a.data.startsWith("\x1B[1;31m")?c="e":a.data.startsWith("\x1B[0;33m")?c="w":a.data.startsWith("\x1B[0;32m")?c="i":a.data.startsWith("\x1B[0;35m")?c="c":a.data.startsWith("\x1B[0;36m")?c="d":a.data.startsWith("\x1B[0;37m")?c="v":b.innerHTML+=a.data+"\n",b.innerHTML+="<span class=\""+c+"\">"+a.data.substr(7,a.data.length-10)+"</span>\n"}),source.addEventListener("state",function(a){const b=JSON.parse(a.data);document.getElementById(b.id).children[1].innerText=b.state});const states=document.getElementById("states");for(let a,b=0;a=states.rows[b];b++)a.classList.contains("switch")&&function(b){a.children[2].children[0].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/switch/"+b.substr(7)+"/toggle",!0),a.send()})}(a.id),a.classList.contains("fan")&&function(b){a.children[2].children[0].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/fan/"+b.substr(4)+"/toggle",!0),a.send()})}(a.id),a.classList.contains("light")&&function(b){a.children[2].children[0].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/light/"+b.substr(6)+"/toggle",!0),a.send()})}(a.id);
const source=new EventSource("/events");source.addEventListener("log",function(a){const b=document.getElementById("log");let c="";a.data.startsWith("\x1B[1;31m")?c="e":a.data.startsWith("\x1B[0;33m")?c="w":a.data.startsWith("\x1B[0;32m")?c="i":a.data.startsWith("\x1B[0;35m")?c="c":a.data.startsWith("\x1B[0;36m")?c="d":a.data.startsWith("\x1B[0;37m")?c="v":b.innerHTML+=a.data+"\n",b.innerHTML+="<span class=\""+c+"\">"+a.data.substr(7,a.data.length-10)+"</span>\n"}),source.addEventListener("state",function(a){const b=JSON.parse(a.data);document.getElementById(b.id).children[1].innerText=b.state});const states=document.getElementById("states");for(let a,b=0;a=states.rows[b];b++)a.classList.contains("switch")&&function(b){a.children[2].children[0].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/switch/"+b.substr(7)+"/toggle",!0),a.send()})}(a.id),a.classList.contains("fan")&&function(b){a.children[2].children[0].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/fan/"+b.substr(4)+"/toggle",!0),a.send()})}(a.id),a.classList.contains("light")&&function(b){a.children[2].children[0].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/light/"+b.substr(6)+"/toggle",!0),a.send()})}(a.id),a.classList.contains("cover")&&function(b){a.children[2].children[0].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/cover/"+b.substr(6)+"/open",!0),a.send()}),a.children[2].children[1].addEventListener("click",function(){const a=new XMLHttpRequest;a.open("POST","/cover/"+b.substr(6)+"/close",!0),a.send()})}(a.id);