Compare commits

...

12 Commits

Author SHA1 Message Date
Vakanaut
821f9167ca fix(frontend): register AG Charts modules
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-07-13 20:47:55 +03:00
e882e8ded6 Merge pull request 'feat: complete race history sprint' (#45) from feature/race-history-covers-and-charts into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #45
2026-07-13 17:25:05 +00:00
Vakanaut
a8b87fc6b1 feat: complete race history sprint
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-07-13 08:31:12 +03:00
46998a1a67 Merge pull request 'docs: plan race cover restoration' (#44) from fix/restore-race-covers into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #44
2026-07-12 15:34:12 +00:00
Vakanaut
2d1390ae63 docs: plan race cover restoration
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-07-12 18:33:14 +03:00
f6ad7b924a Merge pull request 'fix: run migrations before starting backend' (#43) from fix/auto-run-migrations into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #43
2026-07-12 14:08:00 +00:00
Vakanaut
e68df524ef fix: run migrations before starting backend
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-07-12 17:07:32 +03:00
ea7b8aff7a Merge pull request 'feature/profile-usernames' (#42) from feature/profile-usernames into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #42
2026-07-12 14:01:49 +00:00
Vakanaut
77790a646b Merge remote-tracking branch 'origin/main' into feature/profile-usernames
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
# Conflicts:
#	backend/package-lock.json
#	backend/package.json
#	backend/src/authMiddleware.ts
#	backend/src/authService.ts
#	backend/src/routes/auth.ts
#	backend/src/routes/users.ts
#	backend/test/app.test.ts
#	frontend/package-lock.json
#	frontend/package.json
#	frontend/src/api/auth.ts
#	frontend/src/api/index.ts
#	frontend/src/api/types.ts
#	frontend/src/api/users.ts
#	frontend/src/app/router.tsx
#	frontend/src/pages/AccountPage.tsx
#	frontend/src/pages/PublicProfilePage.tsx
2026-07-12 17:01:23 +03:00
Vakanaut
d4c72115d8 feat: customize public profile visibility
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
2026-07-12 16:57:43 +03:00
Vakanaut
103e3ca209 feat: add public user profiles 2026-07-12 16:51:18 +03:00
e68265d9f7 Merge pull request 'feat: add public user profiles' (#41) from feature/public-profiles into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Reviewed-on: #41
2026-07-12 13:29:56 +00:00
35 changed files with 969 additions and 349 deletions

View File

@@ -7,18 +7,20 @@
## В работе
### Backend 1.5.0
### Backend 1.6.0
#### Added
- Управление паролем и сессиями: проверка текущего пароля, список активных сессий, отзыв выбранной или всех остальных сессий.
- Фильтрация стартов по статусу, периоду и дистанции; backfill и обновление автоматически получаемых обложек.
### Frontend 0.8.0
### Frontend 0.9.0
#### Added
- Экран «Аккаунт»: подтверждённый email, смена пароля и управление другими активными сессиями.
- На дашборде появились фильтруемые «Последние старты» с пагинацией и переходом в старт, ссылки из карточек рекордов и интерактивный график прогресса.
- Поиск, фильтры, сортировка и экспорт истории; график прогресса переведён на AG Charts.
## Backend

View File

@@ -19,4 +19,4 @@ COPY backend/migrations ./migrations
COPY import ./import
EXPOSE 3000
ENV PORT=3000
CMD ["node", "dist/index.js"]
CMD ["sh", "-c", "node dist/migrate.js && node dist/index.js"]

View File

@@ -0,0 +1,12 @@
ALTER TABLE users ADD COLUMN IF NOT EXISTS profile_username TEXT;
ALTER TABLE users ADD COLUMN IF NOT EXISTS is_future_races_public BOOLEAN NOT NULL DEFAULT FALSE;
ALTER TABLE users ADD COLUMN IF NOT EXISTS is_completed_races_public BOOLEAN NOT NULL DEFAULT FALSE;
UPDATE users
SET is_future_races_public = is_profile_public,
is_completed_races_public = is_profile_public
WHERE is_profile_public = TRUE;
CREATE UNIQUE INDEX IF NOT EXISTS users_profile_username_normalized_key
ON users (LOWER(profile_username))
WHERE profile_username IS NOT NULL;

View File

@@ -0,0 +1,2 @@
ALTER TABLE races
ADD COLUMN IF NOT EXISTS cover_image_manual BOOLEAN NOT NULL DEFAULT TRUE;

View File

@@ -1,12 +1,12 @@
{
"name": "calendar-run-backend",
"version": "1.5.1",
"version": "1.6.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "calendar-run-backend",
"version": "1.5.1",
"version": "1.6.0",
"dependencies": {
"argon2": "^0.44.0",
"cookie-parser": "^1.4.7",

View File

@@ -1,6 +1,6 @@
{
"name": "calendar-run-backend",
"version": "1.5.1",
"version": "1.6.0",
"private": true,
"scripts": {
"build": "tsc",
@@ -8,6 +8,7 @@
"start": "node dist/index.js",
"db:migrate": "ts-node src/migrate.ts",
"seed": "ts-node src/seed.ts",
"backfill:covers": "ts-node src/backfillRaceCovers.ts",
"test": "tsx --import ./test/setup.ts --test test/app.test.ts"
},
"dependencies": {

View File

@@ -10,7 +10,9 @@ declare global {
id: string;
email: string;
emailVerifiedAt: string | null;
isProfilePublic: boolean;
profileUsername: string | null;
isFutureRacesPublic: boolean;
isCompletedRacesPublic: boolean;
};
csrfTokenHash: string;
sessionToken: string;

View File

@@ -18,7 +18,9 @@ export interface AuthUser {
id: string;
email: string;
emailVerifiedAt: string | null;
isProfilePublic: boolean;
profileUsername: string | null;
isFutureRacesPublic: boolean;
isCompletedRacesPublic: boolean;
}
interface UserRow {
@@ -26,7 +28,9 @@ interface UserRow {
email: string;
password_hash: string;
email_verified_at: Date | string | null;
is_profile_public: boolean;
profile_username: string | null;
is_future_races_public: boolean;
is_completed_races_public: boolean;
}
interface SessionRow {
@@ -37,7 +41,9 @@ interface SessionRow {
expires_at: Date | string;
email: string;
email_verified_at: Date | string | null;
is_profile_public: boolean;
profile_username: string | null;
is_future_races_public: boolean;
is_completed_races_public: boolean;
}
interface SessionListRow {
@@ -68,7 +74,9 @@ function userFromRow(row: UserRow): AuthUser {
id: row.id,
email: row.email,
emailVerifiedAt: toIso(row.email_verified_at),
isProfilePublic: row.is_profile_public,
profileUsername: row.profile_username,
isFutureRacesPublic: row.is_future_races_public,
isCompletedRacesPublic: row.is_completed_races_public,
};
}
@@ -85,7 +93,9 @@ function isUniqueViolation(error: unknown): boolean {
export async function findUserByEmail(email: string): Promise<UserRow | null> {
const normalized = normalizeEmail(email);
const { rows } = await pool.query<UserRow>(
"SELECT id, email, password_hash, email_verified_at, is_profile_public FROM users WHERE LOWER(BTRIM(email)) = $1",
`SELECT id, email, password_hash, email_verified_at, profile_username,
is_future_races_public, is_completed_races_public
FROM users WHERE LOWER(BTRIM(email)) = $1`,
[normalized],
);
return rows[0] ?? null;
@@ -146,7 +156,8 @@ export async function registerUser(email: string, password: string): Promise<voi
({ rows } = await client.query<UserRow>(
`INSERT INTO users (email, password_hash)
VALUES ($1, $2)
RETURNING id, email, password_hash, email_verified_at, is_profile_public`,
RETURNING id, email, password_hash, email_verified_at, profile_username,
is_future_races_public, is_completed_races_public`,
[normalized, passwordHash],
));
} catch (error) {
@@ -185,7 +196,9 @@ export async function createSession(userId: string): Promise<{ sessionToken: str
RETURNING id, user_id, token_hash, csrf_token_hash, expires_at,
(SELECT email FROM users WHERE id = $1) AS email,
(SELECT email_verified_at FROM users WHERE id = $1) AS email_verified_at,
(SELECT is_profile_public FROM users WHERE id = $1) AS is_profile_public`,
(SELECT profile_username FROM users WHERE id = $1) AS profile_username,
(SELECT is_future_races_public FROM users WHERE id = $1) AS is_future_races_public,
(SELECT is_completed_races_public FROM users WHERE id = $1) AS is_completed_races_public`,
[userId, sha256Hex(sessionToken), sha256Hex(csrfToken), expiresAt],
);
const row = rows[0];
@@ -197,7 +210,9 @@ export async function createSession(userId: string): Promise<{ sessionToken: str
id: row.user_id,
email: row.email,
emailVerifiedAt: toIso(row.email_verified_at),
isProfilePublic: row.is_profile_public,
profileUsername: row.profile_username,
isFutureRacesPublic: row.is_future_races_public,
isCompletedRacesPublic: row.is_completed_races_public,
},
};
}
@@ -312,7 +327,8 @@ export async function rotateCsrf(sessionToken: string): Promise<string | null> {
export async function getSession(sessionToken: string): Promise<{ user: AuthUser; csrfTokenHash: string } | null> {
const tokenHash = sha256Hex(sessionToken);
const { rows } = await pool.query<SessionRow>(
`SELECT s.id, s.user_id, s.token_hash, s.csrf_token_hash, s.expires_at, u.email, u.email_verified_at, u.is_profile_public
`SELECT s.id, s.user_id, s.token_hash, s.csrf_token_hash, s.expires_at, u.email, u.email_verified_at,
u.profile_username, u.is_future_races_public, u.is_completed_races_public
FROM sessions s
JOIN users u ON u.id = s.user_id
WHERE s.token_hash = $1 AND s.revoked_at IS NULL AND s.expires_at > NOW()`,
@@ -331,16 +347,38 @@ export async function getSession(sessionToken: string): Promise<{ user: AuthUser
id: row.user_id,
email: row.email,
emailVerifiedAt: toIso(row.email_verified_at),
isProfilePublic: row.is_profile_public,
profileUsername: row.profile_username,
isFutureRacesPublic: row.is_future_races_public,
isCompletedRacesPublic: row.is_completed_races_public,
},
csrfTokenHash: row.csrf_token_hash,
};
}
export async function setProfileVisibility(userId: string, isProfilePublic: boolean): Promise<void> {
export async function updateProfile(
userId: string,
profile: {
profileUsername?: string | null;
isFutureRacesPublic?: boolean;
isCompletedRacesPublic?: boolean;
},
): Promise<void> {
await pool.query(
"UPDATE users SET is_profile_public = $2, updated_at = NOW() WHERE id = $1",
[userId, isProfilePublic],
`UPDATE users SET
profile_username = CASE WHEN $2 THEN $3 ELSE profile_username END,
is_future_races_public = CASE WHEN $4 THEN $5 ELSE is_future_races_public END,
is_completed_races_public = CASE WHEN $6 THEN $7 ELSE is_completed_races_public END,
updated_at = NOW()
WHERE id = $1`,
[
userId,
profile.profileUsername !== undefined,
profile.profileUsername,
profile.isFutureRacesPublic !== undefined,
profile.isFutureRacesPublic,
profile.isCompletedRacesPublic !== undefined,
profile.isCompletedRacesPublic,
],
);
}

View File

@@ -0,0 +1,55 @@
import { pool } from "./db";
import { extractRaceCoverImage } from "./raceCoverImage";
type Candidate = { id: string; official_url: string };
export type CoverBackfillStats = {
candidates: number;
restored: number;
skipped: number;
};
export async function backfillRaceCovers(): Promise<CoverBackfillStats> {
const { rows } = await pool.query<Candidate>(
`SELECT id, official_url
FROM races
WHERE cover_image_url IS NULL
AND official_url IS NOT NULL
AND BTRIM(official_url) <> ''
ORDER BY race_date ASC, id ASC`,
);
const stats: CoverBackfillStats = { candidates: rows.length, restored: 0, skipped: 0 };
// ponytail: sequential network calls keep memory and outbound load bounded; parallelize per batch if volume requires it.
for (const row of rows) {
const coverImageUrl = await extractRaceCoverImage(row.official_url);
if (!coverImageUrl) {
stats.skipped += 1;
continue;
}
const result = await pool.query(
`UPDATE races
SET cover_image_url = $1, cover_image_manual = FALSE, updated_at = NOW()
WHERE id = $2 AND cover_image_url IS NULL`,
[coverImageUrl, row.id],
);
if (result.rowCount === 1) {
stats.restored += 1;
} else {
stats.skipped += 1;
}
}
return stats;
}
if (require.main === module) {
backfillRaceCovers()
.then((stats) => console.log(JSON.stringify(stats)))
.catch((error: unknown) => {
console.error("[backfill:covers] FAILED:", error instanceof Error ? error.message : error);
process.exitCode = 1;
})
.finally(() => pool.end());
}

View File

@@ -12,6 +12,7 @@ export interface RaceRow {
status: string | null;
official_url: string | null;
cover_image_url: string | null;
cover_image_manual: boolean;
start_time: string | null;
cluster_schedule: string | null;
bib_pickup: string | null;

View File

@@ -13,14 +13,14 @@ import {
revokeSessionById,
rotateCsrf,
revokeSession,
setProfileVisibility,
updateProfile,
verifyEmailToken,
} from "../authService";
import { clearSessionCookie, requireAuth, setSessionCookie } from "../authMiddleware";
import { isValidPassword, normalizeEmail } from "../security";
import { verifyTurnstileToken } from "../turnstile";
const router = Router();
const router: Router = Router();
const genericOk = { ok: true };
const genericAuthError = { error: "invalid_credentials", details: ["Invalid email or password"] };
@@ -80,7 +80,12 @@ const passwordChangeSchema = z.object({
}).strict();
const sessionIdSchema = z.string().uuid();
const profileSchema = z.object({ isProfilePublic: z.boolean() }).strict();
const profileUsernameSchema = z.string().trim().toLowerCase().min(3).max(30).regex(/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/);
const profileSchema = z.object({
profileUsername: profileUsernameSchema.nullable().optional(),
isFutureRacesPublic: z.boolean().optional(),
isCompletedRacesPublic: z.boolean().optional(),
}).strict().refine((profile) => Object.keys(profile).length > 0);
function validationError(res: Response): void {
res.status(400).json({ error: "validation_error", details: ["Invalid request body"] });
@@ -156,9 +161,13 @@ router.patch("/auth/profile", requireAuth, async (req: Request, res: Response, n
return;
}
try {
await setProfileVisibility(req.auth!.user.id, parsed.data.isProfilePublic);
res.json({ isProfilePublic: parsed.data.isProfilePublic });
await updateProfile(req.auth!.user.id, parsed.data);
res.json({ ok: true });
} catch (error) {
if (typeof error === "object" && error !== null && (error as { code?: string }).code === "23505") {
res.status(409).json({ error: "username_taken", details: ["Username is already in use"] });
return;
}
next(error);
}
});

View File

@@ -2,7 +2,7 @@ import { Router, Request, Response } from "express";
import { checkDbConnection } from "../db";
import { getBackendVersion } from "../version";
const router = Router();
const router: Router = Router();
router.get("/health", (_req: Request, res: Response) => {
res.json({ status: "ok", version: getBackendVersion() });

View File

@@ -5,7 +5,7 @@ import { rowToDto, bodyToColumns, RaceRow } from "../mappers/race";
import { extractRaceCoverImage } from "../raceCoverImage";
import { requireAuth } from "../authMiddleware";
const router = Router();
const router: Router = Router();
router.use(requireAuth);
type ValidationErrorBody = {
@@ -136,12 +136,77 @@ function parseOptionalIntegerQuery(
return { value: parsed };
}
function parseOptionalNumberQuery(
value: unknown,
fieldName: string,
min?: number,
max?: number,
): { value?: number; error?: string } {
if (value == null) {
return {};
}
if (typeof value !== "string" || value.trim() === "") {
return { error: `${fieldName} must be a number` };
}
const parsed = Number(value);
if (!Number.isFinite(parsed)) {
return { error: `${fieldName} must be a number` };
}
if (min != null && parsed < min) {
return { error: `${fieldName} must be between ${min} and ${max}` };
}
if (max != null && parsed > max) {
return { error: `${fieldName} must be between ${min} and ${max}` };
}
return { value: parsed };
}
function parseOptionalDateQuery(value: unknown, fieldName: string): { value?: string; error?: string } {
if (value == null) {
return {};
}
if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
return { error: `${fieldName} must be YYYY-MM-DD` };
}
const parsed = new Date(`${value}T00:00:00.000Z`);
if (Number.isNaN(parsed.valueOf()) || parsed.toISOString().slice(0, 10) !== value) {
return { error: `${fieldName} must be a valid calendar date` };
}
return { value };
}
/* ─── GET /races ──────────────────────────────────────────── */
router.get("/races", async (req: Request, res: Response) => {
const yearResult = parseOptionalIntegerQuery(req.query.year, "year");
const monthResult = parseOptionalIntegerQuery(req.query.month, "month", 1, 12);
const details = [yearResult.error, monthResult.error].filter(Boolean) as string[];
const statusResult = req.query.status == null
? {}
: typeof req.query.status === "string" && ["planned", "registered", "completed"].includes(req.query.status)
? { value: req.query.status }
: { error: "status must be planned, registered or completed" };
const dateFromResult = parseOptionalDateQuery(req.query.dateFrom, "dateFrom");
const dateToResult = parseOptionalDateQuery(req.query.dateTo, "dateTo");
const distanceMinResult = parseOptionalNumberQuery(req.query.distanceMin, "distanceMin", 0.001, 999.999);
const distanceMaxResult = parseOptionalNumberQuery(req.query.distanceMax, "distanceMax", 0.001, 999.999);
const details = [
yearResult.error,
monthResult.error,
statusResult.error,
dateFromResult.error,
dateToResult.error,
distanceMinResult.error,
distanceMaxResult.error,
].filter(Boolean) as string[];
if (dateFromResult.value && dateToResult.value && dateFromResult.value > dateToResult.value) {
details.push("dateFrom must not be after dateTo");
}
if (distanceMinResult.value != null && distanceMaxResult.value != null && distanceMinResult.value > distanceMaxResult.value) {
details.push("distanceMin must not be greater than distanceMax");
}
if (details.length > 0) {
validationError(res, details);
@@ -164,6 +229,26 @@ router.get("/races", async (req: Request, res: Response) => {
conditions.push(`EXTRACT(MONTH FROM race_date) = $${idx++}`);
params.push(monthResult.value);
}
if (statusResult.value != null) {
conditions.push(`status = $${idx++}`);
params.push(statusResult.value);
}
if (dateFromResult.value != null) {
conditions.push(`race_date >= $${idx++}`);
params.push(dateFromResult.value);
}
if (dateToResult.value != null) {
conditions.push(`race_date <= $${idx++}`);
params.push(dateToResult.value);
}
if (distanceMinResult.value != null) {
conditions.push(`distance_km >= $${idx++}`);
params.push(distanceMinResult.value);
}
if (distanceMaxResult.value != null) {
conditions.push(`distance_km <= $${idx++}`);
params.push(distanceMaxResult.value);
}
const where = conditions.length ? `WHERE ${conditions.join(" AND ")}` : "";
const sql = `SELECT * FROM races ${where} ORDER BY race_date ASC`;
@@ -220,6 +305,8 @@ router.post("/races", async (req: Request, res: Response) => {
const { columns, values } = bodyToColumns(payload as Record<string, unknown>);
columns.unshift("owner_user_id");
values.unshift(req.auth!.user.id);
columns.push("cover_image_manual");
values.push(hasManualCover);
const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
const sql = `INSERT INTO races (${columns.join(", ")}) VALUES (${placeholders}) RETURNING *`;
@@ -251,15 +338,43 @@ router.patch("/races/:id", async (req: Request, res: Response) => {
validationError(res, schemaDetails(parsed.error));
return;
}
const { columns, values } = bodyToColumns(parsed.data as Record<string, unknown>);
const sets = columns.map((col, i) => `${col} = $${i + 1}`);
sets.push(`updated_at = NOW()`);
values.push(id);
values.push(req.auth!.user.id);
const sql = `UPDATE races SET ${sets.join(", ")} WHERE id = $${values.length - 1} AND owner_user_id = $${values.length} RETURNING *`;
try {
const currentResult = await pool.query<Pick<RaceRow, "official_url" | "cover_image_url" | "cover_image_manual">>(
"SELECT official_url, cover_image_url, cover_image_manual FROM races WHERE id = $1 AND owner_user_id = $2",
[id, req.auth!.user.id],
);
if (currentResult.rows.length === 0) {
res.status(404).json({ error: "not_found", details: ["Race not found"] });
return;
}
const payload = { ...parsed.data };
const officialUrlChanged = Object.prototype.hasOwnProperty.call(payload, "officialUrl");
const current = currentResult.rows[0]!;
const hasCoverField = Object.prototype.hasOwnProperty.call(payload, "coverImageUrl");
const sameAsExistingCover = typeof payload.coverImageUrl === "string" && payload.coverImageUrl === current.cover_image_url;
const manualCoverChanged = typeof payload.coverImageUrl === "string" && payload.coverImageUrl.trim() !== "" && !sameAsExistingCover;
let coverImageManual = current.cover_image_manual;
if (hasCoverField && !sameAsExistingCover) {
coverImageManual = manualCoverChanged;
}
const officialUrl = payload.officialUrl === undefined ? current.official_url : payload.officialUrl;
if (officialUrlChanged && !current.cover_image_manual && !manualCoverChanged && typeof officialUrl === "string" && officialUrl.trim() !== "") {
payload.coverImageUrl = await extractRaceCoverImage(officialUrl);
coverImageManual = false;
}
const { columns, values } = bodyToColumns(payload as Record<string, unknown>);
if (hasCoverField || officialUrlChanged) {
columns.push("cover_image_manual");
values.push(coverImageManual);
}
const sets = columns.map((col, i) => `${col} = $${i + 1}`);
sets.push(`updated_at = NOW()`);
values.push(id);
values.push(req.auth!.user.id);
const sql = `UPDATE races SET ${sets.join(", ")} WHERE id = $${values.length - 1} AND owner_user_id = $${values.length} RETURNING *`;
const { rows } = await pool.query<RaceRow>(sql, values);
if (rows.length === 0) {
res.status(404).json({ error: "not_found", details: ["Race not found"] });

View File

@@ -10,22 +10,27 @@ interface PublicRaceRow {
distance_km: string;
status: "planned" | "registered" | "completed" | null;
cover_image_url: string | null;
finish_time: string | null;
finish_place: string | null;
}
function raceDate(value: string | Date): string {
return typeof value === "string" ? value.slice(0, 10) : value.toISOString().slice(0, 10);
}
router.get("/users/:id/races", async (req: Request, res: Response) => {
const parsed = z.string().uuid().safeParse(req.params.id);
router.get("/users/:username/races", async (req: Request, res: Response) => {
const parsed = z.string().trim().toLowerCase().min(3).max(30).regex(/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/).safeParse(req.params.username);
if (!parsed.success) {
res.status(400).json({ error: "validation_error", details: ["id: Must be a UUID"] });
res.status(400).json({ error: "validation_error", details: ["username: Invalid username"] });
return;
}
try {
const profile = await pool.query(
"SELECT id FROM users WHERE id = $1 AND is_profile_public = TRUE",
`SELECT id, is_future_races_public, is_completed_races_public
FROM users
WHERE LOWER(profile_username) = $1
AND (is_future_races_public = TRUE OR is_completed_races_public = TRUE)`,
[parsed.data],
);
if (profile.rowCount === 0) {
@@ -33,9 +38,12 @@ router.get("/users/:id/races", async (req: Request, res: Response) => {
return;
}
const { rows } = await pool.query<PublicRaceRow>(
`SELECT race_date, title, distance_km, status, cover_image_url
FROM races WHERE owner_user_id = $1 ORDER BY race_date ASC`,
[parsed.data],
`SELECT race_date, title, distance_km, status, cover_image_url, finish_time, finish_place
FROM races
WHERE owner_user_id = $1
AND ((status = 'completed' AND $2) OR (status IS DISTINCT FROM 'completed' AND $3))
ORDER BY race_date ASC`,
[profile.rows[0].id, profile.rows[0].is_completed_races_public, profile.rows[0].is_future_races_public],
);
res.json(rows.map((row) => ({
date: raceDate(row.race_date),
@@ -43,9 +51,11 @@ router.get("/users/:id/races", async (req: Request, res: Response) => {
distanceKm: Number(row.distance_km),
status: row.status,
coverImageUrl: row.cover_image_url,
finishTime: row.status === "completed" ? row.finish_time : null,
finishPlace: row.status === "completed" ? row.finish_place : null,
})));
} catch (error) {
console.error("[GET /users/:id/races]", error);
console.error("[GET /users/:username/races]", error);
res.status(503).json({ error: "database_unavailable" });
}
});

View File

@@ -4,6 +4,7 @@ import path from "node:path";
import { after, test } from "node:test";
import request from "supertest";
import { buildHelmetOptions, createApp } from "../src/app";
import { backfillRaceCovers } from "../src/backfillRaceCovers";
import {
cleanupExpiredAuthRows,
createResetToken,
@@ -161,6 +162,29 @@ test("GET /api/races accepts year and month", async () => {
assert.ok(Array.isArray(res.body));
});
test("GET /api/races filters by status, date and distance", async () => {
const { agent, csrfToken } = await authAgent();
await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
slug: "2026-05-01-filter-planned", date: "2026-05-01", title: "Planned 5", distanceKm: 5, status: "planned",
}).expect(201);
await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
slug: "2026-06-01-filter-completed", date: "2026-06-01", title: "Completed 10", distanceKm: 10, status: "completed",
}).expect(201);
await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
slug: "2026-07-01-filter-completed", date: "2026-07-01", title: "Completed 21", distanceKm: 21.1, status: "completed",
}).expect(201);
const res = await agent.get("/api/races?status=completed&dateFrom=2026-06-01&dateTo=2026-06-30&distanceMax=10").expect(200);
assert.deepEqual(res.body.map((race: { title: string }) => race.title), ["Completed 10"]);
});
test("GET /api/races rejects inverted filter ranges", async () => {
const { agent } = await authAgent();
const res = await agent.get("/api/races?dateFrom=2026-07-01&dateTo=2026-06-01").expect(400);
assert.equal(res.body.error, "validation_error");
assert.ok(res.body.details.some((detail: string) => detail.includes("dateFrom")));
});
test("GET /api/races/:id rejects a non-UUID id", async () => {
const { agent } = await authAgent();
const res = await agent.get("/api/races/does-not-exist").expect(400);
@@ -173,46 +197,67 @@ test("GET /api/races requires authentication", async () => {
assert.equal(res.body.error, "unauthorized");
});
test("public profile exposes only its owner's calendar after they enable it", async () => {
test("public profile uses its username and separate visibility settings", async () => {
const { agent } = await authAgent();
const user = await agent.get("/api/auth/me").expect(200);
const userId = user.body.user.id as string;
await agent
.post("/api/races")
.set("X-CSRF-Token", user.body.csrfToken as string)
.send({
slug: "2026-08-01-public-race",
slug: "2026-08-01-planned-race",
date: "2026-08-01",
title: "Public Race",
title: "Planned Race",
distanceKm: 10,
notes: "Private note",
bibNumber: "123",
})
.expect(201);
await agent
.post("/api/races")
.set("X-CSRF-Token", user.body.csrfToken as string)
.send({
slug: "2026-07-01-completed-race",
date: "2026-07-01",
title: "Completed Race",
distanceKm: 10,
status: "completed",
finishTime: "00:40:00",
finishPlace: "12",
notes: "Private note",
})
.expect(201);
await request(app).get(`/api/users/${userId}/races`).expect(404);
await request(app).get("/api/users/public-runner/races").expect(404);
await agent
.patch("/api/auth/profile")
.set("X-CSRF-Token", user.body.csrfToken as string)
.send({ isProfilePublic: true })
.send({ profileUsername: "public-runner", isFutureRacesPublic: true, isCompletedRacesPublic: false })
.expect(200);
const publicRaces = await request(app).get(`/api/users/${userId}/races`).expect(200);
assert.deepEqual(publicRaces.body, [{
const futureRaces = await request(app).get("/api/users/public-runner/races").expect(200);
assert.deepEqual(futureRaces.body, [{
date: "2026-08-01",
title: "Public Race",
title: "Planned Race",
distanceKm: 10,
status: null,
coverImageUrl: null,
finishTime: null,
finishPlace: null,
}]);
await agent
.patch("/api/auth/profile")
.set("X-CSRF-Token", user.body.csrfToken as string)
.send({ isProfilePublic: false })
.send({ isFutureRacesPublic: false, isCompletedRacesPublic: true })
.expect(200);
await request(app).get(`/api/users/${userId}/races`).expect(404);
const completedRaces = await request(app).get("/api/users/public-runner/races").expect(200);
assert.deepEqual(completedRaces.body, [{
date: "2026-07-01",
title: "Completed Race",
distanceKm: 10,
status: "completed",
coverImageUrl: null,
finishTime: "00:40:00",
finishPlace: "12",
}]);
});
test("login uses generic response for missing user and wrong password", async () => {
@@ -439,6 +484,39 @@ test("POST /api/races stores manual coverImageUrl", async () => {
assert.equal(res.body.coverImageUrl, coverImageUrl);
});
test("PATCH /api/races refreshes an automatic cover but preserves a manual cover", async () => {
const originalFetch = globalThis.fetch;
let imageName = "first.jpg";
globalThis.fetch = async () => new Response(`<meta property="og:image" content="/${imageName}">`, {
status: 200,
headers: { "content-type": "text/html" },
});
try {
const { agent, csrfToken } = await authAgent();
const created = await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
slug: "2026-06-06-auto-refresh", date: "2026-06-06", title: "Auto Refresh", distanceKm: 10, officialUrl: "https://example.com/first",
}).expect(201);
imageName = "second.jpg";
const refreshed = await agent.patch(`/api/races/${created.body.id}`).set("X-CSRF-Token", csrfToken).send({
officialUrl: "https://example.com/second",
}).expect(200);
assert.equal(refreshed.body.coverImageUrl, "https://example.com/second.jpg");
const manual = await agent.patch(`/api/races/${created.body.id}`).set("X-CSRF-Token", csrfToken).send({
officialUrl: "https://example.com/third", coverImageUrl: "https://example.com/manual.jpg",
}).expect(200);
imageName = "fourth.jpg";
const preserved = await agent.patch(`/api/races/${created.body.id}`).set("X-CSRF-Token", csrfToken).send({
officialUrl: "https://example.com/fourth",
}).expect(200);
assert.equal(manual.body.coverImageUrl, "https://example.com/manual.jpg");
assert.equal(preserved.body.coverImageUrl, "https://example.com/manual.jpg");
} finally {
globalThis.fetch = originalFetch;
}
});
test("POST /api/races rejects unknown and malformed fields", async () => {
const { agent, csrfToken } = await authAgent();
const res = await agent
@@ -505,6 +583,58 @@ test("POST /api/races auto extracts coverImageUrl from officialUrl", async () =>
}
});
test("PATCH /api/races auto extracts a missing cover when officialUrl changes", async () => {
const originalFetch = globalThis.fetch;
globalThis.fetch = async () => new Response("", { status: 404 });
try {
const { agent, csrfToken } = await authAgent();
const created = await agent
.post("/api/races")
.set("X-CSRF-Token", csrfToken)
.send({ slug: "2026-06-04-patch-cover", date: "2026-06-04", title: "Patch Cover", distanceKm: 10 })
.expect(201);
globalThis.fetch = async () => new Response('<meta property="og:image" content="/patched.jpg">', {
status: 200,
headers: { "content-type": "text/html" },
});
const updated = await agent
.patch(`/api/races/${created.body.id}`)
.set("X-CSRF-Token", csrfToken)
.send({ officialUrl: "https://example.com/patched" })
.expect(200);
assert.equal(updated.body.coverImageUrl, "https://example.com/patched.jpg");
} finally {
globalThis.fetch = originalFetch;
}
});
test("cover backfill restores only races without a cover", async () => {
const originalFetch = globalThis.fetch;
globalThis.fetch = async () => new Response('<meta property="og:image" content="/backfill.jpg">', {
status: 200,
headers: { "content-type": "text/html" },
});
try {
const { agent, csrfToken } = await authAgent();
await agent.post("/api/races").set("X-CSRF-Token", csrfToken).send({
slug: "2026-06-05-backfill", date: "2026-06-05", title: "Backfill", distanceKm: 10,
}).expect(201);
await pool.query("UPDATE races SET official_url = $1 WHERE slug = $2", ["https://example.com/backfill", "2026-06-05-backfill"]);
const stats = await backfillRaceCovers();
assert.ok(stats.candidates >= 1);
assert.ok(stats.restored >= 1);
const result = await pool.query<{ cover_image_url: string }>("SELECT cover_image_url FROM races WHERE slug = $1", ["2026-06-05-backfill"]);
assert.equal(result.rows[0]?.cover_image_url, "https://example.com/backfill.jpg");
} finally {
globalThis.fetch = originalFetch;
}
});
test("POST /api/races succeeds when cover extraction fails", async () => {
const originalFetch = globalThis.fetch;
globalThis.fetch = async () => {

View File

@@ -85,8 +85,10 @@ Liveness без проверки БД:
### `GET /api/races`
Возвращает только забеги текущего пользователя, отсортированные по дате. Опциональные
query-параметры: `year` (целое число) и `month` (112); без результатов возвращается
`[]`.
query-параметры: `year` (целое число), `month` (112), `status` (`planned`,
`registered` или `completed`), `dateFrom`/`dateTo` (`YYYY-MM-DD`) и
`distanceMin`/`distanceMax` (километры, от `0.001` до `999.999`). Диапазоны не
могут быть перевёрнуты; без результатов возвращается `[]`.
### `GET /api/races/:id`
@@ -124,6 +126,13 @@ query-параметры: `year` (целое число) и `month` (112); б
Удаляет забег. Успех: `204` без тела.
При изменении `officialUrl` backend best-effort получает обложку, если у старта
ещё нет обложки. Ручная `coverImageUrl` не перезаписывается.
Одноразовое восстановление обложек существующих стартов запускается командой
`npm run backfill:covers`. Команда идемпотентна и печатает только агрегированную
статистику.
## Модель `Race`
| Поле | Тип | POST | PATCH | Ограничение |

View File

@@ -6,8 +6,8 @@
| Контур | Версия | Уже работает |
|---|---:|---|
| Backend | `1.5.0` | Express + PostgreSQL, миграции и seed, строгий CRUD личных стартов, cookie-сессии, CSRF, подтверждение email, Turnstile, SMTP, смена пароля и управление сессиями, SSRF-защита обложек, `/health`, `/ready`, `/meta`, CI с PostgreSQL. |
| Frontend | `0.8.0` | Защищённые маршруты и auth-экраны, экран аккаунта, нативные поля даты/старта, удобный ввод результатов, дашборд с последними стартами и интерактивным графиком, версия FE/BE в футере. |
| Backend | `1.6.0` | Express + PostgreSQL, миграции и seed, строгий CRUD личных стартов, фильтры истории, cookie-сессии, CSRF, подтверждение email, Turnstile, SMTP, смена пароля и управление сессиями, SSRF-защита и восстановление обложек, `/health`, `/ready`, `/meta`, CI с PostgreSQL. |
| Frontend | `0.9.0` | Защищённые маршруты и auth-экраны, экран аккаунта, поиск/фильтры/экспорт истории, нативные поля даты/старта, удобный ввод результатов, дашборд с последними стартами и графиком AG Charts, версия FE/BE в футере. |
## Правила версионирования и выпуска
@@ -21,9 +21,9 @@
| Очередь | BE | FE | Цель | Условие выпуска |
|---|---:|---:|---|---|
| P0 | `1.4.2` | `0.7.1` | Исправить риски текущего релиза и привести контракт в соответствие коду. | Нет невалидных записей, SSRF-защита, критические сценарии проверяются на PostgreSQL. |
| P1 | `1.5.0` | `0.8.0` | Дать пользователю контроль над аккаунтом и данными, улучшить работу с историей стартов. | Управление сессиями и экспорт доступны, фильтры не ломают существующий список. |
| P2 | `1.6.0` | `0.9.0` | Подготовка к старту: чек-листы, напоминания и календарная интеграция. | Напоминание отправляется не более одного раза, подписка/токен отзываемы. |
| P3 | `1.7.0` | `1.0.0` | Сделать персональный календарь эксплуатационно готовым. | Восстановление из backup проверено, есть E2E критического пути и аудит доступности. |
| P1 | `1.6.0` | `0.9.0` | Дать пользователю контроль над аккаунтом и данными, улучшить работу с историей стартов. | Управление сессиями и экспорт доступны, фильтры не ломают существующий список. |
| P2 | `1.7.0` | `1.0.0` | Подготовка к старту: чек-листы, напоминания и календарная интеграция. | Напоминание отправляется не более одного раза, подписка/токен отзываемы. |
| P3 | `1.8.0` | `1.1.0` | Сделать персональный календарь эксплуатационно готовым. | Восстановление из backup проверено, есть E2E критического пути и аудит доступности. |
`2.0.0` не планируется заранее: его поводом может быть только подтверждённая потребность в совместном доступе, командах или публичных стартах — это изменит модель владельцев и доступа.
@@ -51,30 +51,33 @@
| FE-071-05 | P0 | Завершать подтверждение email понятным экраном успеха | После успешной ссылки `/verify-email?token=…` заголовок явно сообщает, что email подтверждён; ввод email, инструкция и кнопка повторной отправки не показываются. Форма повторной отправки остаётся только для недействительной/отсутствующей ссылки. |
| FE-071-06 | P0 | Упростить ввод результата забега | Время вводится отдельными цифровыми полями «часы», «минуты», «секунды» без ручного ввода `:`. Часы — целое число ≥ 0, минуты и секунды — от 0 до 59; пустые минуты/секунды автоматически нормализуются в `0`. Итоговое время не показывает незаполненные старшие части: без часов — `MM:SS`, без часов и минут — `SS`. Место вводится числами «место» и «всего участников» (второе необязательно), проверяется, что место ≥ 1 и не больше общего числа; в текущий `finishPlace` без изменения API сохраняется `место/всего` либо только место. Старые значения `finishPlace` не теряются до редактирования результата. |
## P1 — BE 1.5.0 / FE 0.8.0
## P1 — BE 1.6.0 / FE 0.9.0
### Backend 1.5.0
### Backend 1.6.0
| ID | Приоритет | Задача | Результат / критерий приёмки |
|---|---|---|---|
| BE-150-01 | Готово | Управление паролем и сессиями | Выполнено в `1.5.0`: авторизованный пользователь меняет пароль после проверки текущего; все другие сессии отзываются. Есть список активных сессий с отзывом выбранной и «выйти везде». Токены и пароли в ответах/логах не появляются. |
| BE-150-02 | P1 | Удаление аккаунта и данных | Явно подтверждённый запрос удаляет аккаунт, его сессии и личные старты транзакционно; повторный запрос идемпотентен. Перед реализацией согласовать необходимость периода восстановления. |
| BE-150-03 | P1 | Обратносуместимая фильтрация стартов | Добавить документированные фильтры `status`, диапазон дат и диапазон дистанции, не меняя текущий ответ-массив `GET /races`. Валидация параметров и покрытие индексами — по фактическому query plan. |
| BE-150-03 | Готово | Обратносуместимая фильтрация стартов | Добавлены документированные фильтры `status`, диапазон дат и диапазон дистанции без изменения ответа-массива `GET /races`, с валидацией параметров. |
| BE-150-04 | Готово | Восстановить обложки существующих стартов | Добавлен идемпотентный backfill и обновление обложки при изменении официальной страницы. SSRF-защищённая логика переиспользуется; ручные URL не перезаписываются, результат содержит агрегированную статистику. |
### Frontend 0.8.0
### Frontend 0.9.0
| ID | Приоритет | Задача | Результат / критерий приёмки |
|---|---|---|---|
| FE-080-01 | Готово | Экран «Аккаунт» | Выполнено в `0.8.0`: пользователь видит подтверждённый email, меняет пароль и видит/отзывает другие сессии. Удаление аккаунта остаётся отдельной задачей BE-150-02. |
| FE-080-02 | P1 | Поиск, фильтры и сортировка истории | Фильтры по статусу, периоду и дистанции синхронизированы с URL; поиск по названию работает без новой зависимости. Годы в селекторе строятся из данных, а не ограничены окном «-2/+4». |
| FE-080-03 | P1 | Выгрузка личных данных | Из текущей отфильтрованной выборки пользователь скачивает CSV и одноразовый `.ics` в браузере. Сервер не нужен: данные уже принадлежат пользователю и загружены в UI. |
| FE-080-02 | Готово | Поиск, фильтры и сортировка истории | Фильтры по статусу, периоду и дистанции, поиск по названию и сортировка синхронизированы с URL. Годы в селекторе строятся из данных. |
| FE-080-03 | Готово | Выгрузка личных данных | Из текущей отфильтрованной выборки пользователь скачивает CSV и одноразовый `.ics` в браузере; сервер не нужен. |
| FE-080-04 | Готово | Сделать на дашборде список последних стартов | Выполнено в `0.8.0`: «Последние старты» показывают до 5 завершённых стартов с клиентской пагинацией, фильтрами по дистанции и году и доступным переходом в старт. |
| FE-080-05 | Готово | Связать рекорды по дистанциям со стартами | Выполнено в `0.8.0`: карточка рекорда с найденным стартом ведёт на `/races/:id` и использует существующую анимацию связанных карточек. |
| FE-080-06 | Готово | Сделать график прогресса информативным и интерактивным | Выполнено в `0.8.0`: график имеет подписанные оси, компактные подписи, tooltip по наведению/фокусу и доступный переход в старт. |
| FE-080-07 | Готово | Вернуть управление официальной страницей старта | Поле «Официальная страница старта» доступно для любого старта, включая прошедший; для прошедших скрываются только неактуальные поля расписания. |
| FE-080-08 | Готово | Перевести график прогресса на AG Charts | Самописный SVG заменён на AG Charts; сохранены данные, оси, tooltip, клавиатурная доступность, переход по точке, адаптивность и пустое состояние. |
## P2 — BE 1.6.0 / FE 0.9.0
## P2 — BE 1.7.0 / FE 1.0.0
### Backend 1.6.0
### Backend 1.7.0
| ID | Приоритет | Задача | Результат / критерий приёмки |
|---|---|---|---|
@@ -82,17 +85,18 @@
| BE-160-02 | P1 | Надёжные email-напоминания | Настройки пользователя и очередь напоминаний хранятся в БД; отправка идемпотентна, ошибки ретраятся ограниченно и логируются без PII. Расписание запуска — внешний cron/worker, а не `setInterval` в каждом web-инстансе. |
| BE-160-03 | P2 | Подписка на персональный iCalendar | Выдать отдельный отзывной секретный URL только для read-only календаря пользователя. Нужны лимитирование, отсутствие email/заметок в ICS и отзыв/ротация токена. |
### Frontend 0.9.0
### Frontend 1.0.0
| ID | Приоритет | Задача | Результат / критерий приёмки |
|---|---|---|---|
| FE-090-01 | P1 | Чек-лист в карточке старта | Пользователь добавляет, завершает и переставляет задачи подготовки; на дашборде видит ближайшие незавершённые пункты. Пустое состояние объясняет, что делать. |
| FE-090-02 | P1 | Настройки напоминаний | Опт-ин по email и выбор сроков до старта; понятно отображаются часовой пояс и факт отключения рассылки. |
| FE-090-03 | P2 | Управление iCalendar-подпиской | Экран показывает URL только по явному действию, даёт скопировать, отозвать и выпустить новый. Одноразовый экспорт из `0.8.0` остаётся доступным без подписки. |
| FE-090-04 | P2 | Исправить полную TypeScript-проверку frontend | `tsc -b` проходит без ошибки `Cannot find name 'Worker'` в типах Vite; конфигурации browser/node остаются корректно разделены, проверка исходников не ослабляется. |
## P3 — BE 1.7.0 / FE 1.0.0
## P3 — BE 1.8.0 / FE 1.1.0
### Backend 1.7.0
### Backend 1.8.0
| ID | Приоритет | Задача | Результат / критерий приёмки |
|---|---|---|---|
@@ -100,7 +104,7 @@
| BE-170-02 | P0 | Наблюдаемость без утечки данных | Структурированные логи с request ID, готовность БД, счётчики ошибок и alert на недоступность. Email, пароли, токены, cookie и текст заметок не логируются. |
| BE-170-03 | P1 | Машиночитаемый API-контракт | OpenAPI-спецификация синхронизирована с маршрутам и используется в CI для проверки ключевых ответов. Это предотвращает повторное расхождение документации и реализации. |
### Frontend 1.0.0
### Frontend 1.1.0
| ID | Приоритет | Задача | Результат / критерий приёмки |
|---|---|---|---|
@@ -130,3 +134,14 @@
2. `BE-142-01` и `BE-142-02`: зафиксировать настоящий контракт и закрыть trust boundary.
3. `BE-142-03`: убрать SSRF-риск до любого расширения автозагрузки обложек.
4. `FE-071-01``FE-071-06`: устранить неверную аналитику и ошибки критических форм, включая понятное завершение подтверждения email и ввод результата.
## Выполненный спринт
**Цель:** пользователь быстро находит старты, восстанавливает данные истории, выгружает результат и видит прогресс в поддерживаемой chart-визуализации.
1. `BE-150-04` + `FE-080-07`: восстановление обложек существующих стартов и управление официальной страницей, включая прошедшие старты. Ручные обложки не перезаписываются; используется существующая SSRF-защищённая логика.
2. `BE-150-03` + `FE-080-02`: фильтры по статусу, периоду и дистанции, поиск по названию, сортировка и синхронизация с URL. Обновить API-документацию и контрактные тесты.
3. `FE-080-03`: экспорт текущей отфильтрованной выборки в CSV и одноразовый `.ics` без нового backend и зависимостей.
4. `FE-080-08`: заменить самописный SVG-график прогресса на AG Charts. Сохранить текущие данные и метрики, подписи осей, tooltip, клавиатурную доступность, переход по точке в старт, адаптивность и пустое состояние. Не менять API и не добавлять новую обёртку поверх `PaceTrendChart`.
`BE-150-02` в спринт не брать до решения: удаление аккаунта сразу или с 30-дневным восстановлением.

View File

@@ -1,13 +1,15 @@
{
"name": "calendar-run-frontend",
"version": "0.8.1",
"version": "0.9.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "calendar-run-frontend",
"version": "0.8.1",
"version": "0.9.1",
"dependencies": {
"ag-charts-community": "^14.0.0",
"ag-charts-react": "^14.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.30.1"
@@ -1221,6 +1223,50 @@
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
}
},
"node_modules/ag-charts-community": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/ag-charts-community/-/ag-charts-community-14.0.0.tgz",
"integrity": "sha512-u/O7T/EGxj8s6cZjbYU1CaRObnjMzdfXZVido9uXbeAwBkT4rxXF6OWSq1SkkSrZD1+pwusHn3cbul4Ly3yzPA==",
"license": "MIT",
"dependencies": {
"ag-charts-core": "14.0.0",
"ag-charts-locale": "14.0.0",
"ag-charts-types": "14.0.0"
}
},
"node_modules/ag-charts-core": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/ag-charts-core/-/ag-charts-core-14.0.0.tgz",
"integrity": "sha512-xcFSQ0Ces8JvH5RpKoZIjrFzdvju91gIXODj33Byg6ShwkixrHyLaCf17addfSsqerSSdMkw0iiceD9afU83UQ==",
"license": "MIT",
"dependencies": {
"ag-charts-types": "14.0.0"
}
},
"node_modules/ag-charts-locale": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/ag-charts-locale/-/ag-charts-locale-14.0.0.tgz",
"integrity": "sha512-14mGnsQgG7VzdQwt7Jq2MFPGPtO8y6jAECN4nae7t3fJAPq162mmrgDaqpwHdAZxKPkMNte98DUQ8ULrtSbUpQ==",
"license": "MIT"
},
"node_modules/ag-charts-react": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/ag-charts-react/-/ag-charts-react-14.0.0.tgz",
"integrity": "sha512-PTwfdmyFbePzaKHuGWfB2o8KNXO5wR5fOCyUCRqdUNnCEK8cBPwlDsfe28CRsevQSLPZqTNpW2y5qJhHC4q6EQ==",
"license": "MIT",
"dependencies": {
"ag-charts-community": "14.0.0"
},
"peerDependencies": {
"react": "^18.0.0 || ^19.0.0"
}
},
"node_modules/ag-charts-types": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-14.0.0.tgz",
"integrity": "sha512-89X4J/OeOTzTp505126JayGEn3k6QUKz3UHSR0/ggoVZYzVqtMN13k/B136S1+YBwgnzyJ/NARnnIRTPWsWG9g==",
"license": "MIT"
},
"node_modules/baseline-browser-mapping": {
"version": "2.10.15",
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.15.tgz",

View File

@@ -1,7 +1,7 @@
{
"name": "calendar-run-frontend",
"private": true,
"version": "0.8.1",
"version": "0.9.1",
"type": "module",
"scripts": {
"dev": "vite",
@@ -9,6 +9,8 @@
"preview": "vite preview"
},
"dependencies": {
"ag-charts-community": "^14.0.0",
"ag-charts-react": "^14.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.30.1"

View File

@@ -88,9 +88,13 @@ export async function revokeOtherSessions(): Promise<void> {
await requestJson<void>("/auth/sessions/revoke-others", { method: "POST" });
}
export async function updateProfileVisibility(isProfilePublic: boolean): Promise<void> {
export async function updateProfile(payload: {
profileUsername?: string | null;
isFutureRacesPublic?: boolean;
isCompletedRacesPublic?: boolean;
}): Promise<void> {
await requestJson<void>("/auth/profile", {
method: "PATCH",
body: JSON.stringify({ isProfilePublic }),
body: JSON.stringify(payload),
});
}

View File

@@ -3,6 +3,7 @@ export type ApiErrorCode =
| "not_found"
| "database_unavailable"
| "conflict"
| "username_taken"
| "unauthorized"
| "email_not_verified"
| "csrf_error"
@@ -42,6 +43,7 @@ function normalizeApiCode(value: string | undefined): ApiErrorCode {
value === "not_found" ||
value === "database_unavailable" ||
value === "conflict" ||
value === "username_taken" ||
value === "unauthorized" ||
value === "email_not_verified" ||
value === "csrf_error" ||
@@ -110,6 +112,8 @@ export function getApiErrorMessage(code: ApiErrorCode): string {
return "Сервис временно недоступен. Попробуйте позже.";
case "conflict":
return "Запись с таким идентификатором уже существует.";
case "username_taken":
return "Это имя пользователя уже занято.";
case "unauthorized":
return "Нужно войти в аккаунт.";
case "email_not_verified":

View File

@@ -16,6 +16,6 @@ export {
resetPassword,
revokeOtherSessions,
revokeSession,
updateProfileVisibility,
updateProfile,
verifyEmail,
} from "./auth";

View File

@@ -47,24 +47,25 @@ function normalizeRace(input: unknown): Race {
});
}
const validRace = race as Race;
return {
id: race.id,
slug: race.slug,
date: race.date,
title: race.title,
distanceKm: race.distanceKm,
status: race.status,
officialUrl: race.officialUrl,
coverImageUrl: race.coverImageUrl ?? null,
startTime: race.startTime,
clusterSchedule: race.clusterSchedule,
bibPickup: race.bibPickup,
bibNumber: race.bibNumber,
finishTime: race.finishTime,
finishPlace: race.finishPlace,
notes: race.notes,
createdAt: race.createdAt,
updatedAt: race.updatedAt,
id: validRace.id,
slug: validRace.slug,
date: validRace.date,
title: validRace.title,
distanceKm: validRace.distanceKm,
status: validRace.status,
officialUrl: validRace.officialUrl,
coverImageUrl: validRace.coverImageUrl ?? null,
startTime: validRace.startTime,
clusterSchedule: validRace.clusterSchedule,
bibPickup: validRace.bibPickup,
bibNumber: validRace.bibNumber,
finishTime: validRace.finishTime,
finishPlace: validRace.finishPlace,
notes: validRace.notes,
createdAt: validRace.createdAt,
updatedAt: validRace.updatedAt,
};
}
@@ -80,6 +81,21 @@ function buildRacesQuery(query?: RacesQuery): string {
if (typeof query.month === "number") {
params.set("month", String(query.month));
}
if (query.status) {
params.set("status", query.status);
}
if (query.dateFrom) {
params.set("dateFrom", query.dateFrom);
}
if (query.dateTo) {
params.set("dateTo", query.dateTo);
}
if (typeof query.distanceMin === "number") {
params.set("distanceMin", String(query.distanceMin));
}
if (typeof query.distanceMax === "number") {
params.set("distanceMax", String(query.distanceMax));
}
const serialized = params.toString();
return serialized ? `?${serialized}` : "";

View File

@@ -23,6 +23,11 @@ export interface Race {
export interface RacesQuery {
year?: number;
month?: number;
status?: RaceStatus;
dateFrom?: string;
dateTo?: string;
distanceMin?: number;
distanceMax?: number;
}
export interface CreateRacePayload {
@@ -48,7 +53,9 @@ export interface AuthUser {
id: string;
email: string;
emailVerifiedAt: string | null;
isProfilePublic: boolean;
profileUsername: string | null;
isFutureRacesPublic: boolean;
isCompletedRacesPublic: boolean;
}
export interface PublicRace {
@@ -57,6 +64,8 @@ export interface PublicRace {
distanceKm: number;
status: RaceStatus | null;
coverImageUrl: string | null;
finishTime: string | null;
finishPlace: string | null;
}
export interface AuthSession {

View File

@@ -9,12 +9,14 @@ function isPublicRace(value: unknown): value is PublicRace {
typeof race?.title === "string" &&
typeof race?.distanceKm === "number" &&
(race?.status === null || race?.status === "planned" || race?.status === "registered" || race?.status === "completed") &&
(race?.coverImageUrl === null || typeof race?.coverImageUrl === "string")
(race?.coverImageUrl === null || typeof race?.coverImageUrl === "string") &&
(race?.finishTime === null || typeof race?.finishTime === "string") &&
(race?.finishPlace === null || typeof race?.finishPlace === "string")
);
}
export async function getPublicRaces(userId: string, init?: RequestInit): Promise<PublicRace[]> {
const response = await requestJson<unknown[]>(`/users/${userId}/races`, init);
export async function getPublicRaces(username: string, init?: RequestInit): Promise<PublicRace[]> {
const response = await requestJson<unknown[]>(`/users/${encodeURIComponent(username)}/races`, init);
if (!Array.isArray(response) || !response.every(isPublicRace)) {
throw new ApiError({ code: "unknown_error", message: "Некорректный формат данных от API." });
}

View File

@@ -20,7 +20,7 @@ export const appRouter = createBrowserRouter([
{ path: "verify-email", element: <VerifyEmailPage /> },
{ path: "forgot-password", element: <ForgotPasswordPage /> },
{ path: "reset-password", element: <ResetPasswordPage /> },
{ path: "users/:userId", element: <PublicProfilePage /> },
{ path: "users/:username", element: <PublicProfilePage /> },
{
element: <RequireAuth />,
children: [

View File

@@ -1,4 +1,6 @@
import { useState } from "react";
import { AgCharts } from "ag-charts-react";
import type { AgChartOptions } from "ag-charts-community";
import { useMemo } from "react";
import { useNavigate } from "react-router-dom";
import type { Race } from "../api";
import { formatRaceDate, getPaceLabel, isCloseDistance, parseFinishTimeToSeconds, parseRaceDate } from "../lib";
@@ -8,6 +10,14 @@ type PaceTrendChartProps = {
distanceKm: number;
};
type PaceDatum = {
id: string;
date: string;
dateLabel: string;
minutes: number;
race: Race;
};
function formatAxisTime(minutes: number): string {
const totalSeconds = Math.round(minutes * 60);
const hours = Math.floor(totalSeconds / 3600);
@@ -19,89 +29,86 @@ function formatShortDate(date: string): string {
return parseRaceDate(date).toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit" });
}
function cssToken(name: string, fallback: string): string {
if (typeof window === "undefined") {
return fallback;
}
return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
}
/** Линейный график: время финиша по завершённым стартам выбранной дистанции. */
export function PaceTrendChart({ races, distanceKm }: PaceTrendChartProps): JSX.Element {
const navigate = useNavigate();
const [activeId, setActiveId] = useState<string | null>(null);
const series = races
.filter((race) => race.status === "completed" && isCloseDistance(race.distanceKm, distanceKm) && parseFinishTimeToSeconds(race.finishTime) != null)
.sort((a, b) => parseRaceDate(a.date).getTime() - parseRaceDate(b.date).getTime())
.map((race) => ({ race, minutes: parseFinishTimeToSeconds(race.finishTime)! / 60 }));
const series = useMemo<PaceDatum[]>(
() => races
.filter((race) => race.status === "completed" && isCloseDistance(race.distanceKm, distanceKm) && parseFinishTimeToSeconds(race.finishTime) != null)
.sort((a, b) => parseRaceDate(a.date).getTime() - parseRaceDate(b.date).getTime())
.map((race) => ({
id: race.id,
date: race.date,
dateLabel: formatShortDate(race.date),
minutes: parseFinishTimeToSeconds(race.finishTime)! / 60,
race,
})),
[distanceKm, races],
);
const options = useMemo<AgChartOptions<PaceDatum>>(() => ({
data: series,
autoSize: true,
minHeight: 280,
padding: { top: 16, right: 20, bottom: 16, left: 16 },
background: { fill: "transparent" },
animation: { enabled: false },
keyboard: { enabled: true, tabIndex: 0, initialFocus: "data-start" },
axes: {
x: { type: "category", position: "bottom", title: { text: "Дата старта" } },
y: {
type: "number",
position: "left",
title: { text: "Время" },
label: { formatter: ({ value }) => formatAxisTime(Number(value)) },
},
},
series: [{
type: "line",
xKey: "dateLabel",
xName: "Дата старта",
yKey: "minutes",
yName: "Время",
stroke: cssToken("--color-accent", "#1168d8"),
strokeWidth: 3,
marker: {
enabled: true,
size: 8,
fill: cssToken("--color-surface", "#ffffff"),
stroke: cssToken("--color-accent", "#1168d8"),
strokeWidth: 2,
},
tooltip: {
renderer: ({ datum }) => ({
title: datum.race.title,
data: [
{ label: "Дата", value: formatRaceDate(datum.date) },
{ label: "Время", value: datum.race.finishTime ?? "—" },
{ label: "Темп", value: getPaceLabel(datum.race.finishTime, datum.race.distanceKm) ?? "—" },
],
}),
},
}],
listeners: {
seriesNodeClick: ({ datum }) => navigate(`/races/${datum.race.id}`),
},
}), [navigate, series]);
if (series.length < 2) {
return <p className="pace-chart__empty">Нужно минимум два завершённых старта с временем на выбранной дистанции.</p>;
}
const values = series.map((item) => item.minutes);
const min = Math.min(...values);
const max = Math.max(...values);
const range = max - min || 1;
const w = 100;
const h = 58;
const margin = { top: 6, right: 4, bottom: 14, left: 17 };
const innerW = w - margin.left - margin.right;
const innerH = h - margin.top - margin.bottom;
const pointAt = (item: (typeof series)[number], index: number) => ({
x: margin.left + (index / (series.length - 1)) * innerW,
y: margin.top + ((max - item.minutes) / range) * innerH,
});
const points = series.map(pointAt);
const line = points.map(({ x, y }) => `${x},${y}`).join(" ");
const yTicks = [max, (max + min) / 2, min];
const labelStep = Math.max(1, Math.ceil(series.length / 6));
const active = series.find((item) => item.race.id === activeId) ?? null;
return (
<div className="pace-chart">
<svg className="pace-chart__svg" viewBox={`0 0 ${w} ${h}`} role="group" aria-label="Динамика времени на дистанции. Нажмите точку, чтобы открыть старт.">
<text className="pace-chart__axis-title" x="2" y={h / 2} transform={`rotate(-90 2 ${h / 2})`}>Время</text>
{yTicks.map((tick) => {
const y = margin.top + ((max - tick) / range) * innerH;
return (
<g key={tick}>
<line className="pace-chart__grid-line" x1={margin.left} y1={y} x2={w - margin.right} y2={y} />
<text className="pace-chart__axis-label" x={margin.left - 2} y={y + 1} textAnchor="end">{formatAxisTime(tick)}</text>
</g>
);
})}
<line className="pace-chart__axis" x1={margin.left} y1={margin.top} x2={margin.left} y2={h - margin.bottom} />
<line className="pace-chart__axis" x1={margin.left} y1={h - margin.bottom} x2={w - margin.right} y2={h - margin.bottom} />
<polyline className="pace-chart__line" fill="none" points={line} />
{series.map((item, index) => {
const point = points[index]!;
const isLabeled = index % labelStep === 0 || index === series.length - 1;
return (
<g
key={item.race.id}
className="pace-chart__point"
tabIndex={0}
role="button"
aria-label={`Открыть ${item.race.title}: ${item.race.finishTime}, ${getPaceLabel(item.race.finishTime, item.race.distanceKm)}`}
onMouseEnter={() => setActiveId(item.race.id)}
onMouseLeave={() => setActiveId(null)}
onFocus={() => setActiveId(item.race.id)}
onBlur={() => setActiveId(null)}
onClick={() => navigate(`/races/${item.race.id}`)}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
navigate(`/races/${item.race.id}`);
}
}}
>
<circle className={index === series.length - 1 ? "pace-chart__dot pace-chart__dot--last" : "pace-chart__dot"} cx={point.x} cy={point.y} r="1.05" />
{isLabeled ? <text className="pace-chart__point-label" x={point.x} y={h - margin.bottom + 5} textAnchor="middle">{formatShortDate(item.race.date)}</text> : null}
</g>
);
})}
<text className="pace-chart__axis-title" x={w / 2} y={h - 1} textAnchor="middle">Дата старта</text>
</svg>
{active ? (
<div className="pace-chart__tooltip" role="status">
<strong>{active.race.title}</strong>
<span>{formatRaceDate(active.race.date)} · {active.race.finishTime} · {getPaceLabel(active.race.finishTime, active.race.distanceKm)}</span>
</div>
) : <p className="pace-chart__hint">Наведите на точку или выберите её клавиатурой.</p>}
<div className="pace-chart" role="group" aria-label="Динамика времени на дистанции. Выберите точку, чтобы открыть старт.">
<AgCharts options={options} />
<p className="pace-chart__hint">Наведите на точку или выберите её клавиатурой.</p>
</div>
);
}

View File

@@ -19,3 +19,4 @@ export {
export { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "./calendarUtils";
export { getRaceVisual } from "./raceVisuals";
export type { RaceVisualVariant } from "./raceVisuals";
export { downloadTextFile, racesToCsv, racesToIcs } from "./raceExport";

View File

@@ -0,0 +1,60 @@
import type { Race } from "../api";
function escapeCsvCell(value: string | number | null): string {
const text = value == null ? "" : String(value);
return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
}
function escapeIcsText(value: string): string {
return value.replace(/[\\;,\n]/g, (character) => ({ "\\": "\\\\", ";": "\\;", ",": "\\,", "\n": "\\n" })[character]!);
}
function toIcsDate(date: string): string {
return date.slice(0, 10).replace(/-/g, "");
}
function addOneDay(date: string): string {
const next = new Date(`${date.slice(0, 10)}T00:00:00Z`);
next.setUTCDate(next.getUTCDate() + 1);
return next.toISOString().slice(0, 10);
}
export function racesToCsv(races: Race[]): string {
const headers = ["Дата", "Название", "Дистанция (км)", "Статус", "Время", "Место", "Официальная страница"];
const rows = races.map((race) => [
race.date,
race.title,
race.distanceKm,
race.status,
race.finishTime,
race.finishPlace,
race.officialUrl,
]);
return `\uFEFF${[headers, ...rows].map((row) => row.map(escapeCsvCell).join(",")).join("\r\n")}\r\n`;
}
export function racesToIcs(races: Race[]): string {
const events = races.map((race) => {
const start = race.date.slice(0, 10);
const end = addOneDay(start);
return [
"BEGIN:VEVENT",
`UID:${race.id}@calendar-run`,
`DTSTART;VALUE=DATE:${toIcsDate(start)}`,
`DTEND;VALUE=DATE:${toIcsDate(end)}`,
`SUMMARY:${escapeIcsText(race.title)}`,
`DESCRIPTION:${escapeIcsText(`${race.distanceKm} км${race.officialUrl ? `\n${race.officialUrl}` : ""}`)}`,
"END:VEVENT",
].join("\r\n");
});
return ["BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//Calendar Run//Races//RU", ...events, "END:VCALENDAR", ""].join("\r\n");
}
export function downloadTextFile(filename: string, content: string, type: string): void {
const url = URL.createObjectURL(new Blob([content], { type }));
const link = document.createElement("a");
link.href = url;
link.download = filename;
link.click();
setTimeout(() => URL.revokeObjectURL(url), 0);
}

View File

@@ -1,11 +1,14 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { AllCommunityModule, ModuleRegistry } from "ag-charts-community";
import { RouterProvider } from "react-router-dom";
import { AuthProvider } from "./app/auth/AuthContext";
import { appRouter } from "./app/router";
import "./styles/tokens.css";
import "./styles/global.css";
ModuleRegistry.registerModules([AllCommunityModule]);
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<AuthProvider>

View File

@@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
import { ApiError, changePassword, getSessions, revokeOtherSessions, revokeSession, updateProfileVisibility } from "../api";
import { ApiError, changePassword, getSessions, revokeOtherSessions, revokeSession, updateProfile } from "../api";
import type { AuthSession } from "../api";
import { useAuth } from "../app/auth/AuthContext";
@@ -19,7 +19,11 @@ export function AccountPage(): JSX.Element {
const [passwordSuccess, setPasswordSuccess] = useState("");
const [passwordSaving, setPasswordSaving] = useState(false);
const [profileError, setProfileError] = useState("");
const [profileSuccess, setProfileSuccess] = useState("");
const [profileSaving, setProfileSaving] = useState(false);
const [profileUsername, setProfileUsername] = useState(user?.profileUsername ?? "");
const [futureRacesPublic, setFutureRacesPublic] = useState(user?.isFutureRacesPublic ?? false);
const [completedRacesPublic, setCompletedRacesPublic] = useState(user?.isCompletedRacesPublic ?? false);
const loadSessions = useCallback(async () => {
setSessionsLoading(true);
@@ -37,6 +41,12 @@ export function AccountPage(): JSX.Element {
void loadSessions();
}, [loadSessions]);
useEffect(() => {
setProfileUsername(user?.profileUsername ?? "");
setFutureRacesPublic(user?.isFutureRacesPublic ?? false);
setCompletedRacesPublic(user?.isCompletedRacesPublic ?? false);
}, [user?.profileUsername, user?.isFutureRacesPublic, user?.isCompletedRacesPublic]);
async function handlePasswordSubmit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
event.preventDefault();
setPasswordError("");
@@ -83,12 +93,19 @@ export function AccountPage(): JSX.Element {
}
}
async function handleProfileVisibilityChange(isProfilePublic: boolean): Promise<void> {
async function handleProfileSubmit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
event.preventDefault();
setProfileSaving(true);
setProfileError("");
setProfileSuccess("");
try {
await updateProfileVisibility(isProfilePublic);
await updateProfile({
profileUsername: profileUsername.trim(),
isFutureRacesPublic: futureRacesPublic,
isCompletedRacesPublic: completedRacesPublic,
});
await refresh();
setProfileSuccess("Настройки личной страницы сохранены.");
} catch (error) {
setProfileError(error instanceof ApiError ? error.message : "Не удалось обновить видимость страницы.");
} finally {
@@ -96,31 +113,74 @@ export function AccountPage(): JSX.Element {
}
}
async function copyProfileUrl(): Promise<void> {
if (!user?.profileUsername) {
return;
}
setProfileError("");
try {
await navigator.clipboard.writeText(`${window.location.origin}/users/${user.profileUsername}`);
setProfileSuccess("Адрес скопирован.");
} catch {
setProfileError("Не удалось скопировать адрес.");
}
}
const profileUrl = user?.profileUsername ? `${window.location.origin}/users/${user.profileUsername}` : "";
return (
<section className="page page--auth">
<h1 className="page__title">Аккаунт</h1>
<p className="page__subtitle">{user?.email} email подтверждён.</p>
<section className="auth-form" aria-labelledby="profile-title">
<form className="auth-form" aria-labelledby="profile-title" onSubmit={(event) => void handleProfileSubmit(event)}>
<h2 className="auth-form__title" id="profile-title">Публичная страница</h2>
<label className="auth-form__field">
<span className="auth-form__label">Ссылка на страницу</span>
<input className="auth-form__input" readOnly value={`${window.location.origin}/users/${user?.id ?? ""}`} />
<span className="auth-form__label">Имя пользователя</span>
<input
className="auth-form__input"
required
minLength={3}
maxLength={30}
pattern="[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"
value={profileUsername}
onChange={(event) => setProfileUsername(event.target.value.toLowerCase())}
/>
</label>
<label className="auth-form__field">
<span>
<input
checked={user?.isProfilePublic ?? false}
checked={futureRacesPublic}
disabled={profileSaving}
type="checkbox"
onChange={(event) => void handleProfileVisibilityChange(event.target.checked)}
onChange={(event) => setFutureRacesPublic(event.target.checked)}
/>{" "}
Открыть страницу всем
Видимость будущих стартов
</span>
<span className="auth-form__label">Открытая страница показывает только календарь стартов, без личных заметок и результатов.</span>
</label>
<label className="auth-form__field">
<span>
<input
checked={completedRacesPublic}
disabled={profileSaving}
type="checkbox"
onChange={(event) => setCompletedRacesPublic(event.target.checked)}
/>{" "}
Видимость завершённых стартов и результатов
</span>
</label>
<div className="auth-form__field">
<span className="auth-form__label">Адрес личной страницы</span>
<div className="account__profile-link">
<input className="auth-form__input" readOnly value={profileUrl} placeholder="Сначала задайте имя пользователя" />
<button className="btn btn--secondary" disabled={!profileUrl} type="button" onClick={() => void copyProfileUrl()}>Скопировать</button>
</div>
</div>
<p className="page__subtitle">Открытая страница не показывает личные заметки и номера участников.</p>
{profileError ? <p className="page__subtitle page__subtitle--error" role="alert">{profileError}</p> : null}
</section>
{profileSuccess ? <p className="account__success" role="status">{profileSuccess}</p> : null}
<button className="btn" disabled={profileSaving} type="submit">{profileSaving ? "Сохраняем…" : "Сохранить настройки"}</button>
</form>
<form className="auth-form" onSubmit={(event) => void handlePasswordSubmit(event)}>
<h2 className="auth-form__title">Сменить пароль</h2>

View File

@@ -5,19 +5,19 @@ import type { PublicRace } from "../api";
import { formatDistance, formatRaceDate, getRaceStatusClassName, getRaceStatusLabel } from "../lib";
export function PublicProfilePage(): JSX.Element {
const { userId } = useParams<{ userId: string }>();
const { username } = useParams<{ username: string }>();
const [races, setRaces] = useState<PublicRace[]>([]);
const [error, setError] = useState("");
const [loading, setLoading] = useState(true);
useEffect(() => {
const ac = new AbortController();
if (!userId) {
if (!username) {
setError("Страница пользователя не найдена.");
setLoading(false);
return () => ac.abort();
}
void getPublicRaces(userId, { signal: ac.signal })
void getPublicRaces(username, { signal: ac.signal })
.then((items) => {
if (!ac.signal.aborted) {
setRaces(items);
@@ -34,7 +34,7 @@ export function PublicProfilePage(): JSX.Element {
}
});
return () => ac.abort();
}, [userId]);
}, [username]);
return (
<section className="page page--race-day">
@@ -55,6 +55,8 @@ export function PublicProfilePage(): JSX.Element {
<span className="race-day__meta">
{formatRaceDate(race.date)} · {formatDistance(race.distanceKm)} ·{" "}
<span className={getRaceStatusClassName(race.status, race.date)}>{getRaceStatusLabel(race.status, race.date)}</span>
{race.finishTime ? ` · ${race.finishTime}` : ""}
{race.finishPlace ? ` · ${race.finishPlace}` : ""}
</span>
</div>
</li>

View File

@@ -412,19 +412,17 @@ export function RaceFormPage(): JSX.Element {
<fieldset className="race-form__group">
<legend className="race-form__legend">Организация</legend>
{hideOrgScheduleFields ? null : (
<label className="race-form__field">
<span className="race-form__label">Сайт организатора</span>
<input
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="url"
name="officialUrl"
value={form.officialUrl}
onChange={handleChange}
placeholder="https://…"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">URL обложки</span>

View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import type { Race, RacesQuery } from "../api";
import { Link, useSearchParams } from "react-router-dom";
import type { Race, RaceStatus, RacesQuery } from "../api";
import { ApiError, getRaces } from "../api";
import { RacesCalendar } from "../components/RacesCalendar";
import {
@@ -10,8 +10,9 @@ import {
getRaceStatusClassName,
getRaceStatusLabel,
parseRaceDate,
sortByDateAsc,
sortByDateDesc,
downloadTextFile,
racesToCsv,
racesToIcs,
} from "../lib";
const MONTH_OPTIONS: { value: string; label: string }[] = [
@@ -34,16 +35,12 @@ const VIEW_STORAGE_KEY = "races-view-mode";
type ViewMode = "list" | "calendar";
type RaceListTab = "upcoming" | "completed";
type RaceSort = "dateAsc" | "dateDesc" | "titleAsc" | "distanceAsc";
function yearSelectOptions(): number[] {
function yearSelectOptions(races: Race[], selectedYear = ""): number[] {
const current = new Date().getFullYear();
const start = current - 2;
const end = current + 4;
const years: number[] = [];
for (let y = start; y <= end; y += 1) {
years.push(y);
}
return years;
const selected = Number(selectedYear);
return [...new Set([current, ...races.map((race) => parseRaceDate(race.date).getFullYear()), ...(Number.isInteger(selected) ? [selected] : [])])].sort((a, b) => a - b);
}
function getErrorMessage(error: unknown): string {
@@ -133,12 +130,20 @@ function RaceList(props: { title: string; races: Race[]; variant: RaceListTab })
}
export function RacesPage(): JSX.Element {
const [searchParams, setSearchParams] = useSearchParams();
const [races, setRaces] = useState<Race[]>([]);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [yearFilter, setYearFilter] = useState<string>("");
const [monthFilter, setMonthFilter] = useState<string>("");
const [viewMode, setViewMode] = useState<ViewMode>(() => readInitialViewMode());
const [yearFilter, setYearFilter] = useState<string>(() => searchParams.get("year") ?? "");
const [monthFilter, setMonthFilter] = useState<string>(() => searchParams.get("month") ?? "");
const [statusFilter, setStatusFilter] = useState<RaceStatus | "">(() => (searchParams.get("status") as RaceStatus | null) ?? "");
const [dateFrom, setDateFrom] = useState<string>(() => searchParams.get("dateFrom") ?? "");
const [dateTo, setDateTo] = useState<string>(() => searchParams.get("dateTo") ?? "");
const [distanceMin, setDistanceMin] = useState<string>(() => searchParams.get("distanceMin") ?? "");
const [distanceMax, setDistanceMax] = useState<string>(() => searchParams.get("distanceMax") ?? "");
const [searchQuery, setSearchQuery] = useState<string>(() => searchParams.get("q") ?? "");
const [sortOrder, setSortOrder] = useState<RaceSort>(() => (searchParams.get("sort") as RaceSort | null) ?? "dateAsc");
const [viewMode, setViewMode] = useState<ViewMode>(() => searchParams.get("view") === "calendar" ? "calendar" : readInitialViewMode());
const [activeListTab, setActiveListTab] = useState<RaceListTab>("upcoming");
const setViewModePersist = useCallback((mode: ViewMode) => {
@@ -160,28 +165,45 @@ export function RacesPage(): JSX.Element {
}, [setViewModePersist]);
const listQuery = useMemo((): RacesQuery | undefined => {
const q: RacesQuery = {};
if (viewMode === "calendar") {
const y = yearFilter !== "" ? parseInt(yearFilter, 10) : new Date().getFullYear();
if (!Number.isNaN(y)) {
return { year: y };
}
return undefined;
}
const q: RacesQuery = {};
if (yearFilter !== "") {
const y = parseInt(yearFilter, 10);
if (!Number.isNaN(y)) {
q.year = y;
}
}
if (monthFilter !== "") {
const m = parseInt(monthFilter, 10);
if (!Number.isNaN(m)) {
q.month = m;
} else {
if (yearFilter !== "") {
const y = parseInt(yearFilter, 10);
if (!Number.isNaN(y)) {
q.year = y;
}
}
if (monthFilter !== "") {
const m = parseInt(monthFilter, 10);
if (!Number.isNaN(m)) {
q.month = m;
}
}
}
if (statusFilter) {
q.status = statusFilter;
}
if (dateFrom) {
q.dateFrom = dateFrom;
}
if (dateTo) {
q.dateTo = dateTo;
}
const min = Number(distanceMin);
const max = Number(distanceMax);
if (distanceMin && Number.isFinite(min)) {
q.distanceMin = min;
}
if (distanceMax && Number.isFinite(max)) {
q.distanceMax = max;
}
return Object.keys(q).length > 0 ? q : undefined;
}, [viewMode, yearFilter, monthFilter]);
}, [dateFrom, dateTo, distanceMax, distanceMin, monthFilter, statusFilter, viewMode, yearFilter]);
const displayYear = useMemo(() => {
if (yearFilter !== "") {
@@ -223,12 +245,38 @@ export function RacesPage(): JSX.Element {
};
}, [listQuery]);
useEffect(() => {
const next = new URLSearchParams();
if (viewMode === "calendar") next.set("view", viewMode);
if (yearFilter) next.set("year", yearFilter);
if (monthFilter) next.set("month", monthFilter);
if (statusFilter) next.set("status", statusFilter);
if (dateFrom) next.set("dateFrom", dateFrom);
if (dateTo) next.set("dateTo", dateTo);
if (distanceMin) next.set("distanceMin", distanceMin);
if (distanceMax) next.set("distanceMax", distanceMax);
if (searchQuery) next.set("q", searchQuery);
if (sortOrder !== "dateAsc") next.set("sort", sortOrder);
setSearchParams(next, { replace: true });
}, [dateFrom, dateTo, distanceMax, distanceMin, monthFilter, searchQuery, setSearchParams, sortOrder, statusFilter, viewMode, yearFilter]);
const filteredRaces = useMemo(() => {
const needle = searchQuery.trim().toLocaleLowerCase("ru-RU");
const result = races.filter((race) => !needle || race.title.toLocaleLowerCase("ru-RU").includes(needle));
return result.sort((left, right) => {
if (sortOrder === "titleAsc") return left.title.localeCompare(right.title, "ru");
if (sortOrder === "distanceAsc") return left.distanceKm - right.distanceKm || left.title.localeCompare(right.title, "ru");
const direction = sortOrder === "dateDesc" ? -1 : 1;
return direction * (parseRaceDate(left.date).getTime() - parseRaceDate(right.date).getTime());
});
}, [races, searchQuery, sortOrder]);
const { upcoming, completed } = useMemo(
() => ({
upcoming: sortByDateAsc(races.filter((race) => race.status !== "completed")),
completed: sortByDateDesc(races.filter((race) => race.status === "completed")),
upcoming: filteredRaces.filter((race) => race.status !== "completed"),
completed: filteredRaces.filter((race) => race.status === "completed"),
}),
[races],
[filteredRaces],
);
const statusMessage = useMemo(() => {
if (errorMessage && !isLoading) {
@@ -295,7 +343,7 @@ export function RacesPage(): JSX.Element {
}}
>
{viewMode === "list" ? <option value="">Все года</option> : null}
{yearSelectOptions().map((y) => (
{yearSelectOptions(races, yearFilter).map((y) => (
<option key={y} value={String(y)}>
{y}
</option>
@@ -318,6 +366,48 @@ export function RacesPage(): JSX.Element {
))}
</select>
</label>
<label className="races-filter__field">
<span className="races-filter__label">Статус</span>
<select className="races-filter__select" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as RaceStatus | "")}>
<option value="">Все статусы</option>
<option value="planned">Планирую</option>
<option value="registered">Зарегистрирован</option>
<option value="completed">Пробежал</option>
</select>
</label>
<label className="races-filter__field">
<span className="races-filter__label">Поиск</span>
<input className="races-filter__input" type="search" value={searchQuery} onChange={(event) => setSearchQuery(event.target.value)} placeholder="Название старта" />
</label>
<label className="races-filter__field">
<span className="races-filter__label">Дата от</span>
<input className="races-filter__input" type="date" value={dateFrom} onChange={(event) => setDateFrom(event.target.value)} />
</label>
<label className="races-filter__field">
<span className="races-filter__label">Дата до</span>
<input className="races-filter__input" type="date" value={dateTo} onChange={(event) => setDateTo(event.target.value)} />
</label>
<label className="races-filter__field">
<span className="races-filter__label">Дистанция от, км</span>
<input className="races-filter__input" type="number" min="0.001" step="0.001" value={distanceMin} onChange={(event) => setDistanceMin(event.target.value)} />
</label>
<label className="races-filter__field">
<span className="races-filter__label">Дистанция до, км</span>
<input className="races-filter__input" type="number" min="0.001" step="0.001" value={distanceMax} onChange={(event) => setDistanceMax(event.target.value)} />
</label>
<label className="races-filter__field">
<span className="races-filter__label">Сортировка</span>
<select className="races-filter__select" value={sortOrder} onChange={(event) => setSortOrder(event.target.value as RaceSort)}>
<option value="dateAsc">Дата: сначала ранние</option>
<option value="dateDesc">Дата: сначала поздние</option>
<option value="titleAsc">Название: АЯ</option>
<option value="distanceAsc">Дистанция: по возрастанию</option>
</select>
</label>
</div>
<div className="races-filter__actions">
<button type="button" className="btn btn--secondary" disabled={filteredRaces.length === 0} onClick={() => downloadTextFile("calendar-run.csv", racesToCsv(filteredRaces), "text/csv;charset=utf-8")}>Скачать CSV</button>
<button type="button" className="btn btn--secondary" disabled={filteredRaces.length === 0} onClick={() => downloadTextFile("calendar-run.ics", racesToIcs(filteredRaces), "text/calendar;charset=utf-8")}>Скачать календарь</button>
</div>
</div>
</section>
@@ -367,7 +457,7 @@ export function RacesPage(): JSX.Element {
<RacesCalendar
displayYear={displayYear}
monthFilter={monthFilter}
races={races}
races={filteredRaces}
onMonthFilterChange={setMonthFilter}
/>
</div>

View File

@@ -206,6 +206,15 @@ a {
font-size: var(--font-size-caption);
}
.account__profile-link {
display: flex;
gap: var(--space-2);
}
.account__profile-link .auth-form__input {
min-width: 0;
}
.dashboard-grid {
margin-top: var(--space-6);
display: grid;
@@ -533,7 +542,8 @@ a {
color: var(--color-text-muted);
}
.races-filter__select {
.races-filter__select,
.races-filter__input {
font: inherit;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
@@ -542,6 +552,13 @@ a {
color: var(--color-text);
}
.races-filter__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.pace-chart {
margin-top: var(--space-4);
border: 1px solid var(--color-border);
@@ -550,73 +567,9 @@ a {
background: #fcfdff;
}
.pace-chart__svg {
display: block;
width: 100%;
max-width: 560px;
height: auto;
}
.pace-chart__line {
stroke: var(--color-accent);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.pace-chart__axis {
stroke: rgba(14, 31, 45, 0.42);
stroke-width: 0.75;
vector-effect: non-scaling-stroke;
}
.pace-chart__axis-label,
.pace-chart__axis-title,
.pace-chart__point-label {
fill: var(--color-text-muted);
font-size: 2.5px;
}
.pace-chart__axis-title {
font-size: 2.8px;
font-weight: 700;
}
.pace-chart__point-label {
font-size: 2.25px;
}
.pace-chart__point {
cursor: pointer;
outline: none;
}
.pace-chart__point:focus-visible .pace-chart__dot,
.pace-chart__point:hover .pace-chart__dot {
stroke-width: 2;
}
.pace-chart__tooltip,
.pace-chart__hint {
margin: var(--space-3) 0 0;
font-size: var(--font-size-caption);
}
.pace-chart__tooltip {
display: grid;
gap: var(--space-1);
padding: var(--space-3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.78);
color: var(--color-text);
}
.pace-chart__hint {
color: var(--color-text-muted);
}
.pace-chart__caption {
margin: var(--space-3) 0 0;
font-size: var(--font-size-caption);
color: var(--color-text-muted);
}
@@ -1581,49 +1534,6 @@ body {
#ffffff;
}
.pace-chart__svg {
max-width: 100%;
}
.pace-chart__grid-line {
stroke: rgba(14, 31, 45, 0.12);
stroke-width: 0.8;
vector-effect: non-scaling-stroke;
}
.pace-chart__line {
stroke-width: 2.2;
}
.pace-chart__dot {
fill: #ffffff;
stroke: var(--color-accent);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.pace-chart__dot--last {
fill: var(--color-lime);
stroke: var(--color-bg-deep);
}
.pace-chart__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.pace-chart__caption {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.72);
color: var(--color-text);
}
.pace-chart__caption--best {
color: #0e5d3d;
}
.races-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.58fr);
@@ -1667,6 +1577,11 @@ body {
background: rgba(255, 255, 255, 0.94);
}
.races-hero__filters .races-filter__input {
border-color: rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.94);
}
.races-view-toggle {
border-color: rgba(255, 255, 255, 0.24);
background: rgba(7, 25, 39, 0.28);