admin/runners-calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feature/race-cover-images
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
Details

Browse Source 
# Conflicts:
#	frontend/package-lock.json
#	frontend/package.json
This commit is contained in:
Vaka.pro
2026-04-27 23:01:19 +03:00
parent 0153f223f2 b1b363a7e8
commit 00985732ec
7 changed files with 258 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -2,6 +2,7 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Календарь стартов</title> <title>Календарь стартов</title>
</head> </head>

24
frontend/public/favicon.svg Normal file
View File

@@ -0,0 +1,24 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Календарь стартов">
<defs>
<linearGradient id="bg" x1="12" y1="4" x2="52" y2="60" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#1168d8" />
<stop offset="1" stop-color="#071927" />
</linearGradient>
</defs>
<rect width="64" height="64" rx="16" fill="url(#bg)" />
<path
d="M18 20h28a5 5 0 0 1 5 5v21a5 5 0 0 1-5 5H18a5 5 0 0 1-5-5V25a5 5 0 0 1 5-5Z"
fill="#ffffff"
/>
<path d="M13 29h38" stroke="#d6e1ea" stroke-width="4" />
<path d="M23 14v11M41 14v11" stroke="#b9f24a" stroke-width="5" stroke-linecap="round" />
<path
d="M22 41c5-8 13-8 18 0M22 41h18"
fill="none"
stroke="#1168d8"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle cx="44" cy="44" r="5" fill="#ff6f5e" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 890 B

6
frontend/src/app/layouts/AppLayout.tsx
View File

