mirror of
https://github.com/cesanta/mongoose.git
synced 2026-10-14 10:20:01 +00:00
move to new skeleton
This commit is contained in:
Sergio R. Caprile committed
1 parent
d391bca2d3
commit
fe0b144b84
63 files changed
+20
-20
No files matched your search
@@ -0,0 +1,86 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,43 @@
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; height: 100%; font: 16px sans-serif; }
|
||||
select, input, label::before, textarea { outline: none; box-shadow:none !important; border: 1px solid #ccc !important; }
|
||||
code, pre { color: #373; font-family: monospace; font-weight: bolder; font-size: smaller; background: #ddd; padding: 0.1em 0.3em; border-radius: 0.2em; }
|
||||
textarea, input, .addon { font-size: 15px; border: 1px solid #ccc; padding: 0.5em; }
|
||||
a, a:visited, a:active { color: #55f; }
|
||||
.addon { background: #eee; min-width: 9em;}
|
||||
.btn {
|
||||
background: #ccc; border-radius: 0.3em; border: 0; color: #fff; cursor: pointer;
|
||||
display: inline-block; padding: 0.6em 2em; font-weight: bolder;
|
||||
}
|
||||
.btn[disabled] { opacity: 0.5; cursor: auto;}
|
||||
.smooth { transition: all .2s; }
|
||||
.container { margin: 0 20px; width: auto; }
|
||||
.d-flex { display: flex; }
|
||||
.d-none { display: none; }
|
||||
.border { border: 1px solid #ddd; }
|
||||
.rounded { border-radius: 0.5em; }
|
||||
.nowrap { white-space: nowrap; }
|
||||
.msg { background: #def; border-left: 5px solid #59d; padding: 0.5em; font-size: 90%; margin: 1em 0; }
|
||||
.section { margin: 0 1em; }
|
||||
.topic, .data, .qos { padding: 0.2em 0.5em; border-radius: 0.4em; margin-right: 0.5em; }
|
||||
.qos { background: #efa; }
|
||||
.topic { background: #fea; }
|
||||
.data { background: #aef; }
|
||||
|
||||
/* Grid */
|
||||
.row { display: flex; flex-wrap: wrap; }
|
||||
.col { margin: 0; padding: 0; overflow: auto; }
|
||||
.col-12 { width: 100%; }
|
||||
.col-11 { width: 91.66%; }
|
||||
.col-10 { width: 83.33%; }
|
||||
.col-9 { width: 75%; }
|
||||
.col-8 { width: 66.66%; }
|
||||
.col-7 { width: 58.33%; }
|
||||
.col-6 { width: 50%; }
|
||||
.col-5 { width: 41.66%; }
|
||||
.col-4 { width: 33.33%; }
|
||||
.col-3 { width: 25%; }
|
||||
.col-2 { width: 16.66%; }
|
||||
.col-1 { width: 8.33%; }
|
||||
@media (min-width: 1310px) { .container { margin: auto; width: 1270px; } }
|
||||
@media (max-width: 920px) { .row .col { width: 100%; } }
|
||||
Reference in new issue
Block a user