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

Merge pull request 'fix frontend calendar race states' (#28) from codex/calendar-race-ui-fixes into main
Some checks failed
CI / build-and-test (push) Has been cancelled
Details

Browse Source 
Reviewed-on: #28
This commit was merged in pull request #28.
This commit is contained in:
admin
2026-04-27 09:32:39 +00:00
parent 0b7ad23252 dffbb48d99
commit 55fc23ec64
5 changed files with 186 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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";
export function AppLayout(): JSX.Element {
return (
<div className="app-shell">
<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="Основная навигация">
<NavLink
to="/"

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

@@ -1,14 +1,14 @@
import { useCallback, useMemo, useRef, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
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 = [
"янв.",
"февр.",
"мар.",
"апр.",
"мая",
"май",
"июн.",
"июл.",
"авг.",
@@ -20,6 +20,13 @@ const MONTH_NAMES_RU_SHORT = [
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 {
displayYear: number;
monthFilter: string;
@@ -77,6 +84,8 @@ function CalendarMonthBlock(props: {
setOpenYmd: (v: string | null) => void;
scheduleClose: () => void;
cancelClose: () => void;
onMonthSelect?: (monthIndex: number) => void;
todayYmd: string;
}): JSX.Element {
const {
year,
@@ -88,6 +97,8 @@ function CalendarMonthBlock(props: {
setOpenYmd,
scheduleClose,
cancelClose,
onMonthSelect,
todayYmd,
} = props;
const cells = useMemo(() => buildMonthCells(year, monthIndex), [year, monthIndex]);
const title = `${MONTH_NAMES_RU_SHORT[monthIndex]} ${year}`;
@@ -96,7 +107,21 @@ function CalendarMonthBlock(props: {
return (
<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>
{WEEKDAY_LABELS_SHORT_RU.map((d) => (
<span key={d} className="races-cal__weekday">
@@ -113,11 +138,22 @@ function CalendarMonthBlock(props: {
const dayRaces = racesByYmd.get(ymd) ?? [];
const hasRaces = dayRaces.length > 0;
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 (
<div
key={ymd}
className={`races-cal__cell${hasRaces ? " races-cal__cell--has-race" : ""}${isOpen ? " races-cal__cell--open" : ""}`}
className={cellClassName}
onMouseEnter={() => {
cancelClose();
setOpenYmd(hasRaces ? ymd : null);
@@ -182,6 +218,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
}, [cancelClose]);
const racesByYmd = useMemo(() => groupRacesByYmd(races), [races]);
const todayYmd = useMemo(() => toLocalYmd(new Date()), []);
const focusedMonthIndex = monthFilter === "" ? null : parseInt(monthFilter, 10) - 1;
@@ -202,6 +239,11 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
setOpenYmd={setOpenYmd}
scheduleClose={scheduleClose}
cancelClose={cancelClose}
onMonthSelect={(mi) => {
onMonthFilterChange(String(mi + 1));
setOpenYmd(null);
}}
todayYmd={todayYmd}
/>
))}
</div>
@@ -240,6 +282,7 @@ export function RacesCalendar(props: RacesCalendarProps): JSX.Element {
setOpenYmd={setOpenYmd}
scheduleClose={scheduleClose}
cancelClose={cancelClose}
todayYmd={todayYmd}
/>
</div>
)}

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

@@ -93,6 +93,17 @@ function validateForm(form: FormData): string[] {
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 {
const { raceId } = useParams<{ raceId: string }>();
const navigate = useNavigate();
@@ -243,6 +254,7 @@ export function RaceFormPage(): JSX.Element {
);
const hideOrgScheduleFields = isEditMode && isRaceDateInPast(form.date);
const showResultFields = isRaceDateTodayOrPast(form.date);
const pageTitle = isEditMode ? "Редактирование старта" : "Новый старт";
if (isLoading) {
@@ -397,33 +409,35 @@ export function RaceFormPage(): JSX.Element {
</label>
</fieldset>
<fieldset className="race-form__group">
<legend className="race-form__legend">Результаты</legend>
{showResultFields ? (
<fieldset className="race-form__group">
<legend className="race-form__legend">Результаты</legend>
<label className="race-form__field">
<span className="race-form__label">Финишное время</span>
<input
className="race-form__input"
type="text"
name="finishTime"
value={form.finishTime}
onChange={handleChange}
placeholder="1:45:30"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Финишное время</span>
<input
className="race-form__input"
type="text"
name="finishTime"
value={form.finishTime}
onChange={handleChange}
placeholder="1:45:30"
/>
</label>
<label className="race-form__field">
<span className="race-form__label">Место на финише</span>
<input
className="race-form__input"
type="text"
name="finishPlace"
value={form.finishPlace}
onChange={handleChange}
placeholder="12/340"
/>
</label>
</fieldset>
<label className="race-form__field">
<span className="race-form__label">Место на финише</span>
<input
className="race-form__input"
type="text"
name="finishPlace"
value={form.finishPlace}
onChange={handleChange}
placeholder="12/340"
/>
</label>
</fieldset>
) : null}
<fieldset className="race-form__group">
<legend className="race-form__legend">Дополнительно</legend>

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

@@ -10,7 +10,8 @@ import {
getRaceStatusClassName,
getRaceStatusLabel,
parseRaceDate,
splitRacesByDate,
sortByDateAsc,
sortByDateDesc,
} from "../lib";
const MONTH_OPTIONS: { value: string; label: string }[] = [
@@ -220,7 +221,13 @@ export function RacesPage(): JSX.Element {
};
}, [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],
);
if (errorMessage && races.length === 0 && !isLoading) {
return (
@@ -313,7 +320,7 @@ export function RacesPage(): JSX.Element {
{viewMode === "list" ? (
<div className="race-lists">
<RaceList title="Будущие" races={upcoming} />
<RaceList title="Прошедшие" races={past} />
<RaceList title="Завершенные" races={completed} />
</div>
) : (
<div className="races-cal-wrap">

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

@@ -45,6 +45,12 @@ a {
font-weight: 700;
}
.app-shell__brand:hover,
.app-shell__brand:focus-visible {
color: var(--color-text);
outline: none;
}
.app-shell__nav {
display: flex;
align-items: center;
@@ -1006,6 +1012,26 @@ a {
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 {
display: grid;
grid-template-columns: repeat(7, 1fr);
@@ -1040,6 +1066,12 @@ a {
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 {
z-index: 2;
}
@@ -1070,6 +1102,12 @@ a {
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 {
position: absolute;
top: calc(100% + var(--space-1));
@@ -1226,6 +1264,11 @@ body {
color: var(--color-bg-deep);
}
.app-shell__brand:hover,
.app-shell__brand:focus-visible {
color: var(--color-accent);
}
.app-shell__link {
font-size: var(--font-size-caption);
font-weight: 700;
@@ -1747,18 +1790,61 @@ body {
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 {
color: #071927;
background: linear-gradient(135deg, rgba(185, 242, 74, 0.7), rgba(17, 104, 216, 0.14));
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:focus-visible {
background: var(--color-lime);
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 {
border-color: rgba(17, 104, 216, 0.2);
border-radius: var(--radius-md);