@@ -1,11 +1,13 @@
import { NavLink, Outlet } from "react-router-dom"; import { Link, NavLink, Outlet } from "react-router-dom";
import { AppShellFooter } from "./AppShellFooter"; import { AppShellFooter } from "./AppShellFooter";
export function AppLayout(): JSX.Element { export function AppLayout(): JSX.Element {
return ( return (
<div className="app-shell"> <div className="app-shell">
<header className="app-shell__header"> <header className="app-shell__header">
<div className="app-shell__brand">Календарь стартов</div> <Link className="app-shell__brand" to="/">
Календарь стартов
</Link>
<nav className="app-shell__nav" aria-label="Основная навигация"> <nav className="app-shell__nav" aria-label="Основная навигация">
<NavLink <NavLink
to="/" to="/"

51
frontend/src/components/RacesCalendar.tsx
View File

@@ -1,14 +1,14 @@
import { useCallback, useMemo, useRef, useState } from "react"; import { useCallback, useMemo, useRef, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import type { Race } from "../api"; import type { Race } from "../api";
import { buildMonthCells, groupRacesByYmd, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib"; import { buildMonthCells, groupRacesByYmd, isRaceDateInPast, toYmd, WEEKDAY_LABELS_SHORT_RU } from "../lib";
const MONTH_NAMES_RU_SHORT = [ const MONTH_NAMES_RU_SHORT = [
"янв.", "янв.",
"февр.", "февр.",
"мар.", "мар.",
"апр.", "апр.",
"мая", "май",
"июн.", "июн.",
"июл.", "июл.",
"авг.", "авг.",
@@ -20,6 +20,13 @@ const MONTH_NAMES_RU_SHORT = [
const POPOVER_LEAVE_MS = 140; const POPOVER_LEAVE_MS = 140;
function toLocalYmd(date: Date): string {
const y = date.getFullYear();
const m = String(date.getMonth() + 1).padStart(2, "0");
const d = String(date.getDate()).padStart(2, "0");
return `${y}-${m}-${d}`;
}
interface RacesCalendarProps { interface RacesCalendarProps {
displayYear: number; displayYear: number;
monthFilter: string; monthFilter: string;
@@ -77,6 +84,8 @@ function CalendarMonthBlock(props: {
setOpenYmd: (v: string | null) => void; setOpenYmd: (v: string | null) => void;
scheduleClose: () => void; scheduleClose: () => void;
cancelClose: () => void; cancelClose: () => void;
onMonthSelect?: (monthIndex: number) => void;
todayYmd: string;
}): JSX.Element { }): JSX.Element {
const { const {
year, year,
@@ -88,6 +97,8 @@ function CalendarMonthBlock(props: {
setOpenYmd, setOpenYmd,
scheduleClose, scheduleClose,
cancelClose, cancelClose,
onMonthSelect,
todayYmd,
} = props; } = props;
const cells = useMemo(() => buildMonthCells(year, monthIndex), [year, monthIndex]); const cells = useMemo(() => buildMonthCells(year, monthIndex), [year, monthIndex]);
const title = `${MONTH_NAMES_RU_SHORT[monthIndex]} ${year}`; const title = `${MONTH_NAMES_RU_SHORT[monthIndex]} ${year}`;
@@ -96,7 +107,21 @@ function CalendarMonthBlock(props: {
return ( return (
<div className={blockClass}> <div className={blockClass}>
<h3 className="races-cal__month-title">{title}</h3> <h3 className="races-cal__month-title">
{onMonthSelect ? (
<button
type="button"
className="races-cal__month-title-button"
onClick={() => {
onMonthSelect(monthIndex);
}}
>
{title}
</button>
) : (
title
)}
</h3>
<div className="races-cal__weekdays" aria-hidden> <div className="races-cal__weekdays" aria-hidden>
{WEEKDAY_LABELS_SHORT_RU.map((d) => ( {WEEKDAY_LABELS_SHORT_RU.map((d) => (
<span key={d} className="races-cal__weekday"> <span key={d} className="races-cal__weekday">
@@ -113,11 +138,22 @@ function CalendarMonthBlock(props: {
const dayRaces = racesByYmd.get(ymd) ?? []; const dayRaces = racesByYmd.get(ymd) ?? [];
const hasRaces = dayRaces.length > 0; const hasRaces = dayRaces.length > 0;
const isOpen = openYmd === ymd; const isOpen = openYmd === ymd;
const isPast = isRaceDateInPast(ymd);
const isToday = ymd === todayYmd;
const cellClassName = [
"races-cal__cell",
hasRaces ? "races-cal__cell--has-race" : "",
isOpen ? "races-cal__cell--open" : "",
isPast ? "races-cal__cell--past" : "",
isToday ? "races-cal__cell--today" : "",
]
.filter(Boolean)
.join(" ");
return ( return (
<div <div
key={ymd} key={ymd}
className={`races-cal__cell${hasRaces ? " races-cal__cell--has-race" : ""}${isOpen ? " races-cal__cell--open" : ""}`} className={cellClassName}
onMouseEnter={() => { onMouseEnter={() => {
cancelClose(); cancelClose();
setOpenYmd(hasRaces ? ymd : null); setOpenYmd(hasRaces ? ymd : null);
@@ -182,6 +218,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
}, [cancelClose]); }, [cancelClose]);
const racesByYmd = useMemo(() => groupRacesByYmd(races), [races]); const racesByYmd = useMemo(() => groupRacesByYmd(races), [races]);
const todayYmd = useMemo(() => toLocalYmd(new Date()), []);
const focusedMonthIndex = monthFilter === "" ? null : parseInt(monthFilter, 10) - 1; const focusedMonthIndex = monthFilter === "" ? null : parseInt(monthFilter, 10) - 1;
@@ -202,6 +239,11 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
setOpenYmd={setOpenYmd} setOpenYmd={setOpenYmd}
scheduleClose={scheduleClose} scheduleClose={scheduleClose}
cancelClose={cancelClose} cancelClose={cancelClose}
onMonthSelect={(mi) => {
onMonthFilterChange(String(mi + 1));
setOpenYmd(null);
}}
todayYmd={todayYmd}
/> />
))} ))}
</div> </div>
@@ -240,6 +282,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
setOpenYmd={setOpenYmd} setOpenYmd={setOpenYmd}
scheduleClose={scheduleClose} scheduleClose={scheduleClose}
cancelClose={cancelClose} cancelClose={cancelClose}
todayYmd={todayYmd}
/> />
</div> </div>
)} )}

64
frontend/src/pages/RaceFormPage.tsx
View File

@@ -96,6 +96,17 @@ function validateForm(form: FormData): string[] {
return errors; return errors;
} }
function isRaceDateTodayOrPast(date: string): boolean {
if (!date.trim()) {
return false;
}
const today = new Date();
const y = today.getFullYear();
const m = String(today.getMonth() + 1).padStart(2, "0");
const d = String(today.getDate()).padStart(2, "0");
return isRaceDateInPast(date) || date.slice(0, 10) === `${y}-${m}-${d}`;
}
export function RaceFormPage(): JSX.Element { export function RaceFormPage(): JSX.Element {
const { raceId } = useParams<{ raceId: string }>(); const { raceId } = useParams<{ raceId: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -248,6 +259,7 @@ export function RaceFormPage(): JSX.Element {
); );
const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date); const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
const showResultFields = isRaceDateTodayOrPast(form.date);
const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт"; const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
if (isLoading) { if (isLoading) {
@@ -414,33 +426,35 @@ export function RaceFormPage(): JSX.Element {
</label> </label>
</fieldset> </fieldset>
<fieldset className="race-form__group"> {showResultFields ? (
<legend className="race-form__legend">Результаты</legend> <fieldset className="race-form__group">
<legend className="race-form__legend">Результаты</legend>
<label className="race-form__field"> <label className="race-form__field">
<span className="race-form__label">Финишное время</span> <span className="race-form__label">Финишное время</span>
<input <input
className="race-form__input" className="race-form__input"
type="text" type="text"
name="finishTime" name="finishTime"
value={form.finishTime} value={form.finishTime}
onChange={handleChange} onChange={handleChange}
placeholder="1:45:30" placeholder="1:45:30"
/> />
</label> </label>
<label className="race-form__field"> <label className="race-form__field">
<span className="race-form__label">Место на финише</span> <span className="race-form__label">Место на финише</span>
<input <input
className="race-form__input" className="race-form__input"
type="text" type="text"
name="finishPlace" name="finishPlace"
value={form.finishPlace} value={form.finishPlace}
onChange={handleChange} onChange={handleChange}
placeholder="12/340" placeholder="12/340"
/> />
</label> </label>
</fieldset> </fieldset>
) : null}
<fieldset className="race-form__group"> <fieldset className="race-form__group">
<legend className="race-form__legend">Дополнительно</legend> <legend className="race-form__legend">Дополнительно</legend>

55
frontend/src/pages/RacesPage.tsx
View File

@@ -10,7 +10,8 @@ import {
getRaceStatusClassName, getRaceStatusClassName,
getRaceStatusLabel, getRaceStatusLabel,
parseRaceDate, parseRaceDate,
splitRacesByDate, sortByDateAsc,
sortByDateDesc,
} from "../lib"; } from "../lib";
const MONTH_OPTIONS: { value: string; label: string }[] = [ const MONTH_OPTIONS: { value: string; label: string }[] = [
@@ -220,7 +221,32 @@ export function RacesPage(): JSX.Element {
}; };
}, [listQuery]); }, [listQuery]);
const { upcoming, past } = useMemo(() => splitRacesByDate(races), [races]); const { upcoming, completed } = useMemo(
() => ({
upcoming: sortByDateAsc(races.filter((race) => race.status !== "completed")),
completed: sortByDateDesc(races.filter((race) => race.status === "completed")),
}),
[races],
);
const statusMessage = useMemo(() => {
if (errorMessage && !isLoading) {
return errorMessage;
}
if (isLoading) {
return "Загружаем данные...";
}
if (viewMode === "calendar" && monthFilter === "") {
return "Выберите месяц, чтобы увидеть его крупным планом.";
}
return "";
}, [errorMessage, isLoading, monthFilter, viewMode]);
const statusClassName = [
"races-status__message",
!statusMessage ? "races-status__message--empty" : "",
errorMessage && !isLoading ? "races-status__message--error" : "",
]
.filter(Boolean)
.join(" ");
if (errorMessage && races.length === 0 && !isLoading) { if (errorMessage && races.length === 0 && !isLoading) {
return ( return (
@@ -294,26 +320,21 @@ export function RacesPage(): JSX.Element {
</div> </div>
</section> </section>
{errorMessage && !isLoading ? ( <div className="races-status" aria-live="polite">
<p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}> <p
{errorMessage} className={statusClassName}
role={errorMessage && !isLoading ? "alert" : undefined}
aria-busy={isLoading || undefined}
aria-hidden={!statusMessage || undefined}
>
{statusMessage || "\u00a0"}
</p> </p>
) : null} </div>
{viewMode === "calendar" && monthFilter === "" ? (
<p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
) : null}
{isLoading ? (
<p className="page__subtitle" aria-busy="true">
Загружаем данные...
</p>
) : null}
{viewMode === "list" ? ( {viewMode === "list" ? (
<div className="race-lists"> <div className="race-lists">
<RaceList title="Будущие" races={upcoming} /> <RaceList title="Будущие" races={upcoming} />
<RaceList title="Прошедшие" races={past} /> <RaceList title="Завершенные" races={completed} />
</div> </div>
) : ( ) : (
<div className="races-cal-wrap"> <div className="races-cal-wrap">

105
frontend/src/styles/global.css
View File

@@ -45,6 +45,12 @@ a {
font-weight: 700; font-weight: 700;
} }
.app-shell__brand:hover,
.app-shell__brand:focus-visible {
color: var(--color-text);
outline: none;
}
.app-shell__nav { .app-shell__nav {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -961,6 +967,25 @@ a {
margin-top: var(--space-6); margin-top: var(--space-6);
} }
.races-status {
min-height: calc(var(--line-height-base) * var(--font-size-caption));
margin-top: var(--space-4);
}
.races-status__message {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-caption);
}
.races-status__message--empty {
visibility: hidden;
}
.races-status__message--error {
color: var(--color-danger);
}
.races-cal__filter-hint { .races-cal__filter-hint {
margin-top: var(--space-3); margin-top: var(--space-3);
color: var(--color-text-muted); color: var(--color-text-muted);
@@ -1006,6 +1031,26 @@ a {
color: var(--color-text); color: var(--color-text);
} }
.races-cal__month-title-button {
display: inline-flex;
align-items: center;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: inherit;
cursor: pointer;
}
.races-cal__month-title-button:hover,
.races-cal__month-title-button:focus-visible {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
outline: none;
}
.races-cal__weekdays { .races-cal__weekdays {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
@@ -1040,6 +1085,12 @@ a {
color: var(--color-accent); color: var(--color-accent);
} }
.races-cal__cell--past .races-cal__day-btn {
color: var(--color-text-muted);
background: #f0f2f4;
border-color: #d8dde2;
}
.races-cal__cell--open { .races-cal__cell--open {
z-index: 2; z-index: 2;
} }
@@ -1070,6 +1121,12 @@ a {
border-color: var(--color-accent); border-color: var(--color-accent);
} }
.races-cal__cell--today .races-cal__day-btn,
.races-cal__cell--today .races-cal__day-btn:hover,
.races-cal__cell--today .races-cal__day-btn:focus-visible {
border-color: var(--color-text);
}
.races-cal__popover { .races-cal__popover {
position: absolute; position: absolute;
top: calc(100% + var(--space-1)); top: calc(100% + var(--space-1));
@@ -1226,6 +1283,11 @@ body {
color: var(--color-bg-deep); color: var(--color-bg-deep);
} }
.app-shell__brand:hover,
.app-shell__brand:focus-visible {
color: var(--color-accent);
}
.app-shell__link { .app-shell__link {
font-size: var(--font-size-caption); font-size: var(--font-size-caption);
font-weight: 700; font-weight: 700;
@@ -1747,18 +1809,61 @@ body {
font-weight: 800; font-weight: 800;
} }
.races-cal__month-title-button {
border-radius: var(--radius-sm);
transition:
color 0.15s ease,
text-decoration-color 0.15s ease;
}
.races-cal__month-title-button:hover,
.races-cal__month-title-button:focus-visible {
color: var(--color-accent);
}
.races-cal__cell--has-race .races-cal__day-btn { .races-cal__cell--has-race .races-cal__day-btn {
color: #071927; color: #071927;
background: linear-gradient(135deg, rgba(185, 242, 74, 0.7), rgba(17, 104, 216, 0.14)); background: linear-gradient(135deg, rgba(185, 242, 74, 0.7), rgba(17, 104, 216, 0.14));
border-color: rgba(17, 104, 216, 0.18); border-color: rgba(17, 104, 216, 0.18);
} }
.races-cal__cell--past .races-cal__day-btn,
.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn {
color: #6f7c87;
background: #eef1f3;
border-color: #d4dbe1;
}
.races-cal__cell--has-race .races-cal__day-btn:hover, .races-cal__cell--has-race .races-cal__day-btn:hover,
.races-cal__cell--has-race .races-cal__day-btn:focus-visible { .races-cal__cell--has-race .races-cal__day-btn:focus-visible {
background: var(--color-lime); background: var(--color-lime);
border-color: var(--color-bg-deep); border-color: var(--color-bg-deep);
} }
.races-cal__cell--past .races-cal__day-btn:hover,
.races-cal__cell--past .races-cal__day-btn:focus-visible,
.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn:hover,
.races-cal__cell--past.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
color: #52616d;
background: #e3e8ec;
border-color: #aeb9c3;
}
.races-cal__cell--today .races-cal__day-btn,
.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn,
.races-cal__cell--today.races-cal__cell--past .races-cal__day-btn {
border-color: #071927;
box-shadow: inset 0 0 0 1px #071927;
}
.races-cal__cell--today .races-cal__day-btn:hover,
.races-cal__cell--today .races-cal__day-btn:focus-visible,
.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn:hover,
.races-cal__cell--today.races-cal__cell--has-race .races-cal__day-btn:focus-visible {
border-color: #071927;
box-shadow: inset 0 0 0 1px #071927;
}
.races-cal__popover { .races-cal__popover {
border-color: rgba(17, 104, 216, 0.2); border-color: rgba(17, 104, 216, 0.2);
border-radius: var(--radius-md); border-radius: var(--radius-md);