Expose select on Frontend `web_server:` (#1445)

This commit is contained in:
Kamil Trzciński 2021-09-13 10:07:32 +02:00 committed by GitHub
parent 13e344810d
commit 3fc8a57e80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 2 deletions

View File

@ -1,7 +1,7 @@
ESPHOME_PATH = ../esphome
ESPHOME_REF = dev
.PHONY: html html-strict cleanhtml deploy help webserver Makefile netlify netlify-api api netlify-dependencies svg2png copy-svg2png
.PHONY: html html-strict cleanhtml deploy help webserver Makefile netlify netlify-api api netlify-dependencies svg2png copy-svg2png minify
html:
sphinx-build -M html . _build -j auto -n $(O)
@ -9,6 +9,10 @@ html:
html-strict:
sphinx-build -M html . _build -W -j auto -n $(O)
minify:
minify -o _static/webserver-v1.min.js _static/webserver-v1.js
minify -o _static/webserver-v1.min.css _static/webserver-v1.css
cleanhtml:
rm -rf "_build/html/*"

View File

@ -29,6 +29,10 @@ source.addEventListener('state', function (e) {
const states = document.getElementById("states");
let i = 0, row;
for (; row = states.rows[i]; i++) {
if (!row.children[2].children.length) {
continue;
}
if (row.classList.contains("switch")) {
(function(id) {
row.children[2].children[0].addEventListener('click', function () {
@ -70,4 +74,13 @@ for (; row = states.rows[i]; i++) {
});
})(row.id);
}
if (row.classList.contains("select")) {
(function(id) {
row.children[2].children[0].addEventListener('change', function () {
const xhr = new XMLHttpRequest();
xhr.open("POST", '/select/' + id.substr(7) + '/set?option=' + encodeURIComponent(this.value), true);
xhr.send();
});
})(row.id);
}
}

View File

@ -1 +1,7 @@
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);
const source=new EventSource("/events");source.addEventListener('log',function(e){const log=document.getElementById("log");let klass='';if(e.data.startsWith("")){klass='e';}else if(e.data.startsWith("")){klass='w';}else if(e.data.startsWith("")){klass='i';}else if(e.data.startsWith("")){klass='c';}else if(e.data.startsWith("")){klass='d';}else if(e.data.startsWith("")){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.children[2].children.length){continue;}
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);}
if(row.classList.contains("select")){(function(id){row.children[2].children[0].addEventListener('change',function(){const xhr=new XMLHttpRequest();xhr.open("POST",'/select/'+id.substr(7)+'/set?option='+encodeURIComponent(this.value),true);xhr.send();});})(row.id);}}