3pp-mirror/ahoy
1
0
Fork 0
mirror of https://github.com/lumapu/ahoy.git synced 2025-05-31 01:36:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

beautified system.html (converted to table)

Browse source
This commit is contained in:
lumapu 2022-12-18 01:14:54 +01:00
parent b2fc16e030
commit 4df61833ca
4 changed files with 104 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/CHANGES.md
View file

@ -4,6 +4,7 @@
* factory reset formats entire little fs
* renamed sunrise / sunset on indext.html to start / stop communication
* show system information only if called directly from menu
* beautified system.html
## 0.5.55
* fixed static IP save

3
src/web/html/api.js
View file

@ -128,9 +128,10 @@ function opt(val, html) {
return o;
}
function div(cl) {
function div(cl, h=null) {
e = document.createElement('div');
e.classList.add(...cl);
if(null != h) e.innerHTML = h;
return e;
}

74
src/web/html/style.css
View file

@ -437,3 +437,77 @@ div.ModPwr, div.ModName {
border: 0px;
margin-bottom: 10px;
}
.head {
background-color: #006ec0;
color: #fff;
}
.row { display: flex; max-width: 100%; flex-wrap: wrap; }
.col { flex: 1 0 0%; }
.col-1, .col-2, .col-3, .col-4,
.col-5, .col-6, .col-7, .col-8,
.col-9, .col-10, .col-11, .col-12 { flex: 0 0 auto; }
.col-1 { width: 8.333333333%; }
.col-2 { width: 16.66666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333%; }
.col-5 { width: 41.66666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }
.mt-1 { margin-top: 0.25rem }
.mt-2 { margin-top: 0.5rem }
.mt-3 { margin-top: 1rem }
.mt-4 { margin-top: 1.5rem }
.mt-5 { margin-top: 3rem }
.a-r { text-align: right; }
.a-c { text-align: center; }
/* sm */
@media(min-width: 768px) {
.col-sm-1 { width: 8.333333333%; }
.col-sm-2 { width: 16.66666667%; }
.col-sm-3 { width: 25%; }
.col-sm-4 { width: 33.33333333%; }
.col-sm-5 { width: 41.66666667%; }
.col-sm-6 { width: 50%; }
.col-sm-7 { width: 58.33333333%; }
.col-sm-8 { width: 66.66666667%; }
.col-sm-9 { width: 75%; }
.col-sm-10 { width: 83.33333333%; }
.col-sm-11 { width: 91.66666667%; }
.col-sm-12 { width: 100%; }
}
/* md */
@media(min-width: 992px) {
.col-md-1 { width: 8.333333333%; }
.col-md-2 { width: 16.66666667%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.33333333%; }
.col-md-5 { width: 41.66666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.33333333%; }
.col-md-8 { width: 66.66666667%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.33333333%; }
.col-md-11 { width: 91.66666667%; }
.col-md-12 { width: 100%; }
}

47
src/web/html/system.html
View file

@ -18,9 +18,9 @@
</div>
<div id="wrapper">
<div id="content">
<div><ul id="info"></ul></div>
<div><ul id="radio"></ul></div>
<div id="system"></div>
<div id="info" class="col-sm-12 col-md-6 mt-3"></div>
<div id="radio" class="col-sm-12 col-md-6 mt-3"></div>
<div id="system" class="mt-3"></div>
</div>
</div>
<div id="footer">
@ -45,19 +45,29 @@
parseESP(obj);
}
function genTabRow(key, value) {
var r = div(["row", "p-1"]);
r.appendChild(div(["col"], key));
r.appendChild(div(["col"], value));
return r;
}
function parseSysInfo(obj) {
const data = ["sdk", "cpu_freq", "chip_revision",
"chip_model", "chip_cores", "esp_type", "mac", "wifi_rssi",
"flash_size", "sketch_used", "heap_total", "heap_free", "heap_frag",
"max_free_blk", "version", "core_version", "reboot_reason"];
var ul = document.getElementById("info");
var main = document.getElementById("info");
var h = div(["head", "p-2"]);
var r = div(["row"]);
r.appendChild(div(["col", "a-c"], "System Information"));
h.appendChild(r);
main.appendChild(h);
for (const [key, value] of Object.entries(obj)) {
if(!data.includes(key) || (typeof value == 'undefined')) continue;
var li = document.createElement("li");
li.appendChild()
li.appendChild(document.createTextNode(key + ": " + value));
ul.appendChild(li);
main.appendChild(genTabRow(key, value));
}
}
@ -65,21 +75,18 @@
const pa = ["MIN", "LOW", "HIGH", "MAX"];
const datarate = ["1 MBps", "2 MBps", "250 kbps"];
var ul = document.getElementById("radio");
let data;
var main = document.getElementById("radio");
var h = div(["head", "p-2"]);
var r = div(["row"]);
r.appendChild(div(["col", "a-c"], "Radio"));
h.appendChild(r);
main.appendChild(h);
var li = document.createElement("li");
li.appendChild(document.createTextNode("nrf24l01" + (obj["isPVariant"] ? "+ " : "") + (obj["isconnected"] ? "is connected " : "is not connected ")));
ul.appendChild(li);
main.appendChild(genTabRow("nrf24l01" + (obj["isPVariant"] ? "+ " : ""), (obj["isconnected"] ? "is connected " : "is not connected ")));
if(obj["isconnected"]) {
var li = document.createElement("li");
li.appendChild(document.createTextNode("Datarate: " + datarate[obj["DataRate"]]));
ul.appendChild(li);
var li = document.createElement("li");
li.appendChild(document.createTextNode("Power Level: " + pa[obj["power_level"]]));
ul.appendChild(li);
main.appendChild(genTabRow("Datarate", datarate[obj["DataRate"]]));
main.appendChild(genTabRow("Power Level", pa[obj["power_level"]]));
}
}