Спортивная база данных

Веб-интерфейс для управления спортивными данными: спортсмены, соревнования, разряды, дипломы и отчёты. Приложение работает полностью в браузере — без сервера и установки.

Возможности

• CRUD для 9 сущностей: спортсмены, виды спорта, соревнования, мероприятия, организации, разряды, дипломы, возрастные категории, отчёты
• Поиск по записям в каждой вкладке
• Связи между сущностями через выпадающие списки (например, диплом → спортсмен + соревнование)
• Автосохранение в localStorage браузера
• Экспорт и импорт данных в формате JSON

Быстрый старт

1. Клонируйте репозиторий или скачайте архив.
2. Откройте sports_db.html в современном браузере (Chrome, Firefox, Edge, Safari).

Для корректной работы ES-модулей рекомендуется запуск через локальный HTTP-сервер:

# Python
python -m http.server 8080

# Node.js (npx)
npx serve .

Затем откройте http://localhost:8080/sports_db.html.

При первом запуске без сохранённых данных загружается демонстрационный набор записей.

Структура проекта

Data-interface/
├── sports_db.html      # Точка входа — разметка интерфейса
├── css/
│   └── styles.css      # Стили и дизайн-система
├── js/
│   ├── main.js         # Инициализация приложения
│   ├── store.js        # Хранилище данных и события
│   ├── entities.js     # Конфигурация сущностей (поля, таблицы, формы)
│   ├── ui.js           # Рендер таблиц, вкладок, статистики
│   ├── forms.js        # Обработка форм, редактирование, удаление
│   ├── persistence.js  # localStorage, экспорт/импорт JSON
│   └── seed.js         # Демо-данные для первого запуска
└── skills/             # Скиллы для дизайна (ui-ux-pro-max, frontend-design)

Архитектура

flowchart LR
    HTML[sports_db.html] --> Main[main.js]
    Main --> Store[store.js]
    Main --> UI[ui.js]
    Main --> Forms[forms.js]
    Main --> Persist[persistence.js]
    Entities[entities.js] --> Store
    Entities --> UI
    Entities --> Forms
    Store --> Persist
    Seed[seed.js] --> Store

Loading

Модуль	Назначение
entities.js	Единый конфиг полей, колонок и ID для всех сущностей
store.js	In-memory хранилище с CRUD, счётчиками ID и pub/sub
ui.js	Отрисовка таблиц, вкладок, статистики и связанных select
forms.js	Submit-обработчики, режим редактирования
persistence.js	Сериализация в localStorage и файлы JSON

Сущности данных

Вкладка	Описание	Авто-ID
Спортсмены	ФИО, дата рождения	✓
Виды спорта	Название	✓
Соревнования	Город, название, дата	✓
Мероприятия	Соревнование + вид спорта	—
Организации	Дата, название, должность и ФИО выдающего	✓
Разряды	Спортсмен, вид спорта, разряд, дата	—
Дипломы	Полная информация о награде	—
Возрастные категории	Привязка спортсмена к соревнованию	—
Отчёты	Сводная статистика по городу и виду спорта	—

Экспорт и импорт

Кнопки Экспорт данных и Импорт данных в правом нижнем углу экрана.

Формат файла:

{
  "database": { "sportsmen": [], "sports": [], ... },
  "idCounters": { "sportsmen": 1, "sports": 1, ... }
}

Импорт полностью заменяет текущие данные в браузере.

Дизайн

Интерфейс оформлен как data-dense dashboard для спортивной администрации:

• Палитра: глубокий синий (#1E40AF), акцент «медаль» (#F59E0B), светлый фон (#F8FAFC)
• Типографика: Barlow Condensed (заголовки) + Fira Sans (текст и формы)
• Сигнатура: диагональные полосы в шапке — отсылка к беговой дорожке; золотая линия-финиш

Стили вынесены в css/styles.css, логика — в ES-модули js/.

Требования

• Браузер с поддержкой ES6 modules, localStorage, fetch (для локального сервера)
• JavaScript включён

Лицензия

Учебный / демонстрационный проект. Используйте свободно в образовательных целях.