Добавление корректного статуса

cmd/server/web/js/app.js

@@ -14,6 +14,7 @@ import { initAccordion } from "./accordion.js";
 import { drawChart } from "./chart.js";
 
 let lastChart = 0;
+let connectionLost = false;
 
 // ================= INIT =================
 window.addEventListener("DOMContentLoaded", () => {
@@ -30,10 +31,17 @@ async function update() {
         ]);
 
         // ===== STATUS =====
-        setStatus(h.status || "неизвестно");
+        const isOnline = h.pipe_alive && h.has_data;
+
+        if (isOnline) {
+            setStatus("На связи");
+            connectionLost = false;
+        } else {
+            setStatus("Нет связи", true); // true = lost connection
+            connectionLost = true;
+        }
 
         const arr = Array.isArray(hist.bytes) ? hist.bytes : [];
-
         const raw = arr[arr.length - 1] ?? 0;
 
         // ===== DECODE =====
@@ -45,11 +53,17 @@ async function update() {
         addSignal(value);
 
         // ===== UI =====
-        setBars(smooth(percent));
-        setSignal(level);
+        if (isOnline) {
+            setBars(smooth(percent));
+            setSignal(level);
+        } else {
+            // При потере связи - сбрасываем индикаторы
+            setBars(0, true); // true = no connection
+            setSignal(0, true); // true = no connection
+        }
 
         if (DOM.lastByte) {
-            DOM.lastByte.textContent = value;
+            DOM.lastByte.textContent = isOnline ? value : "--";
         }
 
         // ===== META =====
@@ -57,9 +71,10 @@ async function update() {
         const filled = h.stats?.filled ?? 0;
         const bps = Math.round(h.stats?.bits_per_sec ?? 0);
         const Bps = Math.round(h.stats?.bytes_per_sec ?? 0);
+        const idle = Math.round((h.last_data_ms || 0) / 1000);
 
         setMeta(
-            `работа: ${uptime}s | буфер: ${filled} | ${bps} bit/s (${Bps} B/s)`
+            `работа: ${uptime}s | буфер: ${filled} | ${bps} bit/s (${Bps} B/s) | idle: ${idle}s`
         );
 
         // ===== HISTORY =====
@@ -74,14 +89,20 @@ async function update() {
         // ===== CHART =====
         const now = performance.now();
 
-        if (now - lastChart > 100) {
-            drawChart(state.signalHistory);
+        if (now - lastChart > 100 && DOM.canvas) {
+            drawChart(DOM.canvas, state.signalHistory);
             lastChart = now;
         }
 
     } catch (e) {
         console.error("UPDATE ERROR:", e);
-        setStatus("СЕРВЕР НЕДОСТУПЕН");
+        setStatus("СЕРВЕР НЕДОСТУПЕН", true);
+        setBars(0, true);
+        setSignal(0, true);
+
+        if (DOM.lastByte) {
+            DOM.lastByte.textContent = "--";
+        }
     }
 }
 

cmd/server/web/js/ui.js

@@ -9,48 +9,76 @@ export function initDOM() {
     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) {
-    if (DOM.status) DOM.status.textContent = v;
+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) {
-    const el = document.getElementById("bar1");
+export function setBars(p, noConnection = false) {
+    const el = DOM.barFill;
     if (!el) return;
-    el.style.width = Math.max(0, Math.min(100, p)) + "%";
+
+    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) {
+export function setSignal(level, noConnection = false) {
     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");
+        b.classList.remove("active-1", "active-2", "active-3", "dim", "no-connection");
+
+        if (noConnection) {
+            b.classList.add("no-connection");
+        } else {
+            b.classList.add("dim");
+        }
     });
 
-    // 1 bar
+    if (noConnection) return;
+
+    // Уровни сигнала
     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");