Фронтенд (веб-дашборд)

Устройство встроенного веб-интерфейса: страницы, модули TypeScript, сборка, взаимодействие с API.

Аудитория: разработчики.

Содержание

Обзор
Страницы
Модули TypeScript
Взаимодействие с API
Сборка
Цикл разработки

Обзор

Фронтенд — SPA на ванильном TypeScript без фреймворков и рантайм-зависимостей: ES-модули, Canvas для графиков, Web Audio API для звуковой индикации. Исходники — cmd/server/web/js/, компилируются tsc в web/dist/ (ES2020, strict), стили — web/css/, разметка — web/*.html.

Готовые файлы вшиваются в бинарник сервера (go:embed web/dist web/css web/fonts web/*.html web/*.png) и раздаются с корня / — отдельного веб-сервера для фронтенда нет.

Страницы

Страница	Назначение	Точка входа JS
`index.html`	Редирект на дашборд	—
`dashboard.html`	Мониторинг в реальном времени: статус, каналы, график, VU-метр звука, камера	`dist/app.js`
`logs.html`	Просмотр исторических данных: список `.bin`-файлов, сэмплы с пагинацией, события	`dist/logs.js`

Модули TypeScript

Карта модулей js/ (в скобках — размер на момент написания):

Модуль	Роль
`app.ts` (434 строки)	Оркестратор дашборда: инициализация всех модулей, цикл опроса сервера (каждые 500 мс), раздача данных в state/ui/chart/audio
`data.ts` (32)	API-слой дашборда: `fetchHealth()`, `fetchHistory()` + типы ответов
`state.ts` (222)	Состояние дашборда: история сигнала, peak-holder'ы амплитуды и уровня сигнала с таймерами удержания
`ui.ts` (414)	Каталог DOM-элементов (`DOM`) и все операции обновления интерфейса: статус, бары, каналы, индикаторы
`chart.ts` (137)	Отрисовка графика истории на Canvas (сетка, шкала 0–63)
`audio.ts` (306)	`AudioEngine` — звуковая индикация через Web Audio API: тон зависит от уровня силы (600/1000/1200 Гц), громкость регулируется
`camera.ts` (164)	Панель камеры: подключение/отключение MJPEG `<img src="/api/cam">`, перекрестие, периодическая проверка потока
`layout.ts` (235)	Разделитель панелей (drag-resize), открытие/закрытие правой панели
`accordion.ts` (23)	Сворачиваемый блок «Принятые данные»
`logs.ts` (747)	Вся страница logs.html: список файлов, таблица сэмплов и событий с пагинацией, график по файлу, автообновление

Зависимости между модулями — однонаправленные: app.ts импортирует остальные; logs.ts автономен (использует только chart.ts). Типы ответов API объявлены локально в data.ts и logs.ts (дублирование — см. tech-debt.md).

Взаимодействие с API

Полная спецификация — api.md.

Модуль	Эндпоинты
`data.ts` (дашборд)	`GET /api/health`, `GET /api/history` — опрос каждые 500 мс из `app.ts`
`camera.ts`	`GET /api/cam` (MJPEG через `<img>`)
`logs.ts`	`GET /api/log/files`, `GET /api/log/data`, `GET /api/log/events`, `GET /api/health` (серверное время)

Сборка

cd cmd/server/web
npm install        # однократно (единственная dev-зависимость — typescript)
npm run build      # tsc: js/*.ts → dist/*.js
npm run watch      # tsc --watch
npm run clean      # удалить dist/

Конфигурация — tsconfig.json: target/module ES2020, strict: true, rootDir: js, outDir: dist. Каталоги dist/ и node_modules/ в git не хранятся.

Важно: без собранного dist/ не соберётся и Go-сервер (go:embed) — см. development.md.

Цикл разработки

Терминал 1: cd cmd/server/web && npm run watch — пересборка TS при каждом сохранении;
Терминал 2: make dev — Go-сервер;
После изменения .ts — обновить страницу; после изменения .html/.css при работе через встроенные файлы — перезапустить сервер (файлы вшиваются на этапе сборки, make dev через go run перечитает их при рестарте).

Данные без железа — эмулятор: development.md.

5.9 KiB Raw Permalink Blame History Unescape Escape