maxim/go-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Maxim
2026-05-08 10:57:42 +03:00
parent 4fec48c78c
commit 4d9f03c10f
4 changed files with 276 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
cmd/server/web/css/style.css
View File

@@ -17,26 +17,22 @@ h1 {
}
/* ===== GRID ===== */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
/* Desktop */
@media (min-width: 900px) {
.grid {
grid-template-columns: 1fr 1fr;
}
.wide {
grid-column: span 2;
}
}
/* ===== CARD ===== */
.card {
border: 1px solid #00ff88;
border-radius: 10px;
@@ -51,107 +47,39 @@ h1 {
}
/* ===== STATUS ===== */
#status {
font-size: 28px;
font-weight: bold;
margin-bottom: 8px;
}
/* СТАТУСЫ - ЦВЕТА */
.status-ok {
color: #00ff88 !important;
}
.status-lost {
color: #ffffff !important;
animation: blink 1.5s infinite;
}
.status-error {
color: #ff4444 !important;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
/* ===== META ===== */
#meta {
font-size: 14px;
opacity: 0.8;
word-break: break-word;
}
/* ===== LATEST ===== */
#latest {
font-size: 36px;
font-weight: bold;
margin-bottom: 12px;
}
/* ===== BITS ===== */
#bits {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.bit {
height: 52px;
border: 1px solid #00ff88;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: bold;
}
.bit.on {
background: #00ff88;
color: #000;
}
/* Tablet/Desktop */
@media (min-width: 700px) {
#bits {
grid-template-columns: repeat(8, 1fr);
}
}
/* ===== HISTORY ===== */
#history {
font-size: 13px;
line-height: 1.35;
max-height: 420px;
overflow-y: auto;
white-space: nowrap;
padding-right: 4px;
}
/* Desktop */
@media (min-width: 900px) {
#history {
font-size: 12px;
max-height: 520px;
}
}
/* ===== PHONE ===== */
@media (max-width: 500px) {
h1 {
font-size: 18px;
}
#status {
font-size: 22px;
}
#latest {
font-size: 30px;
}
.bit {
height: 44px;
font-size: 18px;
}
#history {
font-size: 16px;
line-height: 1.5;
max-height: 55vh;
}
}
/* ===== PROGRESS BARS ===== */
.progress-row {
margin-bottom: 16px;
}
@@ -174,6 +102,18 @@ h1 {
0 0 4px rgba(0,0,0,0.8);
}
.progress-with-signal {
display: flex;
align-items: center;
gap: 0;
}
.progress-90 {
flex: 0 0 86%;
margin-right: 10px;
}
/* ЗАЛИВКА ПРОГРЕСС-БАРА */
.fill {
height: 100%;
width: 0%;
@@ -184,49 +124,11 @@ h1 {
transition: width 0.25s linear;
}
/* mobile */
@media (max-width: 500px) {
.progress {
height: 30px;
padding: 5px;
}
.progress-label {
font-size: 15px;
}
}
.accordion-header {
cursor: pointer;
user-select: none;
}
.accordion-header:hover {
opacity: 0.7;
}
.accordion-body {
max-height: 520px;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0;
}
.accordion-body.collapsed {
max-height: 0;
padding: 0;
}
.progress-with-signal {
display: flex;
align-items: center;
gap: 0;
}
.progress-90 {
flex: 0 0 86%;
margin-right: 10px;
/* Заливка при потере связи */
.fill.no-connection {
background: #555555 !important;
box-shadow: none !important;
width: 0% !important;
}
/* ===== SIGNAL ICON ===== */
@@ -252,27 +154,35 @@ h1 {
.sig-bar-2 { height: 66%; }
.sig-bar-3 { height: 100%; }
/* Активные — зелёная заливка */
.sig-bar.active-1,
.sig-bar.active-2,
.sig-bar.active-3,
.sig-bar.active-4 {
background-color: #00ff88;
border-color: #00ff88;
}
/* Неактивные — прозрачные, только контур */
/* Неактивные сигнальные бары */
.sig-bar.dim {
background-color: transparent;
border-color: #1a3a1a;
}
/* Активные сигнальные бары */
.sig-bar.active-1,
.sig-bar.active-2,
.sig-bar.active-3 {
background-color: #00ff88;
border-color: #00ff88;
}
/* Нет связи - сигнальные бары */
.sig-bar.no-connection {
background-color: #555555 !important;
border-color: #555555 !important;
opacity: 0.3 !important;
}
/* ===== LAST BYTE ===== */
#last-byte {
font-size: 18px;
font-weight: bold;
color: #00ff88;
}
/* ===== CHART ===== */
#signalChart {
width: 100%;
background: #050805;
@@ -280,26 +190,62 @@ h1 {
border-radius: 8px;
}
/* ===== HISTORY ===== */
#history {
font-size: 13px;
line-height: 1.35;
max-height: 420px;
overflow-y: auto;
white-space: nowrap;
padding-right: 4px;
margin: 0;
}
/* ===== ACCORDION ===== */
.accordion-header {
cursor: pointer;
user-select: none;
transition: background-color 0.2s;
padding: 10px 0;
margin: 0;
}
.accordion-header:hover {
background-color: rgba(255, 255, 255, 0.05);
opacity: 0.7;
}
.accordion-body {
max-height: 520px;
overflow: hidden;
transition: max-height 0.3s ease-out;
max-height: 2000px;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.accordion-body.collapsed {
max-height: 0;
opacity: 0;
}
/* ===== MOBILE ===== */
@media (max-width: 500px) {
h1 {
font-size: 18px;
}
#status {
font-size: 22px;
}
.progress {
height: 30px;
padding: 5px;
}
.progress-label {
font-size: 15px;
}
#history {
font-size: 16px;
line-height: 1.5;
max-height: 55vh;
}
}

39
cmd/server/web/js/app.js
View File

@@ -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 = "--";
}
}
}

56
cmd/server/web/js/ui.js
View File

@@ -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");