feat: align docs with code, finish_place, registered status, UI filters, tests, CI

- Add PLAN.md and sync backend docs, .env.example, API doc (404 details) - Document mock DB and PORT/API_PORT in docs/backend.md; README monorepo + frontend/.env.example - Migration 002: finish_place column, status registered; mapper and mock DB updated - Frontend: registered status, finishPlace, calendar year/month filters, pace sparkline - Extract createApp for tests; supertest + tsx; GitHub Actions CI Made-with: Cursor
2026-04-06 22:20:31 +03:00
parent 1ffc3a65eb
commit a2dcf67396
27 changed files with 1410 additions and 286 deletions
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
 import type { Race } from "../api";
 import { ApiError, getRaces } from "../api";
+import { PaceTrendChart } from "../components";
 import {
  formatDistance,
  formatRaceDate,
  getRaceCountdownLabel,
  getPaceLabel,
+  isCloseDistance,
  parseFinishTimeToSeconds,
  splitRacesByDate,
 } from "../lib";
@@ -19,14 +21,11 @@ function getErrorMessage(error: unknown): string {
  return "Не удалось загрузить данные dashboard.";
 }

-function isSameDistance(left: number, right: number): boolean {
-  return Math.abs(left - right) < 0.05;
-}
-
 export function DashboardPage(): JSX.Element {
  const [races, setRaces] = useState<Race[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [chartDistanceKm, setChartDistanceKm] = useState<number>(10);

  useEffect(() => {
    let isMounted = true;
@@ -98,7 +97,7 @@ export function DashboardPage(): JSX.Element {
      const candidates = races.filter((race) => {
        return (
          race.status === "completed" &&
-          isSameDistance(race.distanceKm, distanceKm) &&
+          isCloseDistance(race.distanceKm, distanceKm) &&
          Boolean(parseFinishTimeToSeconds(race.finishTime))
        );
      });
@@ -136,7 +135,7 @@ export function DashboardPage(): JSX.Element {
        distance: formatDistance(race.distanceKm),
        finishTime: race.finishTime ?? "время не указано",
        pace: getPaceLabel(race.finishTime, race.distanceKm) ?? "не удалось вычислить",
-        place: "нет данных",
+        place: race.finishPlace?.trim() ? race.finishPlace : "нет данных",
      }))
      .sort((left, right) => right.year - left.year || left.title.localeCompare(right.title, "ru-RU"));
  }, [races]);
@@ -218,6 +217,30 @@ export function DashboardPage(): JSX.Element {
        </article>
      </div>

+      <section className="dashboard-section" aria-label="Динамика времени на дистанции">
+        <h2 className="dashboard-section__title">Прогресс по времени</h2>
+        <p className="dashboard-section__intro">
+          Линия по завершённым стартам выбранной дистанции: выше — лучше время (короче гонка).
+        </p>
+        <label className="races-filter__field">
+          <span className="races-filter__label">Дистанция для графика</span>
+          <select
+            className="races-filter__select"
+            value={String(chartDistanceKm)}
+            onChange={(event) => {
+              setChartDistanceKm(Number(event.target.value));
+            }}
+          >
+            {PR_DISTANCES.map((d) => (
+              <option key={d} value={d}>
+                {formatDistance(d)}
+              </option>
+            ))}
+          </select>
+        </label>
+        <PaceTrendChart races={races} distanceKm={chartDistanceKm} />
+      </section>
+
      <section className="dashboard-section" aria-label="Личные рекорды по дистанциям">
        <h2 className="dashboard-section__title">PR по дистанциям</h2>
        <div className="dashboard-grid dashboard-grid--pr">
--- a/frontend/src/pages/RaceDetailsPage.tsx
+++ b/frontend/src/pages/RaceDetailsPage.tsx
@@ -1,7 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import { ApiError, getRaceById } from "../api";
-import { formatDistance, formatRaceDate, getPaceLabel, getRaceStatusLabel } from "../lib";
+import {
+  formatDistance,
+  formatRaceDate,
+  getPaceLabel,
+  getRaceStatusClassName,
+  getRaceStatusLabel,
+} from "../lib";
 import type { Race } from "../api";

 function getErrorMessage(error: unknown): string {
@@ -91,15 +97,7 @@ export function RaceDetailsPage(): JSX.Element {
            {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
          </p>
        </div>
-        <span
-          className={
-            isCompleted
-              ? "race-card__status race-card__status--completed"
-              : "race-card__status race-card__status--planned"
-          }
-        >
-          {getRaceStatusLabel(race.status)}
-        </span>
+        <span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
      </div>

      <div className="race-details-grid">
@@ -133,6 +131,12 @@ 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>
--- a/frontend/src/pages/RacesPage.tsx
+++ b/frontend/src/pages/RacesPage.tsx
@@ -1,8 +1,41 @@
 import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
-import type { Race } from "../api";
+import type { Race, RacesQuery } from "../api";
 import { ApiError, getRaces } from "../api";
-import { formatDistance, formatRaceDate, getRaceStatusLabel, splitRacesByDate } from "../lib";
+import {
+  formatDistance,
+  formatRaceDate,
+  getRaceStatusClassName,
+  getRaceStatusLabel,
+  splitRacesByDate,
+} from "../lib";
+
+const MONTH_OPTIONS: { value: string; label: string }[] = [
+  { value: "", label: "Все месяцы" },
+  { value: "1", label: "Январь" },
+  { value: "2", label: "Февраль" },
+  { value: "3", label: "Март" },
+  { value: "4", label: "Апрель" },
+  { value: "5", label: "Май" },
+  { value: "6", label: "Июнь" },
+  { value: "7", label: "Июль" },
+  { value: "8", label: "Август" },
+  { value: "9", label: "Сентябрь" },
+  { value: "10", label: "Октябрь" },
+  { value: "11", label: "Ноябрь" },
+  { value: "12", label: "Декабрь" },
+];
+
+function yearSelectOptions(): 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;
+}

 function getErrorMessage(error: unknown): string {
  if (error instanceof ApiError) {
@@ -31,15 +64,7 @@ function RaceList(props: { title: string; races: Race[] }): JSX.Element {
                  {formatRaceDate(race.date)} · {formatDistance(race.distanceKm)}
                </p>
              </div>
-              <span
-                className={
-                  race.status === "completed"
-                    ? "race-card__status race-card__status--completed"
-                    : "race-card__status race-card__status--planned"
-                }
-              >
-                {getRaceStatusLabel(race.status)}
-              </span>
+              <span className={getRaceStatusClassName(race.status)}>{getRaceStatusLabel(race.status)}</span>
            </li>
          ))}
        </ul>
@@ -54,13 +79,33 @@ export function RacesPage(): JSX.Element {
  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 listQuery = useMemo((): RacesQuery | 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;
+      }
+    }
+    return Object.keys(q).length > 0 ? q : undefined;
+  }, [yearFilter, monthFilter]);

  useEffect(() => {
    let isMounted = true;

    async function loadRaces(): Promise<void> {
+      setIsLoading(true);
      try {
-        const items = await getRaces();
+        const items = await getRaces(listQuery);
        if (!isMounted) {
          return;
        }
@@ -82,20 +127,11 @@ export function RacesPage(): JSX.Element {
    return () => {
      isMounted = false;
    };
-  }, []);
+  }, [listQuery]);

  const { upcoming, past } = useMemo(() => splitRacesByDate(races), [races]);

-  if (isLoading) {
-    return (
-      <section className="page page--races" aria-busy="true">
-        <h1 className="page__title">Календарь стартов</h1>
-        <p className="page__subtitle">Загружаем данные...</p>
-      </section>
-    );
-  }
-
-  if (errorMessage) {
+  if (errorMessage && races.length === 0 && !isLoading) {
    return (
      <section className="page page--races" role="alert">
        <h1 className="page__title">Календарь стартов</h1>
@@ -109,6 +145,48 @@ export function RacesPage(): JSX.Element {
      <h1 className="page__title">Календарь стартов</h1>
      <p className="page__subtitle">Будущие и прошедшие старты в одном месте.</p>

+      <div className="races-filter" role="search" aria-label="Фильтр по дате">
+        <label className="races-filter__field">
+          <span className="races-filter__label">Год</span>
+          <select
+            className="races-filter__select"
+            value={yearFilter}
+            onChange={(event) => {
+              setYearFilter(event.target.value);
+            }}
+          >
+            <option value="">Все года</option>
+            {yearSelectOptions().map((y) => (
+              <option key={y} value={String(y)}>
+                {y}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="races-filter__field">
+          <span className="races-filter__label">Месяц</span>
+          <select
+            className="races-filter__select"
+            value={monthFilter}
+            onChange={(event) => {
+              setMonthFilter(event.target.value);
+            }}
+          >
+            {MONTH_OPTIONS.map((opt) => (
+              <option key={opt.value || "all"} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+
+      {isLoading ? (
+        <p className="page__subtitle" aria-busy="true">
+          Загружаем данные...
+        </p>
+      ) : null}
+
      <div className="race-lists">
        <RaceList title="Будущие" races={upcoming} />
        <RaceList title="Прошедшие" races={past} />