81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import { useMemo, useState } from "react";
|
||
import { WEEKDAY_LABELS, type WorkoutSummary } from "../api";
|
||
|
||
function daysInMonth(year: number, month: number) {
|
||
return new Date(year, month, 0).getDate();
|
||
}
|
||
|
||
export function AppCalendar({
|
||
value,
|
||
workouts = [],
|
||
onPick,
|
||
}: {
|
||
value: string;
|
||
workouts?: WorkoutSummary[];
|
||
onPick: (iso: string) => void;
|
||
}) {
|
||
const initial = new Date(value + "T12:00:00");
|
||
const [year, setYear] = useState(initial.getFullYear());
|
||
const [month, setMonth] = useState(initial.getMonth() + 1);
|
||
const byDate = useMemo(() => {
|
||
const map = new Map<string, WorkoutSummary>();
|
||
for (const w of workouts) map.set(w.scheduled_date, w);
|
||
return map;
|
||
}, [workouts]);
|
||
const firstWeekday = (new Date(year, month - 1, 1).getDay() + 6) % 7;
|
||
const totalDays = daysInMonth(year, month);
|
||
const today = new Date();
|
||
const todayIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
||
const shift = (delta: number) => {
|
||
const d = new Date(year, month - 1 + delta, 1);
|
||
setYear(d.getFullYear());
|
||
setMonth(d.getMonth() + 1);
|
||
};
|
||
const statusClass = (s: string) => {
|
||
if (s === "completed") return "done";
|
||
if (s === "in_progress" || s === "paused") return "active";
|
||
if (s === "abandoned") return "missed";
|
||
return "planned";
|
||
};
|
||
|
||
return (
|
||
<div className="calendar move-calendar">
|
||
<div className="cal-nav">
|
||
<button type="button" className="btn ghost" onClick={() => shift(-1)} aria-label="Предыдущий месяц">
|
||
‹
|
||
</button>
|
||
<h2>{new Date(year, month - 1, 1).toLocaleString("ru-RU", { month: "long", year: "numeric" })}</h2>
|
||
<button type="button" className="btn ghost" onClick={() => shift(1)} aria-label="Следующий месяц">
|
||
›
|
||
</button>
|
||
</div>
|
||
<div className="cal-grid head">
|
||
{WEEKDAY_LABELS.map((d) => (
|
||
<div key={d}>{d}</div>
|
||
))}
|
||
</div>
|
||
<div className="cal-grid">
|
||
{Array.from({ length: firstWeekday }).map((_, i) => (
|
||
<div key={`e${i}`} className="cal-cell empty" />
|
||
))}
|
||
{Array.from({ length: totalDays }).map((_, i) => {
|
||
const day = i + 1;
|
||
const key = `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
||
const w = byDate.get(key);
|
||
return (
|
||
<button
|
||
key={key}
|
||
type="button"
|
||
className={`cal-cell ${key === todayIso ? "today" : ""} ${key === value ? "picked" : ""} ${w ? statusClass(w.status) : ""}`}
|
||
onClick={() => onPick(key)}
|
||
>
|
||
<span>{day}</span>
|
||
{w && <i className="dot" />}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|