import { useState } from "react"; import { DndContext, closestCenter } from "@dnd-kit/core"; import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { Button } from "@/components/ui/button"; const days = ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag"]; const times = [ "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00" ]; const defaultBlocks = [ { id: "1", day: "Maandag", time: "08:30", subject: "Rekenen" }, { id: "2", day: "Dinsdag", time: "10:00", subject: "Taal" }, { id: "3", day: "Vrijdag", time: "13:00", subject: "Gym" } ]; function SortableItem({ id, subject }: { id: string; subject: string }) { const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id }); const style = { transform: CSS.Transform.toString(transform), transition }; return (
{subject}
); } export default function WeekPlanner() { const [blocks, setBlocks] = useState(defaultBlocks); const handleDragEnd = (event: any) => { const { active, over } = event; if (active.id !== over?.id) { const oldIndex = blocks.findIndex((b) => b.id === active.id); const newIndex = blocks.findIndex((b) => b.id === over?.id); setBlocks((items) => arrayMove(items, oldIndex, newIndex)); } }; const print = () => window.print(); return (
Weekplanner
{days.map((day) => (
{day}
))} {times.map((time) => ( <>
{time}
{days.map((day) => { const cellBlocks = blocks.filter( (b) => b.day === day && b.time === time ); return (
b.id)} strategy={verticalListSortingStrategy}> {cellBlocks.map((block) => ( ))}
); })} </> ))}); }