58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
// ui.js (DOM слой)
|
|
export let DOM = {};
|
|
|
|
export function initDOM() {
|
|
DOM.status = document.getElementById("status");
|
|
DOM.meta = document.getElementById("meta");
|
|
DOM.latest = document.getElementById("latest");
|
|
DOM.lastByte = document.getElementById("last-byte");
|
|
DOM.history = document.getElementById("history");
|
|
DOM.canvas = document.getElementById("signalChart");
|
|
DOM.bars = document.querySelectorAll(".sig-bar");
|
|
|
|
DOM.historyHeader = document.getElementById("history-header");
|
|
DOM.historyBody = document.getElementById("history-body");
|
|
}
|
|
|
|
export function setStatus(v) {
|
|
if (DOM.status) DOM.status.textContent = v;
|
|
}
|
|
|
|
export function setMeta(v) {
|
|
if (DOM.meta) DOM.meta.textContent = v;
|
|
}
|
|
|
|
export function setBars(p) {
|
|
const el = document.getElementById("bar1");
|
|
if (!el) return;
|
|
el.style.width = Math.max(0, Math.min(100, p)) + "%";
|
|
}
|
|
|
|
export function setSignal(level) {
|
|
const bars = DOM.bars;
|
|
if (!bars || bars.length < 3) return;
|
|
|
|
// reset
|
|
bars.forEach(b => {
|
|
b.classList.remove("active-1", "active-2", "active-3");
|
|
b.classList.add("dim");
|
|
});
|
|
|
|
// 1 bar
|
|
if (level >= 1) {
|
|
bars[0].classList.add("active-1");
|
|
bars[0].classList.remove("dim");
|
|
}
|
|
|
|
// 2 bar
|
|
if (level >= 2) {
|
|
bars[1].classList.add("active-2");
|
|
bars[1].classList.remove("dim");
|
|
}
|
|
|
|
// 3 bar
|
|
if (level >= 3) {
|
|
bars[2].classList.add("active-3");
|
|
bars[2].classList.remove("dim");
|
|
}
|
|
} |