В процессе работы

This commit is contained in:
Maxim
2026-06-23 09:07:43 +03:00
parent 877b29d5b4
commit 78069b0aa4
7 changed files with 172 additions and 130 deletions

View File

@@ -1,8 +1,8 @@
// app.ts - Оркестратор приложения
import {
fetchHealth,
fetchHistory
fetchHealth,
fetchHistory
} from "./data.js";
import {
state,
@@ -22,6 +22,7 @@ import {
setAudioIndicator,
DOM,
setChannelValue,
setChannelCurrentValue,
channelElements
} from "./ui.js";
import { initAccordion } from "./accordion.js";
@@ -159,7 +160,8 @@ async function update(): Promise<void> {
// ===== НАХОДИМ МАКСИМУМ ИЗ БУФЕРА =====
let maxSignal = 0;
let maxLevel = 0;
let lastSignal = 0;
let currentSignal = 0;
let currentLevel = 0;
if (isOnline && arr.length > 0) {
for (const byte of arr) {
@@ -174,7 +176,8 @@ async function update(): Promise<void> {
}
}
lastSignal = raw & 0x3F;
currentSignal = raw & 0x3F;
currentLevel = (raw >> 6) & 0x3;
}
const percent = (maxSignal / 63) * 100;
@@ -182,9 +185,11 @@ async function update(): Promise<void> {
// ===== ОБНОВЛЯЕМ КАНАЛЫ =====
if (isOnline && arr.length > 0) {
setChannelValue(0, maxSignal, maxLevel);
setChannelCurrentValue(0, currentSignal, currentLevel);
for (let i = 1; i < 8; i++) {
setChannelValue(i, 0, 0);
setChannelCurrentValue(i, 0, 0);
if (channelElements[i]) {
channelElements[i].item.classList.remove('channel-active');
}
@@ -195,11 +200,12 @@ async function update(): Promise<void> {
}
if (DOM.lastByte) {
DOM.lastByte.textContent = lastSignal.toString();
DOM.lastByte.textContent = currentSignal.toString();
}
} else {
for (let i = 0; i < 8; i++) {
setChannelValue(i, 0, 0);
setChannelCurrentValue(i, 0, 0);
if (channelElements[i]) {
channelElements[i].item.classList.remove('channel-active');
}
@@ -228,10 +234,22 @@ async function update(): Promise<void> {
setMeta(`Работа: ${uptime}s | Буфер: ${filled} | Приём: ${Bps} B/s`);
// ===== ИСТОРИЯ: НОВЫЕ СВЕРХУ =====
if (DOM.history) {
DOM.history.innerHTML = arr
.map((b, i) => `[${i}] ${(b & 0xFF).toString(2).padStart(8, "0")} = ${b & 0xFF}`)
.join("<br>");
if (arr.length === 0) {
DOM.history.innerHTML = 'Нет данных';
} else {
// Разворачиваем массив для отображения новых сверху
const reversed = [...arr].reverse();
DOM.history.innerHTML = reversed
.map((b, i) => {
const originalIndex = arr.length - 1 - i;
// Форматируем: индекс, бинарное представление, десятичное значение
const binary = (b & 0xFF).toString(2).padStart(8, "0");
return `[${originalIndex}] ${binary} = ${b & 0xFF}`;
})
.join("<br>");
}
}
const now = performance.now();
@@ -257,6 +275,10 @@ async function update(): Promise<void> {
if (DOM.lastByte) DOM.lastByte.textContent = "--";
if (DOM.history) {
DOM.history.innerHTML = "Ошибка загрузки данных";
}
if (consecutiveErrors >= MAX_ERRORS && pollTimer) {
clearInterval(pollTimer);
}

View File

@@ -556,13 +556,13 @@ function initDataPaginationControls(): void {
<div class="pagination-controls">
<button id="dataFirstPage" class="pagination-btn" title="Первая страница (самые новые)">⏮</button>
<button id="dataPrevPage" class="pagination-btn" title="Предыдущая страница (более новые)">◀</button>
<span id="dataPageInfo" class="pagination-info">Страница 1 из 1</span>
<button id="dataNextPage" class="pagination-btn" title="Следующая страница (более старые)">▶</button>
<button id="dataLastPage" class="pagination-btn" title="Последняя страница (самые старые)">⏭</button>
<span class="pagination-goto">
<input type="number" id="dataPageInput" min="1" value="1" class="pagination-input">
<button id="dataGoToPage" class="pagination-btn pagination-goto-btn">Перейти</button>
</span>
<span id="dataPageInfo" class="pagination-info">Страница 1 из 1</span>
</div>
`;
@@ -618,13 +618,13 @@ function initEventsPaginationControls(): void {
<div class="pagination-controls">
<button id="firstPage" class="pagination-btn" title="Первая страница (самые новые)">⏮</button>
<button id="prevPage" class="pagination-btn" title="Предыдущая страница (более новые)">◀</button>
<span id="pageInfo" class="pagination-info">Страница 1 из 1</span>
<button id="nextPage" class="pagination-btn" title="Следующая страница (более старые)">▶</button>
<button id="lastPage" class="pagination-btn" title="Последняя страница (самые старые)">⏭</button>
<span class="pagination-goto">
<input type="number" id="pageInput" min="1" value="1" class="pagination-input">
<button id="goToPage" class="pagination-btn pagination-goto-btn">Перейти</button>
</span>
<span id="pageInfo" class="pagination-info">Страница 1 из 1</span>
</div>
`;

View File

@@ -1,4 +1,4 @@
// state.ts - Peak Holder с сбросом до текущего максимума
// state.ts - Peak Holder с фиксированным временем удержания
interface AppState {
maxPoints: number;
@@ -10,12 +10,14 @@ interface AppState {
currentValue: number; // Текущий максимум из буфера
peakTimer: number | null; // Таймер для сброса пика амплитуды
peakHoldTime: number; // Время удержания пика в миллисекундах
peakLocked: boolean; // Заблокирован ли пик (не сбрасывается до таймера)
// Peak Holder для уровня сигнала
peakSignalLevel: number;
currentSignalLevel: number; // Текущий максимум уровня из буфера
currentSignalLevel: number;
signalPeakTimer: number | null;
signalPeakHoldTime: number;
signalPeakLocked: boolean;
hasPeak: boolean;
lastMaxSignal: number;
@@ -32,11 +34,13 @@ export const state: AppState = {
currentValue: 0,
peakTimer: null,
peakHoldTime: 3000,
peakLocked: false,
peakSignalLevel: 0,
currentSignalLevel: 0,
signalPeakTimer: null,
signalPeakHoldTime: 3000,
signalPeakLocked: false,
hasPeak: false,
lastMaxSignal: 0,
@@ -67,14 +71,22 @@ export function updatePeakHolder(currentMax: number): number {
state.currentValue = currentMax;
state.lastMaxSignal = currentMax;
if (currentMax >= state.peakValue) {
// Если пик заблокирован - ничего не меняем, только обновляем currentValue
if (state.peakLocked) {
return state.peakValue;
}
// Если новое значение БОЛЬШЕ текущего пика - обновляем пик и блокируем
if (currentMax > state.peakValue) {
state.peakValue = currentMax;
state.hasPeak = true;
state.peakLocked = true;
scheduleAmplitudePeakRelease();
notifyPeakHolderChange();
return state.peakValue;
}
// Если новое значение МЕНЬШЕ или РАВНО - ничего не делаем
return state.peakValue;
}
@@ -86,9 +98,14 @@ export function updatePeakHolder(currentMax: number): number {
export function updateSignalPeakHolder(currentMaxLevel: number): number {
state.currentSignalLevel = currentMaxLevel;
if (currentMaxLevel >= state.peakSignalLevel) {
if (state.signalPeakLocked) {
return state.peakSignalLevel;
}
if (currentMaxLevel > state.peakSignalLevel) {
state.peakSignalLevel = currentMaxLevel;
state.hasPeak = true;
state.signalPeakLocked = true;
scheduleSignalPeakRelease();
notifyPeakHolderChange();
return state.peakSignalLevel;
@@ -108,9 +125,11 @@ function scheduleAmplitudePeakRelease(): void {
}
state.peakTimer = window.setTimeout(() => {
// Сбрасываем пик до текущего значения
state.peakValue = state.currentValue;
state.peakTimer = null;
state.hasPeak = false;
state.peakLocked = false;
notifyPeakHolderChange();
}, state.peakHoldTime);
}
@@ -125,6 +144,7 @@ function scheduleSignalPeakRelease(): void {
state.peakSignalLevel = state.currentSignalLevel;
state.signalPeakTimer = null;
state.hasPeak = false;
state.signalPeakLocked = false;
notifyPeakHolderChange();
}, state.signalPeakHoldTime);
}
@@ -161,6 +181,7 @@ export function forceResetSignalPeak(): void {
state.currentSignalLevel = 0;
state.hasPeak = false;
state.lastMaxSignal = 0;
state.signalPeakLocked = false;
notifyPeakHolderChange();
}
@@ -173,6 +194,7 @@ export function forceResetPeak(): void {
state.currentValue = 0;
state.hasPeak = false;
state.lastMaxSignal = 0;
state.peakLocked = false;
forceResetSignalPeak();
notifyPeakHolderChange();
}

View File

@@ -169,14 +169,18 @@ export function setHeightLevel(level: number): void {
// ===== 8 КАНАЛОВ =====
export interface ChannelState {
value: number;
strength: number;
value: number; // Максимальное значение (для прогресс-бара)
currentValue: number; // Текущее значение (для отображения)
strength: number; // Максимальный уровень
currentStrength: number; // Текущий уровень
expanded: boolean;
}
export const channels: ChannelState[] = Array(8).fill(null).map(() => ({
value: 0,
currentValue: 0,
strength: 0,
currentStrength: 0,
expanded: true
}));
@@ -260,6 +264,10 @@ export function getChannelElement(index: number) {
return channelElements[index] || null;
}
/**
* Установка МАКСИМАЛЬНОГО значения для прогресс-бара
* (используется для отображения пика)
*/
export function setChannelValue(index: number, value: number, strength: number) {
if (index < 0 || index > 7) return;
@@ -273,6 +281,7 @@ export function setChannelValue(index: number, value: number, strength: number)
const maxValue = 63;
const percent = (value / maxValue) * 100;
// Обновляем прогресс-бар
if (el.bar) {
el.bar.style.width = `${Math.min(100, percent)}%`;
el.bar.style.background = '#e6852d';
@@ -280,10 +289,7 @@ export function setChannelValue(index: number, value: number, strength: number)
el.bar.style.backgroundImage = 'none';
}
if (el.value) {
el.value.textContent = value.toString();
}
// Обновляем индикатор сигнала (уровень)
const bars = el.signal?.querySelectorAll('.sig-bar');
if (bars) {
bars.forEach((bar: Element, i: number) => {
@@ -292,9 +298,10 @@ export function setChannelValue(index: number, value: number, strength: number)
});
}
// Обновляем статистику
const strengthNames = ['Отсутствует', 'Низкая', 'Средняя', 'Высокая'];
if (el.stats) {
el.stats.textContent = `${value}/${maxValue} | ${strengthNames[strength] || '---'}`;
el.stats.textContent = `${ch.currentValue}/${maxValue} | ${strengthNames[ch.currentStrength] || '---'} (пик: ${value})`;
}
if (el.item) {
@@ -302,9 +309,53 @@ export function setChannelValue(index: number, value: number, strength: number)
}
}
/**
* Установка ТЕКУЩЕГО значения для отображения в цифрах
* (используется для показа реального состояния)
*/
export function setChannelCurrentValue(index: number, value: number, strength: number) {
if (index < 0 || index > 7) return;
const ch = channels[index];
const el = channelElements[index];
if (!el) return;
ch.currentValue = value;
ch.currentStrength = strength;
// Обновляем числовое значение
if (el.value) {
el.value.textContent = value.toString();
}
// Обновляем статистику (показываем текущее значение и пик)
const maxValue = 63;
const strengthNames = ['Отсутствует', 'Низкая', 'Средняя', 'Высокая'];
if (el.stats) {
el.stats.textContent = `${value}/${maxValue} | ${strengthNames[strength] || '---'} (пик: ${ch.value})`;
}
// Обновляем индикатор сигнала (текущий уровень)
const bars = el.signal?.querySelectorAll('.sig-bar');
if (bars) {
bars.forEach((bar: Element, i: number) => {
const isActive = i < strength;
// Если текущий уровень меньше максимального - добавляем класс dim
if (isActive) {
(bar as HTMLElement).classList.remove('dim');
(bar as HTMLElement).classList.add('active-' + (i + 1));
} else {
(bar as HTMLElement).classList.add('dim');
(bar as HTMLElement).classList.remove('active-' + (i + 1));
}
});
}
}
export function updateAllChannels(rawData?: number[]) {
for (let i = 0; i < 8; i++) {
setChannelValue(i, 0, 0);
setChannelCurrentValue(i, 0, 0);
if (channelElements[i]) {
channelElements[i].item.classList.remove('channel-active');
}
@@ -316,6 +367,7 @@ export function updateAllChannels(rawData?: number[]) {
const strength = (lastByte >> 6) & 0x3;
setChannelValue(0, value, strength);
setChannelCurrentValue(0, value, strength);
if (channelElements[0]) {
channelElements[0].item.classList.add('channel-active');
}