mirror/mongoose
1
0
Fork 0
mirror of https://github.com/cesanta/mongoose.git synced 2024-11-24 11:09:01 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Update dash UI

Browse Source
This commit is contained in:
Sergey Lyubka 2022-06-05 17:17:19 +01:00
parent 0f0cf7a5db
commit e75afcba42
3 changed files with 1057 additions and 1052 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2091
examples/device-dashboard/packed_fs.c
View File

File diff suppressed because it is too large Load Diff

9
examples/device-dashboard/web_root/main.js
View File

@ -44,6 +44,7 @@ const Footer = props => html`
const Hero = props => html`
<div class="section">
<div style="margin-top: 1em; background: #eee; padding: 1em; border-radius: 0.5em; color: #777; ">
<h1 style="margin: 0.2em 0;">Interactive Device Dashboard</h1>
@ -67,7 +68,7 @@ const Hero = props => html`
are sent over Websocket at URI <code>curl localhost:8000/api/watch</code>
as JSON strings <code>{"name": "..", "data": ...}</code>
</p>
</div>
</div>`;
const Login = function(props) {
@ -130,7 +131,7 @@ const Configuration = function(props) {
const updatesub = ev => update('sub', sub);
return html`
<div style="margin: 0 0.3em;">
<div class="section">
<h3 style="background: #c03434; color: #fff; padding: 0.4em;">
Device Configuration</h3>
<div style="margin: 0.5em 0; display: flex;">
@ -194,7 +195,7 @@ const Messages = function(props) {
}).then(r => setTxt(''));
return html`
<div style="margin: 0 0.3em;">
<div class="section">
<h3 style="background: #30c040; color: #fff; padding: 0.4em;">MQTT messages</h3>
<div>
MQTT server status: <b>${cfg.connected ? 'connected' : 'diconnected'}</b>
@ -298,7 +299,7 @@ const Chart = function(props) {
let xmax = 0, missing = MaxMetricsDataPoints - data.length;
if (missing > 0) xmax = Math.round(Date.now() / 1000) + missing;
return html`
<div style="margin: 0 0.3em;">
<div class="section">
<h3 style="background: #ec3; color: #fff; padding: 0.4em;">Data Chart</h3>
<div style="overflow: auto; padding: 0.5em;" class="">
<${SVG} height=240 width=600 ymin=0 ymax=20 xmax=${xmax} data=${data} />

9
examples/device-dashboard/web_root/style.css
View File

@ -18,6 +18,11 @@ a, a:visited, a:active { color: #55f; }
.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 { background: #fea; padding: 0.2em 1em; border-radius: 0.4em; }
.data { background: #aef; padding: 0.2em 1em; border-radius: 0.4em; }
/* Grid */
.row { display: flex; flex-wrap: wrap; }
.col { margin: 0; padding: 0; overflow: auto; }
.col-12 { width: 100%; }
@ -32,9 +37,5 @@ a, a:visited, a:active { color: #55f; }
.col-3 { width: 25%; }
.col-2 { width: 16.66%; }
.col-1 { width: 8.33%; }
.topic { background: #fea; padding: 0.2em 1em; border-radius: 0.4em; }
.data { background: #aef; padding: 0.2em 1em; border-radius: 0.4em; }
@media (min-width: 1310px) { .container { margin: auto; width: 1270px; } }
@media (max-width: 920px) { .row .col { width: 100%; } }