feat: upgrade schedule with cross-location views, day/time filters, and clickable trainers
- Add "Все студии" tab merging all locations by weekday with location sub-headers - Location tabs show hall name + address subtitle for clarity - Add day multi-select and time-of-day preset filters (Утро/День/Вечер) behind collapsible "Когда" button - Make trainer and type names clickable in day cards for inline filtering - Add group view clustering classes by trainer+type+location - Remove trainer dropdown from filter bar — filter by clicking names in schedule - Add searchable icon picker and lucide-react icon rendering for classes admin/section Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
186
src/components/sections/schedule/GroupView.tsx
Normal file
186
src/components/sections/schedule/GroupView.tsx
Normal file
@@ -0,0 +1,186 @@
|
||||
"use client";
|
||||
|
||||
import { User, Clock, CalendarDays, MapPin } from "lucide-react";
|
||||
import { shortAddress } from "./constants";
|
||||
import type { ScheduleDayMerged, ScheduleClassWithLocation } from "./constants";
|
||||
|
||||
interface ScheduleGroup {
|
||||
trainer: string;
|
||||
type: string;
|
||||
level?: string;
|
||||
hasSlots: boolean;
|
||||
recruiting: boolean;
|
||||
location?: string;
|
||||
locationAddress?: string;
|
||||
slots: { day: string; dayShort: string; time: string }[];
|
||||
}
|
||||
|
||||
function buildGroups(days: ScheduleDayMerged[]): ScheduleGroup[] {
|
||||
const map = new Map<string, ScheduleGroup>();
|
||||
|
||||
for (const day of days) {
|
||||
for (const cls of day.classes as ScheduleClassWithLocation[]) {
|
||||
// Include location in key so same trainer+type at different locations = separate groups
|
||||
const locPart = cls.locationName ?? "";
|
||||
const key = `${cls.trainer}||${cls.type}||${locPart}`;
|
||||
const existing = map.get(key);
|
||||
if (existing) {
|
||||
existing.slots.push({ day: day.day, dayShort: day.dayShort, time: cls.time });
|
||||
if (cls.hasSlots) existing.hasSlots = true;
|
||||
if (cls.recruiting) existing.recruiting = true;
|
||||
if (cls.level && !existing.level) existing.level = cls.level;
|
||||
} else {
|
||||
map.set(key, {
|
||||
trainer: cls.trainer,
|
||||
type: cls.type,
|
||||
level: cls.level,
|
||||
hasSlots: !!cls.hasSlots,
|
||||
recruiting: !!cls.recruiting,
|
||||
location: cls.locationName,
|
||||
locationAddress: cls.locationAddress,
|
||||
slots: [{ day: day.day, dayShort: day.dayShort, time: cls.time }],
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(map.values());
|
||||
}
|
||||
|
||||
interface GroupViewProps {
|
||||
typeDots: Record<string, string>;
|
||||
filteredDays: ScheduleDayMerged[];
|
||||
filterType: string | null;
|
||||
setFilterType: (type: string | null) => void;
|
||||
filterTrainer: string | null;
|
||||
setFilterTrainer: (trainer: string | null) => void;
|
||||
showLocation?: boolean;
|
||||
}
|
||||
|
||||
export function GroupView({
|
||||
typeDots,
|
||||
filteredDays,
|
||||
filterType,
|
||||
setFilterType,
|
||||
filterTrainer,
|
||||
setFilterTrainer,
|
||||
showLocation,
|
||||
}: GroupViewProps) {
|
||||
const groups = buildGroups(filteredDays);
|
||||
|
||||
if (groups.length === 0) {
|
||||
return (
|
||||
<div className="py-12 text-center text-sm text-neutral-400 dark:text-white/30">
|
||||
Нет занятий по выбранным фильтрам
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-8 grid grid-cols-1 gap-3 px-4 sm:grid-cols-2 lg:grid-cols-3 sm:px-6 lg:px-8 xl:px-6">
|
||||
{groups.map((group) => {
|
||||
const dotColor = typeDots[group.type] ?? "bg-white/30";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${group.trainer}||${group.type}||${group.location ?? ""}`}
|
||||
className={`rounded-2xl border overflow-hidden transition-colors ${
|
||||
group.hasSlots
|
||||
? "border-emerald-500/25 bg-white dark:border-emerald-500/15 dark:bg-[#0a0a0a]"
|
||||
: group.recruiting
|
||||
? "border-sky-500/25 bg-white dark:border-sky-500/15 dark:bg-[#0a0a0a]"
|
||||
: "border-neutral-200 bg-white dark:border-white/[0.06] dark:bg-[#0a0a0a]"
|
||||
}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className={`px-5 py-4 border-b ${
|
||||
group.hasSlots
|
||||
? "border-emerald-500/15 bg-emerald-500/5 dark:border-emerald-500/10 dark:bg-emerald-500/[0.03]"
|
||||
: group.recruiting
|
||||
? "border-sky-500/15 bg-sky-500/5 dark:border-sky-500/10 dark:bg-sky-500/[0.03]"
|
||||
: "border-neutral-100 bg-neutral-50 dark:border-white/[0.04] dark:bg-white/[0.02]"
|
||||
}`}>
|
||||
{/* Type + badges */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<button
|
||||
onClick={() => setFilterType(filterType === group.type ? null : group.type)}
|
||||
className={`flex items-center gap-2 active:opacity-60 ${
|
||||
filterType === group.type ? "opacity-100" : ""
|
||||
}`}
|
||||
>
|
||||
<span className={`h-2.5 w-2.5 shrink-0 rounded-full ${dotColor}`} />
|
||||
<span className="text-base font-semibold text-neutral-900 dark:text-white/90">
|
||||
{group.type}
|
||||
</span>
|
||||
</button>
|
||||
{group.level && (
|
||||
<span className="rounded-full bg-rose-500/15 border border-rose-500/25 px-2 py-0.5 text-[10px] font-semibold text-rose-600 dark:text-rose-400">
|
||||
{group.level}
|
||||
</span>
|
||||
)}
|
||||
{group.hasSlots && (
|
||||
<span className="rounded-full bg-emerald-500/15 border border-emerald-500/25 px-2 py-0.5 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400">
|
||||
есть места
|
||||
</span>
|
||||
)}
|
||||
{group.recruiting && (
|
||||
<span className="rounded-full bg-sky-500/15 border border-sky-500/25 px-2 py-0.5 text-[10px] font-semibold text-sky-600 dark:text-sky-400">
|
||||
набор
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Trainer */}
|
||||
<button
|
||||
onClick={() => setFilterTrainer(filterTrainer === group.trainer ? null : group.trainer)}
|
||||
className={`mt-2 flex items-center gap-1.5 text-sm active:opacity-60 ${
|
||||
filterTrainer === group.trainer
|
||||
? "text-gold underline underline-offset-2"
|
||||
: "text-neutral-500 dark:text-white/50"
|
||||
}`}
|
||||
>
|
||||
<User size={13} className="shrink-0" />
|
||||
{group.trainer}
|
||||
</button>
|
||||
|
||||
{/* Location badge — only in "all" mode */}
|
||||
{showLocation && group.location && (
|
||||
<div className="mt-2 flex items-center gap-1 text-[11px] text-neutral-400 dark:text-white/30">
|
||||
<MapPin size={10} className="shrink-0" />
|
||||
{group.location}
|
||||
{group.locationAddress && (
|
||||
<span className="text-neutral-300 dark:text-white/15"> · {shortAddress(group.locationAddress)}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Schedule slots */}
|
||||
<div className="px-5 py-3.5">
|
||||
<div className="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium text-neutral-400 dark:text-white/25 uppercase tracking-wider">
|
||||
<CalendarDays size={12} />
|
||||
Расписание
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
{group.slots.map((slot, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-3 rounded-lg bg-neutral-50 px-3 py-2 dark:bg-white/[0.03]"
|
||||
>
|
||||
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-gold/10 text-[10px] font-bold text-gold-dark dark:text-gold-light">
|
||||
{slot.dayShort}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 text-sm text-neutral-600 dark:text-white/60">
|
||||
<Clock size={12} className="shrink-0 text-neutral-400 dark:text-white/30" />
|
||||
<span className="font-medium tabular-nums">{slot.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user