86 lines
2.4 KiB
JavaScript
86 lines
2.4 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.barFill = document.getElementById("bar1");
|
||
|
||
// Аккордеон
|
||
DOM.historyHeader = document.getElementById("history-header");
|
||
DOM.historyBody = document.getElementById("history-body");
|
||
}
|
||
|
||
export function setStatus(v, isError = false) {
|
||
if (!DOM.status) return;
|
||
|
||
DOM.status.textContent = v;
|
||
|
||
// Стили для статуса
|
||
DOM.status.classList.remove("status-ok", "status-error", "status-lost");
|
||
|
||
if (isError) {
|
||
if (v === "Нет связи") {
|
||
DOM.status.classList.add("status-lost");
|
||
} else {
|
||
DOM.status.classList.add("status-error");
|
||
}
|
||
} else {
|
||
DOM.status.classList.add("status-ok");
|
||
}
|
||
}
|
||
|
||
export function setMeta(v) {
|
||
if (DOM.meta) DOM.meta.textContent = v;
|
||
}
|
||
|
||
export function setBars(p, noConnection = false) {
|
||
const el = DOM.barFill;
|
||
if (!el) return;
|
||
|
||
if (noConnection) {
|
||
// При потере связи - сбрасываем и делаем серым
|
||
el.style.width = "0%";
|
||
el.classList.add("no-connection");
|
||
} else {
|
||
el.classList.remove("no-connection");
|
||
el.style.width = Math.max(0, Math.min(100, p)) + "%";
|
||
}
|
||
}
|
||
|
||
export function setSignal(level, noConnection = false) {
|
||
const bars = DOM.bars;
|
||
if (!bars || bars.length < 3) return;
|
||
|
||
// Сброс
|
||
bars.forEach(b => {
|
||
b.classList.remove("active-1", "active-2", "active-3", "dim", "no-connection");
|
||
|
||
if (noConnection) {
|
||
b.classList.add("no-connection");
|
||
} else {
|
||
b.classList.add("dim");
|
||
}
|
||
});
|
||
|
||
if (noConnection) return;
|
||
|
||
// Уровни сигнала
|
||
if (level >= 1) {
|
||
bars[0].classList.add("active-1");
|
||
bars[0].classList.remove("dim");
|
||
}
|
||
if (level >= 2) {
|
||
bars[1].classList.add("active-2");
|
||
bars[1].classList.remove("dim");
|
||
}
|
||
if (level >= 3) {
|
||
bars[2].classList.add("active-3");
|
||
bars[2].classList.remove("dim");
|
||
}
|
||
} |