Add number setting to web_server (#1804)

Makefile

@@ -10,8 +10,8 @@ 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
+	minify _static/webserver-v1.js > _static/webserver-v1.min.js
+	minify _static/webserver-v1.css > _static/webserver-v1.min.css
 
 cleanhtml:
 	rm -rf "_build/html/*"

_static/webserver-v1.js

@@ -83,6 +83,15 @@ for (; row = states.rows[i]; i++) {
             });
         })(row.id);
     }
+    if (row.classList.contains("number")) {
+        (function(id) {
+            row.children[2].children[0].addEventListener('change', function () {
+                const xhr = new XMLHttpRequest();
+                xhr.open("POST", '/number/' + id.substr(7) + '/set?value=' + encodeURIComponent(this.value), true);
+                xhr.send();
+            });
+        })(row.id);
+    }
     if (row.classList.contains("button")) {
         (function(id) {
             row.children[2].children[0].addEventListener('click', function () {

_static/webserver-v1.min.js

@@ -1 +1 @@
-const source=new EventSource("/events");source.addEventListener("log",(function(t){const n=document.getElementById("log");let e="";t.data.startsWith("")?e="e":t.data.startsWith("")?e="w":t.data.startsWith("")?e="i":t.data.startsWith("")?e="c":t.data.startsWith("")?e="d":t.data.startsWith("")?e="v":n.innerHTML+=t.data+"\n",n.innerHTML+='<span class="'+e+'">'+t.data.substr(7,t.data.length-10)+"</span>\n"})),source.addEventListener("state",(function(t){const n=JSON.parse(t.data);document.getElementById(n.id).children[1].innerText=n.state}));const states=document.getElementById("states");let row,i=0;for(;row=states.rows[i];i++)row.children[2].children.length&&(row.classList.contains("switch")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/switch/"+t.substr(7)+"/toggle",!0),n.send()}))}(row.id),row.classList.contains("fan")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/fan/"+t.substr(4)+"/toggle",!0),n.send()}))}(row.id),row.classList.contains("light")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/light/"+t.substr(6)+"/toggle",!0),n.send()}))}(row.id),row.classList.contains("cover")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/cover/"+t.substr(6)+"/open",!0),n.send()})),row.children[2].children[1].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/cover/"+t.substr(6)+"/close",!0),n.send()}))}(row.id),row.classList.contains("select")&&function(t){row.children[2].children[0].addEventListener("change",(function(){const n=new XMLHttpRequest;n.open("POST","/select/"+t.substr(7)+"/set?option="+encodeURIComponent(this.value),!0),n.send()}))}(row.id),row.classList.contains("button")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/button/"+t.substr(7)+"/press",!0),n.send()}))}(row.id));
+const source=new EventSource("/events");source.addEventListener("log",(function(t){const n=document.getElementById("log");let e="";t.data.startsWith("")?e="e":t.data.startsWith("")?e="w":t.data.startsWith("")?e="i":t.data.startsWith("")?e="c":t.data.startsWith("")?e="d":t.data.startsWith("")?e="v":n.innerHTML+=t.data+"\n",n.innerHTML+='<span class="'+e+'">'+t.data.substr(7,t.data.length-10)+"</span>\n"})),source.addEventListener("state",(function(t){const n=JSON.parse(t.data);document.getElementById(n.id).children[1].innerText=n.state}));const states=document.getElementById("states");let row,i=0;for(;row=states.rows[i];i++)row.children[2].children.length&&(row.classList.contains("switch")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/switch/"+t.substr(7)+"/toggle",!0),n.send()}))}(row.id),row.classList.contains("fan")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/fan/"+t.substr(4)+"/toggle",!0),n.send()}))}(row.id),row.classList.contains("light")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/light/"+t.substr(6)+"/toggle",!0),n.send()}))}(row.id),row.classList.contains("cover")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/cover/"+t.substr(6)+"/open",!0),n.send()})),row.children[2].children[1].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/cover/"+t.substr(6)+"/close",!0),n.send()}))}(row.id),row.classList.contains("select")&&function(t){row.children[2].children[0].addEventListener("change",(function(){const n=new XMLHttpRequest;n.open("POST","/select/"+t.substr(7)+"/set?option="+encodeURIComponent(this.value),!0),n.send()}))}(row.id),row.classList.contains("number")&&function(t){row.children[2].children[0].addEventListener("change",(function(){const n=new XMLHttpRequest;n.open("POST","/number/"+t.substr(7)+"/set?value="+encodeURIComponent(this.value),!0),n.send()}))}(row.id),row.classList.contains("button")&&function(t){row.children[2].children[0].addEventListener("click",(function(){const n=new XMLHttpRequest;n.open("POST","/button/"+t.substr(7)+"/press",!0),n.send()}))}(row.id));

web-api/index.rst

@@ -63,7 +63,7 @@ There's also a simple REST API available which can be used to get and set the cu
 calls to this API follow the URL schema ``/<domain>/<id>[/<method>?<param>=<value>]``.
 The ``domain`` is the type of the component, for example ``sensor`` or ``light``. ``id`` refers
 to the id of the component - this ID is created by taking the name of the component, stripping out
-all non-alphanumeric characters, making everything lowercase and replacing all spaces by underscores. 
+all non-alphanumeric characters, making everything lowercase and replacing all spaces by underscores.
 To confirm the ``<id>`` to use, you can set the :ref:`log level <logger-log_levels>`
 to ``VERY_VERBOSE`` and check the ``object_id:`` in the logs.
 
@@ -161,7 +161,7 @@ the state of a light, send a GET request to ``/light/<id>``, for example ``light
 -  **effect**: The currently active effect, only if the light supports effects.
 -  **white_value**: The white value of RGBW lights. From 0 to 255. Only if the light supports white value.
 -  **color_temp**: The color temperature of the RGBWW light. Between minimum mireds and maximum mireds of the light.
-   Only if the light support color temperature. 
+   Only if the light support color temperature.
 
 Setting light state can happen through three POST method calls: ``turn_on``, ``turn_off`` and ``toggle``.
 Turn on and off have additional URL encoded parameters that can be used to set other properties. For example
@@ -249,3 +249,25 @@ can be used:
 Creating a POST request to ``/cover/front_window_blinds/set?position=0.1&tilt=0.3`` will
 start moving the blinds towards an almost completely closed position and a new tilt
 angle.
+
+Number
+******
+
+Numbers can be set to a value within their minimum and maximum range and will return their current value. For example sending
+a GET request to ``/number/desired_delay`` could yield this payload:
+
+.. code-block:: json
+
+    {
+      "id": "number-desired_delay",
+      "state": "20.0000",
+      "value": 20
+    }
+
+POST requests on the other hand allow setting the number, the available
+method is ``set``. The following parameter can be used:
+
+-  **value**: The value you want to set the number to. The value must be within the
+   minimum and maximum range of the number otherwise it will be ignored.
+
+For example POST ``/number/desired_delay/set?value=24`` will set the number to 24.