Compare commits

..

20 Commits

Author SHA1 Message Date
Anton
83bc603b95 feat: /meta для версии в футере и устойчивый разбор JSON
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-04-08 10:32:52 +03:00
f8b4ce7111 Merge pull request 'fix(api): дублировать маршруты под /api и убрать Content-Type у GET' (#16) from fix/api-prefix-routing into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #16
2026-04-08 07:21:03 +00:00
Anton
53b9561a54 fix(api): дублировать маршруты под /api и убрать Content-Type у GET
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-04-08 10:20:17 +03:00
7e9c20d4bf Merge pull request 'fix: прод — CORS, версия API, ошибки клиента и подсказка по прошедшим стартам' (#15) from fix/prod-cors-health-status-hints into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #15
2026-04-07 22:21:49 +00:00
Vaka.pro
e0ed0b6435 fix: прод — CORS, версия API, ошибки клиента и подсказка по прошедшим стартам
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- CORS_ORIGIN: несколько origin через запятую; комментарии в .env.example
- Версия бэкенда: APP_VERSION, безопасное чтение package.json, футер при пустой версии
- Сообщения API: unknown_error и ответы 401/403/404 без JSON; отладочный лог при !ok
- Статус «внесите результат» для прошедшей даты + блок на карточке старта и стили
2026-04-08 01:21:11 +03:00
8442c761c2 Merge pull request 'fix(frontend): bundle app version via package.json import instead of Vite define' (#14) from fix/vite-frontend-version-define into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #14
2026-04-07 21:55:25 +00:00
Vaka.pro
87d6505fbf fix(frontend): bundle app version via package.json import instead of Vite define
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-04-08 00:45:24 +03:00
99ae7410ce Merge pull request 'feat: русский UI, версии в футере, даты и устойчивость загрузки API' (#13) from feat/ru-ui-footer-versions-dates-api into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #13
2026-04-07 21:40:47 +00:00
Vaka.pro
42ee36d0a2 feat: русский UI, версии в футере, даты и устойчивость загрузки API
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- API: дата старта всегда YYYY-MM-DD; фронт: parseRaceDate без двойного T00:00:00
- GET /health с version из package.json; Vite define __FRONTEND_VERSION__
- Футер с версиями клиента/сервера (BEM), сетка app-shell на три ряда
- AbortController для карточки старта; ретраи GET при 502–504 и понятные ошибки шлюза
- Русские подписи навигации/страниц, lang=ru, без английских фраз в интерфейсе
2026-04-08 00:40:03 +03:00
fc995ed07d Merge pull request 'fix(seed): resolve CSV path for Docker and mount import in stack compose; deleted plans; adds extra files to gitignore' (#12) from fix/seed-csv-path-docker-import-mount into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #12
2026-04-07 21:22:53 +00:00
Vaka.pro
0f0c7c2607 fix(seed): resolve CSV path for Docker and mount import in stack compose; deleted plans; adds extra files to gitignore
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-04-08 00:22:11 +03:00
ef423b322f Merge pull request 'chore: delete empty features module, fix RaceRow timestamp types' (#11) from chore/phase4-cleanup-types into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #11
2026-04-07 15:38:45 +00:00
d77dc205dc Merge pull request 'feat: CRUD UI — race form, detail fields, edit/delete actions' (#10) from feat/phase3-crud-ui into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #10
2026-04-07 15:38:14 +00:00
8a7e87385a Merge pull request 'docs: fix README dev/production commands, update FRONTEND_PLAN status, remove broken links' (#9) from docs/phase2-fix-documentation into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #9
2026-04-07 15:37:41 +00:00
b92fad6939 Merge pull request 'fix: phase 1 bugs — CSS tokens, pluralization, error handling, cross-platform tests' (#8) from fix/phase1-bugs-and-critical-fixes into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #8
2026-04-07 15:37:11 +00:00
Anton
7260fb59ea chore: delete empty features module, fix RaceRow timestamp types
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- Remove dead frontend/src/features/index.ts (empty export, unused)

- RaceRow: created_at/updated_at typed as Date to match pg TIMESTAMPTZ runtime

- rowToDto: explicit toISOString() conversion instead of relying on JSON.stringify

- Mock DB: return Date objects for timestamp fields to match real pg behavior

Made-with: Cursor
2026-04-07 18:35:11 +03:00
Anton
4b63af8da5 feat: CRUD UI — race form, detail fields, edit/delete actions
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- RaceDetailsPage: show all non-null fields (officialUrl, startTime, clusterSchedule, bibPickup)

- RaceDetailsPage: add edit link and delete button with confirmation banner

- RaceFormPage: universal create/edit form with validation, auto-generated id for new races

- Router: add /races/new and /races/:raceId/edit routes

- AppLayout: add navigation link to create new race

- CSS: buttons (primary/secondary/danger), form fields, confirm banner, responsive layout

Made-with: Cursor
2026-04-07 18:13:22 +03:00
Anton
f74ce6ed88 docs: fix README dev/production commands, update FRONTEND_PLAN status, remove broken links
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- README: separate dev (npm run dev) and production (npm run build && npm start) steps

- FRONTEND_PLAN: mark backend-dependency-task as completed (finishPlace already in API)

- Remove dead references to missing agent-frontend-ui-instructions.md from PLAN.md and FRONTEND_PLAN.md

Made-with: Cursor
2026-04-07 17:51:02 +03:00
Anton
3b8f41f905 fix: phase 1 bugs — CSS tokens, pluralization, error handling, cross-platform tests
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- Add missing --space-1 CSS token used by filter and detail components

- Fix active nav link losing styles on hover (CSS specificity)

- Correct Russian day pluralization (21 день, 22 дня, 25 дней)

- Show filter error banner even when stale race data is present

- Add cross-env for Windows-compatible npm test

- Add global JSON error handler in Express for malformed request bodies

- Replace stateless mock DB with in-memory store for correct DELETE/UPDATE behavior

Made-with: Cursor
2026-04-07 17:46:46 +03:00
b422223c03 Merge pull request 'chore: drop agent/plan docs, unify .env for Docker stack' (#7) from chore/cleanup-docker-docs-env into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #7
2026-04-06 21:31:33 +00:00
38 changed files with 1350 additions and 199 deletions

View File

@@ -24,10 +24,16 @@ 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

1
.gitignore vendored
View File

@@ -2,3 +2,4 @@ node_modules/
dist/
.env
*.log
.DS_Store

64
PLAN.md
View File

@@ -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` 112).
- `GET /races/:id`, `POST /races`, `PATCH /races/:id`, `DELETE /races/:id`.
Ошибки: JSON, единый стиль (`validation_error`, `not_found`, `conflict`, `database_unavailable`). Подробности — `[docs/backend-api-for-frontend.md](docs/backend-api-for-frontend.md)`.
## Seed
- Файл `[import/races_2026_calendar.csv](import/races_2026_calendar.csv)`.
- Стабильный `id`, upsert по `id`. Повторный запуск безопасен.
## Режим без PostgreSQL (dev/CI)
Переменная `CALENDAR_RUN_MOCK_DB=1` (или `true`): HTTP-обработчики используют заглушку пула **без** реальной БД. **Не использовать** для `npm run db:migrate` и `npm run seed` — нужен настоящий Postgres и `DB_`*.
## Frontend (SPA)
- Маршруты: дашборд (`/`), список стартов (`/races`), карточка (`/races/:id`).
- Дашборд: ближайший старт, последний результат, PR, сезон, PR по ключевым дистанциям, сравнение завершённых стартов, при необходимости — лёгкая визуализация прогресса.
- Список: будущие / прошедшие; фильтрация по году и месяцу через API.
- Стили: BEM и дизайн-токены; ориентир по духу — `[agent-frontend-ui-instructions.md](agent-frontend-ui-instructions.md)`.
## Критерии готовности текущей итерации
- Документация согласована с кодом: `[README.md](README.md)`, `[docs/backend.md](docs/backend.md)`, `[docs/backend-api-for-frontend.md](docs/backend-api-for-frontend.md)`.
- Миграции и seed воспроизводимы; контракт API покрыт smoke-тестами в CI при необходимости с mock-БД.

View File

@@ -14,7 +14,8 @@
2. Корень: `cp .env.example .env`, задайте `DB_*` (и при необходимости `CORS_ORIGIN`).
3. Postgres: из корня `docker compose up -d` (см. [`docker-compose.yml`](docker-compose.yml)) — в compose используются те же `DB_NAME`, `DB_USER`, `DB_PASSWORD` из `.env`.
4. `cd backend && npm run db:migrate && npm run seed`
5. `npm run build && npm run dev`
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 не использовать**.

View File

@@ -20,6 +20,7 @@
"@types/node": "^22.12.0",
"@types/pg": "^8.11.10",
"@types/supertest": "^6.0.2",
"cross-env": "^10.1.0",
"supertest": "^7.0.0",
"ts-node": "^10.9.2",
"tsx": "^4.19.2",
@@ -39,6 +40,13 @@
"node": ">=12"
}
},
"node_modules/@epic-web/invariant": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
"integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
"dev": true,
"license": "MIT"
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.27.7",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
@@ -643,6 +651,7 @@
"integrity": "sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~6.21.0"
}
@@ -936,6 +945,39 @@
"dev": true,
"license": "MIT"
},
"node_modules/cross-env": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
"integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@epic-web/invariant": "^1.0.0",
"cross-spawn": "^7.0.6"
},
"bin": {
"cross-env": "dist/bin/cross-env.js",
"cross-env-shell": "dist/bin/cross-env-shell.js"
},
"engines": {
"node": ">=20"
}
},
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
"dev": true,
"license": "MIT",
"dependencies": {
"path-key": "^3.1.0",
"shebang-command": "^2.0.0",
"which": "^2.0.1"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/csv-parse": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-5.6.0.tgz",
@@ -1442,6 +1484,13 @@
"node": ">= 0.10"
}
},
"node_modules/isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true,
"license": "ISC"
},
"node_modules/make-error": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -1585,6 +1634,16 @@
"node": ">= 0.8"
}
},
"node_modules/path-key": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/path-to-regexp": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
@@ -1596,6 +1655,7 @@
"resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
"integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
"license": "MIT",
"peer": true,
"dependencies": {
"pg-connection-string": "^2.12.0",
"pg-pool": "^3.13.0",
@@ -1858,6 +1918,29 @@
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
"license": "ISC"
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
"dev": true,
"license": "MIT",
"dependencies": {
"shebang-regex": "^3.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/shebang-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/side-channel": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -2124,6 +2207,7 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -2173,6 +2257,22 @@
"node": ">= 0.8"
}
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
"dev": true,
"license": "ISC",
"dependencies": {
"isexe": "^2.0.0"
},
"bin": {
"node-which": "bin/node-which"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

View File

@@ -1,6 +1,6 @@
{
"name": "calendar-run-backend",
"version": "1.0.0",
"version": "1.1.0",
"private": true,
"scripts": {
"build": "tsc",
@@ -8,7 +8,7 @@
"start": "node dist/index.js",
"db:migrate": "ts-node src/migrate.ts",
"seed": "ts-node src/seed.ts",
"test": "CALENDAR_RUN_MOCK_DB=1 tsx --test test/app.test.ts"
"test": "cross-env CALENDAR_RUN_MOCK_DB=1 tsx --test test/app.test.ts"
},
"dependencies": {
"cors": "^2.8.5",
@@ -23,6 +23,7 @@
"@types/node": "^22.12.0",
"@types/pg": "^8.11.10",
"@types/supertest": "^6.0.2",
"cross-env": "^10.1.0",
"supertest": "^7.0.0",
"ts-node": "^10.9.2",
"tsx": "^4.19.2",

View File

@@ -1,4 +1,4 @@
import express from "express";
import express, { Request, Response, NextFunction } from "express";
import cors from "cors";
import { config } from "./config";
import healthRouter from "./routes/health";
@@ -7,11 +7,25 @@ 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);
// Тот же API под /api/* — если прокси не снимает префикс или запрос идёт напрямую на порт бэкенда с /api.
app.use("/api", healthRouter);
app.use("/api", racesRouter);
app.use((err: unknown, _req: Request, res: Response, _next: NextFunction) => {
if (err instanceof SyntaxError && "body" in err) {
res.status(400).json({ error: "validation_error", details: ["Invalid JSON in request body"] });
return;
}
console.error("[app] Unhandled error:", err);
res.status(500).json({ error: "unknown_error", details: ["Internal server error"] });
});
return app;
}

View File

@@ -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;
}

View File

@@ -15,7 +15,7 @@ const poolConfig: PoolConfig = {
function mockRowFromInsert(sql: string, params: unknown[]): RaceRow {
const match = sql.match(/INSERT INTO races\s*\(([^)]+)\)\s*VALUES/i);
const now = new Date().toISOString();
const now = new Date();
if (!match) {
return {
id: String(params[0] ?? ""),
@@ -69,6 +69,8 @@ function createMockPool(): Pool {
fields: [],
}) as QueryResult<T>;
const store = new Map<string, RaceRow>();
const mockQuery = async <T extends QueryResultRow>(
text: string,
params?: unknown[],
@@ -76,11 +78,9 @@ function createMockPool(): Pool {
const sql = text.replace(/\s+/g, " ").trim();
const p = params ?? [];
if (sql.includes("DELETE FROM races")) {
return emptyResult();
}
if (sql.includes("INSERT INTO races") && sql.includes("RETURNING")) {
const row = mockRowFromInsert(text, p);
store.set(row.id, row);
return {
rows: [row as unknown as T],
rowCount: 1,
@@ -89,12 +89,49 @@ function createMockPool(): Pool {
fields: [],
} as QueryResult<T>;
}
if (sql.includes("DELETE FROM races")) {
const id = String(p[0] ?? "");
const existed = store.delete(id);
return {
rows: [],
rowCount: existed ? 1 : 0,
command: "DELETE",
oid: 0,
fields: [],
} as QueryResult<T>;
}
if (sql.includes("UPDATE races") && sql.includes("RETURNING")) {
const id = String(p[p.length - 1] ?? "");
const existing = store.get(id);
if (!existing) {
return emptyResult();
}
const updated = { ...existing, updated_at: new Date() };
store.set(id, updated);
return {
rows: [updated as unknown as T],
rowCount: 1,
command: "UPDATE",
oid: 0,
fields: [],
} as QueryResult<T>;
}
if (sql.includes("SELECT * FROM races WHERE id =")) {
const id = String(p[0] ?? "");
const row = store.get(id);
return row
? { rows: [row as unknown as T], rowCount: 1, command: "SELECT", oid: 0, fields: [] } as QueryResult<T>
: emptyResult();
}
if (sql.includes("SELECT * FROM races")) {
return emptyResult();
const rows = Array.from(store.values());
return { rows: rows as unknown as T[], rowCount: rows.length, command: "SELECT", oid: 0, fields: [] } as QueryResult<T>;
}
return emptyResult();
};

View File

@@ -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,
};
}

View File

@@ -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) => {

View File

@@ -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
View 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;
}
}

View File

@@ -8,6 +8,25 @@ const app = createApp();
test("GET /health returns ok", async () => {
const res = await request(app).get("/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 /api/health returns ok (prefix without proxy strip)", async () => {
const res = await request(app).get("/api/health").expect(200);
assert.equal(res.body.status, "ok");
});
test("GET /meta returns version for UI footer", async () => {
const res = await request(app).get("/meta").expect(200);
assert.equal(typeof res.body.version, "string");
assert.ok(res.body.version.length > 0);
});
test("GET /api/meta mirrors GET /meta", 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 /ready succeeds with mock database", async () => {
@@ -32,6 +51,11 @@ test("GET /races accepts year and month", async () => {
assert.ok(Array.isArray(res.body));
});
test("GET /api/races mirrors GET /races", 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);
assert.equal(res.body.error, "not_found");

View File

@@ -27,6 +27,9 @@ services:
- PORT=3000
ports:
- "3001:3000"
volumes:
# CSV и прочие данные import/ на хосте (Synology: ./import рядом с compose) без пересборки образа
- ./import:/app/import:ro
restart: unless-stopped
networks:
- postgres_default

View File

@@ -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>

View File

@@ -1,7 +1,7 @@
{
"name": "calendar-run-frontend",
"private": true,
"version": "0.1.0",
"version": "0.2.0",
"type": "module",
"scripts": {
"dev": "vite",

View File

@@ -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;
}
function hasStructuredApiError(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) && !hasStructuredApiError(payload)) {
return new ApiError({
code: "network_error",
status,
message: "Сервер временно недоступен. Попробуйте обновить страницу.",
});
}
if (!hasStructuredApiError(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 "Произошла неизвестная ошибка.";
}

View 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);
}

View File

@@ -8,24 +8,56 @@ function buildUrl(path: string): string {
}
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;
}
}
export async function requestJson<T>(path: string, init?: RequestInit): Promise<T> {
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]);
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 +69,11 @@ export async function requestJson<T>(path: string, init?: RequestInit): Promise<
const payload = await parseResponseBody(response);
if (!response.ok) {
const retryable = idempotent && GATEWAY_RETRY_STATUSES.has(response.status) && attempt < maxAttempts;
if (retryable) {
await delay(80 * attempt);
continue;
}
throw toApiError(response.status, payload);
}
@@ -45,7 +82,14 @@ 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,
@@ -53,3 +97,10 @@ export async function requestJson<T>(path: string, init?: RequestInit): Promise<
});
}
}
throw new ApiError({
code: "network_error",
status: null,
message: "Не удалось связаться с сервером.",
});
}

View File

@@ -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";

View File

@@ -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> {

View File

@@ -1,11 +1,12 @@
import { NavLink, Outlet } from "react-router-dom";
import { AppShellFooter } from "./AppShellFooter";
export function AppLayout(): JSX.Element {
return (
<div className="app-shell">
<header className="app-shell__header">
<div className="app-shell__brand">Calendar Run</div>
<nav className="app-shell__nav" aria-label="Primary navigation">
<div className="app-shell__brand">Календарь стартов</div>
<nav className="app-shell__nav" aria-label="Основная навигация">
<NavLink
to="/"
end
@@ -13,7 +14,7 @@ export function AppLayout(): JSX.Element {
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
}
>
Dashboard
Обзор
</NavLink>
<NavLink
to="/races"
@@ -21,13 +22,22 @@ export function AppLayout(): JSX.Element {
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
}
>
Races
Старты
</NavLink>
<NavLink
to="/races/new"
className={({ isActive }) =>
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
}
>
+ Добавить
</NavLink>
</nav>
</header>
<main className="app-shell__main">
<Outlet />
</main>
<AppShellFooter />
</div>
);
}

View File

@@ -0,0 +1,47 @@
import { useEffect, useState } from "react";
import { getBackendMeta } from "../../api";
import { FRONTEND_VERSION } from "../../frontendVersion";
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>(null);
useEffect(() => {
const ac = new AbortController();
void getBackendMeta({ signal: ac.signal })
.then((meta) => {
if (ac.signal.aborted) {
return;
}
const v = meta.version;
setBackendVersion(typeof v === "string" && v.length > 0 ? v : "не указана");
})
.catch((err) => {
if (ac.signal.aborted || isAbortError(err)) {
return;
}
setBackendVersion("недоступна");
});
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>
);
}

View File

@@ -3,6 +3,7 @@ import { AppLayout } from "./layouts/AppLayout";
import { DashboardPage } from "../pages/DashboardPage";
import { RacesPage } from "../pages/RacesPage";
import { RaceDetailsPage } from "../pages/RaceDetailsPage";
import { RaceFormPage } from "../pages/RaceFormPage";
export const appRouter = createBrowserRouter([
{
@@ -11,7 +12,9 @@ export const appRouter = createBrowserRouter([
children: [
{ index: true, element: <DashboardPage /> },
{ path: "races", element: <RacesPage /> },
{ path: "races/new", element: <RaceFormPage /> },
{ path: "races/:raceId", element: <RaceDetailsPage /> },
{ path: "races/:raceId/edit", element: <RaceFormPage /> },
],
},
]);

View File

@@ -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)!;

View File

@@ -1 +0,0 @@
export {};

View File

@@ -0,0 +1,3 @@
import packageJson from "../package.json";
export const FRONTEND_VERSION: string = packageJson.version;

View File

@@ -7,6 +7,8 @@ export {
getRaceStatusLabel,
isCloseDistance,
parseFinishTimeToSeconds,
parseRaceDate,
raceNeedsResultEntry,
sortByDateAsc,
sortByDateDesc,
splitRacesByDate,

View File

@@ -2,8 +2,14 @@ import type { Race } from "../api";
const MS_IN_DAY = 24 * 60 * 60 * 1000;
function parseRaceDate(date: string): Date {
return new Date(`${date}T00:00:00`);
/** API date: YYYY-MM-DD или ISO-строка от сериализации (не склеивать с «T00:00:00» повторно). */
export function parseRaceDate(date: string): Date {
const ymd = date.slice(0, 10);
if (/^\d{4}-\d{2}-\d{2}$/.test(ymd)) {
return new Date(`${ymd}T00:00:00`);
}
const parsed = new Date(date);
return parsed;
}
export function parseFinishTimeToSeconds(value: string | null): number | null {
@@ -70,6 +76,22 @@ export function splitRacesByDate(races: Race[], now: Date = new Date()): { upcom
};
}
function pluralizeDays(n: number): string {
const mod10 = n % 10;
const mod100 = n % 100;
if (mod100 >= 11 && mod100 <= 19) {
return "дней";
}
if (mod10 === 1) {
return "день";
}
if (mod10 >= 2 && mod10 <= 4) {
return "дня";
}
return "дней";
}
export function getRaceCountdownLabel(date: string, now: Date = new Date()): string {
const today = new Date(now);
today.setHours(0, 0, 0, 0);
@@ -80,13 +102,7 @@ export function getRaceCountdownLabel(date: string, now: Date = new Date()): str
if (days <= 0) {
return "сегодня";
}
if (days === 1) {
return "через 1 день";
}
if (days < 5) {
return `через ${days} дня`;
}
return `через ${days} дней`;
return `через ${days} ${pluralizeDays(days)}`;
}
export function isCloseDistance(left: number, right: number): boolean {
@@ -106,18 +122,36 @@ export function getPaceLabel(finishTime: string | null, distanceKm: number): str
return `${String(paceMinutes).padStart(2, "0")}:${String(paceRemainder).padStart(2, "0")} /км`;
}
export function getRaceStatusClassName(status: Race["status"]): string {
const base = "race-card__status";
if (status === "completed") {
return `${base} ${base}--completed`;
function isPastDateNeedingResult(status: Race["status"], raceDate: string): boolean {
if (status !== "planned" && status !== "registered") {
return false;
}
if (status === "registered") {
return `${base} ${base}--registered`;
}
return `${base} ${base}--planned`;
const today = new Date();
today.setHours(0, 0, 0, 0);
return parseRaceDate(raceDate).getTime() < today.getTime();
}
export function getRaceStatusLabel(status: Race["status"]): string {
export function raceNeedsResultEntry(race: Race): boolean {
return isPastDateNeedingResult(race.status, race.date);
}
export function getRaceStatusClassName(status: Race["status"], raceDate?: string): string {
const base = "race-card__status";
let tier = `${base}--planned`;
if (status === "completed") {
tier = `${base}--completed`;
} else if (status === "registered") {
tier = `${base}--registered`;
}
const needs =
raceDate && isPastDateNeedingResult(status, raceDate) ? ` ${base}--needs-result` : "";
return `${base} ${tier}${needs}`;
}
export function getRaceStatusLabel(status: Race["status"], raceDate?: string): string {
if (raceDate && isPastDateNeedingResult(status, raceDate)) {
return "внесите результат";
}
if (status === "completed") {
return "пробежал";
}

View File

@@ -9,6 +9,7 @@ import {
getPaceLabel,
isCloseDistance,
parseFinishTimeToSeconds,
parseRaceDate,
splitRacesByDate,
} from "../lib";
@@ -18,7 +19,7 @@ function getErrorMessage(error: unknown): string {
if (error instanceof ApiError) {
return error.message;
}
return "Не удалось загрузить данные dashboard.";
return "Не удалось загрузить данные обзора.";
}
export function DashboardPage(): JSX.Element {
@@ -28,23 +29,24 @@ export function DashboardPage(): JSX.Element {
const [chartDistanceKm, setChartDistanceKm] = useState<number>(10);
useEffect(() => {
const ac = new AbortController();
let isMounted = true;
async function loadDashboardData(): Promise<void> {
try {
const items = await getRaces();
if (!isMounted) {
const items = await getRaces(undefined, { signal: ac.signal });
if (!isMounted || ac.signal.aborted) {
return;
}
setRaces(items);
setErrorMessage(null);
} catch (error) {
if (!isMounted) {
if (ac.signal.aborted || !isMounted) {
return;
}
setErrorMessage(getErrorMessage(error));
} finally {
if (isMounted) {
if (isMounted && !ac.signal.aborted) {
setIsLoading(false);
}
}
@@ -53,6 +55,7 @@ export function DashboardPage(): JSX.Element {
void loadDashboardData();
return () => {
isMounted = false;
ac.abort();
};
}, []);
@@ -80,7 +83,7 @@ export function DashboardPage(): JSX.Element {
}
const currentYear = new Date().getFullYear();
const seasonRaces = races.filter((race) => new Date(`${race.date}T00:00:00`).getFullYear() === currentYear);
const seasonRaces = races.filter((race) => parseRaceDate(race.date).getFullYear() === currentYear);
const seasonCompleted = seasonRaces.filter((race) => race.status === "completed");
return {
@@ -130,7 +133,7 @@ export function DashboardPage(): JSX.Element {
.filter((race) => race.status === "completed")
.map((race) => ({
id: race.id,
year: new Date(`${race.date}T00:00:00`).getFullYear(),
year: parseRaceDate(race.date).getFullYear(),
title: race.title,
distance: formatDistance(race.distanceKm),
finishTime: race.finishTime ?? "время не указано",
@@ -143,7 +146,7 @@ export function DashboardPage(): JSX.Element {
if (isLoading) {
return (
<section className="page page--dashboard" aria-busy="true">
<h1 className="page__title">Dashboard</h1>
<h1 className="page__title">Обзор</h1>
<p className="page__subtitle">Загружаем ваши старты...</p>
</section>
);
@@ -152,7 +155,7 @@ export function DashboardPage(): JSX.Element {
if (errorMessage) {
return (
<section className="page page--dashboard" role="alert">
<h1 className="page__title">Dashboard</h1>
<h1 className="page__title">Обзор</h1>
<p className="page__subtitle page__subtitle--error">{errorMessage}</p>
</section>
);
@@ -160,7 +163,7 @@ export function DashboardPage(): JSX.Element {
return (
<section className="page page--dashboard">
<h1 className="page__title">Dashboard</h1>
<h1 className="page__title">Обзор</h1>
<p className="page__subtitle">Ключевые метрики по вашему календарю стартов.</p>
<div className="dashboard-grid" aria-label="Ключевые метрики">
@@ -205,7 +208,7 @@ export function DashboardPage(): JSX.Element {
<p className="dashboard-card__hint">Лучший темп среди завершённых стартов.</p>
</>
) : (
<p className="dashboard-card__empty">Недостаточно данных для PR.</p>
<p className="dashboard-card__empty">Недостаточно данных для личного рекорда.</p>
)}
</article>
@@ -242,7 +245,7 @@ export function DashboardPage(): JSX.Element {
</section>
<section className="dashboard-section" aria-label="Личные рекорды по дистанциям">
<h2 className="dashboard-section__title">PR по дистанциям</h2>
<h2 className="dashboard-section__title">Рекорды по дистанциям</h2>
<div className="dashboard-grid dashboard-grid--pr">
{personalRecordsByDistance.map((item) => (
<article key={item.distanceKm} className="dashboard-card">
@@ -291,7 +294,7 @@ export function DashboardPage(): JSX.Element {
</table>
</div>
) : (
<p className="dashboard-card__empty">Нет completed-стартов для сравнения.</p>
<p className="dashboard-card__empty">Нет завершённых стартов для сравнения.</p>
)}
</section>
</section>

View File

@@ -1,12 +1,13 @@
import { useEffect, useMemo, useState } from "react";
import { Link, useParams } from "react-router-dom";
import { ApiError, getRaceById } from "../api";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { ApiError, deleteRace, getRaceById } from "../api";
import {
formatDistance,
formatRaceDate,
getPaceLabel,
getRaceStatusClassName,
getRaceStatusLabel,
raceNeedsResultEntry,
} from "../lib";
import type { Race } from "../api";
@@ -17,13 +18,47 @@ function getErrorMessage(error: unknown): string {
return "Не удалось загрузить карточку старта.";
}
function DetailItem(props: { label: string; value: string | null | undefined }): JSX.Element | null {
const text = props.value?.trim();
if (!text) {
return null;
}
return (
<div className="race-details-meta__item">
<dt className="race-details-meta__key">{props.label}</dt>
<dd className="race-details-meta__value">{text}</dd>
</div>
);
}
function DetailLink(props: { label: string; url: string | null | undefined }): JSX.Element | null {
const href = props.url?.trim();
if (!href) {
return null;
}
return (
<div className="race-details-meta__item">
<dt className="race-details-meta__key">{props.label}</dt>
<dd className="race-details-meta__value">
<a href={href} target="_blank" rel="noopener noreferrer" className="race-details-meta__link">
{href}
</a>
</dd>
</div>
);
}
export function RaceDetailsPage(): JSX.Element {
const { raceId } = useParams<{ raceId: string }>();
const navigate = useNavigate();
const [race, setRace] = useState<Race | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [isDeleting, setIsDeleting] = useState<boolean>(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
useEffect(() => {
const ac = new AbortController();
let isMounted = true;
async function loadRace(): Promise<void> {
@@ -34,19 +69,19 @@ export function RaceDetailsPage(): JSX.Element {
}
try {
const item = await getRaceById(raceId);
if (!isMounted) {
const item = await getRaceById(raceId, { signal: ac.signal });
if (!isMounted || ac.signal.aborted) {
return;
}
setRace(item);
setErrorMessage(null);
} catch (error) {
if (!isMounted) {
if (ac.signal.aborted || !isMounted) {
return;
}
setErrorMessage(getErrorMessage(error));
} finally {
if (isMounted) {
if (isMounted && !ac.signal.aborted) {
setIsLoading(false);
}
}
@@ -55,6 +90,7 @@ export function RaceDetailsPage(): JSX.Element {
void loadRace();
return () => {
isMounted = false;
ac.abort();
};
}, [raceId]);
@@ -65,6 +101,22 @@ export function RaceDetailsPage(): JSX.Element {
return getPaceLabel(race.finishTime, race.distanceKm);
}, [race]);
const handleDelete = useCallback(async () => {
if (!raceId) {
return;
}
setIsDeleting(true);
try {
await deleteRace(raceId);
navigate("/races", { replace: true });
} catch (error) {
setErrorMessage(error instanceof ApiError ? error.message : "Не удалось удалить старт.");
setShowDeleteConfirm(false);
} finally {
setIsDeleting(false);
}
}, [raceId, navigate]);
if (isLoading) {
return (
<section className="page page--race-details" aria-busy="true">
@@ -97,9 +149,56 @@ export function RaceDetailsPage(): JSX.Element {
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
</p>
</div>
<span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
<span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
</div>
{raceNeedsResultEntry(race) ? (
<p className="race-details-past-hint" role="status">
Дата старта уже прошла {" "}
<Link className="race-details-past-hint__link" to={`/races/${race.id}/edit`}>
внесите результат или обновите статус
</Link>
.
</p>
) : null}
<div className="race-details-actions">
<Link className="btn btn--primary" to={`/races/${race.id}/edit`}>
Редактировать
</Link>
<button
className="btn btn--danger"
type="button"
onClick={() => setShowDeleteConfirm(true)}
>
Удалить
</button>
</div>
{showDeleteConfirm ? (
<div className="confirm-banner" role="alertdialog" aria-label="Подтверждение удаления">
<p className="confirm-banner__text">Удалить «{race.title}»? Это действие необратимо.</p>
<div className="confirm-banner__actions">
<button
className="btn btn--danger"
type="button"
disabled={isDeleting}
onClick={handleDelete}
>
{isDeleting ? "Удаляем…" : "Да, удалить"}
</button>
<button
className="btn btn--secondary"
type="button"
disabled={isDeleting}
onClick={() => setShowDeleteConfirm(false)}
>
Отмена
</button>
</div>
</div>
) : null}
<div className="race-details-grid">
<article className="race-details-card">
<h2 className="race-details-card__title">Основная информация</h2>
@@ -114,13 +213,18 @@ export function RaceDetailsPage(): JSX.Element {
</div>
<div className="race-details-meta__item">
<dt className="race-details-meta__key">Статус</dt>
<dd className="race-details-meta__value">{getRaceStatusLabel(race.status)}</dd>
<dd className="race-details-meta__value">{getRaceStatusLabel(race.status, race.date)}</dd>
</div>
<DetailLink label="Сайт организатора" url={race.officialUrl} />
<DetailItem label="Время старта" value={race.startTime} />
<DetailItem label="Расписание кластеров" value={race.clusterSchedule} />
<DetailItem label="Выдача номеров" value={race.bibPickup} />
<DetailItem label="Стартовый номер" value={race.bibNumber} />
</dl>
</article>
<article className="race-details-card">
<h2 className="race-details-card__title">Completed-метрики</h2>
<h2 className="race-details-card__title">Результаты</h2>
{isCompleted ? (
<dl className="race-details-meta">
<div className="race-details-meta__item">
@@ -131,16 +235,7 @@ export function RaceDetailsPage(): JSX.Element {
<dt className="race-details-meta__key">Темп</dt>
<dd className="race-details-meta__value">{paceLabel ?? "не удалось вычислить"}</dd>
</div>
<div className="race-details-meta__item">
<dt className="race-details-meta__key">Место</dt>
<dd className="race-details-meta__value">
{race.finishPlace?.trim() ? race.finishPlace : "не указано"}
</dd>
</div>
<div className="race-details-meta__item">
<dt className="race-details-meta__key">Стартовый номер</dt>
<dd className="race-details-meta__value">{race.bibNumber ?? "не указан"}</dd>
</div>
<DetailItem label="Место" value={race.finishPlace} />
</dl>
) : (
<p className="race-details-card__empty">

View File

@@ -0,0 +1,422 @@
import { useCallback, useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { ApiError, createRace, getRaceById, updateRace } from "../api";
import type { CreateRacePayload, Race, RaceStatus, UpdateRacePayload } from "../api";
function slugify(text: string): string {
return text
.toLowerCase()
.replace(/[«»"]/g, "")
.replace(/[^a-zа-яё0-9]+/gi, "-")
.replace(/(^-|-$)/g, "")
.substring(0, 60);
}
function generateId(date: string, title: string): string {
return `${date}-${slugify(title)}`;
}
const STATUS_OPTIONS: { value: string; label: string }[] = [
{ value: "", label: "Не указан" },
{ value: "planned", label: "Планирую" },
{ value: "registered", label: "Зарегистрирован" },
{ value: "completed", label: "Пробежал" },
];
interface FormData {
date: string;
title: string;
distanceKm: string;
status: string;
officialUrl: string;
startTime: string;
clusterSchedule: string;
bibPickup: string;
bibNumber: string;
finishTime: string;
finishPlace: string;
notes: string;
}
const EMPTY_FORM: FormData = {
date: "",
title: "",
distanceKm: "",
status: "planned",
officialUrl: "",
startTime: "",
clusterSchedule: "",
bibPickup: "",
bibNumber: "",
finishTime: "",
finishPlace: "",
notes: "",
};
function raceToFormData(race: Race): FormData {
const dateValue = race.date.length >= 10 ? race.date.slice(0, 10) : race.date;
return {
date: dateValue,
title: race.title,
distanceKm: String(race.distanceKm),
status: race.status ?? "",
officialUrl: race.officialUrl ?? "",
startTime: race.startTime ?? "",
clusterSchedule: race.clusterSchedule ?? "",
bibPickup: race.bibPickup ?? "",
bibNumber: race.bibNumber ?? "",
finishTime: race.finishTime ?? "",
finishPlace: race.finishPlace ?? "",
notes: race.notes ?? "",
};
}
function emptyToNull(value: string): string | null {
const trimmed = value.trim();
return trimmed === "" ? null : trimmed;
}
function validateForm(form: FormData): string[] {
const errors: string[] = [];
if (!form.date.trim()) {
errors.push("Дата обязательна.");
}
if (!form.title.trim()) {
errors.push("Название обязательно.");
}
const km = parseFloat(form.distanceKm);
if (Number.isNaN(km) || km <= 0) {
errors.push("Дистанция должна быть положительным числом.");
}
return errors;
}
export function RaceFormPage(): JSX.Element {
const { raceId } = useParams<{ raceId: string }>();
const navigate = useNavigate();
const isEditMode = Boolean(raceId);
const [form, setForm] = useState<FormData>(EMPTY_FORM);
const [isLoading, setIsLoading] = useState<boolean>(isEditMode);
const [isSaving, setIsSaving] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [validationErrors, setValidationErrors] = useState<string[]>([]);
useEffect(() => {
if (!raceId) {
return;
}
let isMounted = true;
async function loadRace(): Promise<void> {
try {
const race = await getRaceById(raceId!);
if (!isMounted) {
return;
}
setForm(raceToFormData(race));
setErrorMessage(null);
} catch (error) {
if (!isMounted) {
return;
}
setErrorMessage(error instanceof ApiError ? error.message : "Не удалось загрузить данные старта.");
} finally {
if (isMounted) {
setIsLoading(false);
}
}
}
void loadRace();
return () => {
isMounted = false;
};
}, [raceId]);
const handleChange = useCallback(
(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
const { name, value } = event.target;
setForm((prev) => ({ ...prev, [name]: value }));
},
[],
);
const handleSubmit = useCallback(
async (event: React.FormEvent) => {
event.preventDefault();
setErrorMessage(null);
const errors = validateForm(form);
setValidationErrors(errors);
if (errors.length > 0) {
return;
}
setIsSaving(true);
try {
const statusValue: RaceStatus | null =
form.status === "planned" || form.status === "registered" || form.status === "completed"
? form.status
: null;
if (isEditMode && raceId) {
const payload: UpdateRacePayload = {
date: form.date.trim(),
title: form.title.trim(),
distanceKm: parseFloat(form.distanceKm),
status: statusValue,
officialUrl: emptyToNull(form.officialUrl),
startTime: emptyToNull(form.startTime),
clusterSchedule: emptyToNull(form.clusterSchedule),
bibPickup: emptyToNull(form.bibPickup),
bibNumber: emptyToNull(form.bibNumber),
finishTime: emptyToNull(form.finishTime),
finishPlace: emptyToNull(form.finishPlace),
notes: emptyToNull(form.notes),
};
await updateRace(raceId, payload);
navigate(`/races/${raceId}`);
} else {
const id = generateId(form.date.trim(), form.title.trim());
const payload: CreateRacePayload = {
id,
date: form.date.trim(),
title: form.title.trim(),
distanceKm: parseFloat(form.distanceKm),
status: statusValue,
officialUrl: emptyToNull(form.officialUrl),
startTime: emptyToNull(form.startTime),
clusterSchedule: emptyToNull(form.clusterSchedule),
bibPickup: emptyToNull(form.bibPickup),
bibNumber: emptyToNull(form.bibNumber),
finishTime: emptyToNull(form.finishTime),
finishPlace: emptyToNull(form.finishPlace),
notes: emptyToNull(form.notes),
};
const created = await createRace(payload);
navigate(`/races/${created.id}`);
}
} catch (error) {
if (error instanceof ApiError) {
setErrorMessage(error.details.length > 0 ? error.details.join("; ") : error.message);
} else {
setErrorMessage("Произошла ошибка при сохранении.");
}
} finally {
setIsSaving(false);
}
},
[form, isEditMode, raceId, navigate],
);
const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
if (isLoading) {
return (
<section className="page page--race-form" aria-busy="true">
<h1 className="page__title">{pageTitle}</h1>
<p className="page__subtitle">Загружаем данные...</p>
</section>
);
}
return (
<section className="page page--race-form">
<h1 className="page__title">{pageTitle}</h1>
{errorMessage ? (
<p className="page__subtitle page__subtitle--error" role="alert">{errorMessage}</p>
) : null}
{validationErrors.length > 0 ? (
<ul className="form-errors" role="alert">
{validationErrors.map((msg) => (
<li key={msg} className="form-errors__item">{msg}</li>
))}
</ul>
) : null}
<form className="race-form" onSubmit={handleSubmit} noValidate>
<fieldset className="race-form__group">
<legend className="race-form__legend">Основная информация</legend>
<label className="race-form__field">
<span className="race-form__label">Дата *</span>
<input
className="race-form__input"
type="date"
name="date"
value={form.date}
onChange={handleChange}
required
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Название *</span>
<input
className="race-form__input"
type="text"
name="title"
value={form.title}
onChange={handleChange}
required
placeholder="Казанский марафон"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Дистанция, км *</span>
<input
className="race-form__input"
type="number"
name="distanceKm"
value={form.distanceKm}
onChange={handleChange}
required
min="0.1"
step="0.001"
placeholder="21.1"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Статус</span>
<select
className="race-form__input"
name="status"
value={form.status}
onChange={handleChange}
>
{STATUS_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.label}</option>
))}
</select>
</label>
</fieldset>
<fieldset className="race-form__group">
<legend className="race-form__legend">Организация</legend>
<label className="race-form__field">
<span className="race-form__label">Сайт организатора</span>
<input
className="race-form__input"
type="url"
name="officialUrl"
value={form.officialUrl}
onChange={handleChange}
placeholder="https://…"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Время старта</span>
<input
className="race-form__input"
type="text"
name="startTime"
value={form.startTime}
onChange={handleChange}
placeholder="09:30"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Расписание кластеров</span>
<input
className="race-form__input"
type="text"
name="clusterSchedule"
value={form.clusterSchedule}
onChange={handleChange}
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Выдача номеров</span>
<input
className="race-form__input"
type="text"
name="bibPickup"
value={form.bibPickup}
onChange={handleChange}
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Стартовый номер</span>
<input
className="race-form__input"
type="text"
name="bibNumber"
value={form.bibNumber}
onChange={handleChange}
placeholder="1234"
/>
</label>
</fieldset>
<fieldset className="race-form__group">
<legend className="race-form__legend">Результаты</legend>
<label className="race-form__field">
<span className="race-form__label">Финишное время</span>
<input
className="race-form__input"
type="text"
name="finishTime"
value={form.finishTime}
onChange={handleChange}
placeholder="1:45:30"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Место на финише</span>
<input
className="race-form__input"
type="text"
name="finishPlace"
value={form.finishPlace}
onChange={handleChange}
placeholder="12/340"
/>
</label>
</fieldset>
<fieldset className="race-form__group">
<legend className="race-form__legend">Дополнительно</legend>
<label className="race-form__field">
<span className="race-form__label">Заметки</span>
<textarea
className="race-form__input race-form__input--textarea"
name="notes"
value={form.notes}
onChange={handleChange}
rows={4}
/>
</label>
</fieldset>
<div className="race-form__actions">
<button className="btn btn--primary" type="submit" disabled={isSaving}>
{isSaving ? "Сохраняем…" : isEditMode ? "Сохранить" : "Создать"}
</button>
<Link
className="btn btn--secondary"
to={isEditMode && raceId ? `/races/${raceId}` : "/races"}
>
Отмена
</Link>
</div>
</form>
</section>
);
}

View File

@@ -64,7 +64,7 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
</p>
</div>
<span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
<span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
</li>
))}
</ul>
@@ -100,24 +100,25 @@ export function RacesPage(): JSX.Element {
}, [yearFilter, monthFilter]);
useEffect(() => {
const ac = new AbortController();
let isMounted = true;
async function loadRaces(): Promise<void> {
setIsLoading(true);
try {
const items = await getRaces(listQuery);
if (!isMounted) {
const items = await getRaces(listQuery, { signal: ac.signal });
if (!isMounted || ac.signal.aborted) {
return;
}
setRaces(items);
setErrorMessage(null);
} catch (error) {
if (!isMounted) {
if (ac.signal.aborted || !isMounted) {
return;
}
setErrorMessage(getErrorMessage(error));
} finally {
if (isMounted) {
if (isMounted && !ac.signal.aborted) {
setIsLoading(false);
}
}
@@ -126,6 +127,7 @@ export function RacesPage(): JSX.Element {
void loadRaces();
return () => {
isMounted = false;
ac.abort();
};
}, [listQuery]);
@@ -145,6 +147,12 @@ export function RacesPage(): JSX.Element {
<h1 className="page__title">Календарь стартов</h1>
<p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>
{errorMessage && !isLoading ? (
<p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
{errorMessage}
</p>
) : null}
<div className="races-filter" role="search" aria-label="Фильтр по дате">
<label className="races-filter__field">
<span className="races-filter__label">Год</span>

View File

@@ -27,7 +27,7 @@ a {
.app-shell {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
grid-template-rows: auto 1fr auto;
}
.app-shell__header {
@@ -64,7 +64,9 @@ a {
outline: none;
}
.app-shell__link--active {
.app-shell__link--active,
.app-shell__link--active:hover,
.app-shell__link--active:focus-visible {
color: var(--color-surface);
background: var(--color-accent);
}
@@ -75,6 +77,24 @@ a {
padding: var(--space-6);
}
.app-shell__footer {
margin-top: auto;
padding: var(--space-3) var(--space-6);
border-top: 1px solid var(--color-border);
background: var(--color-surface);
}
.app-shell__footer-versions {
margin: 0;
text-align: center;
font-size: var(--font-size-caption);
color: var(--color-text-muted);
}
.app-shell__footer-sep {
user-select: none;
}
.page {
background: var(--color-surface);
border: 1px solid var(--color-border);
@@ -271,6 +291,31 @@ a {
color: #8a5a00;
}
.race-card__status--needs-result {
outline: 1px solid var(--color-warning);
}
.race-details-past-hint {
margin: 0 0 var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid var(--color-warning);
background: #fffaf0;
color: var(--color-text);
font-size: var(--font-size-caption);
}
.race-details-past-hint__link {
color: var(--color-accent);
font-weight: 600;
text-decoration: underline;
}
.race-details-past-hint__link:hover,
.race-details-past-hint__link:focus-visible {
outline: none;
}
.races-filter {
margin-top: var(--space-5);
display: flex;
@@ -406,6 +451,175 @@ a {
color: var(--color-text);
}
/* ─── Buttons ──────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-2) var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font: inherit;
font-weight: 600;
font-size: var(--font-size-caption);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.btn--primary {
background: var(--color-accent);
color: var(--color-surface);
}
.btn--primary:hover:not(:disabled) {
background: #1766be;
}
.btn--secondary {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
}
.btn--secondary:hover:not(:disabled) {
background: #eef2f6;
}
.btn--danger {
background: var(--color-error);
color: var(--color-surface);
}
.btn--danger:hover:not(:disabled) {
background: #a82e2e;
}
/* ─── Confirm banner ───────────────────────────────────── */
.confirm-banner {
margin-top: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--color-error);
border-radius: var(--radius-md);
background: #fef2f2;
}
.confirm-banner__text {
margin: 0 0 var(--space-3);
font-weight: 600;
color: var(--color-error);
}
.confirm-banner__actions {
display: flex;
gap: var(--space-3);
}
/* ─── Race details actions ─────────────────────────────── */
.race-details-actions {
margin-top: var(--space-4);
display: flex;
gap: var(--space-3);
}
.race-details-meta__link {
color: var(--color-accent);
word-break: break-all;
}
.race-details-meta__link:hover {
text-decoration: underline;
}
/* ─── Race form ────────────────────────────────────────── */
.race-form {
margin-top: var(--space-6);
}
.race-form__group {
margin: 0 0 var(--space-6);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: #fcfdff;
}
.race-form__legend {
font-size: var(--font-size-body);
font-weight: 700;
color: var(--color-text);
padding: 0 var(--space-2);
}
.race-form__field {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-top: var(--space-4);
}
.race-form__field:first-of-type {
margin-top: var(--space-3);
}
.race-form__label {
font-size: var(--font-size-caption);
font-weight: 600;
color: var(--color-text-muted);
}
.race-form__input {
font: inherit;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text);
}
.race-form__input:focus {
outline: 2px solid var(--color-accent);
outline-offset: -1px;
border-color: var(--color-accent);
}
.race-form__input--textarea {
resize: vertical;
min-height: 5rem;
}
.race-form__actions {
display: flex;
gap: var(--space-3);
align-items: center;
}
.form-errors {
margin: var(--space-3) 0 0;
padding: var(--space-3) var(--space-5);
border: 1px solid var(--color-error);
border-radius: var(--radius-sm);
background: #fef2f2;
color: var(--color-error);
font-size: var(--font-size-caption);
}
.form-errors__item {
margin: var(--space-1) 0;
}
/* ─── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
.dashboard-grid,
.race-lists,
@@ -416,4 +630,9 @@ a {
.race-details-header {
flex-direction: column;
}
.race-form__actions {
flex-direction: column;
align-items: stretch;
}
}

View File

@@ -16,6 +16,7 @@
--font-size-caption: 0.875rem;
--line-height-base: 1.5;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;

1
frontend/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

View File

@@ -2,5 +2,5 @@ import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()]
plugins: [react()],
});