промежуточная работа

cmd/server/web/js/app.js

@@ -1,19 +1,14 @@
-// ===== BIT RENDER =====
-function renderBits(byte) {
-    const bits = document.getElementById("bits");
-    bits.innerHTML = "";
+// ===== ACCORDION =====
+const historyHeader = document.getElementById("history-header");
+const historyBody = document.getElementById("history-body");
+let accordionOpen = false;
+historyBody.classList.add("collapsed"); // изначально свёрнут
 
-    byte = Number(byte || 0);
-
-    for (let i = 7; i >= 0; i--) {
-        const v = (byte >> i) & 1;
-
-        const d = document.createElement("div");
-        d.className = "bit" + (v ? " on" : "");
-        d.textContent = v;
-        bits.appendChild(d);
-    }
-}
+historyHeader.addEventListener("click", () => {
+    accordionOpen = !accordionOpen;
+    historyHeader.textContent = (accordionOpen ? "▼" : "▶") + " ПРИНЯТЫЕ ДАННЫЕ";
+    historyBody.classList.toggle("collapsed", !accordionOpen);
+});
 
 // ===== PROGRESS BAR =====
 function setBar(id, value) {
@@ -21,6 +16,31 @@ function setBar(id, value) {
     document.getElementById(id).style.width = value + "%";
 }
 
+// ===== SIGNAL ICON =====
+function setSignal(percent) {
+    const bars = document.querySelectorAll(".sig-bar");
+    bars.forEach(b => {
+        b.classList.remove("active-1", "active-2", "active-3", "active-4");
+        b.classList.add("dim");
+    });
+
+    if (percent > 75) {
+        bars[0].classList.add("active-1"); bars[0].classList.remove("dim");
+        bars[1].classList.add("active-2"); bars[1].classList.remove("dim");
+        bars[2].classList.add("active-3"); bars[2].classList.remove("dim");
+        bars[3].classList.add("active-4"); bars[3].classList.remove("dim");
+    } else if (percent > 50) {
+        bars[0].classList.add("active-1"); bars[0].classList.remove("dim");
+        bars[1].classList.add("active-2"); bars[1].classList.remove("dim");
+        bars[2].classList.add("active-3"); bars[2].classList.remove("dim");
+    } else if (percent > 25) {
+        bars[0].classList.add("active-1"); bars[0].classList.remove("dim");
+        bars[1].classList.add("active-2"); bars[1].classList.remove("dim");
+    } else if (percent > 0) {
+        bars[0].classList.add("active-1"); bars[0].classList.remove("dim");
+    }
+}
+
 // ===== SMOOTHING =====
 let lastValue = 0;
 
@@ -60,12 +80,6 @@ async function update() {
         document.getElementById("meta").textContent =
             "аптайм: " + uptime + "s | буфер: " + filled;
 
-        // ===== LATEST =====
-        const latest = Number(h.latest || 0);
-        document.getElementById("latest").textContent = latest;
-
-        renderBits(latest);
-
         // ===== HISTORY =====
         const arr = Array.isArray(hist.bytes) ? hist.bytes : [];
 
@@ -89,6 +103,8 @@ async function update() {
 
         // ===== ONLY CHANNEL 1 =====
         setBar("bar1", smooth);
+        document.getElementById("last-byte").textContent = filtered;
+        setSignal(smooth);
 
     } catch (e) {
         console.error("UPDATE ERROR:", e);
@@ -96,6 +112,5 @@ async function update() {
     }
 }
 
-// быстрее и плавнее
 setInterval(update, 500);
-update();
+update();