87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
export const DOM = {
|
|
status: null,
|
|
meta: null,
|
|
latest: null,
|
|
lastByte: null,
|
|
history: null,
|
|
canvas: null,
|
|
bars: document.querySelectorAll(".sig-bar"),
|
|
barFill: null,
|
|
historyHeader: null,
|
|
historyBody: null,
|
|
};
|
|
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.barFill = document.getElementById("bar1");
|
|
DOM.historyHeader = document.getElementById("history-header");
|
|
DOM.historyBody = document.getElementById("history-body");
|
|
DOM.bars = document.querySelectorAll(".sig-bar");
|
|
}
|
|
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(bar => {
|
|
bar.classList.remove("active-1", "active-2", "active-3", "dim", "no-connection");
|
|
if (noConnection) {
|
|
bar.classList.add("no-connection");
|
|
}
|
|
else {
|
|
bar.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");
|
|
}
|
|
}
|