<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Basic JavaScript UI demo</h1> <div style="height: 0.3em;"> </div> <div class="col col-6"> <h3 style="background: #c03434; color: #fff; padding: 0.4em;"> Device Configuration</h3> <div style="margin: 0.5em 0; display: flex;"> <span class="addon nowrap">MQTT server:</span> <input id="url" type="text" style="flex: 1 100%;" value="" onchange="updateurl()" /> <button class="btn" id="btn_url" onclick="updateurl()" style="margin-left: 1em; background: #8aa;">Update</button> </div> <div style="margin: 0.5em 0; display: flex; "> <span class="addon nowrap">Subscribe topic:</span> <input id="sub" type="text" style="flex: 1 100%;" value="" onchange="updatesub()" /> <button class="btn" id="btn_sub" onclick="updatesub()" style="margin-left: 1em; background: #8aa;">Update</button> </div> <div style="margin: 0.5em 0; display: flex;"> <span class="addon nowrap">Publish topic:</span> <input id="pub" type="text" style="flex: 1 100%;" value="" onchange="updatepub()" /> <button class="btn" id="btn_pub" onclick="updatepub()" style="margin-left: 1em; background: #8aa;">Update</button> </div> <button id="btn_get" onclick="getconfig()">Get configuration</button> </div> <div style="height: 0.3em;"> </div> <div style="margin-top: 1em;">Action log:</div> <div id="log" style="background: #eee; height: 10em; padding: 0.5em; overflow:auto;"><div> </body> <script> var E = function(id) { return document.getElementById(id); }; var inp_url = E('url'), inp_sub = E('sub'), inp_pub = E('pub'), msglog = E('log');; var enable = function(en) { btn_url.disabled = btn_sub.disabled = btn_pub.disabled = !en; }; var log = text => msglog.innerHTML += text + '<br/>\n'; var showurl = function(val) { inp_url.value = val; }; var showsub = function(val) { inp_sub.value = val; }; var showpub = function(val) { inp_pub.value = val; }; const showconfig = function(r) { showurl(r.url); showsub(r.sub); showpub(r.pub); }; const getconfig = () => fetch('/api/config/get') .then(r => r.json()) .then(r => { showconfig(r); log('GET /api/config/get: ' + JSON.stringify(r)); enable(true); }) .catch(err => { console.log(err); enable(false); }); const update = (name, val) => { const myObj = { [name]: val }; log('POST ' + JSON.stringify(myObj) + ' to /api/config/set'); fetch('/api/config/set', {method: 'POST', headers: { 'Content-Type': 'application/json'}, body:JSON.stringify(myObj)}) .catch(err => { console.log(err); enable(false); }); }; const updateurl = ev => update('url', inp_url.value); const updatesub = ev => update('sub', inp_sub.value); const updatepub = ev => update('pub', inp_pub.value); enable(false); getconfig(); </script> </html>