my_speaker_RPi3/docs/project_structure.md

Файловая структура проекта My Speaker

Ниже представлена скорректированная файловая структура проекта веб-приложения My Speaker. Корректировки включают:

• Добавление main-params.html в папку components/ для постоянной левой части (Main Parameters) на главном экране.
• Добавление footer.html в папку components/ для футера с логами.
• Добавление graphics.html в папку pages/ для правой части с графиками (как указано в макетах).
• Обновление модулей JavaScript для соответствия новым компонентам (например, добавление graphics.js для логики графиков).
• Уточнение папок для лучшей организации: pages/ для динамически подгружаемых правых частей, components/ для общих элементов (шапка, навигация, Main Parameters, футер).
• Обеспечение модульности в соответствии с FRONTEND_REQUIREMENTS.md: использование чистого JavaScript (ES6+), без фреймворков.
• Учёт ретро-стиля и адаптивности в style.css.

Структура проекта оптимизирована для SPA (Single Page Application), где index.html служит точкой входа, а контент подгружается динамически через router.js.

Полная структура

webapp/
├── index.html          # Основная страница приложения (SPA): содержит контейнеры для шапки, основного экрана и футера
├── style.css           # Основные стили в ретро-стилистике (пиксельные рамки, шрифт "Press Start 2P", адаптивность)
├── api.js              # Модуль для работы с API (авторизация, получение данных, обновление настроек)
├── app.js              # Точка входа: инициализация приложения, подключение модулей и запуск маршрутизации
├── modules/            # Папка для JavaScript-модулей (логика страниц и компонентов)
│   ├── router.js       # Маршрутизация: динамическая загрузка HTML в правую часть основного экрана
│   ├── login.js        # Логика страницы авторизации (обработка формы, настройки интерфейса)
│   ├── dashboard.js    # Логика главного экрана: инициализация Main Parameters, футера и общей структуры
│   ├── graphics.js     # Логика для `graphics.html` (инициализация и обновление графиков с использованием Chart.js или Canvas)
│   ├── settings.js     # Логика для `settings.html` (формы настроек, валидация, отправка на API)
│   ├── commands.js     # Логика для `commands.html` (список команд, редактирование файла команд)
│   ├── header.js       # Логика для `header.html` (имя пользователя, кнопка выхода, запрос на /api/auth/me)
│   ├── nav.js          # Логика для `nav.html` (переключение разделов, подсветка активного)
│   └── utils.js        # Общие утилиты (обработка ошибок, валидация форм, форматирование данных, DOM-манипуляции)
├── pages/              # Папка для динамически подгружаемых HTML-страниц (правая часть основного экрана)
│   ├── login.html      # Разметка страницы авторизации (форма входа, настройки интерфейса)
│   ├── graphics.html   # Разметка для графиков (canvas для speech_prob и energy)
│   ├── settings.html   # Разметка для настроек (раскрывающиеся формы с <details>, поля ввода, кнопки сохранения)
│   └── commands.html   # Разметка для команд (поле для commands_file, список команд, кнопки редактирования)
└── components/         # Папка для общих HTML-компонентов (шапка, навигация, левая часть, футер)
    ├── header.html     # Разметка верхней панели (имя пользователя, кнопка выхода)
    ├── nav.html        # Разметка навигационной панели (кнопки Dashboard, Settings, Commands)
    ├── main-params.html# Разметка левой части (Main Parameters: статус, индикаторы, статистика CPU/MEM/TEMP)
    └── footer.html     # Разметка футера (список последних фраз из recent-phrases)

Объяснение корректировок

• Добавления:
  • graphics.html и graphics.js — для отдельного раздела с графиками, как в макетах PAGE_LAYOUTS.md.
  • main-params.html — для постоянной левой части (40%), чтобы избежать дублирования разметки в каждом разделе.
  • footer.html — для футера с логами, чтобы сделать его переиспользуемым и легко обновляемым.
• Изменения:
  • dashboard.js теперь отвечает за инициализацию всего главного экрана (загрузка main-params.html, футера и динамической правой части).
  • pages/login.html — остается отдельной, но теперь явно отделена от динамических страниц главного экрана.
  • Убраны ненужные файлы (если были ранее); структура оптимизирована для модульности (каждый модуль экспортирует функции для ES6 import).
• Соответствие требованиям:
  • Структура соответствует FRONTEND_REQUIREMENTS.md: модульный JS-код, отдельные файлы для логики (app.js, api.js), стили в style.css.
  • Поддержка адаптивности: в style.css используются медиа-запросы для мобильных устройств (вертикальное расположение карточек).
  • Масштабируемость: Легко добавить новые страницы (например, analytics.html и analytics.js) в pages/ и зарегистрировать в router.js.
• Рекомендации по реализации:
  • В index.html добавить контейнеры: <header id="header"></header>, <nav id="nav"></nav>, <main><div id="main-params"></div><div id="content"></div></main>, <footer id="footer"></footer>.
  • В router.js загружать контент в #content на основе маршрута (например, #/graphics → graphics.html).
  • В utils.js добавить функции для показа ошибок в ретро-стиле (красный текст на темном фоне).
  • Для графиков в graphics.js использовать Chart.js (подключить через CDN в index.html) или Canvas API.

Эта структура готова к реализации. Если нужны дополнительные корректировки (например, добавление папок для ассетов или тестов), уточните.