Compare commits
30 Commits
feat/phase
...
fix/race-l
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
afb0f7ef31 | ||
| 92c2360feb | |||
|
|
4ea8faf16f | ||
| 74f059593e | |||
|
|
3c6baa66a1 | ||
| b997dcb01e | |||
|
|
e033b2c8d5 | ||
| c337823fa8 | |||
|
|
a4f8c37b84 | ||
| 7e980dd802 | |||
|
|
c04dc35075 | ||
| a41408559e | |||
|
|
8eaf006906 | ||
| 9f63b190f1 | |||
|
|
83bc603b95 | ||
| f8b4ce7111 | |||
|
|
53b9561a54 | ||
| 7e9c20d4bf | |||
|
|
e0ed0b6435 | ||
| 8442c761c2 | |||
|
|
87d6505fbf | ||
| 99ae7410ce | |||
|
|
42ee36d0a2 | ||
| fc995ed07d | |||
|
|
0f0c7c2607 | ||
| ef423b322f | |||
| d77dc205dc | |||
| 8a7e87385a | |||
| b92fad6939 | |||
|
|
7260fb59ea |
@@ -24,10 +24,15 @@ API_PORT=3001
|
||||
# CALENDAR_RUN_MOCK_DB=1
|
||||
|
||||
# ─── 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
|
||||
|
||||
# ─── Версия API (опционально) ─────────────────────────────────
|
||||
# Если в образе не удаётся прочитать package.json, подставьте вручную (видно в GET /health).
|
||||
# APP_VERSION=1.0.0
|
||||
|
||||
# ─── Frontend (Vite, локально из каталога frontend/) ─────────
|
||||
# В Docker-образе фронта базовый URL API задаётся при сборке (/api), не из .env.
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
# Браузер всегда ходит на относительный /api; в dev это проксирует Vite.
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,3 +2,4 @@ node_modules/
|
||||
dist/
|
||||
.env
|
||||
*.log
|
||||
.DS_Store
|
||||
@@ -1,12 +1,10 @@
|
||||
# Сборка из корня монорепо: docker build -f Dockerfile.frontend .
|
||||
# SPA дергает API по префиксу /api (nginx проксирует на сервис backend:3000).
|
||||
# SPA дергает API по префиксу /api (nginx проксирует на сервис runners-calendar-backend:3000).
|
||||
FROM node:20-alpine AS build
|
||||
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
|
||||
|
||||
100
FRONTEND_PLAN.md
100
FRONTEND_PLAN.md
@@ -1,100 +0,0 @@
|
||||
---
|
||||
|
||||
name: Frontend implementation plan
|
||||
overview: Собрать минималистичный frontend для календаря забегов по UI-инструкции, строго в рамках текущего API-контракта.
|
||||
todos:
|
||||
|
||||
- id: frontend-structure
|
||||
content: Подготовить структуру frontend, роутинг, базовые layout-компоненты и дизайн-токены на CSS variables + BEM
|
||||
status: completed
|
||||
- id: api-contract-layer
|
||||
content: Реализовать типизированный API-клиент и слой нормализации/обработки ошибок по контракту backend-api-for-frontend.md
|
||||
status: completed
|
||||
- id: dashboard-and-calendar
|
||||
content: Собрать Dashboard, списки будущих/прошедших стартов и базовые карточки по минималистичному UI-гайду
|
||||
status: completed
|
||||
- id: race-details-and-metrics
|
||||
content: Реализовать экран карточки старта, вычисление темпа на фронте и отображение completed-метрик
|
||||
status: completed
|
||||
- id: pr-and-comparison
|
||||
content: Сделать блок PR и сравнение стартов с fallback для отсутствующего поля place
|
||||
status: completed
|
||||
- id: backend-dependency-task
|
||||
content: "Расширение API полем finishPlace: миграция 002, маппер, DTO, фронтенд-интеграция — выполнено"
|
||||
status: completed
|
||||
isProject: false
|
||||
|
||||
---
|
||||
|
||||
# План frontend части Calendar Run
|
||||
|
||||
## Исходные опоры
|
||||
|
||||
- UI и UX принципы: минимализм, воздух, акцент на данных, спокойная палитра, быстрые сценарии (дизайн-токены в `frontend/src/styles/tokens.css`).
|
||||
- Продуктовые ограничения и структура экранов сверяем с [d:\vaka.pro\calendar_run\PLAN.md](d:/vaka.pro/calendar_run/PLAN.md).
|
||||
- Интеграционный контракт берём из [d:\vaka.pro\calendar_run\docs\backend-api-for-frontend.md](d:/vaka.pro/calendar_run/docs/backend-api-for-frontend.md).
|
||||
- Общий контекст запуска/окружения — [d:\vaka.pro\calendar_run\README.md](d:/vaka.pro/calendar_run/README.md) и [d:\vaka.pro\calendar_run\docs\backend.md](d:/vaka.pro/calendar_run/docs/backend.md).
|
||||
|
||||
## Границы версии (V1)
|
||||
|
||||
- Только frontend + интеграция с текущим API.
|
||||
- Статус `зарегистрирован` трактуется как UI-вариант `planned` (без изменения backend-контракта).
|
||||
- Для completed-забегов обязательно показываем `темп`; считаем на фронте из `finishTime` и `distanceKm`.
|
||||
- Для completed-забегов поле `место` (`finishPlace`) доступно в API (миграция 002, маппер, DTO); фронтенд отображает его в карточке и таблице сравнения.
|
||||
|
||||
## Архитектура frontend
|
||||
|
||||
- Базовая структура: `frontend/src/app`, `frontend/src/pages`, `frontend/src/components`, `frontend/src/api`, `frontend/src/features`, `frontend/src/lib`, `frontend/src/styles`.
|
||||
- Дизайн-система на CSS variables: токены цвета/типографики/отступов/радиусов, единые состояния (`success`, `warning`, `error`).
|
||||
- БЭМ для всех UI-блоков и модификаторов (`block`, `block__element`, `block--modifier`).
|
||||
- Единый слой API-клиента:
|
||||
- `GET /races`, `GET /races/:id`, `POST /races`, `PATCH /races/:id`, `DELETE /races/:id` (если используется UI-сценарием).
|
||||
- Типы `Race`, `RaceStatus`, DTO для POST/PATCH.
|
||||
- Централизованный маппинг ошибок API (`validation_error`, `not_found`, `database_unavailable`, `conflict`) в UX-сообщения.
|
||||
|
||||
## Экранная модель и сценарии
|
||||
|
||||
- Dashboard:
|
||||
- `Ближайший старт`, `Последний результат`, `Личный рекорд`, `Сезон`.
|
||||
- CTA к календарю и добавлению старта.
|
||||
- Календарь стартов:
|
||||
- Переключение `Будущие` / `Прошедшие`.
|
||||
- Карточка старта: `title`, `date`, `distanceKm`, статус-лейбл.
|
||||
- Карточка старта:
|
||||
- Базовые поля + `finishTime`, вычисляемый `pace`, `finishPlace`, `notes`.
|
||||
- PR блок:
|
||||
- Дистанции: 5K, 10K, 21.1, 42.2 (согласно UI-инструкции).
|
||||
- Расчёт по completed-забегам с валидным `finishTime`.
|
||||
- Сравнение стартов (ключевая фича):
|
||||
- Таблица/карточки по годам с `time`, `pace`, `finishPlace`.
|
||||
- Если `finishPlace` не заполнено — graceful-degradation: колонка в состоянии «нет данных».
|
||||
|
||||
## UX и визуальные требования
|
||||
|
||||
- Визуальная система: светлый фон, белые карточки, один акцентный цвет, без кислотных сочетаний.
|
||||
- Иерархия типографики: H1/H2/body/caption, крупные числовые метрики.
|
||||
- Минимум визуального шума, 2–3 клика на частые действия.
|
||||
- Консистентные состояния загрузки/ошибок/пустых данных.
|
||||
- A11y-базис: фокус-стили, клавиатурная навигация, контраст, корректная разметка интерактивных элементов.
|
||||
|
||||
## Зависимая задача (выполнена)
|
||||
|
||||
- Поле `finishPlace` добавлено в модель `Race`: миграция `002_finish_place_and_registered_status.sql`, маппер `race.ts`, DTO, API-документация.
|
||||
- Frontend-типы, карточка и блок сравнения используют `finishPlace`.
|
||||
|
||||
## Порядок реализации
|
||||
|
||||
1. Подготовить каркас frontend и дизайн-токены (BEM + CSS variables).
|
||||
2. Реализовать API-клиент и типы данных с обработкой ошибок.
|
||||
3. Собрать Dashboard и календарные списки (будущие/прошедшие).
|
||||
4. Реализовать карточку старта с вычислением `pace` на клиенте.
|
||||
5. Реализовать PR и блок сравнения стартов с fallback для `place`.
|
||||
6. Добавить состояния пустых данных/ошибок/загрузки и а11y-полировку.
|
||||
|
||||
## Definition of Done для frontend
|
||||
|
||||
- Все ключевые экраны из UI-инструкции доступны и консистентны визуально.
|
||||
- API-интеграция работает по текущему контракту без локальных обходов хранилища.
|
||||
- `pace` считается корректно для completed-забегов.
|
||||
- `registered` не ломает модель: визуально интерпретируется в рамках `planned`.
|
||||
- `finishPlace` интегрирован; при отсутствии значения — безопасный fallback в UI.
|
||||
64
PLAN.md
64
PLAN.md
@@ -1,64 +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 и дизайн-токены (см. `frontend/src/styles/tokens.css`).
|
||||
|
||||
## Критерии готовности текущей итерации
|
||||
|
||||
- Документация согласована с кодом: `[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-БД.
|
||||
|
||||
19
README.md
19
README.md
@@ -4,20 +4,20 @@
|
||||
|
||||
## Переменные окружения
|
||||
|
||||
Один шаблон для локальной разработки и для Docker-стека: **[`.env.example`](.env.example)** → скопируйте в **`.env`** в корне репозитория.
|
||||
Один шаблон для локальной разработки и для Docker-стека: `**[.env.example](.env.example)`** → скопируйте в `**.env**` в корне репозитория.
|
||||
|
||||
Там же перечислены **`DB_HOST`**, **`DB_PORT`**, **`DB_NAME`**, **`DB_USER`**, **`DB_PASSWORD`** (подключение бэкенда к БД), **`PORT`** / **`API_PORT`**, опционально **`CALENDAR_RUN_MOCK_DB`**, **`CORS_ORIGIN`**, а для локального Vite — **`VITE_API_BASE_URL`**.
|
||||
Там же перечислены `**DB_HOST**`, `**DB_PORT**`, `**DB_NAME**`, `**DB_USER**`, `**DB_PASSWORD**` (подключение бэкенда к БД), `**PORT**` / `**API_PORT**`, опционально `**CALENDAR_RUN_MOCK_DB**` и `**CORS_ORIGIN**`.
|
||||
|
||||
## Backend — локально
|
||||
|
||||
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`.
|
||||
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`
|
||||
|
||||
Без PostgreSQL (только smoke API): в `.env` задайте `CALENDAR_RUN_MOCK_DB=1`; **`db:migrate` и `seed` с mock не использовать**.
|
||||
Без PostgreSQL (только smoke API): в `.env` задайте `CALENDAR_RUN_MOCK_DB=1`; `**db:migrate` и `seed` с mock не использовать**.
|
||||
|
||||
## Frontend — локально
|
||||
|
||||
@@ -28,21 +28,22 @@ npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Значение `VITE_API_BASE_URL` см. в **корневом** [`.env.example`](.env.example); для dev по умолчанию `http://localhost:3001`. У бэкенда `CORS_ORIGIN` должен совпадать с origin приложения (например `http://localhost:5173`).
|
||||
Фронт всегда отправляет запросы на относительный префикс `**/api**`. В dev это проксирует Vite на `http://localhost:3001`, в Docker/проде — nginx фронта проксирует на `runners-calendar-backend:3000`. У бэкенда `CORS_ORIGIN` должен совпадать с origin приложения (например `http://localhost:5173`).
|
||||
|
||||
## Docker: backend + frontend рядом с Postgres
|
||||
|
||||
Используйте [`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.
|
||||
Используйте `[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.
|
||||
|
||||
```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
|
||||
docker compose -f docker-compose.stack.yml exec runners-calendar-backend node dist/migrate.js
|
||||
docker compose -f docker-compose.stack.yml exec runners-calendar-backend node dist/seed.js
|
||||
```
|
||||
|
||||
Фронт в браузере обращается к API по префиксу **`/api`** (nginx в образе фронта проксирует на backend).
|
||||
Фронт в браузере обращается к API по префиксу `**/api**` (nginx в образе фронта проксирует на сервис `runners-calendar-backend` в той же сети).
|
||||
|
||||
## Документация API и бэкенда
|
||||
|
||||
- [Шпаргалка API для фронта](docs/backend-api-for-frontend.md)
|
||||
- [Эксплуатация backend](docs/backend.md)
|
||||
|
||||
|
||||
4
backend/package-lock.json
generated
4
backend/package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "calendar-run-backend",
|
||||
"version": "1.0.0",
|
||||
"version": "1.2.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "calendar-run-backend",
|
||||
"version": "1.0.0",
|
||||
"version": "1.2.2",
|
||||
"dependencies": {
|
||||
"cors": "^2.8.5",
|
||||
"csv-parse": "^5.6.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "calendar-run-backend",
|
||||
"version": "1.0.0",
|
||||
"version": "1.2.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
|
||||
@@ -7,11 +7,13 @@ import racesRouter from "./routes/races";
|
||||
export function createApp(): express.Express {
|
||||
const app = express();
|
||||
|
||||
app.use(cors({ origin: config.corsOrigin, methods: ["GET", "POST", "PATCH", "DELETE"] }));
|
||||
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) {
|
||||
|
||||
@@ -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] ?? ""),
|
||||
@@ -108,7 +108,7 @@ function createMockPool(): Pool {
|
||||
if (!existing) {
|
||||
return emptyResult();
|
||||
}
|
||||
const updated = { ...existing, updated_at: new Date().toISOString() };
|
||||
const updated = { ...existing, updated_at: new Date() };
|
||||
store.set(id, updated);
|
||||
return {
|
||||
rows: [updated as unknown as T],
|
||||
|
||||
@@ -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));
|
||||
});
|
||||
|
||||
@@ -10,13 +10,14 @@
|
||||
# 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
|
||||
# docker compose -f docker-compose.stack.yml exec runners-calendar-backend node dist/migrate.js
|
||||
# docker compose -f docker-compose.stack.yml exec runners-calendar-backend node dist/seed.js
|
||||
#
|
||||
# NPM: проброс на порт 3033. Браузер ходит на /api → nginx во фронте → backend:3000.
|
||||
# NPM: проброс на порт 3033. Браузер ходит на /api → nginx во фронте → runners-calendar-backend:3000.
|
||||
# Имя сервиса уникально в общей сети (не «backend»), чтобы не пересекаться с другими стеками.
|
||||
|
||||
services:
|
||||
backend:
|
||||
runners-calendar-backend:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.backend
|
||||
@@ -27,6 +28,9 @@ services:
|
||||
- PORT=3000
|
||||
ports:
|
||||
- "3001:3000"
|
||||
volumes:
|
||||
# CSV и прочие данные import/ на хосте (Synology: ./import рядом с compose) без пересборки образа
|
||||
- ./import:/app/import:ro
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- postgres_default
|
||||
@@ -35,11 +39,9 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile.frontend
|
||||
args:
|
||||
VITE_API_BASE_URL: /api
|
||||
container_name: runners-calendar-frontend
|
||||
depends_on:
|
||||
- backend
|
||||
- runners-calendar-backend
|
||||
ports:
|
||||
- "3033:80"
|
||||
restart: unless-stopped
|
||||
|
||||
@@ -8,10 +8,9 @@ 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_pass http://runners-calendar-backend:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
|
||||
@@ -2,13 +2,10 @@
|
||||
|
||||
## 1. Base URL
|
||||
|
||||
```
|
||||
VITE_API_BASE_URL=http://localhost:3001
|
||||
```
|
||||
SPA всегда отправляет запросы на относительный префикс `/api` текущего origin.
|
||||
|
||||
В коде SPA: `import.meta.env.VITE_API_BASE_URL`.
|
||||
|
||||
В Docker-стеке из репозитория образ фронта собирается с **`VITE_API_BASE_URL=/api`**: запросы идут на тот же origin, nginx проксирует `/api` на backend (см. `docker/nginx.frontend.conf`).
|
||||
- В dev (`npm run dev`): Vite proxy отправляет `/api/*` на `http://localhost:3001/api/*`.
|
||||
- В Docker/проде: nginx фронта проксирует `/api/*` на хост `runners-calendar-backend:3000` в той же сети (уникальное имя сервиса Compose, без коллизий с чужими стеками).
|
||||
|
||||
## 2. CORS
|
||||
|
||||
@@ -22,7 +19,7 @@ CORS_ORIGIN=http://localhost:5173
|
||||
|
||||
## 3. Эндпоинты
|
||||
|
||||
### `GET /health`
|
||||
### `GET /api/health`
|
||||
|
||||
Liveness-проверка (без обращения к БД).
|
||||
|
||||
@@ -34,7 +31,7 @@ Liveness-проверка (без обращения к БД).
|
||||
|
||||
---
|
||||
|
||||
### `GET /ready`
|
||||
### `GET /api/ready`
|
||||
|
||||
Readiness-проверка (проверяет подключение к БД).
|
||||
|
||||
@@ -52,7 +49,7 @@ Readiness-проверка (проверяет подключение к БД).
|
||||
|
||||
---
|
||||
|
||||
### `GET /races`
|
||||
### `GET /api/races`
|
||||
|
||||
Список забегов, отсортированных по дате.
|
||||
|
||||
@@ -70,7 +67,7 @@ Readiness-проверка (проверяет подключение к БД).
|
||||
**Пример запроса:**
|
||||
|
||||
```
|
||||
GET /races?year=2026&month=5
|
||||
GET /api/races?year=2026&month=5
|
||||
```
|
||||
|
||||
**Ответ 200:**
|
||||
@@ -99,7 +96,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `GET /races/:id`
|
||||
### `GET /api/races/:id`
|
||||
|
||||
Одна запись по `id`.
|
||||
|
||||
@@ -113,7 +110,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `POST /races`
|
||||
### `POST /api/races`
|
||||
|
||||
Создание забега.
|
||||
|
||||
@@ -155,7 +152,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `PATCH /races/:id`
|
||||
### `PATCH /api/races/:id`
|
||||
|
||||
Частичное обновление — передавать **только** изменяемые поля.
|
||||
|
||||
@@ -188,7 +185,7 @@ GET /races?year=2026&month=5
|
||||
|
||||
---
|
||||
|
||||
### `DELETE /races/:id`
|
||||
### `DELETE /api/races/:id`
|
||||
|
||||
Удаление забега.
|
||||
|
||||
@@ -210,7 +207,7 @@ GET /races?year=2026&month=5
|
||||
| `distanceKm` | number | да | да | Дистанция в км |
|
||||
| `status` | string \| null | нет | да | `"planned"` / `"registered"` / `"completed"` |
|
||||
| `officialUrl` | string \| null | нет | да | URL организатора |
|
||||
| `startTime` | string \| null | нет | да | Время старта, напр. `"09:30"` |
|
||||
| `startTime` | string \| null | нет | да | Время старта, напр. `"09:30"` или `"09:30:00"` (часы:минуты:секунды) |
|
||||
| `clusterSchedule` | string \| null | нет | да | Расписание кластеров |
|
||||
| `bibPickup` | string \| null | нет | да | Выдача номеров |
|
||||
| `bibNumber` | string \| null | нет | да | Стартовый номер |
|
||||
@@ -220,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)`.
|
||||
@@ -234,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,7 +78,7 @@ API слушает порт: **`PORT`** (если задан), иначе **`API
|
||||
| `API_PORT` | Порт API-сервера | `3001` |
|
||||
| `CORS_ORIGIN` | Разрешённый origin для CORS | `http://localhost:5173` |
|
||||
|
||||
Для локального Vite в корневом `.env.example` также указан **`VITE_API_BASE_URL`** (читает только фронт из `frontend/`). В Docker-стеке базовый URL API задаётся при **сборке** образа фронта (`/api`), не через этот файл.
|
||||
Фронтенд всегда обращается к API по префиксу `/api` на текущем origin. В локальной разработке этот префикс проксирует Vite (`frontend/vite.config.ts`) на `http://localhost:3001`; в Docker-стеке — nginx фронта проксирует на `runners-calendar-backend:3000`.
|
||||
|
||||
**Без mock:** при отсутствии любой из `DB_*` процесс падает при старте: `Missing required environment variable: <NAME>`.
|
||||
|
||||
@@ -87,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" }`.
|
||||
|
||||
## Структура каталога
|
||||
@@ -108,8 +108,8 @@ 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
|
||||
```
|
||||
@@ -118,4 +118,4 @@ backend/
|
||||
|
||||
Файл [`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-файле).
|
||||
Порядок после старта контейнеров: `node dist/migrate.js` и `node dist/seed.js` внутри сервиса `runners-calendar-backend` (см. комментарии в compose-файле).
|
||||
|
||||
52
docs/plan-korrektirovok-starty.md
Normal file
52
docs/plan-korrektirovok-starty.md
Normal file
@@ -0,0 +1,52 @@
|
||||
# План корректировок: форма старта, время, календарь стартов
|
||||
|
||||
Краткое описание реализованных изменений в клиенте **runners-calendar** (версия клиента см. в футере приложения).
|
||||
|
||||
## 1. Форма старта (редактирование прошедшего события)
|
||||
|
||||
При **редактировании** старта, чья **дата уже в прошлом**, в блоке «Организация» скрыты поля, неактуальные после забега:
|
||||
|
||||
- сайт организатора;
|
||||
- время старта;
|
||||
- расписание кластеров;
|
||||
- выдача номеров.
|
||||
|
||||
Значения по-прежнему хранятся в состоянии формы и отправляются при сохранении (не затираются). Утилита: `isRaceDateInPast` в `frontend/src/lib/raceMetrics.ts`.
|
||||
|
||||
## 2. Время старта
|
||||
|
||||
Вместо свободного текста — три селекта (часы, минуты, секунды), компонент `StartTimeSelects` в `frontend/src/components/StartTimeSelects.tsx`. Сохраняется строка `HH:mm:ss` или пусто → `null` в API. Поддерживается разбор старых значений `HH:mm` при загрузке.
|
||||
|
||||
## 3. Список на странице «Календарь стартов»
|
||||
|
||||
Для стартов со статусом **«внесите результат»** вся карточка — ссылка на `/races/:id/edit` с лёгким увеличением и тенью при наведении/фокусе (токен `--shadow-card-lift`).
|
||||
|
||||
## 4. Виды: список и календарь
|
||||
|
||||
- Переключатель **Список / Календарь**, выбор сохраняется в `sessionStorage` (`races-view-mode`).
|
||||
- **Календарь:** загрузка гонок за выбранный **год** (без фильтра месяца в запросе), отображение сетки месяцев.
|
||||
- При выборе **месяца** в фильтре — крупная сетка этого месяца и компактная навигация по остальным месяцам + «Весь год».
|
||||
|
||||
## 5. Ячейка даты в календаре
|
||||
|
||||
- Наведение или фокус: всплывающая панель — либо «Стартов нет» и кнопка **Добавить** (`/races/new?date=YYYY-MM-DD`), либо список стартов со ссылками на карточки и **Добавить**.
|
||||
- Клик по числу — страница дня `/races/day/:ymd`.
|
||||
|
||||
## 6. Страница дня
|
||||
|
||||
Маршрут `races/day/:ymd`: список стартов на дату, пустое состояние, кнопка **Добавить** с предзаполнением даты через query.
|
||||
|
||||
## 7. Новый старт с датой из календаря
|
||||
|
||||
`RaceFormPage` читает query-параметр `?date=YYYY-MM-DD` при создании старта.
|
||||
|
||||
## Основные файлы
|
||||
|
||||
| Область | Файлы |
|
||||
|--------|--------|
|
||||
| Метрики даты | `frontend/src/lib/raceMetrics.ts`, `frontend/src/lib/calendarUtils.ts` |
|
||||
| Форма | `frontend/src/pages/RaceFormPage.tsx`, `frontend/src/components/StartTimeSelects.tsx` |
|
||||
| Список и календарь | `frontend/src/pages/RacesPage.tsx`, `frontend/src/components/RacesCalendar.tsx` |
|
||||
| День | `frontend/src/pages/RaceDayPage.tsx`, `frontend/src/app/router.tsx` |
|
||||
| Стили | `frontend/src/styles/global.css`, `frontend/src/styles/tokens.css` |
|
||||
| API-док | `docs/backend-api-for-frontend.md` (формат `startTime`) |
|
||||
@@ -1,2 +1,2 @@
|
||||
# Для локального npm run dev. Полный список переменных — в корневом .env.example репозитория.
|
||||
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>
|
||||
|
||||
4
frontend/package-lock.json
generated
4
frontend/package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "calendar-run-frontend",
|
||||
"version": "0.1.0",
|
||||
"version": "0.4.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "calendar-run-frontend",
|
||||
"version": "0.1.0",
|
||||
"version": "0.4.2",
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "calendar-run-frontend",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"version": "0.4.2",
|
||||
"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,31 +1,71 @@
|
||||
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;
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("content-type") ?? "";
|
||||
if (contentType.includes("application/json")) {
|
||||
try {
|
||||
return await response.json();
|
||||
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> {
|
||||
const method = (init?.method ?? "GET").toUpperCase();
|
||||
const idempotent = method === "GET" || method === "HEAD";
|
||||
const maxAttempts = idempotent ? 3 : 1;
|
||||
|
||||
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: {
|
||||
"Content-Type": "application/json",
|
||||
...defaultHeaders,
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
});
|
||||
@@ -37,6 +77,11 @@ export async function requestJson<T>(path: string, init?: RequestInit): Promise<
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -45,11 +90,25 @@ export async function requestJson<T>(path: string, init?: RequestInit): Promise<
|
||||
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: "Не удалось связаться с сервером.",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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,7 +22,7 @@ export function AppLayout(): JSX.Element {
|
||||
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
|
||||
}
|
||||
>
|
||||
Races
|
||||
Старты
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/races/new"
|
||||
@@ -36,6 +37,7 @@ export function AppLayout(): JSX.Element {
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { DashboardPage } from "../pages/DashboardPage";
|
||||
import { RacesPage } from "../pages/RacesPage";
|
||||
import { RaceDetailsPage } from "../pages/RaceDetailsPage";
|
||||
import { RaceFormPage } from "../pages/RaceFormPage";
|
||||
import { RaceDayPage } from "../pages/RaceDayPage";
|
||||
|
||||
export const appRouter = createBrowserRouter([
|
||||
{
|
||||
@@ -13,6 +14,7 @@ export const appRouter = createBrowserRouter([
|
||||
{ index: true, element: <DashboardPage /> },
|
||||
{ path: "races", element: <RacesPage /> },
|
||||
{ path: "races/new", element: <RaceFormPage /> },
|
||||
{ path: "races/day/:ymd", element: <RaceDayPage /> },
|
||||
{ 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)!;
|
||||
|
||||
248
frontend/src/components/RacesCalendar.tsx
Normal file
248
frontend/src/components/RacesCalendar.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
import { useCallback, useMemo, useRef, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import type { Race } from "../api";
|
||||
import { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib";
|
||||
|
||||
const MONTH_NAMES_RU_SHORT = [
|
||||
"янв.",
|
||||
"февр.",
|
||||
"мар.",
|
||||
"апр.",
|
||||
"мая",
|
||||
"июн.",
|
||||
"июл.",
|
||||
"авг.",
|
||||
"сент.",
|
||||
"окт.",
|
||||
"нояб.",
|
||||
"дек.",
|
||||
];
|
||||
|
||||
const POPOVER_LEAVE_MS = 140;
|
||||
|
||||
interface RacesCalendarProps {
|
||||
displayYear: number;
|
||||
monthFilter: string;
|
||||
races: Race[];
|
||||
onMonthFilterChange: (value: string) => void;
|
||||
}
|
||||
|
||||
function DayPopover(props: {
|
||||
ymd: string;
|
||||
races: Race[];
|
||||
onCancelClose: () => void;
|
||||
onScheduleClose: () => void;
|
||||
}): JSX.Element {
|
||||
const { ymd, races, onCancelClose, onScheduleClose } = props;
|
||||
const hasRaces = races.length > 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="races-cal__popover"
|
||||
role="tooltip"
|
||||
onMouseEnter={onCancelClose}
|
||||
onMouseLeave={onScheduleClose}
|
||||
>
|
||||
{hasRaces ? (
|
||||
<ul className="races-cal__popover-list">
|
||||
{races.map((r) => (
|
||||
<li key={r.id} className="races-cal__popover-item">
|
||||
<Link className="races-cal__popover-link" to={`/races/${r.id}`} onClick={onCancelClose}>
|
||||
{r.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="races-cal__popover-empty">Стартов нет</p>
|
||||
)}
|
||||
<Link
|
||||
className="btn btn--secondary races-cal__popover-add"
|
||||
to={`/races/new?date=${ymd}`}
|
||||
onClick={onCancelClose}
|
||||
>
|
||||
Добавить
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarMonthBlock(props: {
|
||||
year: number;
|
||||
monthIndex: number;
|
||||
racesByYmd: Map<string, Race[]>;
|
||||
compact: boolean;
|
||||
navigate: ReturnType<typeof useNavigate>;
|
||||
openYmd: string | null;
|
||||
setOpenYmd: (v: string | null) => void;
|
||||
scheduleClose: () => void;
|
||||
cancelClose: () => void;
|
||||
}): JSX.Element {
|
||||
const {
|
||||
year,
|
||||
monthIndex,
|
||||
racesByYmd,
|
||||
compact,
|
||||
navigate,
|
||||
openYmd,
|
||||
setOpenYmd,
|
||||
scheduleClose,
|
||||
cancelClose,
|
||||
} = props;
|
||||
const cells = useMemo(() => buildMonthCells(year, monthIndex), [year, monthIndex]);
|
||||
const title = `${MONTH_NAMES_RU_SHORT[monthIndex]} ${year}`;
|
||||
|
||||
const blockClass = compact ? "races-cal__month races-cal__month--compact" : "races-cal__month";
|
||||
|
||||
return (
|
||||
<div className={blockClass}>
|
||||
<h3 className="races-cal__month-title">{title}</h3>
|
||||
<div className="races-cal__weekdays" aria-hidden>
|
||||
{WEEKDAY_LABELS_SHORT_RU.map((d) => (
|
||||
<span key={d} className="races-cal__weekday">
|
||||
{d}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="races-cal__cells">
|
||||
{cells.map((day, idx) => {
|
||||
if (day === null) {
|
||||
return <div key={`e-${idx}`} className="races-cal__cell races-cal__cell--empty" />;
|
||||
}
|
||||
const ymd = toYmd(year, monthIndex, day);
|
||||
const dayRaces = racesByYmd.get(ymd) ?? [];
|
||||
const hasRaces = dayRaces.length > 0;
|
||||
const isOpen = openYmd === ymd;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={ymd}
|
||||
className={`races-cal__cell${hasRaces ? " races-cal__cell--has-race" : ""}${isOpen ? " races-cal__cell--open" : ""}`}
|
||||
onMouseEnter={() => {
|
||||
cancelClose();
|
||||
setOpenYmd(ymd);
|
||||
}}
|
||||
onMouseLeave={scheduleClose}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="races-cal__day-btn"
|
||||
onClick={() => {
|
||||
navigate(`/races/day/${ymd}`);
|
||||
}}
|
||||
onFocus={() => {
|
||||
cancelClose();
|
||||
setOpenYmd(ymd);
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
const next = e.relatedTarget as Node | null;
|
||||
if (next && e.currentTarget.closest(".races-cal__cell")?.contains(next)) {
|
||||
return;
|
||||
}
|
||||
scheduleClose();
|
||||
}}
|
||||
>
|
||||
{day}
|
||||
</button>
|
||||
{isOpen ? (
|
||||
<DayPopover
|
||||
ymd={ymd}
|
||||
races={dayRaces}
|
||||
onCancelClose={cancelClose}
|
||||
onScheduleClose={scheduleClose}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
|
||||
const { displayYear, monthFilter, races, onMonthFilterChange } = props;
|
||||
const navigate = useNavigate();
|
||||
const [openYmd, setOpenYmd] = useState<string | null>(null);
|
||||
const leaveTimerRef = useRef<number | null>(null);
|
||||
|
||||
const cancelClose = useCallback(() => {
|
||||
if (leaveTimerRef.current !== null) {
|
||||
window.clearTimeout(leaveTimerRef.current);
|
||||
leaveTimerRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const scheduleClose = useCallback(() => {
|
||||
cancelClose();
|
||||
leaveTimerRef.current = window.setTimeout(() => {
|
||||
setOpenYmd(null);
|
||||
leaveTimerRef.current = null;
|
||||
}, POPOVER_LEAVE_MS);
|
||||
}, [cancelClose]);
|
||||
|
||||
const racesByYmd = useMemo(() => groupRacesByYmd(races), [races]);
|
||||
|
||||
const focusedMonthIndex = monthFilter === "" ? null : parseInt(monthFilter, 10) - 1;
|
||||
|
||||
return (
|
||||
<div className="races-cal">
|
||||
<p className="races-cal__hint">Наведите на дату — краткая информация. Клик — страница дня.</p>
|
||||
{focusedMonthIndex === null || Number.isNaN(focusedMonthIndex) ? (
|
||||
<div className="races-cal__year">
|
||||
{MONTH_NAMES_RU_SHORT.map((_, mi) => (
|
||||
<CalendarMonthBlock
|
||||
key={mi}
|
||||
year={displayYear}
|
||||
monthIndex={mi}
|
||||
racesByYmd={racesByYmd}
|
||||
compact
|
||||
navigate={navigate}
|
||||
openYmd={openYmd}
|
||||
setOpenYmd={setOpenYmd}
|
||||
scheduleClose={scheduleClose}
|
||||
cancelClose={cancelClose}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="races-cal__month-focus">
|
||||
<nav className="races-cal__month-nav" aria-label="Месяцы года">
|
||||
{MONTH_NAMES_RU_SHORT.map((label, mi) => (
|
||||
<button
|
||||
key={label}
|
||||
type="button"
|
||||
className={`races-cal__month-nav-item${mi === focusedMonthIndex ? " races-cal__month-nav-item--active" : ""}`}
|
||||
onClick={() => {
|
||||
onMonthFilterChange(String(mi + 1));
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="races-cal__month-nav-item races-cal__month-nav-item--all"
|
||||
onClick={() => {
|
||||
onMonthFilterChange("");
|
||||
}}
|
||||
>
|
||||
Весь год
|
||||
</button>
|
||||
</nav>
|
||||
<CalendarMonthBlock
|
||||
year={displayYear}
|
||||
monthIndex={focusedMonthIndex}
|
||||
racesByYmd={racesByYmd}
|
||||
compact={false}
|
||||
navigate={navigate}
|
||||
openYmd={openYmd}
|
||||
setOpenYmd={setOpenYmd}
|
||||
scheduleClose={scheduleClose}
|
||||
cancelClose={cancelClose}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
frontend/src/components/StartTimeSelects.tsx
Normal file
157
frontend/src/components/StartTimeSelects.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
|
||||
function pad2(n: number): string {
|
||||
return String(n).padStart(2, "0");
|
||||
}
|
||||
|
||||
function parseToParts(value: string): { h: number | null; m: number | null; s: number | null } {
|
||||
const t = value.trim();
|
||||
if (!t) {
|
||||
return { h: null, m: null, s: null };
|
||||
}
|
||||
const parts = t.split(":").map((p) => p.trim());
|
||||
if (parts.length === 2) {
|
||||
const h = Number(parts[0]);
|
||||
const m = Number(parts[1]);
|
||||
if (Number.isInteger(h) && Number.isInteger(m) && h >= 0 && h <= 23 && m >= 0 && m <= 59) {
|
||||
return { h, m, s: 0 };
|
||||
}
|
||||
}
|
||||
if (parts.length >= 3) {
|
||||
const h = Number(parts[0]);
|
||||
const m = Number(parts[1]);
|
||||
const s = Number(parts[2]);
|
||||
if (
|
||||
Number.isInteger(h) &&
|
||||
Number.isInteger(m) &&
|
||||
Number.isInteger(s) &&
|
||||
h >= 0 &&
|
||||
h <= 23 &&
|
||||
m >= 0 &&
|
||||
m <= 59 &&
|
||||
s >= 0 &&
|
||||
s <= 59
|
||||
) {
|
||||
return { h, m, s };
|
||||
}
|
||||
}
|
||||
return { h: null, m: null, s: null };
|
||||
}
|
||||
|
||||
function partsToString(h: number | null, m: number | null, s: number | null): string {
|
||||
if (h === null || m === null || s === null) {
|
||||
return "";
|
||||
}
|
||||
return `${pad2(h)}:${pad2(m)}:${pad2(s)}`;
|
||||
}
|
||||
|
||||
const HOURS = Array.from({ length: 24 }, (_, i) => i);
|
||||
const MIN_SEC = Array.from({ length: 60 }, (_, i) => i);
|
||||
|
||||
interface StartTimeSelectsProps {
|
||||
value: string;
|
||||
onChange: (next: string) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function StartTimeSelects(props: StartTimeSelectsProps): JSX.Element {
|
||||
const { value, onChange, disabled } = props;
|
||||
const { h, m, s } = useMemo(() => parseToParts(value), [value]);
|
||||
|
||||
const emit = useCallback(
|
||||
(nextH: number | null, nextM: number | null, nextS: number | null) => {
|
||||
onChange(partsToString(nextH, nextM, nextS));
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const hourVal = h === null ? "" : String(h);
|
||||
const minVal = m === null ? "" : String(m);
|
||||
const secVal = s === null ? "" : String(s);
|
||||
|
||||
return (
|
||||
<div className="race-form__time-picker">
|
||||
<label className="race-form__time-picker__unit">
|
||||
<span className="race-form__time-picker__label">Часы</span>
|
||||
<select
|
||||
className="race-form__input race-form__time-picker__select"
|
||||
aria-label="Часы"
|
||||
disabled={disabled}
|
||||
value={hourVal}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "") {
|
||||
emit(null, null, null);
|
||||
return;
|
||||
}
|
||||
const nh = Number(v);
|
||||
emit(nh, m ?? 0, s ?? 0);
|
||||
}}
|
||||
>
|
||||
<option value="">—</option>
|
||||
{HOURS.map((n) => (
|
||||
<option key={n} value={String(n)}>
|
||||
{pad2(n)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<span className="race-form__time-picker__sep" aria-hidden>
|
||||
:
|
||||
</span>
|
||||
<label className="race-form__time-picker__unit">
|
||||
<span className="race-form__time-picker__label">Минуты</span>
|
||||
<select
|
||||
className="race-form__input race-form__time-picker__select"
|
||||
aria-label="Минуты"
|
||||
disabled={disabled}
|
||||
value={minVal}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "") {
|
||||
emit(null, null, null);
|
||||
return;
|
||||
}
|
||||
const nm = Number(v);
|
||||
emit(h ?? 0, nm, s ?? 0);
|
||||
}}
|
||||
>
|
||||
<option value="">—</option>
|
||||
{MIN_SEC.map((n) => (
|
||||
<option key={n} value={String(n)}>
|
||||
{pad2(n)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<span className="race-form__time-picker__sep" aria-hidden>
|
||||
:
|
||||
</span>
|
||||
<label className="race-form__time-picker__unit">
|
||||
<span className="race-form__time-picker__label">Секунды</span>
|
||||
<select
|
||||
className="race-form__input race-form__time-picker__select"
|
||||
aria-label="Секунды"
|
||||
disabled={disabled}
|
||||
value={secVal}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value;
|
||||
if (v === "") {
|
||||
emit(null, null, null);
|
||||
return;
|
||||
}
|
||||
const ns = Number(v);
|
||||
emit(h ?? 0, m ?? 0, ns);
|
||||
}}
|
||||
>
|
||||
<option value="">—</option>
|
||||
{MIN_SEC.map((n) => (
|
||||
<option key={n} value={String(n)}>
|
||||
{pad2(n)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1 +1,3 @@
|
||||
export { PaceTrendChart } from "./PaceTrendChart";
|
||||
export { RacesCalendar } from "./RacesCalendar";
|
||||
export { StartTimeSelects } from "./StartTimeSelects";
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
49
frontend/src/lib/calendarUtils.ts
Normal file
49
frontend/src/lib/calendarUtils.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import type { Race } from "../api";
|
||||
|
||||
export const WEEKDAY_LABELS_SHORT_RU: string[] = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"];
|
||||
|
||||
/** Monday-based week: Mon=0 … Sun=6 */
|
||||
export function mondayIndexFromDate(d: Date): number {
|
||||
return (d.getDay() + 6) % 7;
|
||||
}
|
||||
|
||||
/** Grid cells for one month: `null` = empty, `1..31` = day of month. Padded to full weeks, at least 6 rows. */
|
||||
export function buildMonthCells(year: number, monthIndex: number): (number | null)[] {
|
||||
const first = new Date(year, monthIndex, 1);
|
||||
const lead = mondayIndexFromDate(first);
|
||||
const dim = new Date(year, monthIndex + 1, 0).getDate();
|
||||
const cells: (number | null)[] = [];
|
||||
for (let i = 0; i < lead; i += 1) {
|
||||
cells.push(null);
|
||||
}
|
||||
for (let day = 1; day <= dim; day += 1) {
|
||||
cells.push(day);
|
||||
}
|
||||
while (cells.length % 7 !== 0) {
|
||||
cells.push(null);
|
||||
}
|
||||
while (cells.length < 42) {
|
||||
cells.push(null);
|
||||
}
|
||||
return cells;
|
||||
}
|
||||
|
||||
export function toYmd(year: number, monthIndex: number, day: number): string {
|
||||
const m = String(monthIndex + 1).padStart(2, "0");
|
||||
const d = String(day).padStart(2, "0");
|
||||
return `${year}-${m}-${d}`;
|
||||
}
|
||||
|
||||
export function groupRacesByYmd(races: Race[]): Map<string, Race[]> {
|
||||
const map = new Map<string, Race[]>();
|
||||
for (const race of races) {
|
||||
const ymd = race.date.slice(0, 10);
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) {
|
||||
continue;
|
||||
}
|
||||
const list = map.get(ymd) ?? [];
|
||||
list.push(race);
|
||||
map.set(ymd, list);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
@@ -6,8 +6,13 @@ export {
|
||||
getRaceStatusClassName,
|
||||
getRaceStatusLabel,
|
||||
isCloseDistance,
|
||||
isRaceDateInPast,
|
||||
parseFinishTimeToSeconds,
|
||||
parseRaceDate,
|
||||
raceNeedsResultEntry,
|
||||
sortByDateAsc,
|
||||
sortByDateDesc,
|
||||
splitRacesByDate,
|
||||
} from "./raceMetrics";
|
||||
|
||||
export { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "./calendarUtils";
|
||||
|
||||
@@ -2,8 +2,21 @@ 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 isRaceDateInPast(raceDate: string, now: Date = new Date()): boolean {
|
||||
const today = new Date(now);
|
||||
today.setHours(0, 0, 0, 0);
|
||||
return parseRaceDate(raceDate).getTime() < today.getTime();
|
||||
}
|
||||
|
||||
export function parseFinishTimeToSeconds(value: string | null): number | null {
|
||||
@@ -116,18 +129,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 "пробежал";
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import type { Race } from "../api";
|
||||
import { ApiError, getRaces } from "../api";
|
||||
import { PaceTrendChart } from "../components";
|
||||
@@ -9,6 +10,7 @@ import {
|
||||
getPaceLabel,
|
||||
isCloseDistance,
|
||||
parseFinishTimeToSeconds,
|
||||
parseRaceDate,
|
||||
splitRacesByDate,
|
||||
} from "../lib";
|
||||
|
||||
@@ -18,7 +20,7 @@ function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof ApiError) {
|
||||
return error.message;
|
||||
}
|
||||
return "Не удалось загрузить данные dashboard.";
|
||||
return "Не удалось загрузить данные обзора.";
|
||||
}
|
||||
|
||||
export function DashboardPage(): JSX.Element {
|
||||
@@ -28,23 +30,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,40 +56,29 @@ export function DashboardPage(): JSX.Element {
|
||||
void loadDashboardData();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const dashboardMetrics = useMemo(() => {
|
||||
const { upcoming, past } = splitRacesByDate(races);
|
||||
const completed = races.filter((race) => race.status === "completed");
|
||||
|
||||
const nextRace = upcoming[0] ?? null;
|
||||
const lastResult = past.find((race) => race.status === "completed") ?? null;
|
||||
|
||||
let personalRecord: Race | null = null;
|
||||
let personalRecordSeconds = Number.POSITIVE_INFINITY;
|
||||
|
||||
for (const race of completed) {
|
||||
const finishSeconds = parseFinishTimeToSeconds(race.finishTime);
|
||||
if (!finishSeconds) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const candidate = finishSeconds / race.distanceKm;
|
||||
if (candidate < personalRecordSeconds) {
|
||||
personalRecordSeconds = candidate;
|
||||
personalRecord = race;
|
||||
}
|
||||
}
|
||||
const lastPersonalRecord =
|
||||
past.find(
|
||||
(race) => race.status === "completed" && parseFinishTimeToSeconds(race.finishTime) !== null,
|
||||
) ?? null;
|
||||
|
||||
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 {
|
||||
nextRace,
|
||||
lastResult,
|
||||
personalRecord,
|
||||
lastPersonalRecord,
|
||||
seasonTotal: seasonRaces.length,
|
||||
seasonCompletedCount: seasonCompleted.length,
|
||||
};
|
||||
@@ -130,7 +122,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 +135,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 +144,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,52 +152,83 @@ 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="Ключевые метрики">
|
||||
<article className="dashboard-card">
|
||||
<h2 className="dashboard-card__title">Ближайший старт</h2>
|
||||
<article
|
||||
className={`dashboard-card${dashboardMetrics.nextRace ? " dashboard-card--linked" : ""}`}
|
||||
>
|
||||
{dashboardMetrics.nextRace ? (
|
||||
<>
|
||||
<Link
|
||||
className="dashboard-card__link-surface"
|
||||
to={`/races/${dashboardMetrics.nextRace.id}`}
|
||||
aria-label={`Ближайший старт: ${dashboardMetrics.nextRace.title}`}
|
||||
>
|
||||
<h2 className="dashboard-card__title">Ближайший старт</h2>
|
||||
<p className="dashboard-card__value">{dashboardMetrics.nextRace.title}</p>
|
||||
<p className="dashboard-card__meta">
|
||||
{formatRaceDate(dashboardMetrics.nextRace.date)} · {formatDistance(dashboardMetrics.nextRace.distanceKm)}
|
||||
{formatRaceDate(dashboardMetrics.nextRace.date)} ·{" "}
|
||||
{formatDistance(dashboardMetrics.nextRace.distanceKm)}
|
||||
</p>
|
||||
<p className="dashboard-card__hint">{getRaceCountdownLabel(dashboardMetrics.nextRace.date)}</p>
|
||||
</>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="dashboard-card__title">Ближайший старт</h2>
|
||||
<p className="dashboard-card__empty">Нет запланированных стартов.</p>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="dashboard-card">
|
||||
<h2 className="dashboard-card__title">Последний результат</h2>
|
||||
<article
|
||||
className={`dashboard-card${dashboardMetrics.lastResult ? " dashboard-card--linked" : ""}`}
|
||||
>
|
||||
{dashboardMetrics.lastResult ? (
|
||||
<>
|
||||
<Link
|
||||
className="dashboard-card__link-surface"
|
||||
to={`/races/${dashboardMetrics.lastResult.id}`}
|
||||
aria-label={`Последний результат: ${dashboardMetrics.lastResult.title}`}
|
||||
>
|
||||
<h2 className="dashboard-card__title">Последний результат</h2>
|
||||
<p className="dashboard-card__value">{dashboardMetrics.lastResult.finishTime ?? "время не указано"}</p>
|
||||
<p className="dashboard-card__meta">
|
||||
{dashboardMetrics.lastResult.title} · {formatDistance(dashboardMetrics.lastResult.distanceKm)}
|
||||
</p>
|
||||
<p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastResult.date)}</p>
|
||||
</>
|
||||
</Link>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="dashboard-card__title">Последний результат</h2>
|
||||
<p className="dashboard-card__empty">Пока нет завершённых стартов.</p>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="dashboard-card">
|
||||
<h2 className="dashboard-card__title">Личный рекорд</h2>
|
||||
{dashboardMetrics.personalRecord ? (
|
||||
<>
|
||||
<p className="dashboard-card__value">{dashboardMetrics.personalRecord.finishTime ?? "время не указано"}</p>
|
||||
<p className="dashboard-card__meta">
|
||||
{dashboardMetrics.personalRecord.title} · {formatDistance(dashboardMetrics.personalRecord.distanceKm)}
|
||||
<article
|
||||
className={`dashboard-card${dashboardMetrics.lastPersonalRecord ? " dashboard-card--linked" : ""}`}
|
||||
>
|
||||
{dashboardMetrics.lastPersonalRecord ? (
|
||||
<Link
|
||||
className="dashboard-card__link-surface"
|
||||
to={`/races/${dashboardMetrics.lastPersonalRecord.id}`}
|
||||
aria-label={`Последний личный рекорд: ${dashboardMetrics.lastPersonalRecord.title}`}
|
||||
>
|
||||
<h2 className="dashboard-card__title">Последний личный рекорд</h2>
|
||||
<p className="dashboard-card__value">
|
||||
{dashboardMetrics.lastPersonalRecord.finishTime ?? "время не указано"}
|
||||
</p>
|
||||
<p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
|
||||
</>
|
||||
<p className="dashboard-card__meta">
|
||||
{dashboardMetrics.lastPersonalRecord.title} ·{" "}
|
||||
{formatDistance(dashboardMetrics.lastPersonalRecord.distanceKm)}
|
||||
</p>
|
||||
<p className="dashboard-card__hint">{formatRaceDate(dashboardMetrics.lastPersonalRecord.date)}</p>
|
||||
</Link>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Недостаточно данных для PR.</p>
|
||||
<>
|
||||
<h2 className="dashboard-card__title">Последний личный рекорд</h2>
|
||||
<p className="dashboard-card__empty">Нет завершённых стартов с финишным временем.</p>
|
||||
</>
|
||||
)}
|
||||
</article>
|
||||
|
||||
@@ -242,7 +265,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 +314,7 @@ export function DashboardPage(): JSX.Element {
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<p className="dashboard-card__empty">Нет completed-стартов для сравнения.</p>
|
||||
<p className="dashboard-card__empty">Нет завершённых стартов для сравнения.</p>
|
||||
)}
|
||||
</section>
|
||||
</section>
|
||||
|
||||
133
frontend/src/pages/RaceDayPage.tsx
Normal file
133
frontend/src/pages/RaceDayPage.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import type { Race } from "../api";
|
||||
import { ApiError, getRaces } from "../api";
|
||||
import { formatDistance, formatRaceDate, getRaceStatusClassName, getRaceStatusLabel, sortByDateAsc } from "../lib";
|
||||
|
||||
function getErrorMessage(error: unknown): string {
|
||||
if (error instanceof ApiError) {
|
||||
return error.message;
|
||||
}
|
||||
return "Не удалось загрузить старты.";
|
||||
}
|
||||
|
||||
export function RaceDayPage(): JSX.Element {
|
||||
const { ymd } = useParams<{ ymd: string }>();
|
||||
const [races, setRaces] = useState<Race[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
|
||||
const validYmd = ymd && /^\d{4}-\d{2}-\d{2}$/.test(ymd) ? ymd : null;
|
||||
const year = validYmd ? parseInt(validYmd.slice(0, 4), 10) : NaN;
|
||||
|
||||
useEffect(() => {
|
||||
if (!validYmd || Number.isNaN(year)) {
|
||||
setIsLoading(false);
|
||||
setRaces([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const ac = new AbortController();
|
||||
let mounted = true;
|
||||
|
||||
async function load(): Promise<void> {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const items = await getRaces({ year }, { signal: ac.signal });
|
||||
if (!mounted || ac.signal.aborted) {
|
||||
return;
|
||||
}
|
||||
const forDay = items.filter((r) => r.date.slice(0, 10) === validYmd);
|
||||
setRaces(sortByDateAsc(forDay));
|
||||
setErrorMessage(null);
|
||||
} catch (e) {
|
||||
if (ac.signal.aborted || !mounted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage(getErrorMessage(e));
|
||||
setRaces([]);
|
||||
} finally {
|
||||
if (mounted && !ac.signal.aborted) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void load();
|
||||
return () => {
|
||||
mounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, [validYmd, year]);
|
||||
|
||||
const heading = useMemo(() => {
|
||||
if (!validYmd) {
|
||||
return "Дата не указана";
|
||||
}
|
||||
return formatRaceDate(validYmd);
|
||||
}, [validYmd]);
|
||||
|
||||
if (!validYmd) {
|
||||
return (
|
||||
<section className="page page--race-day">
|
||||
<h1 className="page__title">Некорректная дата</h1>
|
||||
<p className="page__subtitle">
|
||||
<Link className="page-link" to="/races">
|
||||
Вернуться к календарю стартов
|
||||
</Link>
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="page page--race-day">
|
||||
<p className="page__subtitle">
|
||||
<Link className="page-link" to="/races">
|
||||
← Календарь стартов
|
||||
</Link>
|
||||
</p>
|
||||
<h1 className="page__title">{heading}</h1>
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="page__subtitle page__subtitle--error" role="alert">
|
||||
{errorMessage}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{isLoading ? (
|
||||
<p className="page__subtitle" aria-busy="true">
|
||||
Загружаем…
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!isLoading && !errorMessage && races.length === 0 ? (
|
||||
<p className="page__subtitle">На эту дату стартов нет.</p>
|
||||
) : null}
|
||||
|
||||
{!isLoading && races.length > 0 ? (
|
||||
<ul className="race-day__list">
|
||||
{races.map((race) => (
|
||||
<li key={race.id} className="race-day__item">
|
||||
<Link className="race-day__link" to={`/races/${race.id}`}>
|
||||
{race.title}
|
||||
</Link>
|
||||
<span className="race-day__meta">
|
||||
{formatDistance(race.distanceKm)} ·{" "}
|
||||
<span className={getRaceStatusClassName(race.status, race.date)}>
|
||||
{getRaceStatusLabel(race.status, race.date)}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
<div className="race-day__actions">
|
||||
<Link className="btn btn--primary" to={`/races/new?date=${validYmd}`}>
|
||||
Добавить
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
getPaceLabel,
|
||||
getRaceStatusClassName,
|
||||
getRaceStatusLabel,
|
||||
raceNeedsResultEntry,
|
||||
} from "../lib";
|
||||
import type { Race } from "../api";
|
||||
|
||||
@@ -57,6 +58,7 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const ac = new AbortController();
|
||||
let isMounted = true;
|
||||
|
||||
async function loadRace(): Promise<void> {
|
||||
@@ -67,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);
|
||||
}
|
||||
}
|
||||
@@ -88,6 +90,7 @@ export function RaceDetailsPage(): JSX.Element {
|
||||
void loadRace();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, [raceId]);
|
||||
|
||||
@@ -146,9 +149,19 @@ 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`}>
|
||||
Редактировать
|
||||
@@ -200,7 +213,7 @@ 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} />
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||
import { ApiError, createRace, getRaceById, updateRace } from "../api";
|
||||
import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
|
||||
import { StartTimeSelects } from "../components/StartTimeSelects";
|
||||
import { isRaceDateInPast, parseFinishTimeToSeconds } from "../lib";
|
||||
|
||||
function slugify(text: string): string {
|
||||
return text
|
||||
@@ -54,8 +56,9 @@ const EMPTY_FORM: FormData = {
|
||||
};
|
||||
|
||||
function raceToFormData(race: Race): FormData {
|
||||
const dateValue = race.date.length >= 10 ? race.date.slice(0, 10) : race.date;
|
||||
return {
|
||||
date: race.date,
|
||||
date: dateValue,
|
||||
title: race.title,
|
||||
distanceKm: String(race.distanceKm),
|
||||
status: race.status ?? "",
|
||||
@@ -93,6 +96,7 @@ function validateForm(form: FormData): string[] {
|
||||
export function RaceFormPage(): JSX.Element {
|
||||
const { raceId } = useParams<{ raceId: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const isEditMode = Boolean(raceId);
|
||||
|
||||
const [form, setForm] = useState<FormData>(EMPTY_FORM);
|
||||
@@ -134,10 +138,29 @@ export function RaceFormPage(): JSX.Element {
|
||||
};
|
||||
}, [raceId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEditMode) {
|
||||
return;
|
||||
}
|
||||
const d = searchParams.get("date");
|
||||
if (d && /^\d{4}-\d{2}-\d{2}$/.test(d)) {
|
||||
setForm((prev) => (prev.date === d ? prev : { ...prev, date: d }));
|
||||
}
|
||||
}, [isEditMode, searchParams]);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = event.target;
|
||||
setForm((prev) => ({ ...prev, [name]: value }));
|
||||
setForm((prev) => {
|
||||
const next = { ...prev, [name]: value };
|
||||
if (name === "finishTime") {
|
||||
const trimmed = value.trim();
|
||||
if (trimmed !== "" && parseFinishTimeToSeconds(trimmed) !== null) {
|
||||
return { ...next, status: "completed" };
|
||||
}
|
||||
}
|
||||
return next;
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
@@ -156,10 +179,16 @@ export function RaceFormPage(): JSX.Element {
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
const statusValue: RaceStatus | null =
|
||||
const finishTrimmed = form.finishTime.trim();
|
||||
const hasParsedFinish =
|
||||
finishTrimmed !== "" && parseFinishTimeToSeconds(finishTrimmed) !== null;
|
||||
let statusValue: RaceStatus | null =
|
||||
form.status === "planned" || form.status === "registered" || form.status === "completed"
|
||||
? form.status
|
||||
: null;
|
||||
if (hasParsedFinish) {
|
||||
statusValue = "completed";
|
||||
}
|
||||
|
||||
if (isEditMode && raceId) {
|
||||
const payload: UpdateRacePayload = {
|
||||
@@ -213,6 +242,7 @@ export function RaceFormPage(): JSX.Element {
|
||||
[form, isEditMode, raceId, navigate],
|
||||
);
|
||||
|
||||
const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
|
||||
const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
|
||||
|
||||
if (isLoading) {
|
||||
@@ -302,6 +332,7 @@ export function RaceFormPage(): JSX.Element {
|
||||
<fieldset className="race-form__group">
|
||||
<legend className="race-form__legend">Организация</legend>
|
||||
|
||||
{hideOrgScheduleFields ? null : (
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Сайт организатора</span>
|
||||
<input
|
||||
@@ -310,22 +341,24 @@ export function RaceFormPage(): JSX.Element {
|
||||
name="officialUrl"
|
||||
value={form.officialUrl}
|
||||
onChange={handleChange}
|
||||
placeholder="https://example.com"
|
||||
placeholder="https://…"
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="race-form__field">
|
||||
{hideOrgScheduleFields ? null : (
|
||||
<div className="race-form__field">
|
||||
<span className="race-form__label">Время старта</span>
|
||||
<input
|
||||
className="race-form__input"
|
||||
type="text"
|
||||
name="startTime"
|
||||
<StartTimeSelects
|
||||
value={form.startTime}
|
||||
onChange={handleChange}
|
||||
placeholder="09:30"
|
||||
onChange={(next) => {
|
||||
setForm((prev) => ({ ...prev, startTime: next }));
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hideOrgScheduleFields ? null : (
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Расписание кластеров</span>
|
||||
<input
|
||||
@@ -336,7 +369,9 @@ export function RaceFormPage(): JSX.Element {
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{hideOrgScheduleFields ? null : (
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Выдача номеров</span>
|
||||
<input
|
||||
@@ -347,6 +382,7 @@ export function RaceFormPage(): JSX.Element {
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="race-form__field">
|
||||
<span className="race-form__label">Стартовый номер</span>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import type { Race, RacesQuery } from "../api";
|
||||
import { ApiError, getRaces } from "../api";
|
||||
import { RacesCalendar } from "../components/RacesCalendar";
|
||||
import {
|
||||
formatDistance,
|
||||
formatRaceDate,
|
||||
@@ -26,6 +27,10 @@ const MONTH_OPTIONS: { value: string; label: string }[] = [
|
||||
{ value: "12", label: "Декабрь" },
|
||||
];
|
||||
|
||||
const VIEW_STORAGE_KEY = "races-view-mode";
|
||||
|
||||
type ViewMode = "list" | "calendar";
|
||||
|
||||
function yearSelectOptions(): number[] {
|
||||
const current = new Date().getFullYear();
|
||||
const start = current - 2;
|
||||
@@ -44,6 +49,15 @@ function getErrorMessage(error: unknown): string {
|
||||
return "Не удалось загрузить календарь стартов.";
|
||||
}
|
||||
|
||||
function readInitialViewMode(): ViewMode {
|
||||
try {
|
||||
const v = sessionStorage.getItem(VIEW_STORAGE_KEY);
|
||||
return v === "calendar" ? "calendar" : "list";
|
||||
} catch {
|
||||
return "list";
|
||||
}
|
||||
}
|
||||
|
||||
function RaceList(props: { title: string; races: Race[] }): JSX.Element {
|
||||
const { title, races } = props;
|
||||
|
||||
@@ -53,18 +67,24 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
|
||||
{races.length > 0 ? (
|
||||
<ul className="race-list__items">
|
||||
{races.map((race) => (
|
||||
<li key={race.id} className="race-card">
|
||||
<li key={race.id} className="race-card race-card--action">
|
||||
<Link
|
||||
className="race-card__link-surface"
|
||||
to={`/races/${race.id}`}
|
||||
aria-label={`Старт: ${race.title}`}
|
||||
>
|
||||
<div className="race-card__main">
|
||||
<p className="race-card__title">
|
||||
<Link className="race-card__link" to={`/races/${race.id}`}>
|
||||
{race.title}
|
||||
</Link>
|
||||
<span className="race-card__title-text">{race.title}</span>
|
||||
</p>
|
||||
<p className="race-card__meta">
|
||||
{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>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -81,8 +101,34 @@ export function RacesPage(): JSX.Element {
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const [yearFilter, setYearFilter] = useState<string>("");
|
||||
const [monthFilter, setMonthFilter] = useState<string>("");
|
||||
const [viewMode, setViewMode] = useState<ViewMode>(() => readInitialViewMode());
|
||||
|
||||
const setViewModePersist = useCallback((mode: ViewMode) => {
|
||||
setViewMode(mode);
|
||||
try {
|
||||
sessionStorage.setItem(VIEW_STORAGE_KEY, mode);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleViewList = useCallback(() => {
|
||||
setViewModePersist("list");
|
||||
}, [setViewModePersist]);
|
||||
|
||||
const handleViewCalendar = useCallback(() => {
|
||||
setViewModePersist("calendar");
|
||||
setYearFilter((prev) => (prev === "" ? String(new Date().getFullYear()) : prev));
|
||||
}, [setViewModePersist]);
|
||||
|
||||
const listQuery = useMemo((): RacesQuery | undefined => {
|
||||
if (viewMode === "calendar") {
|
||||
const y = yearFilter !== "" ? parseInt(yearFilter, 10) : new Date().getFullYear();
|
||||
if (!Number.isNaN(y)) {
|
||||
return { year: y };
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
const q: RacesQuery = {};
|
||||
if (yearFilter !== "") {
|
||||
const y = parseInt(yearFilter, 10);
|
||||
@@ -97,27 +143,36 @@ export function RacesPage(): JSX.Element {
|
||||
}
|
||||
}
|
||||
return Object.keys(q).length > 0 ? q : undefined;
|
||||
}, [yearFilter, monthFilter]);
|
||||
}, [viewMode, yearFilter, monthFilter]);
|
||||
|
||||
const displayYear = useMemo(() => {
|
||||
if (yearFilter !== "") {
|
||||
const y = parseInt(yearFilter, 10);
|
||||
return Number.isNaN(y) ? new Date().getFullYear() : y;
|
||||
}
|
||||
return new Date().getFullYear();
|
||||
}, [yearFilter]);
|
||||
|
||||
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 +181,7 @@ export function RacesPage(): JSX.Element {
|
||||
void loadRaces();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
ac.abort();
|
||||
};
|
||||
}, [listQuery]);
|
||||
|
||||
@@ -145,6 +201,23 @@ export function RacesPage(): JSX.Element {
|
||||
<h1 className="page__title">Календарь стартов</h1>
|
||||
<p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
|
||||
|
||||
<div className="races-view-toggle" role="group" aria-label="Вид отображения">
|
||||
<button
|
||||
type="button"
|
||||
className={`races-view-toggle__btn${viewMode === "list" ? " races-view-toggle__btn--active" : ""}`}
|
||||
onClick={handleViewList}
|
||||
>
|
||||
Список
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`races-view-toggle__btn${viewMode === "calendar" ? " races-view-toggle__btn--active" : ""}`}
|
||||
onClick={handleViewCalendar}
|
||||
>
|
||||
Календарь
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{errorMessage && !isLoading ? (
|
||||
<p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
|
||||
{errorMessage}
|
||||
@@ -156,12 +229,12 @@ export function RacesPage(): JSX.Element {
|
||||
<span className="races-filter__label">Год</span>
|
||||
<select
|
||||
className="races-filter__select"
|
||||
value={yearFilter}
|
||||
value={viewMode === "list" ? yearFilter : yearFilter || String(displayYear)}
|
||||
onChange={(event) => {
|
||||
setYearFilter(event.target.value);
|
||||
}}
|
||||
>
|
||||
<option value="">Все года</option>
|
||||
{viewMode === "list" ? <option value="">Все года</option> : null}
|
||||
{yearSelectOptions().map((y) => (
|
||||
<option key={y} value={String(y)}>
|
||||
{y}
|
||||
@@ -187,16 +260,31 @@ export function RacesPage(): JSX.Element {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{viewMode === "calendar" && monthFilter === "" ? (
|
||||
<p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
|
||||
) : null}
|
||||
|
||||
{isLoading ? (
|
||||
<p className="page__subtitle" aria-busy="true">
|
||||
Загружаем данные...
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{viewMode === "list" ? (
|
||||
<div className="race-lists">
|
||||
<RaceList title="Будущие" races={upcoming} />
|
||||
<RaceList title="Прошедшие" races={past} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="races-cal-wrap">
|
||||
<RacesCalendar
|
||||
displayYear={displayYear}
|
||||
monthFilter={monthFilter}
|
||||
races={races}
|
||||
onMonthFilterChange={setMonthFilter}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
@@ -77,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);
|
||||
@@ -110,6 +128,35 @@ a {
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-5);
|
||||
background: #fcfdff;
|
||||
transition:
|
||||
transform 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.dashboard-card:hover,
|
||||
.dashboard-card:focus-within {
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-card-lift);
|
||||
}
|
||||
|
||||
.dashboard-card--linked {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard-card__link-surface {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-md);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dashboard-card__link-surface:hover,
|
||||
.dashboard-card__link-surface:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dashboard-card__title {
|
||||
@@ -236,12 +283,6 @@ a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.race-card__link:hover,
|
||||
.race-card__link:focus-visible {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.race-card__meta {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
@@ -273,6 +314,67 @@ a {
|
||||
color: #8a5a00;
|
||||
}
|
||||
|
||||
.race-card__status--needs-result {
|
||||
outline: 1px solid var(--color-warning);
|
||||
}
|
||||
|
||||
.race-card--action {
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
transition:
|
||||
transform 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.race-card--action:hover,
|
||||
.race-card--action:focus-within {
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-card-lift);
|
||||
}
|
||||
|
||||
.race-card__link-surface {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius-sm);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.race-card__link-surface:focus-visible {
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.race-card__title-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.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;
|
||||
@@ -555,6 +657,35 @@ a {
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.race-form__time-picker {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.race-form__time-picker__unit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.race-form__time-picker__label {
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.race-form__time-picker__select {
|
||||
min-width: 4.25rem;
|
||||
}
|
||||
|
||||
.race-form__time-picker__sep {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 600;
|
||||
padding-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.race-form__actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
@@ -575,6 +706,286 @@ a {
|
||||
margin: var(--space-1) 0;
|
||||
}
|
||||
|
||||
.races-view-toggle {
|
||||
display: inline-flex;
|
||||
margin-top: var(--space-5);
|
||||
padding: var(--space-1);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.races-view-toggle__btn {
|
||||
font: inherit;
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: 600;
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.races-view-toggle__btn:hover,
|
||||
.races-view-toggle__btn:focus-visible {
|
||||
color: var(--color-text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.races-view-toggle__btn--active {
|
||||
background: #eef2f6;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.races-cal-wrap {
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
.races-cal__filter-hint {
|
||||
margin-top: var(--space-3);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.races-cal__hint {
|
||||
margin: 0 0 var(--space-4);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.races-cal__year {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.races-cal__month {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.races-cal__month--compact .races-cal__month-title {
|
||||
font-size: var(--font-size-caption);
|
||||
}
|
||||
|
||||
.races-cal__month--compact .races-cal__weekday {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.races-cal__month--compact .races-cal__day-btn {
|
||||
font-size: var(--font-size-caption);
|
||||
min-height: 1.65rem;
|
||||
}
|
||||
|
||||
.races-cal__month-title {
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: var(--font-size-body);
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.races-cal__weekdays {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 1px;
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.races-cal__weekday {
|
||||
font-size: var(--font-size-caption);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.races-cal__cells {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.races-cal__cell {
|
||||
position: relative;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.races-cal__cell--empty {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.races-cal__cell--has-race .races-cal__day-btn {
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.races-cal__cell--open {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.races-cal__day-btn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 2rem;
|
||||
font: inherit;
|
||||
font-size: var(--font-size-caption);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.races-cal__day-btn:hover,
|
||||
.races-cal__day-btn:focus-visible {
|
||||
background: #eef2f6;
|
||||
border-color: var(--color-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.races-cal__cell--has-race .races-cal__day-btn:hover,
|
||||
.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
|
||||
background: #e8f0fc;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.races-cal__popover {
|
||||
position: absolute;
|
||||
top: calc(100% + var(--space-1));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 11rem;
|
||||
max-width: 16rem;
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-card-lift);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.races-cal__popover-list {
|
||||
margin: 0 0 var(--space-2);
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.races-cal__popover-item {
|
||||
margin: 0 0 var(--space-1);
|
||||
}
|
||||
|
||||
.races-cal__popover-link {
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-caption);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.races-cal__popover-link:hover,
|
||||
.races-cal__popover-link:focus-visible {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.races-cal__popover-empty {
|
||||
margin: 0 0 var(--space-2);
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.races-cal__popover-add {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-caption);
|
||||
padding: var(--space-2);
|
||||
}
|
||||
|
||||
.races-cal__month-focus .races-cal__month {
|
||||
max-width: 28rem;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.races-cal__month-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.races-cal__month-nav-item {
|
||||
font: inherit;
|
||||
font-size: var(--font-size-caption);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-accent);
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.races-cal__month-nav-item:hover,
|
||||
.races-cal__month-nav-item:focus-visible {
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.races-cal__month-nav-item--active {
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
background: #eef2f6;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.races-cal__month-nav-item--all {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.race-day__list {
|
||||
margin: var(--space-5) 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.race-day__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.race-day__link {
|
||||
font-weight: 600;
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.race-day__link:hover,
|
||||
.race-day__link:focus-visible {
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.race-day__meta {
|
||||
font-size: var(--font-size-caption);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.race-day__actions {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
/* ─── Responsive ───────────────────────────────────────── */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@@ -584,6 +995,10 @@ a {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.races-cal__year {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.race-details-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -593,3 +1008,9 @@ a {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.races-cal__year {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,4 +27,6 @@
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
|
||||
--shadow-card-lift: 0 6px 20px rgba(19, 32, 43, 0.12);
|
||||
}
|
||||
|
||||
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