Compare commits

..

10 Commits

Author SHA1 Message Date
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
19 changed files with 919 additions and 104 deletions

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

@@ -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";
@@ -13,5 +13,14 @@ export function createApp(): express.Express {
app.use(healthRouter);
app.use(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

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

View File

@@ -1,4 +1,7 @@
/** 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;
@@ -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,6 +39,10 @@ export interface RaceDto {
updatedAt: string | null;
}
function toISOString(value: Date | string): string {
return value instanceof Date ? value.toISOString() : String(value);
}
/** Convert a DB row to the API DTO (camelCase). */
export function rowToDto(row: RaceRow): RaceDto {
return {
@@ -52,8 +59,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

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

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

@@ -23,6 +23,14 @@ export function AppLayout(): JSX.Element {
>
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">

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 +0,0 @@
export {};

View File

@@ -70,6 +70,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 +96,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 {

View File

@@ -1,6 +1,6 @@
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,
@@ -17,11 +17,44 @@ 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(() => {
let isMounted = true;
@@ -65,6 +98,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">
@@ -100,6 +149,43 @@ export function RaceDetailsPage(): JSX.Element {
<span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
</div>
<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>
@@ -116,11 +202,16 @@ export function RaceDetailsPage(): JSX.Element {
<dt className="race-details-meta__key">Статус</dt>
<dd className="race-details-meta__value">{getRaceStatusLabel(race.status)}</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 +222,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,421 @@
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 {
return {
date: race.date,
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://example.com"
/>
</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

@@ -145,6 +145,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

@@ -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);
}
@@ -406,6 +408,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 +587,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;