From 3fc8a57e80daba16f3d645d7c50d1262fe78ee84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20Trzci=C5=84ski?= Date: Mon, 13 Sep 2021 10:07:32 +0200 Subject: [PATCH] Expose select on Frontend `web_server:` (#1445) --- Makefile | 6 +++++- _static/webserver-v1.js | 13 +++++++++++++ _static/webserver-v1.min.js | 8 +++++++- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/Makefile b/Makefile index 52927d8d3..a3947eab0 100644 --- a/Makefile +++ b/Makefile @@ -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/*" diff --git a/_static/webserver-v1.js b/_static/webserver-v1.js index 483284b86..701b7b1a0 100644 --- a/_static/webserver-v1.js +++ b/_static/webserver-v1.js @@ -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); + } } diff --git a/_static/webserver-v1.min.js b/_static/webserver-v1.min.js index e2cbb4b4e..35c23bfc9 100644 --- a/_static/webserver-v1.min.js +++ b/_static/webserver-v1.min.js @@ -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+=""+a.data.substr(7,a.data.length-10)+"\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); \ No newline at end of file +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+=''+e.data.substr(7,e.data.length-10)+"\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);}} \ No newline at end of file