Compare commits
26 Commits
feature/do
...
fix/temp-r
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c04dc35075 | ||
| a41408559e | |||
|
|
8eaf006906 | ||
| 9f63b190f1 | |||
|
|
83bc603b95 | ||
| f8b4ce7111 | |||
|
|
53b9561a54 | ||
| 7e9c20d4bf | |||
|
|
e0ed0b6435 | ||
| 8442c761c2 | |||
|
|
87d6505fbf | ||
| 99ae7410ce | |||
|
|
42ee36d0a2 | ||
| fc995ed07d | |||
|
|
0f0c7c2607 | ||
| ef423b322f | |||
| d77dc205dc | |||
| 8a7e87385a | |||
| b92fad6939 | |||
|
|
7260fb59ea | ||
|
|
4b63af8da5 | ||
|
|
f74ce6ed88 | ||
|
|
3b8f41f905 | ||
| b422223c03 | |||
|
|
007d899721 | ||
| 2cf01186e9 |
@@ -5,7 +5,6 @@
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
docker-compose.stack.env
|
||||
**/*.md
|
||||
.cursor
|
||||
*.log
|
||||
|
||||
39
.env.example
39
.env.example
@@ -1,23 +1,38 @@
|
||||
# ─── PostgreSQL ───────────────────────────────────────────────
|
||||
# Не обязательны, если CALENDAR_RUN_MOCK_DB=1 (только HTTP API без БД).
|
||||
# =============================================================================
|
||||
# Корневой шаблон окружения: локальная разработка, docker-compose.yml (Postgres)
|
||||
# и docker-compose.stack.yml (backend + frontend в общей сети с Postgres).
|
||||
# Скопируйте в .env и подставьте значения. Файл .env не коммитьте.
|
||||
# =============================================================================
|
||||
|
||||
# ─── Подключение бэкенда к PostgreSQL ──────────────────────────
|
||||
# Локально + docker-compose из этого репо: DB_HOST=localhost, DB_PORT=5432
|
||||
# Backend в Docker рядом с Postgres: DB_HOST = имя контейнера/сервиса в той же
|
||||
# docker-сети (например postgres_budget), DB_PORT=5432 (внутренний порт Postgres).
|
||||
DB_HOST=localhost
|
||||
DB_PORT=5432
|
||||
DB_NAME=calendar_run
|
||||
DB_USER=calendar_user
|
||||
DB_PASSWORD=calendar_pass
|
||||
DB_PASSWORD=replace_with_strong_secret
|
||||
|
||||
# ─── Backend API ──────────────────────────────────────────────
|
||||
# Порт: сначала читается PORT (если задан), иначе API_PORT, иначе 3001.
|
||||
# PORT=3001
|
||||
# ─── Backend API ───────────────────────────────────────────────
|
||||
# Порт процесса: сначала PORT, иначе API_PORT, иначе 3001.
|
||||
# В docker-compose.stack.yml для контейнера задаётся PORT=3000 (см. compose).
|
||||
# PORT=3000
|
||||
API_PORT=3001
|
||||
|
||||
# ─── Dev/CI: без PostgreSQL для smoke API (не для migrate/seed) ─
|
||||
# ─── Режим без БД (только тесты / smoke API, не для migrate/seed) ─
|
||||
# CALENDAR_RUN_MOCK_DB=1
|
||||
|
||||
# ─── CORS ─────────────────────────────────────────────────────
|
||||
# Allowed origin for the frontend (Vite dev server default)
|
||||
# ─── CORS ────────────────────────────────────────────────────
|
||||
# Должен совпадать с origin в браузере (схема + хост + порт, без пути), иначе API «молчит».
|
||||
# Локальный Vite: http://localhost:5173
|
||||
# Стек с фронтом на 3033: http://localhost:3033
|
||||
# Прод: https://ваш-домен — несколько origin через запятую: https://a.ru,https://www.a.ru
|
||||
CORS_ORIGIN=http://localhost:5173
|
||||
|
||||
# ─── Frontend (Vite) ─────────────────────────────────────────
|
||||
# Public URL of the API, used in SPA code via import.meta.env
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
# ─── Версия API (опционально) ─────────────────────────────────
|
||||
# Если в образе не удаётся прочитать package.json, подставьте вручную (видно в GET /health).
|
||||
# APP_VERSION=1.0.0
|
||||
|
||||
# ─── Frontend (Vite, локально из каталога frontend/) ─────────
|
||||
# Браузер всегда ходит на относительный /api; в dev это проксирует Vite.
|
||||
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -1,7 +1,5 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.env
|
||||
docker-compose.stack.env
|
||||
*.log
|
||||
*plan*
|
||||
*PLAN*
|
||||
.DS_Store
|
||||
@@ -5,8 +5,6 @@ WORKDIR /app
|
||||
COPY frontend/package.json frontend/package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY frontend/ ./
|
||||
ARG VITE_API_BASE_URL=/api
|
||||
ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
|
||||
61
PLAN.md
61
PLAN.md
@@ -1,61 +0,0 @@
|
||||
# Calendar Run — план продукта
|
||||
|
||||
Монорепозиторий: **backend** (Express + PostgreSQL) и **frontend** (React + Vite). Цель — календарь стартов с метриками бегуна: планирование, результаты, PR и сравнение.
|
||||
|
||||
## Вне объёма (намеренно)
|
||||
|
||||
- Авторизация, мультипользовательность, личные кабинеты.
|
||||
- Парсинг сайтов организаторов и автозагрузка результатов.
|
||||
- Отдача статики SPA с того же процесса, что и API (фронт — отдельный Vite/build).
|
||||
|
||||
## Модель данных `Race` (API — camelCase)
|
||||
|
||||
| Поле | Тип | Описание |
|
||||
|------|-----|----------|
|
||||
| `id` | string | Стабильный ключ, например `{YYYY-MM-DD}-{slug}` |
|
||||
| `date` | string | `YYYY-MM-DD` |
|
||||
| `title` | string | Название |
|
||||
| `distanceKm` | number | Дистанция, км |
|
||||
| `status` | `planned` \| `registered` \| `completed` \| null | Жизненный цикл старта |
|
||||
| `officialUrl` | string \| null | Сайт организатора |
|
||||
| `startTime` | string \| null | Время старта (строка, напр. `09:30`) |
|
||||
| `clusterSchedule` | string \| null | Расписание кластеров |
|
||||
| `bibPickup` | string \| null | Выдача номеров |
|
||||
| `bibNumber` | string \| null | Стартовый номер |
|
||||
| `finishTime` | string \| null | Результат `H:MM:SS` или `MM:SS` |
|
||||
| `finishPlace` | string \| null | Место на финише (текст: «3», «3/120» и т.п.) |
|
||||
| `notes` | string \| null | Заметки |
|
||||
| `createdAt` | string | ISO, read-only |
|
||||
| `updatedAt` | string \| null | ISO, read-only |
|
||||
|
||||
PostgreSQL: `snake_case` столбцы, маппинг в [`backend/src/mappers/race.ts`](backend/src/mappers/race.ts).
|
||||
|
||||
## HTTP API (минимум)
|
||||
|
||||
- `GET /health` — liveness без БД.
|
||||
- `GET /ready` — readiness (подключение к БД; в режиме mock считается доступной — только для dev/CI).
|
||||
- `GET /races` — список; query: `year`, `month` (целые; `month` 1–12).
|
||||
- `GET /races/:id`, `POST /races`, `PATCH /races/:id`, `DELETE /races/:id`.
|
||||
|
||||
Ошибки: JSON, единый стиль (`validation_error`, `not_found`, `conflict`, `database_unavailable`). Подробности — [`docs/backend-api-for-frontend.md`](docs/backend-api-for-frontend.md).
|
||||
|
||||
## Seed
|
||||
|
||||
- Файл [`import/races_2026_calendar.csv`](import/races_2026_calendar.csv).
|
||||
- Стабильный `id`, upsert по `id`. Повторный запуск безопасен.
|
||||
|
||||
## Режим без PostgreSQL (dev/CI)
|
||||
|
||||
Переменная `CALENDAR_RUN_MOCK_DB=1` (или `true`): HTTP-обработчики используют заглушку пула **без** реальной БД. **Не использовать** для `npm run db:migrate` и `npm run seed` — нужен настоящий Postgres и `DB_*`.
|
||||
|
||||
## Frontend (SPA)
|
||||
|
||||
- Маршруты: дашборд (`/`), список стартов (`/races`), карточка (`/races/:id`).
|
||||
- Дашборд: ближайший старт, последний результат, PR, сезон, PR по ключевым дистанциям, сравнение завершённых стартов, при необходимости — лёгкая визуализация прогресса.
|
||||
- Список: будущие / прошедшие; фильтрация по году и месяцу через API.
|
||||
- Стили: BEM и дизайн-токены; ориентир по духу — [`agent-frontend-ui-instructions.md`](agent-frontend-ui-instructions.md).
|
||||
|
||||
## Критерии готовности текущей итерации
|
||||
|
||||
- Документация согласована с кодом: [`README.md`](README.md), [`docs/backend.md`](docs/backend.md), [`docs/backend-api-for-frontend.md`](docs/backend-api-for-frontend.md).
|
||||
- Миграции и seed воспроизводимы; контракт API покрыт smoke-тестами в CI при необходимости с mock-БД.
|
||||
69
README.md
69
README.md
@@ -1,56 +1,49 @@
|
||||
# Calendar Run
|
||||
|
||||
Calendar Run is a races calendar project: a **backend API** (Express + PostgreSQL) and a **React SPA** for viewing and analyzing your race schedule.
|
||||
Монорепозиторий: **backend** (Express + PostgreSQL) и **frontend** (React + Vite) — календарь забегов.
|
||||
|
||||
Product scope and data model: [PLAN.md](PLAN.md).
|
||||
## Переменные окружения
|
||||
|
||||
## Backend — quick start
|
||||
Один шаблон для локальной разработки и для Docker-стека: `**[.env.example](.env.example)`** → скопируйте в `**.env**` в корне репозитория.
|
||||
|
||||
1. Install dependencies:
|
||||
- `cd backend`
|
||||
- `npm install`
|
||||
2. Configure environment variables. Copy the root template and edit:
|
||||
Там же перечислены `**DB_HOST**`, `**DB_PORT**`, `**DB_NAME**`, `**DB_USER**`, `**DB_PASSWORD**` (подключение бэкенда к БД), `**PORT**` / `**API_PORT**`, опционально `**CALENDAR_RUN_MOCK_DB**` и `**CORS_ORIGIN**`.
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
## Backend — локально
|
||||
|
||||
Use the **repository root** `.env` (the backend loads it via `backend/src/config.ts`).
|
||||
1. `cd backend && npm install`
|
||||
2. Корень: `cp .env.example .env`, задайте `DB_*` (и при необходимости `CORS_ORIGIN`).
|
||||
3. Postgres: из корня `docker compose up -d` (см. `[docker-compose.yml](docker-compose.yml)`) — в compose используются те же `DB_NAME`, `DB_USER`, `DB_PASSWORD` из `.env`.
|
||||
4. `cd backend && npm run db:migrate && npm run seed`
|
||||
5. Dev-режим: `npm run dev`
|
||||
6. Или production: `npm run build && npm start`
|
||||
|
||||
- `DB_HOST`, `DB_PORT`, `DB_NAME`, `DB_USER`, `DB_PASSWORD` — required unless mock mode is on.
|
||||
- API port: `PORT` (takes precedence) or `API_PORT` (default `3001`).
|
||||
- **No PostgreSQL (CI / local smoke):** set `CALENDAR_RUN_MOCK_DB=1` (or `true`). Real `DB_*` values are not required; the API uses in-memory stubs for SQL used by the HTTP routes. **Do not** use mock mode for `npm run db:migrate` or `npm run seed`.
|
||||
3. With a real database: from repo root, `docker-compose up -d`, then `cd backend && npm run db:migrate && npm run seed`.
|
||||
4. Build and run API:
|
||||
Без PostgreSQL (только smoke API): в `.env` задайте `CALENDAR_RUN_MOCK_DB=1`; `**db:migrate` и `seed` с mock не использовать**.
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
npm run dev
|
||||
```
|
||||
## Frontend — локально
|
||||
|
||||
## Frontend — quick start
|
||||
```bash
|
||||
cd frontend
|
||||
cp .env.example .env
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
1. Configure the API URL for Vite (file is read from `frontend/`):
|
||||
Фронт всегда отправляет запросы на относительный префикс `**/api**`. В dev это проксирует Vite на `http://localhost:3001`, в Docker/проде — nginx фронта проксирует на backend. У бэкенда `CORS_ORIGIN` должен совпадать с origin приложения (например `http://localhost:5173`).
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
cp .env.example .env
|
||||
```
|
||||
## Docker: backend + frontend рядом с Postgres
|
||||
|
||||
Edit `VITE_API_BASE_URL` if the API is not on `http://localhost:3001`.
|
||||
Используйте `[docker-compose.stack.yml](docker-compose.stack.yml)`: общая **внешняя** сеть с контейнером Postgres (как в вашей инфраструктуре). В корне должен быть `**.env`** (из `.env.example`): `DB_HOST` — имя сервиса/контейнера Postgres в этой сети, `DB_PORT=5432`, плюс остальные `DB_*` и `**CORS_ORIGIN=http://localhost:3033**`, если заходите на фронт с хоста на порту 3033.
|
||||
|
||||
2. Install and run:
|
||||
```bash
|
||||
docker compose -f docker-compose.stack.yml up -d --build
|
||||
docker compose -f docker-compose.stack.yml exec backend node dist/migrate.js
|
||||
docker compose -f docker-compose.stack.yml exec backend node dist/seed.js
|
||||
```
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
Фронт в браузере обращается к API по префиксу `**/api**` (nginx в образе фронта проксирует на backend).
|
||||
|
||||
Default app URL: `http://localhost:5173`. The backend `CORS_ORIGIN` must match this origin (see root `.env.example`).
|
||||
## Документация API и бэкенда
|
||||
|
||||
## Docs
|
||||
- [Шпаргалка API для фронта](docs/backend-api-for-frontend.md)
|
||||
- [Эксплуатация backend](docs/backend.md)
|
||||
|
||||
- [Backend API for Frontend](docs/backend-api-for-frontend.md)
|
||||
- [Backend operations](docs/backend.md)
|
||||
- [Backend agent instruction](docs/agent-backend-instruction.md)
|
||||
- [Backend sync fix instruction](docs/agent-fix-backend-sync-instruction.md)
|
||||
|
||||
@@ -1,336 +0,0 @@
|
||||
Ниже — инструкция для дизайн-агента, которая задаёт стиль, структуру и принципы интерфейса для твоего SPA. Она ориентирована на **минимализм, читаемость данных и удовольствие от использования**, а не на “перегруженный фитнес-дэшборд”.
|
||||
|
||||
# 🎯 Общая задача
|
||||
|
||||
Создать **чистый, современный, минималистичный интерфейс** для SPA-приложения бегуна, где пользователь:
|
||||
|
||||
- отслеживает свои старты (прошлые и будущие),
|
||||
- видит прогресс и личные рекорды,
|
||||
- сравнивает результаты,
|
||||
- получает ощущение “контроля над своей беговой историей”.
|
||||
|
||||
---
|
||||
|
||||
# 🧭 Общая философия дизайна
|
||||
|
||||
### 1. “Спокойная сила”, а не “спортивная агрессия”
|
||||
|
||||
Не:
|
||||
|
||||
- кислотные цвета,
|
||||
- перегруженные графики,
|
||||
- “фитнес-клуб стиль 2015”.
|
||||
|
||||
Да:
|
||||
|
||||
- чистый интерфейс,
|
||||
- воздух,
|
||||
- акцент на данных,
|
||||
- ощущение премиальности.
|
||||
|
||||
---
|
||||
|
||||
### 2. Минимум визуального шума
|
||||
|
||||
Каждый экран должен отвечать на вопрос:
|
||||
|
||||
> “Что здесь главное?”
|
||||
|
||||
Если не ясно — убрать лишнее.
|
||||
|
||||
---
|
||||
|
||||
### 3. Данные — главный герой
|
||||
|
||||
Интерфейс не про “украшения”, а про:
|
||||
|
||||
- результаты,
|
||||
- прогресс,
|
||||
- сравнение,
|
||||
- числа.
|
||||
|
||||
---
|
||||
|
||||
# 🎨 Визуальный стиль
|
||||
|
||||
## Цвета
|
||||
|
||||
### Основа:
|
||||
|
||||
- фон: светлый (#F7F8FA или близко)
|
||||
- карточки: белые
|
||||
- текст:
|
||||
- основной: почти чёрный (#111)
|
||||
- вторичный: серый (#666)
|
||||
|
||||
### Акцент:
|
||||
|
||||
- 1 основной цвет:
|
||||
- глубокий синий или изумрудный (например #2F6BFF или #1FA37A)
|
||||
|
||||
### Дополнительно:
|
||||
|
||||
- PR / успех: мягкий зелёный
|
||||
- предупреждения: нейтральный жёлтый
|
||||
- ошибки: мягкий красный
|
||||
|
||||
❗ Никаких “радуг”.
|
||||
|
||||
---
|
||||
|
||||
## Типографика
|
||||
|
||||
- современный sans-serif (Inter / SF Pro / аналог)
|
||||
- крупные числа:
|
||||
- результаты (время) — большие, жирные
|
||||
- иерархия:
|
||||
- H1 — экран
|
||||
- H2 — блок
|
||||
- body — данные
|
||||
- caption — мета
|
||||
|
||||
---
|
||||
|
||||
## Отступы и сетка
|
||||
|
||||
- много воздуха
|
||||
- карточки с padding 16–24px
|
||||
- равномерная вертикальная ритмика
|
||||
- закругления: 12–16px
|
||||
|
||||
---
|
||||
|
||||
# 🧱 Основные экраны
|
||||
|
||||
## 1. Главный экран (Dashboard)
|
||||
|
||||
### Цель:
|
||||
|
||||
дать быстрый ответ:
|
||||
|
||||
- что впереди
|
||||
- где я сейчас
|
||||
- какой прогресс
|
||||
|
||||
### Блоки:
|
||||
|
||||
#### 🔹 Ближайший старт
|
||||
|
||||
- название
|
||||
- дата
|
||||
- дистанция
|
||||
- countdown (“через 12 дней”)
|
||||
|
||||
#### 🔹 Последний результат
|
||||
|
||||
- время
|
||||
- дистанция
|
||||
- место
|
||||
- дата
|
||||
|
||||
#### 🔹 Личный рекорд
|
||||
|
||||
- по ключевой дистанции
|
||||
- выделен визуально
|
||||
|
||||
#### 🔹 Сезон
|
||||
|
||||
- количество стартов
|
||||
- лучший результат
|
||||
- краткая статистика
|
||||
|
||||
---
|
||||
|
||||
## 2. Календарь стартов
|
||||
|
||||
### Два раздела:
|
||||
|
||||
- будущие
|
||||
- прошедшие
|
||||
|
||||
### Карточка старта:
|
||||
|
||||
- название
|
||||
- дата
|
||||
- дистанция
|
||||
- статус:
|
||||
- планирую
|
||||
- зарегистрирован
|
||||
- пробежал
|
||||
|
||||
Минимум кликов.
|
||||
|
||||
---
|
||||
|
||||
## 3. Карточка старта
|
||||
|
||||
- название
|
||||
- дата
|
||||
- дистанция
|
||||
- время
|
||||
- темп
|
||||
- место (если есть)
|
||||
- заметки (опционально)
|
||||
|
||||
---
|
||||
|
||||
## 4. Личные рекорды (PR)
|
||||
|
||||
- список дистанций:
|
||||
- 5K
|
||||
- 10K
|
||||
- 21.1
|
||||
- 42.2
|
||||
|
||||
Для каждой:
|
||||
|
||||
- лучшее время
|
||||
- дата
|
||||
- старт
|
||||
|
||||
---
|
||||
|
||||
## 5. Сравнение стартов (ВАЖНО)
|
||||
|
||||
Это ключевая фича.
|
||||
|
||||
### UI:
|
||||
|
||||
таблица или карточки:
|
||||
|
||||
|
||||
| Год | Время | Темп | Место |
|
||||
| --- | ----- | ---- | ----- |
|
||||
|
||||
|
||||
Можно добавить:
|
||||
|
||||
- стрелки (лучше/хуже)
|
||||
- визуальный прогресс
|
||||
|
||||
---
|
||||
|
||||
# 📊 Графики
|
||||
|
||||
Минимально и аккуратно:
|
||||
|
||||
- линия прогресса по дистанции
|
||||
- без перегруза
|
||||
- без 10 линий сразу
|
||||
|
||||
---
|
||||
|
||||
# 🧩 Компоненты
|
||||
|
||||
- карточки
|
||||
- таблицы (очень аккуратно)
|
||||
- фильтры
|
||||
- переключатели (tabs)
|
||||
- кнопки (primary / secondary)
|
||||
|
||||
---
|
||||
|
||||
# 🧠 UX принципы
|
||||
|
||||
### 1. Минимум кликов
|
||||
|
||||
Любая частая задача:
|
||||
→ максимум 2–3 клика
|
||||
|
||||
---
|
||||
|
||||
### 2. Быстрое считывание
|
||||
|
||||
Пользователь должен за 2 секунды понять:
|
||||
|
||||
- что это
|
||||
- где он
|
||||
- что делать
|
||||
|
||||
---
|
||||
|
||||
### 3. Консистентность
|
||||
|
||||
- одинаковые карточки
|
||||
- одинаковые статусы
|
||||
- одинаковые действия
|
||||
|
||||
---
|
||||
|
||||
# 🧪 Для аналитики (важно)
|
||||
|
||||
Заложить:
|
||||
|
||||
- зоны кликов
|
||||
- понятные CTA
|
||||
- отсутствие “пустых зон”
|
||||
|
||||
---
|
||||
|
||||
# 🖼️ Использование изображений
|
||||
|
||||
## Когда использовать:
|
||||
|
||||
- пустые состояния
|
||||
- onboarding
|
||||
- вдохновение
|
||||
|
||||
## Когда НЕ использовать:
|
||||
|
||||
- в данных
|
||||
- в списках стартов
|
||||
- в результатах
|
||||
|
||||
---
|
||||
|
||||
## Если генерировать изображения
|
||||
|
||||
Стиль:
|
||||
|
||||
- минимализм
|
||||
- спорт без пафоса
|
||||
- одиночный бегун
|
||||
- город / парк
|
||||
- мягкий свет
|
||||
- утро / вечер
|
||||
|
||||
### Пример prompt:
|
||||
|
||||
> “minimalist photo of a runner jogging alone in a city park at sunrise, soft light, calm mood, no crowd, modern aesthetic”
|
||||
|
||||
---
|
||||
|
||||
# 🚫 Чего избегать
|
||||
|
||||
- перегруженных дашбордов
|
||||
- 100 метрик сразу
|
||||
- ярких кислотных цветов
|
||||
- сложных графиков
|
||||
- таблиц как в Excel
|
||||
- лишних иконок
|
||||
- “геймификации ради геймификации”
|
||||
|
||||
---
|
||||
|
||||
# 💡 Вдохновение (по духу)
|
||||
|
||||
Если бы нужно было описать стиль:
|
||||
|
||||
- как Notion, но для бегунов
|
||||
- как Apple Fitness, но менее ярко
|
||||
- как Strava, но более спокойно и чисто
|
||||
|
||||
---
|
||||
|
||||
# 🧭 Финальный ориентир
|
||||
|
||||
Интерфейс должен вызывать ощущение:
|
||||
|
||||
> “Я контролирую свою беговую историю и прогресс”
|
||||
|
||||
а не:
|
||||
|
||||
> “Я заполняю таблицу результатов”
|
||||
|
||||
---
|
||||
|
||||
100
backend/package-lock.json
generated
100
backend/package-lock.json
generated
@@ -20,6 +20,7 @@
|
||||
"@types/node": "^22.12.0",
|
||||
"@types/pg": "^8.11.10",
|
||||
"@types/supertest": "^6.0.2",
|
||||
"cross-env": "^10.1.0",
|
||||
"supertest": "^7.0.0",
|
||||
"ts-node": "^10.9.2",
|
||||
"tsx": "^4.19.2",
|
||||
@@ -39,6 +40,13 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/@epic-web/invariant": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
|
||||
"integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.27.7",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
|
||||
@@ -643,6 +651,7 @@
|
||||
"integrity": "sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
@@ -936,6 +945,39 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cross-env": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
|
||||
"integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@epic-web/invariant": "^1.0.0",
|
||||
"cross-spawn": "^7.0.6"
|
||||
},
|
||||
"bin": {
|
||||
"cross-env": "dist/bin/cross-env.js",
|
||||
"cross-env-shell": "dist/bin/cross-env-shell.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"path-key": "^3.1.0",
|
||||
"shebang-command": "^2.0.0",
|
||||
"which": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/csv-parse": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.6.0.tgz",
|
||||
@@ -1442,6 +1484,13 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/make-error": {
|
||||
"version": "1.3.6",
|
||||
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
|
||||
@@ -1585,6 +1634,16 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-key": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
|
||||
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-to-regexp": {
|
||||
"version": "0.1.13",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
|
||||
@@ -1596,6 +1655,7 @@
|
||||
"resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
|
||||
"integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"pg-connection-string": "^2.12.0",
|
||||
"pg-pool": "^3.13.0",
|
||||
@@ -1858,6 +1918,29 @@
|
||||
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/shebang-command": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"shebang-regex": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/shebang-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
|
||||
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
|
||||
@@ -2124,6 +2207,7 @@
|
||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -2173,6 +2257,22 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"isexe": "^2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"node-which": "bin/node-which"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/wrappy": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "calendar-run-backend",
|
||||
"version": "1.0.0",
|
||||
"version": "1.2.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
@@ -8,7 +8,7 @@
|
||||
"start": "node dist/index.js",
|
||||
"db:migrate": "ts-node src/migrate.ts",
|
||||
"seed": "ts-node src/seed.ts",
|
||||
"test": "CALENDAR_RUN_MOCK_DB=1 tsx --test test/app.test.ts"
|
||||
"test": "cross-env CALENDAR_RUN_MOCK_DB=1 tsx --test test/app.test.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
@@ -23,6 +23,7 @@
|
||||
"@types/node": "^22.12.0",
|
||||
"@types/pg": "^8.11.10",
|
||||
"@types/supertest": "^6.0.2",
|
||||
"cross-env": "^10.1.0",
|
||||
"supertest": "^7.0.0",
|
||||
"ts-node": "^10.9.2",
|
||||
"tsx": "^4.19.2",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import express from "express";
|
||||
import express, { Request, Response, NextFunction } from "express";
|
||||
import cors from "cors";
|
||||
import { config } from "./config";
|
||||
import healthRouter from "./routes/health";
|
||||
@@ -7,11 +7,41 @@ import racesRouter from "./routes/races";
|
||||
export function createApp(): express.Express {
|
||||
const app = express();
|
||||
|
||||
app.use(cors({ origin: config.corsOrigin, methods: ["GET", "POST", "PATCH", "DELETE"] }));
|
||||
// TEMP: compare Host vs Origin for 200 vs 401 debugging — remove when done
|
||||
app.use((req, res, next) => {
|
||||
const host = req.headers.host;
|
||||
const origin = req.headers.origin;
|
||||
res.on("finish", () => {
|
||||
console.log(
|
||||
JSON.stringify({
|
||||
tag: "temp-req-headers",
|
||||
host,
|
||||
origin: origin ?? null,
|
||||
method: req.method,
|
||||
path: req.originalUrl ?? req.url,
|
||||
status: res.statusCode,
|
||||
}),
|
||||
);
|
||||
});
|
||||
next();
|
||||
});
|
||||
|
||||
app.use(
|
||||
cors({ origin: config.corsOrigin, methods: ["GET", "POST", "PATCH", "DELETE", "OPTIONS"] }),
|
||||
);
|
||||
app.use(express.json());
|
||||
|
||||
app.use(healthRouter);
|
||||
app.use(racesRouter);
|
||||
app.use("/api", healthRouter);
|
||||
app.use("/api", racesRouter);
|
||||
|
||||
app.use((err: unknown, _req: Request, res: Response, _next: NextFunction) => {
|
||||
if (err instanceof SyntaxError && "body" in err) {
|
||||
res.status(400).json({ error: "validation_error", details: ["Invalid JSON in request body"] });
|
||||
return;
|
||||
}
|
||||
console.error("[app] Unhandled error:", err);
|
||||
res.status(500).json({ error: "unknown_error", details: ["Internal server error"] });
|
||||
});
|
||||
|
||||
return app;
|
||||
}
|
||||
|
||||
@@ -33,5 +33,21 @@ export const config = {
|
||||
password: requireEnv("DB_PASSWORD"),
|
||||
},
|
||||
apiPort: parseInt(process.env.PORT || process.env.API_PORT || "3001", 10),
|
||||
corsOrigin: process.env.CORS_ORIGIN || "http://localhost:5173",
|
||||
/** Одно значение или несколько через запятую (прод: https://домен) */
|
||||
corsOrigin: parseCorsOrigins(),
|
||||
};
|
||||
|
||||
function parseCorsOrigins(): string | string[] {
|
||||
const raw = process.env.CORS_ORIGIN?.trim();
|
||||
if (!raw) {
|
||||
return "http://localhost:5173";
|
||||
}
|
||||
const parts = raw.split(",").map((s) => s.trim()).filter(Boolean);
|
||||
if (parts.length === 0) {
|
||||
return "http://localhost:5173";
|
||||
}
|
||||
if (parts.length === 1) {
|
||||
return parts[0]!;
|
||||
}
|
||||
return parts;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ const poolConfig: PoolConfig = {
|
||||
|
||||
function mockRowFromInsert(sql: string, params: unknown[]): RaceRow {
|
||||
const match = sql.match(/INSERT INTO races\s*\(([^)]+)\)\s*VALUES/i);
|
||||
const now = new Date().toISOString();
|
||||
const now = new Date();
|
||||
if (!match) {
|
||||
return {
|
||||
id: String(params[0] ?? ""),
|
||||
@@ -69,6 +69,8 @@ function createMockPool(): Pool {
|
||||
fields: [],
|
||||
}) as QueryResult<T>;
|
||||
|
||||
const store = new Map<string, RaceRow>();
|
||||
|
||||
const mockQuery = async <T extends QueryResultRow>(
|
||||
text: string,
|
||||
params?: unknown[],
|
||||
@@ -76,11 +78,9 @@ function createMockPool(): Pool {
|
||||
const sql = text.replace(/\s+/g, " ").trim();
|
||||
const p = params ?? [];
|
||||
|
||||
if (sql.includes("DELETE FROM races")) {
|
||||
return emptyResult();
|
||||
}
|
||||
if (sql.includes("INSERT INTO races") && sql.includes("RETURNING")) {
|
||||
const row = mockRowFromInsert(text, p);
|
||||
store.set(row.id, row);
|
||||
return {
|
||||
rows: [row as unknown as T],
|
||||
rowCount: 1,
|
||||
@@ -89,12 +89,49 @@ function createMockPool(): Pool {
|
||||
fields: [],
|
||||
} as QueryResult<T>;
|
||||
}
|
||||
|
||||
if (sql.includes("DELETE FROM races")) {
|
||||
const id = String(p[0] ?? "");
|
||||
const existed = store.delete(id);
|
||||
return {
|
||||
rows: [],
|
||||
rowCount: existed ? 1 : 0,
|
||||
command: "DELETE",
|
||||
oid: 0,
|
||||
fields: [],
|
||||
} as QueryResult<T>;
|
||||
}
|
||||
|
||||
if (sql.includes("UPDATE races") && sql.includes("RETURNING")) {
|
||||
return emptyResult();
|
||||
const id = String(p[p.length - 1] ?? "");
|
||||
const existing = store.get(id);
|
||||
if (!existing) {
|
||||
return emptyResult();
|
||||
}
|
||||
const updated = { ...existing, updated_at: new Date() };
|
||||
store.set(id, updated);
|
||||
return {
|
||||
rows: [updated as unknown as T],
|
||||
rowCount: 1,
|
||||
command: "UPDATE",
|
||||
oid: 0,
|
||||
fields: [],
|
||||
} as QueryResult<T>;
|
||||
}
|
||||
|
||||
if (sql.includes("SELECT * FROM races WHERE id =")) {
|
||||
const id = String(p[0] ?? "");
|
||||
const row = store.get(id);
|
||||
return row
|
||||
? { rows: [row as unknown as T], rowCount: 1, command: "SELECT", oid: 0, fields: [] } as QueryResult<T>
|
||||
: emptyResult();
|
||||
}
|
||||
|
||||
if (sql.includes("SELECT * FROM races")) {
|
||||
return emptyResult();
|
||||
const rows = Array.from(store.values());
|
||||
return { rows: rows as unknown as T[], rowCount: rows.length, command: "SELECT", oid: 0, fields: [] } as QueryResult<T>;
|
||||
}
|
||||
|
||||
return emptyResult();
|
||||
};
|
||||
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
/** Row shape returned by PostgreSQL (snake_case). */
|
||||
/**
|
||||
* Row shape returned by PostgreSQL (snake_case).
|
||||
* pg returns DATE as string, NUMERIC as string, TIMESTAMPTZ as Date.
|
||||
*/
|
||||
export interface RaceRow {
|
||||
id: string;
|
||||
race_date: string;
|
||||
race_date: string | Date;
|
||||
title: string;
|
||||
distance_km: string;
|
||||
status: string | null;
|
||||
@@ -13,8 +16,8 @@ export interface RaceRow {
|
||||
finish_time: string | null;
|
||||
finish_place: string | null;
|
||||
notes: string | null;
|
||||
created_at: string;
|
||||
updated_at: string | null;
|
||||
created_at: Date;
|
||||
updated_at: Date | null;
|
||||
}
|
||||
|
||||
/** API shape (camelCase). */
|
||||
@@ -36,11 +39,27 @@ export interface RaceDto {
|
||||
updatedAt: string | null;
|
||||
}
|
||||
|
||||
function toISOString(value: Date | string): string {
|
||||
return value instanceof Date ? value.toISOString() : String(value);
|
||||
}
|
||||
|
||||
/** DATE column may arrive as string or Date; API always exposes YYYY-MM-DD for the calendar day. */
|
||||
function raceDateToApiValue(value: string | Date): string {
|
||||
if (typeof value === "string") {
|
||||
const m = value.match(/^(\d{4}-\d{2}-\d{2})/);
|
||||
return m ? m[1]! : value;
|
||||
}
|
||||
const y = value.getFullYear();
|
||||
const mo = String(value.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(value.getDate()).padStart(2, "0");
|
||||
return `${y}-${mo}-${day}`;
|
||||
}
|
||||
|
||||
/** Convert a DB row to the API DTO (camelCase). */
|
||||
export function rowToDto(row: RaceRow): RaceDto {
|
||||
return {
|
||||
id: row.id,
|
||||
date: row.race_date,
|
||||
date: raceDateToApiValue(row.race_date),
|
||||
title: row.title,
|
||||
distanceKm: parseFloat(row.distance_km),
|
||||
status: row.status,
|
||||
@@ -52,8 +71,8 @@ export function rowToDto(row: RaceRow): RaceDto {
|
||||
finishTime: row.finish_time,
|
||||
finishPlace: row.finish_place,
|
||||
notes: row.notes,
|
||||
createdAt: row.created_at,
|
||||
updatedAt: row.updated_at,
|
||||
createdAt: toISOString(row.created_at),
|
||||
updatedAt: row.updated_at ? toISOString(row.updated_at) : null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
import { Router, Request, Response } from "express";
|
||||
import { checkDbConnection } from "../db";
|
||||
import { getBackendVersion } from "../version";
|
||||
|
||||
const router = Router();
|
||||
|
||||
router.get("/health", (_req: Request, res: Response) => {
|
||||
res.json({ status: "ok" });
|
||||
res.json({ status: "ok", version: getBackendVersion() });
|
||||
});
|
||||
|
||||
/** Версия для UI; путь без «health», чтобы реже резался фильтрами/прокси. */
|
||||
router.get("/meta", (_req: Request, res: Response) => {
|
||||
res.json({ version: getBackendVersion() });
|
||||
});
|
||||
|
||||
router.get("/ready", async (_req: Request, res: Response) => {
|
||||
|
||||
@@ -24,10 +24,24 @@ function makeId(date: string, title: string): string {
|
||||
return `${date}-${slugify(title)}`;
|
||||
}
|
||||
|
||||
const CSV_NAME = "races_2026_calendar.csv";
|
||||
|
||||
function resolveCsvPath(): string | null {
|
||||
// Docker image: /app/dist/*.js → ../import = /app/import (matches Dockerfile COPY import ./import)
|
||||
// Local monorepo: backend/dist/*.js → ../../import = repo root import/
|
||||
const candidates = [
|
||||
path.resolve(__dirname, "../import", CSV_NAME),
|
||||
path.resolve(__dirname, "../../import", CSV_NAME),
|
||||
];
|
||||
return candidates.find((p) => fs.existsSync(p)) ?? null;
|
||||
}
|
||||
|
||||
async function seed() {
|
||||
const csvPath = path.resolve(__dirname, "../../import/races_2026_calendar.csv");
|
||||
if (!fs.existsSync(csvPath)) {
|
||||
console.error(`[seed] CSV not found: ${csvPath}`);
|
||||
const csvPath = resolveCsvPath();
|
||||
if (!csvPath) {
|
||||
console.error(
|
||||
`[seed] CSV not found: ${CSV_NAME}. Tried:\n - ${path.resolve(__dirname, "../import", CSV_NAME)}\n - ${path.resolve(__dirname, "../../import", CSV_NAME)}`,
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
|
||||
24
backend/src/version.ts
Normal file
24
backend/src/version.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
let cached: string | null = null;
|
||||
|
||||
export function getBackendVersion(): string {
|
||||
if (cached) {
|
||||
return cached;
|
||||
}
|
||||
const fromEnv = process.env.APP_VERSION?.trim();
|
||||
if (fromEnv) {
|
||||
cached = fromEnv;
|
||||
return cached;
|
||||
}
|
||||
try {
|
||||
const pkgPath = path.join(__dirname, "..", "package.json");
|
||||
const raw = fs.readFileSync(pkgPath, "utf-8");
|
||||
cached = (JSON.parse(raw) as { version: string }).version;
|
||||
return cached;
|
||||
} catch {
|
||||
cached = "0.0.0";
|
||||
return cached;
|
||||
}
|
||||
}
|
||||
@@ -5,35 +5,43 @@ import { createApp } from "../src/app";
|
||||
|
||||
const app = createApp();
|
||||
|
||||
test("GET /health returns ok", async () => {
|
||||
const res = await request(app).get("/health").expect(200);
|
||||
test("GET /api/health returns ok", async () => {
|
||||
const res = await request(app).get("/api/health").expect(200);
|
||||
assert.equal(res.body.status, "ok");
|
||||
assert.equal(typeof res.body.version, "string");
|
||||
assert.ok(res.body.version.length > 0);
|
||||
});
|
||||
|
||||
test("GET /ready succeeds with mock database", async () => {
|
||||
const res = await request(app).get("/ready").expect(200);
|
||||
test("GET /api/meta returns version for UI footer", async () => {
|
||||
const res = await request(app).get("/api/meta").expect(200);
|
||||
assert.equal(typeof res.body.version, "string");
|
||||
assert.ok(res.body.version.length > 0);
|
||||
});
|
||||
|
||||
test("GET /api/ready succeeds with mock database", async () => {
|
||||
const res = await request(app).get("/api/ready").expect(200);
|
||||
assert.equal(res.body.status, "ready");
|
||||
assert.equal(res.body.db, "connected");
|
||||
});
|
||||
|
||||
test("GET /races rejects invalid year", async () => {
|
||||
const res = await request(app).get("/races?year=bad").expect(400);
|
||||
test("GET /api/races rejects invalid year", async () => {
|
||||
const res = await request(app).get("/api/races?year=bad").expect(400);
|
||||
assert.equal(res.body.error, "validation_error");
|
||||
assert.ok(Array.isArray(res.body.details));
|
||||
});
|
||||
|
||||
test("GET /races rejects month out of range", async () => {
|
||||
const res = await request(app).get("/races?month=13").expect(400);
|
||||
test("GET /api/races rejects month out of range", async () => {
|
||||
const res = await request(app).get("/api/races?month=13").expect(400);
|
||||
assert.equal(res.body.error, "validation_error");
|
||||
});
|
||||
|
||||
test("GET /races accepts year and month", async () => {
|
||||
const res = await request(app).get("/races?year=2026&month=5").expect(200);
|
||||
test("GET /api/races accepts year and month", async () => {
|
||||
const res = await request(app).get("/api/races?year=2026&month=5").expect(200);
|
||||
assert.ok(Array.isArray(res.body));
|
||||
});
|
||||
|
||||
test("GET /races/:id returns not_found", async () => {
|
||||
const res = await request(app).get("/races/does-not-exist").expect(404);
|
||||
test("GET /api/races/:id returns not_found", async () => {
|
||||
const res = await request(app).get("/api/races/does-not-exist").expect(404);
|
||||
assert.equal(res.body.error, "not_found");
|
||||
assert.ok(Array.isArray(res.body.details));
|
||||
});
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
# Скопируйте в docker-compose.stack.env и подставьте свои значения.
|
||||
# Файл docker-compose.stack.env не должен попадать в git (см. .gitignore).
|
||||
|
||||
DB_HOST=postgres
|
||||
DB_PORT=5432
|
||||
DB_NAME=calendar_run
|
||||
DB_USER=calendar_user
|
||||
DB_PASSWORD=replace_with_strong_secret
|
||||
|
||||
# Origin браузера для CORS (если заходите на фронт не с localhost — поменяйте)
|
||||
CORS_ORIGIN=http://localhost:3033
|
||||
@@ -1,15 +1,19 @@
|
||||
# Запуск приложения в сети с уже поднятым PostgreSQL (как у family-budget).
|
||||
# Backend + frontend в сети с уже поднятым PostgreSQL (external network).
|
||||
#
|
||||
# 1) Скопируйте пример переменных (не коммитьте файл с паролями):
|
||||
# cp docker-compose.stack.env.example docker-compose.stack.env
|
||||
# отредактируйте docker-compose.stack.env
|
||||
# Подготовка: из корня репозитория скопируйте .env.example → .env и задайте DB_*
|
||||
# и CORS_ORIGIN (для фронта на :3033 — http://localhost:3033).
|
||||
#
|
||||
# NPM / reverse proxy: проброс на порт фронта 3033 (внутри контейнера nginx слушает 80).
|
||||
# Фронт в браузере ходит на /api → nginx проксирует на backend:3000.
|
||||
# Сеть (имя должно существовать, как у вашего Postgres):
|
||||
# docker network ls
|
||||
#
|
||||
# Первая инициализация БД (один раз, когда Postgres уже доступен по DB_HOST):
|
||||
# Запуск:
|
||||
# docker compose -f docker-compose.stack.yml up -d --build
|
||||
#
|
||||
# Миграции и seed (один раз после появления БД):
|
||||
# docker compose -f docker-compose.stack.yml exec backend node dist/migrate.js
|
||||
# docker compose -f docker-compose.stack.yml exec backend node dist/seed.js
|
||||
#
|
||||
# NPM: проброс на порт 3033. Браузер ходит на /api → nginx во фронте → backend:3000.
|
||||
|
||||
services:
|
||||
backend:
|
||||
@@ -18,11 +22,14 @@ services:
|
||||
dockerfile: Dockerfile.backend
|
||||
container_name: runners-calendar-backend
|
||||
env_file:
|
||||
- docker-compose.stack.env
|
||||
- .env
|
||||
environment:
|
||||
- PORT=3000
|
||||
ports:
|
||||
- "3001:3000"
|
||||
volumes:
|
||||
# CSV и прочие данные import/ на хосте (Synology: ./import рядом с compose) без пересборки образа
|
||||
- ./import:/app/import:ro
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- postgres_default
|
||||
@@ -31,8 +38,6 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.frontend
|
||||
args:
|
||||
VITE_API_BASE_URL: /api
|
||||
container_name: runners-calendar-frontend
|
||||
depends_on:
|
||||
- backend
|
||||
|
||||
@@ -8,9 +8,8 @@ server {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
# Браузер ходит на тот же origin: /api/* → бэкенд без префикса /api
|
||||
# Браузер ходит на тот же origin: /api/* → бэкенд с тем же префиксом /api
|
||||
location /api/ {
|
||||
rewrite ^/api/(.*) /$1 break;
|
||||
proxy_pass http://backend:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
# Инструкция агенту: реализация бэкенда по [PLAN.md](../PLAN.md)
|
||||
|
||||
Документ для ИИ-агента или разработчика, который создаёт **backend** монорепозитория «календарь забегов». Продуктовые цели и модель данных — в корневом **PLAN.md**; здесь — порядок работ, ограничения и **обязательные итоговые артефакты для фронтенда**.
|
||||
|
||||
---
|
||||
|
||||
## 0. Ограничение: нет возможности проверить подключение к БД
|
||||
|
||||
1. **Всё равно реализовать полноценный бэкенд «как для прод»**: миграции SQL, пул подключений `pg`, переменные `DB_*`, `docker-compose.yml` с PostgreSQL в корне репозитория.
|
||||
2. **Не блокировать работу отсутствием живой БД у исполнителя:**
|
||||
- код миграций и seed должен быть **валидным и согласованным** с PLAN;
|
||||
- при старте API при невозможности подключиться к БД — **ясное сообщение в лог** и **корректный HTTP-ответ** на зависящих от БД маршрутах (например 503 с телом `{"error":"database_unavailable",...}`) **или** падение процесса на старте с понятной ошибкой (выбрать одну стратегию и описать её в `docs/backend.md`).
|
||||
3. **Режим без Postgres для dev/CI** согласован с [PLAN.md](../PLAN.md) и `docs/backend.md`: переменная `CALENDAR_RUN_MOCK_DB=1` (или `true`) включает in-memory заглушку пула **только** для HTTP-слоя. Для **`npm run db:migrate`** и **`npm run seed`** нужен реальный PostgreSQL и `DB_*`; mock для миграций/seed не используется.
|
||||
4. Автотесты, требующие Docker/Postgres, помечать как **опциональные** или давать инструкцию «как прогнать локально», не считая провал из-за отсутствия БД у агента блокером для merge кода.
|
||||
|
||||
---
|
||||
|
||||
## 1. Ветка и расположение в репо
|
||||
|
||||
- Если репозиторий под git: создать ветку `feature/backend-api` (или аналог по соглашению команды).
|
||||
- Каталог **`backend/`** в корне проекта рядом с будущим `frontend/`.
|
||||
- Корневой **`docker-compose.yml`** — сервис `postgres` (порт, пользователь, БД, пароль — согласовать с `.env.example`).
|
||||
|
||||
---
|
||||
|
||||
## 2. Порядок реализации (обязательный)
|
||||
|
||||
### Шаг A. Каркас
|
||||
|
||||
- Node **LTS**, **TypeScript**, **`backend/package.json`**.
|
||||
- Фреймворк: **Fastify** или **Express** (выбрать один, не смешивать).
|
||||
- Загрузка env: `dotenv` или встроенные средства; **валидация** наличия `DB_HOST`, `DB_PORT`, `DB_NAME`, `DB_USER`, `DB_PASSWORD` при старте (или при первом запросе к БД — но тогда задокументировать).
|
||||
- Сервер слушает порт из **`PORT`** или **`API_PORT`** (значение по умолчанию, напр. `3001`, указать в `.env.example`).
|
||||
|
||||
### Шаг B. CORS
|
||||
|
||||
- Читать **`CORS_ORIGIN`** (например `http://localhost:5173` для Vite в dev). В prod — origin фронта.
|
||||
- Разрешить методы и заголовки, нужные для `GET/POST/PATCH` + `Content-Type: application/json`.
|
||||
|
||||
### Шаг C. Миграции
|
||||
|
||||
- Каталог миграций, напр. `backend/migrations/` с нумерованными SQL-файлами **или** один миграционный runner (node-pg-migrate, graphile-migrate, собственный скрипт — на выбор, зафиксировать в `docs/backend.md`).
|
||||
- Первая миграция: таблица **`races`** со столбцами, соответствующими PLAN (см. раздел 3 ниже).
|
||||
- Команда **`npm run db:migrate`** (или эквивалент в `backend/`) — идемпотентное накатывание на чистую БД.
|
||||
|
||||
### Шаг D. Доступ к данным
|
||||
|
||||
- Клиент **`pg`**: `Pool` с параметрами из `DB_*`.
|
||||
- Слой репозитория или прямые запросы в обработчиках — на усмотрение, без лишних абстракций сверх задачи.
|
||||
|
||||
### Шаг E. HTTP API
|
||||
|
||||
Реализовать минимум:
|
||||
|
||||
| Метод | Путь | Назначение |
|
||||
|--------|------|------------|
|
||||
| `GET` | `/health` | Liveness: процесс жив; **не обязан** проверять БД (или опционально — задокументировать). |
|
||||
| `GET` | `/ready` (опционально) | Readiness: проверка соединения с БД — полезно для оркестраторов. |
|
||||
| `GET` | `/races` | Список забегов; **query**: `year`, `month` (1–12) — фильтрация для экранов календаря; без параметров — все строки или разумный лимит + документация пагинации если добавите позже. |
|
||||
| `GET` | `/races/:id` | Одна запись по `id`. |
|
||||
| `POST` | `/races` | Создание; тело JSON в **camelCase** как в PLAN. |
|
||||
| `PATCH` | `/races/:id` | Частичное обновление; только переданные поля. |
|
||||
| `DELETE` | `/races/:id` | Опционально по PLAN; если не нужен фронту — можно не делать, но тогда явно написать в документации «удаление не поддерживается». |
|
||||
|
||||
**Ошибки:**
|
||||
|
||||
- 400 — валидация тела/параметров.
|
||||
- 404 — нет `id`.
|
||||
- 409 — конфликт уникального `id` при POST (если клиент прислал уже существующий).
|
||||
- 503 или 500 — недоступна БД (согласовать с разделом 0).
|
||||
|
||||
Формат ошибки: JSON, единообразно, напр. `{"error":"validation_error","details":[...]}`.
|
||||
|
||||
### Шаг F. Seed (разовый скрипт)
|
||||
|
||||
- Команда **`npm run seed`** в `backend/` (или корне монорепо с `workspace` — единообразно).
|
||||
- Читает **`import/races_2026_calendar.csv`** (путь от корня репо); парсинг с учётом кавычек в поле названия.
|
||||
- Генерирует **`id`** стабильно: например `{date}-{slug-from-title}`; при коллизии — суффикс или upsert по `id`.
|
||||
- **`INSERT ... ON CONFLICT (id) DO UPDATE`** (upsert) — удобно для повторного запуска seed.
|
||||
- Seed **не** вызывается из HTTP handlers.
|
||||
|
||||
### Шаг G. Корневой `.env.example`
|
||||
|
||||
- Все переменные: `DB_*`, `PORT`/`API_PORT`, `CORS_ORIGIN`.
|
||||
- **Без** реальных паролей; комментарии к каждой переменной.
|
||||
|
||||
---
|
||||
|
||||
## 3. Соответствие полей PLAN ↔ SQL ↔ JSON API
|
||||
|
||||
**В JSON API (запрос/ответ)** — **camelCase**, как в PLAN:
|
||||
|
||||
`id`, `date`, `title`, `distanceKm`, `status` (`planned` \| `registered` \| `completed`), `officialUrl`, `startTime`, `clusterSchedule`, `bibPickup`, `bibNumber`, `finishTime`, `finishPlace`, `notes`.
|
||||
|
||||
**В PostgreSQL** — **snake_case**, например:
|
||||
|
||||
| SQL column | Тип (рекомендация) |
|
||||
|------------|---------------------|
|
||||
| `id` | `TEXT` PRIMARY KEY |
|
||||
| `race_date` | `DATE` |
|
||||
| `title` | `TEXT` |
|
||||
| `distance_km` | `NUMERIC(6,3)` |
|
||||
| `status` | `TEXT` CHECK (опционально) |
|
||||
| `official_url` | `TEXT` |
|
||||
| `start_time` | `TEXT` |
|
||||
| `cluster_schedule` | `TEXT` |
|
||||
| `bib_pickup` | `TEXT` |
|
||||
| `bib_number` | `TEXT` |
|
||||
| `finish_time` | `TEXT` |
|
||||
| `finish_place` | `TEXT` |
|
||||
| `notes` | `TEXT` |
|
||||
| `created_at` | `TIMESTAMPTZ` DEFAULT now() |
|
||||
| `updated_at` | `TIMESTAMPTZ` |
|
||||
|
||||
Маппинг **строго** в одном модуле (например `backend/src/mappers/race.ts`), чтобы фронт всегда видел camelCase.
|
||||
|
||||
**Типы `date`:** в API строка `YYYY-MM-DD`. **`distanceKm`:** число. **`finishTime`:** строка времени как в PLAN; бэкенд **не обязан** парсить для бизнес-логики (PR считает фронт), но может валидировать формат по желанию.
|
||||
|
||||
---
|
||||
|
||||
## 4. Обязательный итог для упрощения фронтенда
|
||||
|
||||
После того как код бэкенда готов, агент **обязан** добавить в репозиторий документ:
|
||||
|
||||
### Файл: `docs/backend-api-for-frontend.md`
|
||||
|
||||
В нём **кратко и без пробелов в фактах**:
|
||||
|
||||
1. **Base URL** — что подставлять во фронт (`VITE_API_BASE_URL`), пример для dev.
|
||||
2. **CORS** — какой `CORS_ORIGIN` ожидается в dev.
|
||||
3. **Таблица эндпоинтов** — метод, путь, query, тело запроса (пример JSON), пример успешного ответа, коды ошибок.
|
||||
4. **Модель `Race`** — перечень полей в **camelCase** с типами и обязательностью для POST vs PATCH.
|
||||
5. **Фильтр списка** — как именно работают `year` и `month` на `GET /races` (включая границы: пустой месяц, только год и т.д.).
|
||||
6. **Идемпотентность seed** — одна фраза: upsert по `id`, откуда берётся CSV.
|
||||
7. **Поведение при недоступной БД** — что возвращает API / что в логах (как в реализации).
|
||||
|
||||
Дополнительно можно дублировать суть в **`docs/backend.md`** (общая эксплуатация: docker, migrate, seed, запуск), но **`backend-api-for-frontend.md`** — главная «шпаргалка» для разработчика SPA.
|
||||
|
||||
---
|
||||
|
||||
## 5. Критерии готовности (чеклист агента)
|
||||
|
||||
- [ ] `docker-compose.yml` поднимает Postgres с параметрами, совместимыми с `.env.example`.
|
||||
- [ ] Миграция создаёт `races`; есть команда миграции.
|
||||
- [ ] Реализованы `GET /races`, `GET /races/:id`, `POST /races`, `PATCH /races/:id` согласно PLAN.
|
||||
- [ ] Реализован seed из `import/races_2026_calendar.csv`.
|
||||
- [ ] `GET /health` (и при наличии `/ready` — описано).
|
||||
- [ ] Корневой `.env.example` обновлён.
|
||||
- [ ] Написан **`docs/backend-api-for-frontend.md`** (раздел 4).
|
||||
- [ ] `docs/backend.md` содержит команды: установка зависимостей, migrate, seed, `npm run dev` для API.
|
||||
|
||||
---
|
||||
|
||||
## 6. Не входит в объём бэкенда (напоминание)
|
||||
|
||||
- Авторизация, пользователи, сессии.
|
||||
- Парсинг сайтов организаторов.
|
||||
- Отдача статики фронта с того же процесса (фронт — отдельно Vite/build).
|
||||
|
||||
---
|
||||
|
||||
*Конец инструкции. Источник требований к продукту — всегда [PLAN.md](../PLAN.md).*
|
||||
@@ -1,77 +0,0 @@
|
||||
# Инструкция агенту: устранение рассинхронизации backend с планом/контрактом
|
||||
|
||||
Документ описывает, как выполнить план исправлений **только через изменения кода** (без правок существующей документации в `docs/`).
|
||||
|
||||
## 1) Ветка и границы задачи
|
||||
|
||||
- Создать отдельную ветку по best practice, например: `fix/backend-api-validation-and-runtime-sync`.
|
||||
- Не менять существующие файлы документации в `docs/` как способ "починить" замечания.
|
||||
- Исправления вносятся в runtime-код и обязательные артефакты репозитория.
|
||||
|
||||
## 2) Обязательные изменения в коде
|
||||
|
||||
### A. Строгая валидация `GET /races`
|
||||
|
||||
Файл: `backend/src/routes/races.ts`
|
||||
|
||||
- Добавить явную проверку `year`:
|
||||
- целое число;
|
||||
- при невалидном значении вернуть `400`:
|
||||
- `{"error":"validation_error","details":[...]}`
|
||||
- Добавить явную проверку `month`:
|
||||
- целое число в диапазоне `1..12`;
|
||||
- при невалидном значении вернуть `400` в том же формате.
|
||||
- Исключить передачу `NaN`/некорректных значений в SQL-параметры.
|
||||
|
||||
### B. Разделение ошибок валидации и ошибок БД
|
||||
|
||||
Файл: `backend/src/routes/races.ts`
|
||||
|
||||
- `400` использовать только для ошибок входа (query/body/params).
|
||||
- `503 {"error":"database_unavailable"}` использовать только для технической недоступности БД.
|
||||
- Сохранить единый JSON-формат ошибок во всех CRUD-маршрутах.
|
||||
|
||||
### C. Выравнивание конфигурации порта
|
||||
|
||||
Файл: `backend/src/config.ts`
|
||||
|
||||
- Поддержать оба env-подхода:
|
||||
- приоритет `PORT`,
|
||||
- затем `API_PORT`,
|
||||
- затем fallback `3001`.
|
||||
|
||||
### D. Обязательный root-артефакт
|
||||
|
||||
Файл: `README.md` (в корне)
|
||||
|
||||
- Создать базовый `README.md` с:
|
||||
- кратким описанием проекта,
|
||||
- минимальным quick start,
|
||||
- ссылками на текущие документы backend/API.
|
||||
|
||||
## 3) Допустимая реорганизация кода
|
||||
|
||||
- Можно добавить небольшие локальные helper-функции в `backend/src/routes/races.ts`.
|
||||
- При необходимости можно вынести общие mapper/validator-хелперы в `backend/src/mappers/race.ts`, если это уменьшает дублирование.
|
||||
- Не усложнять архитектуру: только то, что нужно для контракта и устойчивого поведения API.
|
||||
|
||||
## 4) Проверка результата
|
||||
|
||||
Минимум выполнить:
|
||||
|
||||
1. `npm run build` в `backend/` (типизация/сборка).
|
||||
2. Проверка диагностики/линтов по измененным backend-файлам.
|
||||
3. Smoke-сценарии API:
|
||||
- `GET /health` -> `200`,
|
||||
- `GET /ready` -> `200` при доступной БД или `503` при недоступной,
|
||||
- `GET /races?year=bad` -> `400`,
|
||||
- `GET /races?month=13` -> `400`,
|
||||
- `GET /races?year=2026&month=5` -> корректный `200` и данные/пустой массив.
|
||||
|
||||
## 5) Критерии готовности (Definition of Done)
|
||||
|
||||
- Контракт валидации `GET /races` соблюден в runtime.
|
||||
- Валидационные ошибки не маскируются под `database_unavailable`.
|
||||
- Конфиг порта поддерживает `PORT` и `API_PORT` с правильным приоритетом.
|
||||
- В репозитории есть корневой `README.md`.
|
||||
- Никакие существующие документы в `docs/` не менялись для "закрытия" замечаний.
|
||||
@@ -2,11 +2,10 @@
|
||||
|
||||
## 1. Base URL
|
||||
|
||||
```
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
```
|
||||
SPA всегда отправляет запросы на относительный префикс `/api` текущего origin.
|
||||
|
||||
В коде SPA: `import.meta.env.VITE_API_BASE_URL`.
|
||||
- В dev (`npm run dev`): Vite proxy отправляет `/api/*` на `http://localhost:3001/api/*`.
|
||||
- В Docker/проде: nginx фронта проксирует `/api/*` на backend в той же сети.
|
||||
|
||||
## 2. CORS
|
||||
|
||||
@@ -20,7 +19,7 @@ CORS_ORIGIN=http://localhost:5173
|
||||
|
||||
## 3. Эндпоинты
|
||||
|
||||
### `GET /health`
|
||||
### `GET /api/health`
|
||||
|
||||
Liveness-проверка (без обращения к БД).
|
||||
|
||||
@@ -32,7 +31,7 @@ Liveness-проверка (без обращения к БД).
|
||||
|
||||
---
|
||||
|
||||
### `GET /ready`
|
||||
### `GET /api/ready`
|
||||
|
||||
Readiness-проверка (проверяет подключение к БД).
|
||||
|
||||
@@ -50,7 +49,7 @@ Readiness-проверка (проверяет подключение к БД).
|
||||
|
||||
---
|
||||
|
||||
### `GET /races`
|
||||
### `GET /api/races`
|
||||
|
||||
Список забегов, отсортированных по дате.
|
||||
|
||||
@@ -68,7 +67,7 @@ Readiness-проверка (проверяет подключение к БД).
|
||||
**Пример запроса:**
|
||||
|
||||
```
|
||||
GET /races?year=2026&month=5
|
||||
GET /api/races?year=2026&month=5
|
||||
```
|
||||
|
||||
**Ответ 200:**
|
||||
@@ -97,7 +96,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `GET /races/:id`
|
||||
### `GET /api/races/:id`
|
||||
|
||||
Одна запись по `id`.
|
||||
|
||||
@@ -111,7 +110,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `POST /races`
|
||||
### `POST /api/races`
|
||||
|
||||
Создание забега.
|
||||
|
||||
@@ -153,7 +152,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `PATCH /races/:id`
|
||||
### `PATCH /api/races/:id`
|
||||
|
||||
Частичное обновление — передавать **только** изменяемые поля.
|
||||
|
||||
@@ -186,7 +185,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `DELETE /races/:id`
|
||||
### `DELETE /api/races/:id`
|
||||
|
||||
Удаление забега.
|
||||
|
||||
@@ -218,7 +217,7 @@ GET /races?year=2026&month=5
|
||||
| `createdAt` | string | — | — | ISO timestamp (read-only) |
|
||||
| `updatedAt` | string \| null | — | — | ISO timestamp (read-only) |
|
||||
|
||||
## 5. Фильтрация списка (`GET /races`)
|
||||
## 5. Фильтрация списка (`GET /api/races`)
|
||||
|
||||
- **`year`** — целое число, фильтрует по `EXTRACT(YEAR FROM race_date)`.
|
||||
- **`month`** — целое число 1–12, фильтрует по `EXTRACT(MONTH FROM race_date)`.
|
||||
@@ -232,7 +231,7 @@ Seed-скрипт (`npm run seed` в `backend/`) выполняет **upsert**
|
||||
|
||||
## 7. Поведение при недоступной БД
|
||||
|
||||
- `GET /health` — всегда `200` (не проверяет БД).
|
||||
- `GET /ready` — при недоступной БД: `503 { "error": "database_unavailable", "db": "disconnected" }`. В режиме **`CALENDAR_RUN_MOCK_DB`** (dev/CI без Postgres) readiness возвращает успех без реального подключения — см. `docs/backend.md`.
|
||||
- `GET /api/health` — всегда `200` (не проверяет БД).
|
||||
- `GET /api/ready` — при недоступной БД: `503 { "error": "database_unavailable", "db": "disconnected" }`. В режиме **`CALENDAR_RUN_MOCK_DB`** (dev/CI без Postgres) readiness возвращает успех без реального подключения — см. `docs/backend.md`.
|
||||
- Все остальные маршруты — `503 { "error": "database_unavailable" }`.
|
||||
- В логах сервера: строка ошибки с контекстом маршрута.
|
||||
|
||||
@@ -78,6 +78,8 @@ API слушает порт: **`PORT`** (если задан), иначе **`API
|
||||
| `API_PORT` | Порт API-сервера | `3001` |
|
||||
| `CORS_ORIGIN` | Разрешённый origin для CORS | `http://localhost:5173` |
|
||||
|
||||
Фронтенд всегда обращается к API по префиксу `/api` на текущем origin. В локальной разработке этот префикс проксирует Vite (`frontend/vite.config.ts`) на `http://localhost:3001`; в Docker-стеке — nginx фронта проксирует на backend.
|
||||
|
||||
**Без mock:** при отсутствии любой из `DB_*` процесс падает при старте: `Missing required environment variable: <NAME>`.
|
||||
|
||||
**С `CALENDAR_RUN_MOCK_DB=1`:** переменные `DB_*` не обязательны; реальный пул не поднимается. **Не использовать** mock для `npm run db:migrate` и `npm run seed` — нужен настоящий Postgres и корректные `DB_*`.
|
||||
@@ -85,8 +87,8 @@ API слушает порт: **`PORT`** (если задан), иначе **`API
|
||||
## Поведение при недоступной БД
|
||||
|
||||
- **Старт сервера** — проходит успешно (env валидирован, Express слушает порт).
|
||||
- **`GET /health`** — всегда `200 { "status": "ok" }` (liveness, без обращения к БД).
|
||||
- **`GET /ready`** — при обычном режиме пробует подключиться к БД; `200` если ОК, `503 { "error": "database_unavailable", ... }` если нет. В режиме **`CALENDAR_RUN_MOCK_DB`** readiness считается успешным без реального подключения (удобно для CI/smoke API).
|
||||
- **`GET /api/health`** — всегда `200 { "status": "ok" }` (liveness, без обращения к БД).
|
||||
- **`GET /api/ready`** — при обычном режиме пробует подключиться к БД; `200` если ОК, `503 { "error": "database_unavailable", ... }` если нет. В режиме **`CALENDAR_RUN_MOCK_DB`** readiness считается успешным без реального подключения (удобно для CI/smoke API).
|
||||
- **Все остальные маршруты** при ошибке БД возвращают `503 { "error": "database_unavailable" }`.
|
||||
|
||||
## Структура каталога
|
||||
@@ -106,8 +108,14 @@ backend/
|
||||
│ ├── mappers/
|
||||
│ │ └── race.ts # snake_case ↔ camelCase
|
||||
│ └── routes/
|
||||
│ ├── health.ts # /health, /ready
|
||||
│ └── races.ts # CRUD /races
|
||||
│ ├── health.ts # /api/health, /api/ready, /api/meta
|
||||
│ └── races.ts # CRUD /api/races
|
||||
├── package.json
|
||||
└── tsconfig.json
|
||||
```
|
||||
|
||||
## Docker: стек backend + frontend
|
||||
|
||||
Файл [`docker-compose.stack.yml`](../docker-compose.stack.yml) поднимает API и nginx со статикой SPA в **внешней** сети Docker (рядом с уже запущенным Postgres). Переменные — в **корневом** `.env` (шаблон [`.env.example`](../.env.example)): как минимум `DB_*`, `CORS_ORIGIN` (для выдачи фронта на порту 3033 задайте `http://localhost:3033`). Перед первым `up` файл `.env` должен существовать.
|
||||
|
||||
Порядок после старта контейнеров: `node dist/migrate.js` и `node dist/seed.js` внутри контейнера `backend` (см. комментарии в compose-файле).
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
# Base URL of the Calendar Run API (must match CORS_ORIGIN on the backend)
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
# Для локального npm run dev дополнительных VITE-переменных не требуется.
|
||||
# Полный список переменных окружения — в корневом .env.example репозитория.
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Calendar Run</title>
|
||||
<title>Календарь стартов</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "calendar-run-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"version": "0.3.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -35,14 +35,45 @@ function normalizeApiCode(value: string | undefined): ApiErrorCode {
|
||||
value === "validation_error" ||
|
||||
value === "not_found" ||
|
||||
value === "database_unavailable" ||
|
||||
value === "conflict"
|
||||
value === "conflict" ||
|
||||
value === "unknown_error"
|
||||
) {
|
||||
return value;
|
||||
}
|
||||
return "unknown_error";
|
||||
}
|
||||
|
||||
function isGatewayStatus(status: number): boolean {
|
||||
return status === 502 || status === 503 || status === 504;
|
||||
}
|
||||
|
||||
export function isStructuredApiErrorPayload(payload: unknown): payload is ApiErrorPayload {
|
||||
if (payload === null || typeof payload !== "object" || Array.isArray(payload)) {
|
||||
return false;
|
||||
}
|
||||
return typeof (payload as ApiErrorPayload).error === "string";
|
||||
}
|
||||
|
||||
export function toApiError(status: number, payload: unknown): ApiError {
|
||||
if (isGatewayStatus(status) && !isStructuredApiErrorPayload(payload)) {
|
||||
return new ApiError({
|
||||
code: "network_error",
|
||||
status,
|
||||
message: "Сервер временно недоступен. Попробуйте обновить страницу.",
|
||||
});
|
||||
}
|
||||
|
||||
if (!isStructuredApiErrorPayload(payload) && (status === 401 || status === 403 || status === 404)) {
|
||||
return new ApiError({
|
||||
code: "network_error",
|
||||
status,
|
||||
message:
|
||||
status === 404
|
||||
? "API не найден по этому адресу. Проверьте прокси и префикс /api."
|
||||
: "Запрос отклонён сервером. Проверьте переменную CORS_ORIGIN на бэкенде.",
|
||||
});
|
||||
}
|
||||
|
||||
const maybePayload = payload as ApiErrorPayload;
|
||||
const code = normalizeApiCode(maybePayload?.error);
|
||||
const details = Array.isArray(maybePayload?.details)
|
||||
@@ -69,6 +100,8 @@ export function getApiErrorMessage(code: ApiErrorCode): string {
|
||||
return "Запись с таким идентификатором уже существует.";
|
||||
case "network_error":
|
||||
return "Не удалось связаться с сервером.";
|
||||
case "unknown_error":
|
||||
return "Сервер не смог обработать запрос. Попробуйте позже или обновите страницу.";
|
||||
default:
|
||||
return "Произошла неизвестная ошибка.";
|
||||
}
|
||||
|
||||
19
frontend/src/api/health.ts
Normal file
19
frontend/src/api/health.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { requestJson } from "./http";
|
||||
|
||||
export type HealthResponse = {
|
||||
status: string;
|
||||
version: string;
|
||||
};
|
||||
|
||||
export type BackendMetaResponse = {
|
||||
version: string;
|
||||
};
|
||||
|
||||
export async function getHealth(init?: RequestInit): Promise<HealthResponse> {
|
||||
return requestJson<HealthResponse>("/health", init);
|
||||
}
|
||||
|
||||
/** Версия бэкенда для футера (отдельный путь от /health — меньше ложных блокировок). */
|
||||
export async function getBackendMeta(init?: RequestInit): Promise<BackendMetaResponse> {
|
||||
return requestJson<BackendMetaResponse>("/meta", init);
|
||||
}
|
||||
@@ -1,55 +1,114 @@
|
||||
import { ApiError, toApiError } from "./errors";
|
||||
import { ApiError, isStructuredApiErrorPayload, toApiError } from "./errors";
|
||||
|
||||
const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL as string | undefined)?.trim() || "http://localhost:3001";
|
||||
const API_ROOT = "/api";
|
||||
|
||||
function buildUrl(path: string): string {
|
||||
const normalizedPath = path.startsWith("/") ? path : `/${path}`;
|
||||
return `${API_BASE_URL}${normalizedPath}`;
|
||||
return `${API_ROOT}${normalizedPath}`;
|
||||
}
|
||||
|
||||
async function parseResponseBody(response: Response): Promise<unknown> {
|
||||
const contentType = response.headers.get("content-type") ?? "";
|
||||
if (!contentType.includes("application/json")) {
|
||||
const text = await response.text();
|
||||
if (!text.trim()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return await response.json();
|
||||
} catch {
|
||||
return null;
|
||||
const contentType = response.headers.get("content-type") ?? "";
|
||||
if (contentType.includes("application/json")) {
|
||||
try {
|
||||
return JSON.parse(text) as unknown;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const trimmed = text.trim();
|
||||
if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
|
||||
try {
|
||||
return JSON.parse(text) as unknown;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const GATEWAY_RETRY_STATUSES = new Set([502, 503, 504]);
|
||||
|
||||
/** Повтор при «пустом» 404: часто бывает при нескольких инстансах/прокси до полного деплоя. */
|
||||
function shouldRetryIdempotentError(status: number, payload: unknown): boolean {
|
||||
if (GATEWAY_RETRY_STATUSES.has(status)) {
|
||||
return true;
|
||||
}
|
||||
return status === 404 && !isStructuredApiErrorPayload(payload);
|
||||
}
|
||||
|
||||
function delay(ms: number): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, ms);
|
||||
});
|
||||
}
|
||||
|
||||
export async function requestJson<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
try {
|
||||
const response = await fetch(buildUrl(path), {
|
||||
...init,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
});
|
||||
const method = (init?.method ?? "GET").toUpperCase();
|
||||
const idempotent = method === "GET" || method === "HEAD";
|
||||
const maxAttempts = idempotent ? 3 : 1;
|
||||
|
||||
if (response.status === 204) {
|
||||
return undefined as T;
|
||||
for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
|
||||
try {
|
||||
const defaultHeaders: Record<string, string> = {};
|
||||
if (method !== "GET" && method !== "HEAD") {
|
||||
defaultHeaders["Content-Type"] = "application/json";
|
||||
}
|
||||
|
||||
const response = await fetch(buildUrl(path), {
|
||||
...init,
|
||||
headers: {
|
||||
...defaultHeaders,
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
});
|
||||
|
||||
if (response.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
|
||||
const payload = await parseResponseBody(response);
|
||||
|
||||
if (!response.ok) {
|
||||
const retryable = idempotent && attempt < maxAttempts && shouldRetryIdempotentError(response.status, payload);
|
||||
if (retryable) {
|
||||
await delay(80 * attempt);
|
||||
continue;
|
||||
}
|
||||
throw toApiError(response.status, payload);
|
||||
}
|
||||
|
||||
return payload as T;
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
throw error;
|
||||
}
|
||||
if (error instanceof DOMException && error.name === "AbortError") {
|
||||
throw error;
|
||||
}
|
||||
const retryable = idempotent && attempt < maxAttempts;
|
||||
if (retryable) {
|
||||
await delay(80 * attempt);
|
||||
continue;
|
||||
}
|
||||
throw new ApiError({
|
||||
code: "network_error",
|
||||
status: null,
|
||||
message: "Не удалось связаться с сервером.",
|
||||
});
|
||||
}
|
||||
|
||||
const payload = await parseResponseBody(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw toApiError(response.status, payload);
|
||||
}
|
||||
|
||||
return payload as T;
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
throw new ApiError({
|
||||
code: "network_error",
|
||||
status: null,
|
||||
message: "Не удалось связаться с сервером.",
|
||||
});
|
||||
}
|
||||
|
||||
throw new ApiError({
|
||||
code: "network_error",
|
||||
status: null,
|
||||
message: "Не удалось связаться с сервером.",
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
export type { CreateRacePayload, Race, RacesQuery, RaceStatus, UpdateRacePayload } from "./types";
|
||||
export { ApiError, getApiErrorMessage } from "./errors";
|
||||
export type { BackendMetaResponse, HealthResponse } from "./health";
|
||||
export { getBackendMeta, getHealth } from "./health";
|
||||
export { getRaceById, getRaces, createRace, updateRace, deleteRace } from "./races";
|
||||
|
||||
@@ -77,8 +77,8 @@ function buildRacesQuery(query?: RacesQuery): string {
|
||||
return serialized ? `?${serialized}` : "";
|
||||
}
|
||||
|
||||
export async function getRaces(query?: RacesQuery): Promise<Race[]> {
|
||||
const response = await requestJson<unknown[]>(`/races${buildRacesQuery(query)}`);
|
||||
export async function getRaces(query?: RacesQuery, init?: RequestInit): Promise<Race[]> {
|
||||
const response = await requestJson<unknown[]>(`/races${buildRacesQuery(query)}`, init);
|
||||
if (!Array.isArray(response)) {
|
||||
throw new ApiError({
|
||||
code: "unknown_error",
|
||||
@@ -90,8 +90,8 @@ export async function getRaces(query?: RacesQuery): Promise<Race[]> {
|
||||
return response.map(normalizeRace);
|
||||
}
|
||||
|
||||
export async function getRaceById(id: string): Promise<Race> {
|
||||
return normalizeRace(await requestJson<unknown>(`/races/${id}`));
|
||||
export async function getRaceById(id: string, init?: RequestInit): Promise<Race> {
|
||||
return normalizeRace(await requestJson<unknown>(`/races/${id}`, init));
|
||||
}
|
||||
|
||||
export async function createRace(payload: CreateRacePayload): Promise<Race> {
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { NavLink, Outlet } from "react-router-dom";
|
||||
import { AppShellFooter } from "./AppShellFooter";
|
||||
|
||||
export function AppLayout(): JSX.Element {
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="app-shell__header">
|
||||
<div className="app-shell__brand">Calendar Run</div>
|
||||
<nav className="app-shell__nav" aria-label="Primary navigation">
|
||||
<div className="app-shell__brand">Календарь стартов</div>
|
||||
<nav className="app-shell__nav" aria-label="Основная навигация">
|
||||
<NavLink
|
||||
to="/"
|
||||
end
|
||||
@@ -13,7 +14,7 @@ export function AppLayout(): JSX.Element {
|
||||
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
|
||||
}
|
||||
>
|
||||
Dashboard
|
||||
Обзор
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/races"
|
||||
@@ -21,13 +22,22 @@ export function AppLayout(): JSX.Element {
|
||||
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
|
||||
}
|
||||
>
|
||||
Races
|
||||
Старты
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/races/new"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
|
||||
}
|
||||
>
|
||||
+ Добавить
|
||||
</NavLink>
|
||||
</nav>
|
||||
</header>
|
||||
<main className="app-shell__main">
|
||||
<Outlet />
|
||||
</main>
|
||||
<AppShellFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
59
frontend/src/app/layouts/AppShellFooter.tsx
Normal file
59
frontend/src/app/layouts/AppShellFooter.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { getBackendMeta } from "../../api";
|
||||
import { FRONTEND_VERSION } from "../../frontendVersion";
|
||||
import { readCachedBackendVersion, writeCachedBackendVersion } from "../../lib/backendVersionCache";
|
||||
|
||||
function isAbortError(error: unknown): boolean {
|
||||
return (
|
||||
(error instanceof DOMException && error.name === "AbortError") ||
|
||||
(error instanceof Error && error.name === "AbortError")
|
||||
);
|
||||
}
|
||||
|
||||
export function AppShellFooter(): JSX.Element {
|
||||
const [backendVersion, setBackendVersion] = useState<string | null>(() => readCachedBackendVersion());
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
void getBackendMeta({ signal: ac.signal })
|
||||
.then((meta) => {
|
||||
if (ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
const v = meta.version;
|
||||
const label = typeof v === "string" && v.length > 0 ? v : "не указана";
|
||||
writeCachedBackendVersion(label);
|
||||
setBackendVersion(label);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (ac.signal.aborted || isAbortError(err)) {
|
||||
return;
|
||||
}
|
||||
setBackendVersion((prev) => {
|
||||
const cached = readCachedBackendVersion();
|
||||
if (cached) {
|
||||
return cached;
|
||||
}
|
||||
if (prev !== null) {
|
||||
return prev;
|
||||
}
|
||||
return "недоступна";
|
||||
});
|
||||
});
|
||||
return () => ac.abort();
|
||||
}, []);
|
||||
|
||||
const backendLabel = backendVersion === null ? "…" : backendVersion;
|
||||
|
||||
return (
|
||||
<footer className="app-shell__footer">
|
||||
<p className="app-shell__footer-versions">
|
||||
Версия клиента: {FRONTEND_VERSION}
|
||||
<span className="app-shell__footer-sep" aria-hidden="true">
|
||||
{" · "}
|
||||
</span>
|
||||
Версия сервера: {backendLabel}
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { AppLayout } from "./layouts/AppLayout";
|
||||
import { DashboardPage } from "../pages/DashboardPage";
|
||||
import { RacesPage } from "../pages/RacesPage";
|
||||
import { RaceDetailsPage } from "../pages/RaceDetailsPage";
|
||||
import { RaceFormPage } from "../pages/RaceFormPage";
|
||||
|
||||
export const appRouter = createBrowserRouter([
|
||||
{
|
||||
@@ -11,7 +12,9 @@ export const appRouter = createBrowserRouter([
|
||||
children: [
|
||||
{ index: true, element: <DashboardPage /> },
|
||||
{ path: "races", element: <RacesPage /> },
|
||||
{ path: "races/new", element: <RaceFormPage /> },
|
||||
{ path: "races/:raceId", element: <RaceDetailsPage /> },
|
||||
{ path: "races/:raceId/edit", element: <RaceFormPage /> },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import type { Race } from "../api";
|
||||
import { formatRaceDate, isCloseDistance, parseFinishTimeToSeconds } from "../lib";
|
||||
import { formatRaceDate, isCloseDistance, parseFinishTimeToSeconds, parseRaceDate } from "../lib";
|
||||
|
||||
type PaceTrendChartProps = {
|
||||
races: Race[];
|
||||
distanceKm: number;
|
||||
};
|
||||
|
||||
/**
|
||||
* Minimal SVG sparkline: finish time (minutes) over chronological completed races
|
||||
* at the selected distance. Lower time = higher point (better).
|
||||
*/
|
||||
/** Линейный график: время финиша (минуты) по завершённым стартам выбранной дистанции. */
|
||||
export function PaceTrendChart(props: PaceTrendChartProps): JSX.Element {
|
||||
const { races, distanceKm } = props;
|
||||
|
||||
@@ -21,7 +18,7 @@ export function PaceTrendChart(props: PaceTrendChartProps): JSX.Element {
|
||||
parseFinishTimeToSeconds(race.finishTime) != null,
|
||||
)
|
||||
.sort(
|
||||
(a, b) => new Date(`${a.date}T00:00:00`).getTime() - new Date(`${b.date}T00:00:00`).getTime(),
|
||||
(a, b) => parseRaceDate(a.date).getTime() - parseRaceDate(b.date).getTime(),
|
||||
)
|
||||
.map((race) => {
|
||||
const seconds = parseFinishTimeToSeconds(race.finishTime)!;
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
3
frontend/src/frontendVersion.ts
Normal file
3
frontend/src/frontendVersion.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import packageJson from "../package.json";
|
||||
|
||||
export const FRONTEND_VERSION: string = packageJson.version;
|
||||
21
frontend/src/lib/backendVersionCache.ts
Normal file
21
frontend/src/lib/backendVersionCache.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
const STORAGE_KEY = "calendar_run.backendVersion.v1";
|
||||
|
||||
export function readCachedBackendVersion(): string | null {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(STORAGE_KEY);
|
||||
return raw !== null && raw.trim().length > 0 ? raw.trim() : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function writeCachedBackendVersion(version: string): void {
|
||||
try {
|
||||
if (version === "недоступна" || version === "не указана") {
|
||||
return;
|
||||
}
|
||||
sessionStorage.setItem(STORAGE_KEY, version);
|
||||
} catch {
|
||||
// private mode / quota
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,8 @@ export {
|
||||
getRaceStatusLabel,
|
||||
isCloseDistance,
|
||||
parseFinishTimeToSeconds,
|
||||
parseRaceDate,
|
||||
raceNeedsResultEntry,
|
||||
sortByDateAsc,
|
||||
sortByDateDesc,
|
||||
splitRacesByDate,
|
||||
|
||||
@@ -2,8 +2,14 @@ import type { Race } from "../api";
|
||||
|
||||
const MS_IN_DAY = 24 * 60 * 60 * 1000;
|
||||
|
||||
function parseRaceDate(date: string): Date {
|
||||
return new Date(`${date}T00:00:00`);
|
||||
/** API date: YYYY-MM-DD или ISO-строка от сериализации (не склеивать с «T00:00:00» повторно). */
|
||||
export function parseRaceDate(date: string): Date {
|
||||
const ymd = date.slice(0, 10);
|
||||
if (/^\d{4}-\d{2}-\d{2}$/.test(ymd)) {
|
||||
return new Date(`${ymd}T00:00:00`);
|
||||
}
|
||||
const parsed = new Date(date);
|
||||
return parsed;
|
||||
}
|
||||
|
||||
export function parseFinishTimeToSeconds(value: string | null): number | null {
|
||||
@@ -70,6 +76,22 @@ export function splitRacesByDate(races: Race[], now: Date = new Date()): { upcom
|
||||
};
|
||||
}
|
||||
|
||||
function pluralizeDays(n: number): string {
|
||||
const mod10 = n % 10;
|
||||
const mod100 = n % 100;
|
||||
|
||||
if (mod100 >= 11 && mod100 <= 19) {
|
||||
return "дней";
|
||||
}
|
||||
if (mod10 === 1) {
|
||||
return "день";
|
||||
}
|
||||
if (mod10 >= 2 && mod10 <= 4) {
|
||||
return "дня";
|
||||
}
|
||||
return "дней";
|
||||
}
|
||||
|
||||
export function getRaceCountdownLabel(date: string, now: Date = new Date()): string {
|
||||
const today = new Date(now);
|
||||
today.setHours(0, 0, 0, 0);
|
||||
@@ -80,13 +102,7 @@ export function getRaceCountdownLabel(date: string, now: Date = new Date()): str
|
||||
if (days <= 0) {
|
||||
return "сегодня";
|
||||
}
|
||||
if (days === 1) {
|
||||
return "через 1 день";
|
||||
}
|
||||
if (days < 5) {
|
||||
return `через ${days} дня`;
|
||||
}
|
||||
return `через ${days} дней`;
|
||||
return `через ${days} ${pluralizeDays(days)}`;
|
||||
}
|
||||
|
||||
export function isCloseDistance(left: number, right: number): boolean {
|
||||
@@ -106,18 +122,36 @@ export function getPaceLabel(finishTime: string | null, distanceKm: number): str
|
||||
return `${String(paceMinutes).padStart(2, "0")}:${String(paceRemainder).padStart(2, "0")} /км`;
|
||||
}
|
||||
|
||||
export function getRaceStatusClassName(status: Race["status"]): string {
|
||||
const base = "race-card__status";
|
||||
if (status === "completed") {
|
||||
return `${base} ${base}--completed`;
|
||||
function isPastDateNeedingResult(status: Race["status"], raceDate: string): boolean {
|
||||
if (status !== "planned" && status !== "registered") {
|
||||
return false;
|
||||
}
|
||||
if (status === "registered") {
|
||||
return `${base} ${base}--registered`;
|
||||
}
|
||||
return `${base} ${base}--planned`;
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return parseRaceDate(raceDate).getTime() < today.getTime();
|
||||
}
|
||||
|
||||
export function getRaceStatusLabel(status: Race["status"]): string {
|
||||
export function raceNeedsResultEntry(race: Race): boolean {
|
||||
return isPastDateNeedingResult(race.status, race.date);
|
||||
}
|
||||
|
||||
export function getRaceStatusClassName(status: Race["status"], raceDate?: string): string {
|
||||
const base = "race-card__status";
|
||||
let tier = `${base}--planned`;
|
||||
if (status === "completed") {
|
||||
tier = `${base}--completed`;
|
||||
} else if (status === "registered") {
|
||||
tier = `${base}--registered`;
|
||||
}
|
||||
const needs =
|
||||
raceDate && isPastDateNeedingResult(status, raceDate) ? ` ${base}--needs-result` : "";
|
||||
return `${base} ${tier}${needs}`;
|
||||
}
|
||||
|
||||
export function getRaceStatusLabel(status: Race["status"], raceDate?: string): string {
|
||||
if (raceDate && isPastDateNeedingResult(status, raceDate)) {
|
||||
return "внесите результат";
|
||||
}
|
||||
if (status === "completed") {
|
||||
return "пробежал";
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
getPaceLabel,
|
||||
isCloseDistance,
|
||||
parseFinishTimeToSeconds,
|
||||
parseRaceDate,
|
||||
splitRacesByDate,
|
||||
} from "../lib";
|
||||
|
||||
@@ -18,7 +19,7 @@ function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof ApiError) {
|
||||
return error.message;
|
||||
}
|
||||
return "Не удалось загрузить данные dashboard.";
|
||||
return "Не удалось загрузить данные обзора.";
|
||||
}
|
||||
|
||||
export function DashboardPage(): JSX.Element {
|
||||
@@ -28,23 +29,24 @@ export function DashboardPage(): JSX.Element {
|
||||
const [chartDistanceKm, setChartDistanceKm] = useState<number>(10);
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
async function loadDashboardData(): Promise<void> {
|
||||
try {
|
||||
const items = await getRaces();
|
||||
if (!isMounted) {
|
||||
const items = await getRaces(undefined, { signal: ac.signal });
|
||||
if (!isMounted || ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setRaces(items);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
if (ac.signal.aborted || !isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
if (isMounted && !ac.signal.aborted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -53,6 +55,7 @@ export function DashboardPage(): JSX.Element {
|
||||
void loadDashboardData();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, []);
|
||||
|
||||
@@ -80,7 +83,7 @@ export function DashboardPage(): JSX.Element {
|
||||
}
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const seasonRaces = races.filter((race) => new Date(`${race.date}T00:00:00`).getFullYear() === currentYear);
|
||||
const seasonRaces = races.filter((race) => parseRaceDate(race.date).getFullYear() === currentYear);
|
||||
const seasonCompleted = seasonRaces.filter((race) => race.status === "completed");
|
||||
|
||||
return {
|
||||
@@ -130,7 +133,7 @@ export function DashboardPage(): JSX.Element {
|
||||
.filter((race) => race.status === "completed")
|
||||
.map((race) => ({
|
||||
id: race.id,
|
||||
year: new Date(`${race.date}T00:00:00`).getFullYear(),
|
||||
year: parseRaceDate(race.date).getFullYear(),
|
||||
title: race.title,
|
||||
distance: formatDistance(race.distanceKm),
|
||||
finishTime: race.finishTime ?? "время не указано",
|
||||
@@ -143,7 +146,7 @@ export function DashboardPage(): JSX.Element {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="page page--dashboard" aria-busy="true">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<h1 className="page__title">Обзор</h1>
|
||||
<p className="page__subtitle">Загружаем ваши старты...</p>
|
||||
</section>
|
||||
);
|
||||
@@ -152,7 +155,7 @@ export function DashboardPage(): JSX.Element {
|
||||
if (errorMessage) {
|
||||
return (
|
||||
<section className="page page--dashboard" role="alert">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<h1 className="page__title">Обзор</h1>
|
||||
<p className="page__subtitle page__subtitle--error">{errorMessage}</p>
|
||||
</section>
|
||||
);
|
||||
@@ -160,7 +163,7 @@ export function DashboardPage(): JSX.Element {
|
||||
|
||||
return (
|
||||
<section className="page page--dashboard">
|
||||
<h1 className="page__title">Dashboard</h1>
|
||||
<h1 className="page__title">Обзор</h1>
|
||||
<p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
|
||||
|
||||
<div className="dashboard-grid" aria-label="Ключевые метрики">
|
||||
@@ -205,7 +208,7 @@ export function DashboardPage(): JSX.Element {
|
||||
<p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Недостаточно данных для PR.</p>
|
||||
<p className="dashboard-card__empty">Недостаточно данных для личного рекорда.</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
@@ -242,7 +245,7 @@ export function DashboardPage(): JSX.Element {
|
||||
</section>
|
||||
|
||||
<section className="dashboard-section" aria-label="Личные рекорды по дистанциям">
|
||||
<h2 className="dashboard-section__title">PR по дистанциям</h2>
|
||||
<h2 className="dashboard-section__title">Рекорды по дистанциям</h2>
|
||||
<div className="dashboard-grid dashboard-grid--pr">
|
||||
{personalRecordsByDistance.map((item) => (
|
||||
<article key={item.distanceKm} className="dashboard-card">
|
||||
@@ -291,7 +294,7 @@ export function DashboardPage(): JSX.Element {
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Нет completed-стартов для сравнения.</p>
|
||||
<p className="dashboard-card__empty">Нет завершённых стартов для сравнения.</p>
|
||||
)}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { ApiError, getRaceById } from "../api";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { ApiError, deleteRace, getRaceById } from "../api";
|
||||
import {
|
||||
formatDistance,
|
||||
formatRaceDate,
|
||||
getPaceLabel,
|
||||
getRaceStatusClassName,
|
||||
getRaceStatusLabel,
|
||||
raceNeedsResultEntry,
|
||||
} from "../lib";
|
||||
import type { Race } from "../api";
|
||||
|
||||
@@ -17,13 +18,47 @@ function getErrorMessage(error: unknown): string {
|
||||
return "Не удалось загрузить карточку старта.";
|
||||
}
|
||||
|
||||
function DetailItem(props: { label: string; value: string | null | undefined }): JSX.Element | null {
|
||||
const text = props.value?.trim();
|
||||
if (!text) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="race-details-meta__item">
|
||||
<dt className="race-details-meta__key">{props.label}</dt>
|
||||
<dd className="race-details-meta__value">{text}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailLink(props: { label: string; url: string | null | undefined }): JSX.Element | null {
|
||||
const href = props.url?.trim();
|
||||
if (!href) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="race-details-meta__item">
|
||||
<dt className="race-details-meta__key">{props.label}</dt>
|
||||
<dd className="race-details-meta__value">
|
||||
<a href={href} target="_blank" rel="noopener noreferrer" className="race-details-meta__link">
|
||||
{href}
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RaceDetailsPage(): JSX.Element {
|
||||
const { raceId } = useParams<{ raceId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [race, setRace] = useState<Race | null>(null);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState<boolean>(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
async function loadRace(): Promise<void> {
|
||||
@@ -34,19 +69,19 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
}
|
||||
|
||||
try {
|
||||
const item = await getRaceById(raceId);
|
||||
if (!isMounted) {
|
||||
const item = await getRaceById(raceId, { signal: ac.signal });
|
||||
if (!isMounted || ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setRace(item);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
if (ac.signal.aborted || !isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
if (isMounted && !ac.signal.aborted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -55,6 +90,7 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
void loadRace();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, [raceId]);
|
||||
|
||||
@@ -65,6 +101,22 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
return getPaceLabel(race.finishTime, race.distanceKm);
|
||||
}, [race]);
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
if (!raceId) {
|
||||
return;
|
||||
}
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await deleteRace(raceId);
|
||||
navigate("/races", { replace: true });
|
||||
} catch (error) {
|
||||
setErrorMessage(error instanceof ApiError ? error.message : "Не удалось удалить старт.");
|
||||
setShowDeleteConfirm(false);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
}, [raceId, navigate]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="page page--race-details" aria-busy="true">
|
||||
@@ -97,9 +149,56 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
|
||||
</p>
|
||||
</div>
|
||||
<span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
|
||||
<span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
|
||||
</div>
|
||||
|
||||
{raceNeedsResultEntry(race) ? (
|
||||
<p className="race-details-past-hint" role="status">
|
||||
Дата старта уже прошла —{" "}
|
||||
<Link className="race-details-past-hint__link" to={`/races/${race.id}/edit`}>
|
||||
внесите результат или обновите статус
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="race-details-actions">
|
||||
<Link className="btn btn--primary" to={`/races/${race.id}/edit`}>
|
||||
Редактировать
|
||||
</Link>
|
||||
<button
|
||||
className="btn btn--danger"
|
||||
type="button"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showDeleteConfirm ? (
|
||||
<div className="confirm-banner" role="alertdialog" aria-label="Подтверждение удаления">
|
||||
<p className="confirm-banner__text">Удалить «{race.title}»? Это действие необратимо.</p>
|
||||
<div className="confirm-banner__actions">
|
||||
<button
|
||||
className="btn btn--danger"
|
||||
type="button"
|
||||
disabled={isDeleting}
|
||||
onClick={handleDelete}
|
||||
>
|
||||
{isDeleting ? "Удаляем…" : "Да, удалить"}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn--secondary"
|
||||
type="button"
|
||||
disabled={isDeleting}
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="race-details-grid">
|
||||
<article className="race-details-card">
|
||||
<h2 className="race-details-card__title">Основная информация</h2>
|
||||
@@ -114,13 +213,18 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
</div>
|
||||
<div className="race-details-meta__item">
|
||||
<dt className="race-details-meta__key">Статус</dt>
|
||||
<dd className="race-details-meta__value">{getRaceStatusLabel(race.status)}</dd>
|
||||
<dd className="race-details-meta__value">{getRaceStatusLabel(race.status, race.date)}</dd>
|
||||
</div>
|
||||
<DetailLink label="Сайт организатора" url={race.officialUrl} />
|
||||
<DetailItem label="Время старта" value={race.startTime} />
|
||||
<DetailItem label="Расписание кластеров" value={race.clusterSchedule} />
|
||||
<DetailItem label="Выдача номеров" value={race.bibPickup} />
|
||||
<DetailItem label="Стартовый номер" value={race.bibNumber} />
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article className="race-details-card">
|
||||
<h2 className="race-details-card__title">Completed-метрики</h2>
|
||||
<h2 className="race-details-card__title">Результаты</h2>
|
||||
{isCompleted ? (
|
||||
<dl className="race-details-meta">
|
||||
<div className="race-details-meta__item">
|
||||
@@ -131,16 +235,7 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
<dt className="race-details-meta__key">Темп</dt>
|
||||
<dd className="race-details-meta__value">{paceLabel ?? "не удалось вычислить"}</dd>
|
||||
</div>
|
||||
<div className="race-details-meta__item">
|
||||
<dt className="race-details-meta__key">Место</dt>
|
||||
<dd className="race-details-meta__value">
|
||||
{race.finishPlace?.trim() ? race.finishPlace : "не указано"}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="race-details-meta__item">
|
||||
<dt className="race-details-meta__key">Стартовый номер</dt>
|
||||
<dd className="race-details-meta__value">{race.bibNumber ?? "не указан"}</dd>
|
||||
</div>
|
||||
<DetailItem label="Место" value={race.finishPlace} />
|
||||
</dl>
|
||||
) : (
|
||||
<p className="race-details-card__empty">
|
||||
|
||||
422
frontend/src/pages/RaceFormPage.tsx
Normal file
422
frontend/src/pages/RaceFormPage.tsx
Normal file
@@ -0,0 +1,422 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { ApiError, createRace, getRaceById, updateRace } from "../api";
|
||||
import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
|
||||
|
||||
function slugify(text: string): string {
|
||||
return text
|
||||
.toLowerCase()
|
||||
.replace(/[«»"]/g, "")
|
||||
.replace(/[^a-zа-яё0-9]+/gi, "-")
|
||||
.replace(/(^-|-$)/g, "")
|
||||
.substring(0, 60);
|
||||
}
|
||||
|
||||
function generateId(date: string, title: string): string {
|
||||
return `${date}-${slugify(title)}`;
|
||||
}
|
||||
|
||||
const STATUS_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: "", label: "Не указан" },
|
||||
{ value: "planned", label: "Планирую" },
|
||||
{ value: "registered", label: "Зарегистрирован" },
|
||||
{ value: "completed", label: "Пробежал" },
|
||||
];
|
||||
|
||||
interface FormData {
|
||||
date: string;
|
||||
title: string;
|
||||
distanceKm: string;
|
||||
status: string;
|
||||
officialUrl: string;
|
||||
startTime: string;
|
||||
clusterSchedule: string;
|
||||
bibPickup: string;
|
||||
bibNumber: string;
|
||||
finishTime: string;
|
||||
finishPlace: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
const EMPTY_FORM: FormData = {
|
||||
date: "",
|
||||
title: "",
|
||||
distanceKm: "",
|
||||
status: "planned",
|
||||
officialUrl: "",
|
||||
startTime: "",
|
||||
clusterSchedule: "",
|
||||
bibPickup: "",
|
||||
bibNumber: "",
|
||||
finishTime: "",
|
||||
finishPlace: "",
|
||||
notes: "",
|
||||
};
|
||||
|
||||
function raceToFormData(race: Race): FormData {
|
||||
const dateValue = race.date.length >= 10 ? race.date.slice(0, 10) : race.date;
|
||||
return {
|
||||
date: dateValue,
|
||||
title: race.title,
|
||||
distanceKm: String(race.distanceKm),
|
||||
status: race.status ?? "",
|
||||
officialUrl: race.officialUrl ?? "",
|
||||
startTime: race.startTime ?? "",
|
||||
clusterSchedule: race.clusterSchedule ?? "",
|
||||
bibPickup: race.bibPickup ?? "",
|
||||
bibNumber: race.bibNumber ?? "",
|
||||
finishTime: race.finishTime ?? "",
|
||||
finishPlace: race.finishPlace ?? "",
|
||||
notes: race.notes ?? "",
|
||||
};
|
||||
}
|
||||
|
||||
function emptyToNull(value: string): string | null {
|
||||
const trimmed = value.trim();
|
||||
return trimmed === "" ? null : trimmed;
|
||||
}
|
||||
|
||||
function validateForm(form: FormData): string[] {
|
||||
const errors: string[] = [];
|
||||
if (!form.date.trim()) {
|
||||
errors.push("Дата обязательна.");
|
||||
}
|
||||
if (!form.title.trim()) {
|
||||
errors.push("Название обязательно.");
|
||||
}
|
||||
const km = parseFloat(form.distanceKm);
|
||||
if (Number.isNaN(km) || km <= 0) {
|
||||
errors.push("Дистанция должна быть положительным числом.");
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
|
||||
export function RaceFormPage(): JSX.Element {
|
||||
const { raceId } = useParams<{ raceId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const isEditMode = Boolean(raceId);
|
||||
|
||||
const [form, setForm] = useState<FormData>(EMPTY_FORM);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(isEditMode);
|
||||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [validationErrors, setValidationErrors] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!raceId) {
|
||||
return;
|
||||
}
|
||||
|
||||
let isMounted = true;
|
||||
|
||||
async function loadRace(): Promise<void> {
|
||||
try {
|
||||
const race = await getRaceById(raceId!);
|
||||
if (!isMounted) {
|
||||
return;
|
||||
}
|
||||
setForm(raceToFormData(race));
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(error instanceof ApiError ? error.message : "Не удалось загрузить данные старта.");
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void loadRace();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [raceId]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = event.target;
|
||||
setForm((prev) => ({ ...prev, [name]: value }));
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
setErrorMessage(null);
|
||||
|
||||
const errors = validateForm(form);
|
||||
setValidationErrors(errors);
|
||||
if (errors.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
const statusValue: RaceStatus | null =
|
||||
form.status === "planned" || form.status === "registered" || form.status === "completed"
|
||||
? form.status
|
||||
: null;
|
||||
|
||||
if (isEditMode && raceId) {
|
||||
const payload: UpdateRacePayload = {
|
||||
date: form.date.trim(),
|
||||
title: form.title.trim(),
|
||||
distanceKm: parseFloat(form.distanceKm),
|
||||
status: statusValue,
|
||||
officialUrl: emptyToNull(form.officialUrl),
|
||||
startTime: emptyToNull(form.startTime),
|
||||
clusterSchedule: emptyToNull(form.clusterSchedule),
|
||||
bibPickup: emptyToNull(form.bibPickup),
|
||||
bibNumber: emptyToNull(form.bibNumber),
|
||||
finishTime: emptyToNull(form.finishTime),
|
||||
finishPlace: emptyToNull(form.finishPlace),
|
||||
notes: emptyToNull(form.notes),
|
||||
};
|
||||
|
||||
await updateRace(raceId, payload);
|
||||
navigate(`/races/${raceId}`);
|
||||
} else {
|
||||
const id = generateId(form.date.trim(), form.title.trim());
|
||||
const payload: CreateRacePayload = {
|
||||
id,
|
||||
date: form.date.trim(),
|
||||
title: form.title.trim(),
|
||||
distanceKm: parseFloat(form.distanceKm),
|
||||
status: statusValue,
|
||||
officialUrl: emptyToNull(form.officialUrl),
|
||||
startTime: emptyToNull(form.startTime),
|
||||
clusterSchedule: emptyToNull(form.clusterSchedule),
|
||||
bibPickup: emptyToNull(form.bibPickup),
|
||||
bibNumber: emptyToNull(form.bibNumber),
|
||||
finishTime: emptyToNull(form.finishTime),
|
||||
finishPlace: emptyToNull(form.finishPlace),
|
||||
notes: emptyToNull(form.notes),
|
||||
};
|
||||
|
||||
const created = await createRace(payload);
|
||||
navigate(`/races/${created.id}`);
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
setErrorMessage(error.details.length > 0 ? error.details.join("; ") : error.message);
|
||||
} else {
|
||||
setErrorMessage("Произошла ошибка при сохранении.");
|
||||
}
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
},
|
||||
[form, isEditMode, raceId, navigate],
|
||||
);
|
||||
|
||||
const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<section className="page page--race-form" aria-busy="true">
|
||||
<h1 className="page__title">{pageTitle}</h1>
|
||||
<p className="page__subtitle">Загружаем данные...</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="page page--race-form">
|
||||
<h1 className="page__title">{pageTitle}</h1>
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="page__subtitle page__subtitle--error" role="alert">{errorMessage}</p>
|
||||
) : null}
|
||||
|
||||
{validationErrors.length > 0 ? (
|
||||
<ul className="form-errors" role="alert">
|
||||
{validationErrors.map((msg) => (
|
||||
<li key={msg} className="form-errors__item">{msg}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
<form className="race-form" onSubmit={handleSubmit} noValidate>
|
||||
<fieldset className="race-form__group">
|
||||
<legend className="race-form__legend">Основная информация</legend>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Дата *</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="date"
|
||||
name="date"
|
||||
value={form.date}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Название *</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="title"
|
||||
value={form.title}
|
||||
onChange={handleChange}
|
||||
required
|
||||
placeholder="Казанский марафон"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Дистанция, км *</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="number"
|
||||
name="distanceKm"
|
||||
value={form.distanceKm}
|
||||
onChange={handleChange}
|
||||
required
|
||||
min="0.1"
|
||||
step="0.001"
|
||||
placeholder="21.1"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Статус</span>
|
||||
<select
|
||||
className="race-form__input"
|
||||
name="status"
|
||||
value={form.status}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{STATUS_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset className="race-form__group">
|
||||
<legend className="race-form__legend">Организация</legend>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Сайт организатора</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="url"
|
||||
name="officialUrl"
|
||||
value={form.officialUrl}
|
||||
onChange={handleChange}
|
||||
placeholder="https://…"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Время старта</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="startTime"
|
||||
value={form.startTime}
|
||||
onChange={handleChange}
|
||||
placeholder="09:30"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Расписание кластеров</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="clusterSchedule"
|
||||
value={form.clusterSchedule}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Выдача номеров</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="bibPickup"
|
||||
value={form.bibPickup}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Стартовый номер</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="bibNumber"
|
||||
value={form.bibNumber}
|
||||
onChange={handleChange}
|
||||
placeholder="1234"
|
||||
/>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset className="race-form__group">
|
||||
<legend className="race-form__legend">Результаты</legend>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Финишное время</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="finishTime"
|
||||
value={form.finishTime}
|
||||
onChange={handleChange}
|
||||
placeholder="1:45:30"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Место на финише</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="finishPlace"
|
||||
value={form.finishPlace}
|
||||
onChange={handleChange}
|
||||
placeholder="12/340"
|
||||
/>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset className="race-form__group">
|
||||
<legend className="race-form__legend">Дополнительно</legend>
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Заметки</span>
|
||||
<textarea
|
||||
className="race-form__input race-form__input--textarea"
|
||||
name="notes"
|
||||
value={form.notes}
|
||||
onChange={handleChange}
|
||||
rows={4}
|
||||
/>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<div className="race-form__actions">
|
||||
<button className="btn btn--primary" type="submit" disabled={isSaving}>
|
||||
{isSaving ? "Сохраняем…" : isEditMode ? "Сохранить" : "Создать"}
|
||||
</button>
|
||||
<Link
|
||||
className="btn btn--secondary"
|
||||
to={isEditMode && raceId ? `/races/${raceId}` : "/races"}
|
||||
>
|
||||
Отмена
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -64,7 +64,7 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
|
||||
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
|
||||
</p>
|
||||
</div>
|
||||
<span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
|
||||
<span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -100,24 +100,25 @@ export function RacesPage(): JSX.Element {
|
||||
}, [yearFilter, monthFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
async function loadRaces(): Promise<void> {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const items = await getRaces(listQuery);
|
||||
if (!isMounted) {
|
||||
const items = await getRaces(listQuery, { signal: ac.signal });
|
||||
if (!isMounted || ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setRaces(items);
|
||||
setErrorMessage(null);
|
||||
} catch (error) {
|
||||
if (!isMounted) {
|
||||
if (ac.signal.aborted || !isMounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(error));
|
||||
} finally {
|
||||
if (isMounted) {
|
||||
if (isMounted && !ac.signal.aborted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
@@ -126,6 +127,7 @@ export function RacesPage(): JSX.Element {
|
||||
void loadRaces();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, [listQuery]);
|
||||
|
||||
@@ -145,6 +147,12 @@ export function RacesPage(): JSX.Element {
|
||||
<h1 className="page__title">Календарь стартов</h1>
|
||||
<p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
|
||||
|
||||
{errorMessage && !isLoading ? (
|
||||
<p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
|
||||
{errorMessage}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="races-filter" role="search" aria-label="Фильтр по дате">
|
||||
<label className="races-filter__field">
|
||||
<span className="races-filter__label">Год</span>
|
||||
|
||||
@@ -27,7 +27,7 @@ a {
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.app-shell__header {
|
||||
@@ -64,7 +64,9 @@ a {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.app-shell__link--active {
|
||||
.app-shell__link--active,
|
||||
.app-shell__link--active:hover,
|
||||
.app-shell__link--active:focus-visible {
|
||||
color: var(--color-surface);
|
||||
background: var(--color-accent);
|
||||
}
|
||||
@@ -75,6 +77,24 @@ a {
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.app-shell__footer {
|
||||
margin-top: auto;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
border-top: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.app-shell__footer-versions {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.app-shell__footer-sep {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
@@ -271,6 +291,31 @@ a {
|
||||
color: #8a5a00;
|
||||
}
|
||||
|
||||
.race-card__status--needs-result {
|
||||
outline: 1px solid var(--color-warning);
|
||||
}
|
||||
|
||||
.race-details-past-hint {
|
||||
margin: 0 0 var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-warning);
|
||||
background: #fffaf0;
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.race-details-past-hint__link {
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.race-details-past-hint__link:hover,
|
||||
.race-details-past-hint__link:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.races-filter {
|
||||
margin-top: var(--space-5);
|
||||
display: flex;
|
||||
@@ -406,6 +451,175 @@ a {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ─── Buttons ──────────────────────────────────────────── */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-caption);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn--primary {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.btn--primary:hover:not(:disabled) {
|
||||
background: #1766be;
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.btn--secondary:hover:not(:disabled) {
|
||||
background: #eef2f6;
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
background: var(--color-error);
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.btn--danger:hover:not(:disabled) {
|
||||
background: #a82e2e;
|
||||
}
|
||||
|
||||
/* ─── Confirm banner ───────────────────────────────────── */
|
||||
|
||||
.confirm-banner {
|
||||
margin-top: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.confirm-banner__text {
|
||||
margin: 0 0 var(--space-3);
|
||||
font-weight: 600;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.confirm-banner__actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* ─── Race details actions ─────────────────────────────── */
|
||||
|
||||
.race-details-actions {
|
||||
margin-top: var(--space-4);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.race-details-meta__link {
|
||||
color: var(--color-accent);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.race-details-meta__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ─── Race form ────────────────────────────────────────── */
|
||||
|
||||
.race-form {
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
.race-form__group {
|
||||
margin: 0 0 var(--space-6);
|
||||
padding: var(--space-5);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fcfdff;
|
||||
}
|
||||
|
||||
.race-form__legend {
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
padding: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.race-form__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.race-form__field:first-of-type {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.race-form__label {
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.race-form__input {
|
||||
font: inherit;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.race-form__input:focus {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: -1px;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.race-form__input--textarea {
|
||||
resize: vertical;
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.race-form__actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-errors {
|
||||
margin: var(--space-3) 0 0;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fef2f2;
|
||||
color: var(--color-error);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.form-errors__item {
|
||||
margin: var(--space-1) 0;
|
||||
}
|
||||
|
||||
/* ─── Responsive ───────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.dashboard-grid,
|
||||
.race-lists,
|
||||
@@ -416,4 +630,9 @@ a {
|
||||
.race-details-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.race-form__actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
--font-size-caption: 0.875rem;
|
||||
--line-height-base: 1.5;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
|
||||
1
frontend/src/vite-env.d.ts
vendored
Normal file
1
frontend/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -2,5 +2,13 @@ import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()]
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://localhost:3001",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user