Added CSRF & YouTube and dark mode

2025-01-22 17:39:03 +01:00
parent 48e761667f
commit 5a5846d853
29 changed files with 1186 additions and 280 deletions
--- a/frontend/app/(main)/planning/page.tsx
+++ b/frontend/app/(main)/planning/page.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import "@schedule-x/theme-shadcn/dist/index.css";
+import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
+import { createEventsServicePlugin } from "@schedule-x/events-service";
+import {
+	CalendarEventExternal,
+	createViewDay,
+	createViewWeek,
+} from "@schedule-x/calendar";
+import { useEffect, useState } from "react";
+import { format } from "date-fns";
+import { Dialog } from "@radix-ui/react-dialog";
+import {
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { cn } from "@/lib/utils";
+
+const Planning = () => {
+	const plugins = [createEventsServicePlugin()];
+	const [eventSelected, setEventSelected] =
+		useState<CalendarEventExternal | null>(null);
+	const [events, setEvents] = useState<CalendarEventExternal[]>([
+		{
+			id: "1",
+			title: "Event 1",
+			start: format(new Date(Date.now()), "yyyy-MM-dd HH:mm"),
+			end: format(
+				new Date(Date.now() + 1 * 3600 * 1000),
+				"yyyy-MM-dd HH:mm",
+			),
+		},
+	]);
+	const calendar = useNextCalendarApp(
+		{
+			theme: "shadcn",
+			views: [createViewDay(), createViewWeek()],
+			defaultView: "week",
+			isDark: true,
+			isResponsive: true,
+			locale: "fr-FR",
+			dayBoundaries: {
+				start: "06:00",
+				end: "00:00",
+			},
+			events,
+			callbacks: {
+				onEventClick(event, e) {
+					setEventSelected(event);
+				},
+			},
+		},
+		plugins,
+	);
+
+	useEffect(() => {
+		// get all events
+		calendar?.events.getAll();
+	}, []);
+
+	return (
+		<div>
+			<div className="m-8">
+				<ScheduleXCalendar calendarApp={calendar} />
+			</div>
+			<Dialog
+				open={eventSelected !== null}
+				onOpenChange={(open) => {
+					setEventSelected((e) => (open ? e : null));
+				}}
+			>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>{eventSelected?.title}</DialogTitle>
+						<DialogDescription>
+							{eventSelected?.description}
+						</DialogDescription>
+					</DialogHeader>
+
+					<div className="grid gap-4 py-4">
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label htmlFor="start" className="text-right">
+								Début
+							</Label>
+							{/*<Popover>
+								<PopoverTrigger asChild>
+									<Button
+										variant={"outline"}
+										className={cn(
+											"w-[240px] pl-3 text-left font-normal",
+											!eventSelected?.start &&
+												"text-muted-foreground",
+										)}
+									>
+										{eventSelected?.start ? (
+											format(eventSelected?.start, "PPP")
+										) : (
+											<span>Choisissez une date.</span>
+										)}
+										<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent
+									className="w-auto p-0"
+									align="start"
+								>
+									<Calendar
+										mode="single"
+										selected={
+											new Date(
+												eventSelected?.start ??
+													Date.now(),
+											)
+										}
+										// onSelect={field.onChange}
+										disabled={(date) =>
+											date > new Date() ||
+											date < new Date("1900-01-01")
+										}
+										initialFocus
+									/>
+								</PopoverContent>
+							</Popover> */}
+							<Input
+								id="start"
+								value={eventSelected?.start}
+								onChange={(e) => {
+									const val = e.currentTarget.value;
+									console.log(val);
+									setEventSelected((ev) => {
+										if (ev)
+											return {
+												...ev,
+												start: val,
+											};
+										return ev;
+									});
+								}}
+								className="col-span-3"
+							/>
+						</div>
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label htmlFor="end" className="text-right">
+								Fin
+							</Label>
+							<Input
+								id="end"
+								value={eventSelected?.end}
+								onChange={(e) =>
+									setEventSelected((ev) => {
+										if (ev)
+											return {
+												...ev,
+												end: e.currentTarget.value,
+											};
+										return ev;
+									})
+								}
+								className="col-span-3"
+							/>
+						</div>
+					</div>
+					<DialogFooter>
+						<Button
+							onClick={() => {
+								setEvents((evs) => {
+									evs = evs.filter(
+										(e) => e.id !== eventSelected?.id,
+									);
+									evs.push(eventSelected!);
+									return evs;
+								});
+							}}
+							type="submit"
+						>
+							Mettre à jour
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+};
+
+export default Planning;