inffo2/src/app/date/[date]/page.tsx
2025-06-24 15:01:42 +02:00

85 lines
2.4 KiB
TypeScript

import { groupEventsByLine } from "@/common/utils";
import { EventCard } from "@/components/EventCard";
import { EventList } from "@/components/EventList";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { getAllLines, getEventsForDate } from "@/db";
import { notFound } from "next/navigation";
export default async function ScheduleByDate({
params,
searchParams,
}: {
params: Promise<{
date: string;
}>;
searchParams: Promise<{
group?: string;
}>;
}) {
const { date } = await params;
const { group = "time" } = await searchParams;
const parsedDate = new Date(date);
if (Number.isNaN(parsedDate.getTime())) {
return notFound();
}
const formattedDate = parsedDate.toISOString().split("T")[0]; // Format to 'YYYY-MM-DD'
const events = await getEventsForDate(formattedDate);
if (events.length === 0) {
return notFound();
}
const groupedEvents = groupEventsByLine(events);
const allLines = await getAllLines();
return (
<div className="flex flex-col items-center justify-items-center p-8 pb-20 gap-4 sm:p-20 w-full">
<div className="flex flex-col sm:flex-row justify-between items-center w-full gap-2 mb-4">
<h1 className="text-3xl font-bold">
{parsedDate.toLocaleDateString(["cs-CZ"], {
weekday: "long",
day: "numeric",
month: "numeric",
})}
</h1>
<form
method="GET"
action={`/date/${formattedDate}`}
className="flex items-center"
>
<Label htmlFor="group" className="mr-2">
Seskupit podle:
</Label>
<Select name="group" defaultValue={group}>
<SelectTrigger className="w-20">
<SelectValue placeholder="Vyberte možnost..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="time">Čas</SelectItem>
<SelectItem value="line">Linie</SelectItem>
</SelectContent>
</Select>
<Button type="submit" className="ml-2">
Zobrazit
</Button>
</form>
</div>
<main className="flex flex-col gap-8 items-center">
{group === "line" &&
groupedEvents.map((line) => (
<EventList
key={line.lineId}
events={line.events}
title={allLines.find((l) => l.id === line.lineId)?.name}
/>
))}
{group !== "line" && <EventList events={events} showLine />}
</main>
</div>
);
}