mirror of
https://github.com/cesanta/mongoose.git
synced 2024-12-24 16:27:55 +08:00
87 lines
3.2 KiB
HTML
87 lines
3.2 KiB
HTML
|
<!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>
|