Meik/vereinskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Aktueller Stand

Browse Source
This commit is contained in:
Meik
2026-01-17 22:32:49 +01:00
parent 67ba95ae23
commit 68b63b8f06
4 changed files with 120 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/AdminPanel.tsx
View File

@@ -545,10 +545,20 @@ export default function AdminPanel() {
<h3 className="text-lg font-semibold">Kategorie bearbeiten</h3> <h3 className="text-lg font-semibold">Kategorie bearbeiten</h3>
<button <button
type="button" type="button"
className="text-sm text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600 hover:bg-slate-100"
onClick={closeCategoryModal} onClick={closeCategoryModal}
aria-label="Schließen"
title="Schließen"
> >
Schließen <svg
viewBox="0 0 24 24"
className="h-4 w-4"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M6 6l12 12M18 6l-12 12" strokeLinecap="round" />
</svg>
</button> </button>
</div> </div>
<form onSubmit={updateCategory} className="mt-4 space-y-3"> <form onSubmit={updateCategory} className="mt-4 space-y-3">
@@ -655,15 +665,25 @@ export default function AdminPanel() {
<h3 className="text-lg font-semibold">Termin bearbeiten</h3> <h3 className="text-lg font-semibold">Termin bearbeiten</h3>
<button <button
type="button" type="button"
className="text-sm text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600 hover:bg-slate-100"
onClick={() => { onClick={() => {
setEditEvent(null); setEditEvent(null);
setEditError(null); setEditError(null);
setEditStatus(null); setEditStatus(null);
setIsEditOpen(false); setIsEditOpen(false);
}} }}
aria-label="Schließen"
title="Schließen"
> >
Schließen <svg
viewBox="0 0 24 24"
className="h-4 w-4"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M6 6l12 12M18 6l-12 12" strokeLinecap="round" />
</svg>
</button> </button>
</div> </div>
<form onSubmit={updateEvent} className="mt-4 space-y-3"> <form onSubmit={updateEvent} className="mt-4 space-y-3">

137
components/CalendarBoard.tsx
View File

@@ -1067,12 +1067,16 @@ export default function CalendarBoard() {
onDragEnter={() => onDragEnter("calendar")} onDragEnter={() => onDragEnter("calendar")}
onDrop={(event) => onDrop(event, "calendar")} onDrop={(event) => onDrop(event, "calendar")}
> >
<div className="mb-3 flex items-center justify-between"> <div
className={`flex items-center justify-between ${
collapsed.calendar ? "" : "mb-3"
}`}
>
<h3 className="text-sm font-semibold text-slate-700">Kalender</h3> <h3 className="text-sm font-semibold text-slate-700">Kalender</h3>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="button" type="button"
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600"
onClick={() => toggleCollapse("calendar")} onClick={() => toggleCollapse("calendar")}
aria-label={collapsed.calendar ? "Kalender aufklappen" : "Kalender zuklappen"} aria-label={collapsed.calendar ? "Kalender aufklappen" : "Kalender zuklappen"}
title={collapsed.calendar ? "Aufklappen" : "Zuklappen"} title={collapsed.calendar ? "Aufklappen" : "Zuklappen"}
@@ -1126,7 +1130,7 @@ export default function CalendarBoard() {
{data?.user && ( {data?.user && (
<button <button
type="button" type="button"
className="rounded-full border border-slate-200 bg-white/80 px-2 py-0.5 text-xs text-slate-600 hover:bg-slate-100" className="rounded-full border border-slate-200 bg-white/70 px-2 py-0.5 text-[11px] font-medium text-slate-500 hover:bg-slate-100"
aria-label={`Termin am ${arg.date.toLocaleDateString("de-DE")} anlegen`} aria-label={`Termin am ${arg.date.toLocaleDateString("de-DE")} anlegen`}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@@ -1134,7 +1138,7 @@ export default function CalendarBoard() {
openFormForDate(arg.date); openFormForDate(arg.date);
}} }}
> >
+ +Termin
</button> </button>
)} )}
</div> </div>
@@ -1227,12 +1231,16 @@ export default function CalendarBoard() {
onDragEnter={() => onDragEnter("map")} onDragEnter={() => onDragEnter("map")}
onDrop={(event) => onDrop(event, "map")} onDrop={(event) => onDrop(event, "map")}
> >
<div className="mb-3 flex items-center justify-between"> <div
className={`flex items-center justify-between ${
collapsed.map ? "" : "mb-3"
}`}
>
<h3 className="text-sm font-semibold text-slate-700">Karte</h3> <h3 className="text-sm font-semibold text-slate-700">Karte</h3>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="button" type="button"
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600"
onClick={() => toggleCollapse("map")} onClick={() => toggleCollapse("map")}
aria-label={collapsed.map ? "Karte aufklappen" : "Karte zuklappen"} aria-label={collapsed.map ? "Karte aufklappen" : "Karte zuklappen"}
title={collapsed.map ? "Aufklappen" : "Zuklappen"} title={collapsed.map ? "Aufklappen" : "Zuklappen"}
@@ -1241,10 +1249,23 @@ export default function CalendarBoard() {
</button> </button>
<button <button
type="button" type="button"
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600"
onClick={() => setMapFullscreen(true)} onClick={() => setMapFullscreen(true)}
aria-label="Karte im Vollbild öffnen"
title="Vollbild"
> >
Vollbild <svg
viewBox="0 0 24 24"
className="h-4 w-4"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M4 9V4h5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M20 9V4h-5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4 15v5h5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M20 15v5h-5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</button> </button>
<div <div
className="drag-handle" className="drag-handle"
@@ -1448,7 +1469,7 @@ export default function CalendarBoard() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<button <button
type="button" type="button"
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600"
onClick={() => toggleCollapse("list")} onClick={() => toggleCollapse("list")}
aria-label={collapsed.list ? "Termine aufklappen" : "Termine zuklappen"} aria-label={collapsed.list ? "Termine aufklappen" : "Termine zuklappen"}
title={collapsed.list ? "Aufklappen" : "Zuklappen"} title={collapsed.list ? "Aufklappen" : "Zuklappen"}
@@ -1523,45 +1544,41 @@ export default function CalendarBoard() {
</div> </div>
{isAdmin && ( {isAdmin && (
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<button {bulkSelection.size > 0 && (
type="button" <button
className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700" type="button"
onClick={() => toggleSelectAllVisible(true)} className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700"
disabled={displayedEvents.length === 0} onClick={() => toggleSelectAllVisible(false)}
>
Alle markieren
</button>
<button
type="button"
className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700"
onClick={() => toggleSelectAllVisible(false)}
disabled={bulkSelection.size === 0}
>
Auswahl löschen
</button>
<span className="text-xs text-slate-500">
{bulkSelection.size} ausgewählt
</span>
<button
type="button"
className="rounded-full border border-red-200 p-2 text-red-600"
onClick={deleteSelectedEvents}
disabled={bulkSelection.size === 0}
aria-label="Ausgewählte löschen"
>
<svg
viewBox="0 0 24 24"
className="h-4 w-4"
fill="none"
stroke="currentColor"
strokeWidth="2"
> >
<path d="M3 6h18" strokeLinecap="round" /> Auswahl löschen
<path d="M8 6V4h8v2" strokeLinecap="round" /> </button>
<path d="M19 6l-1 14H6L5 6" strokeLinecap="round" /> )}
<path d="M10 11v6M14 11v6" strokeLinecap="round" /> {bulkSelection.size > 0 && (
</svg> <span className="text-xs text-slate-500">
</button> {bulkSelection.size} ausgewählt
</span>
)}
{bulkSelection.size > 0 && (
<button
type="button"
className="rounded-full border border-red-200 p-2 text-red-600"
onClick={deleteSelectedEvents}
aria-label="Ausgewählte löschen"
>
<svg
viewBox="0 0 24 24"
className="h-4 w-4"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M3 6h18" strokeLinecap="round" />
<path d="M8 6V4h8v2" strokeLinecap="round" />
<path d="M19 6l-1 14H6L5 6" strokeLinecap="round" />
<path d="M10 11v6M14 11v6" strokeLinecap="round" />
</svg>
</button>
)}
</div> </div>
)} )}
</div> </div>
@@ -1847,10 +1864,12 @@ export default function CalendarBoard() {
)} )}
<button <button
type="button" type="button"
className="text-sm text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600 hover:bg-slate-100"
onClick={() => setDetailsEvent(null)} onClick={() => setDetailsEvent(null)}
aria-label="Schließen"
title="Schließen"
> >
Schließen <IconClose />
</button> </button>
</div> </div>
</div> </div>
@@ -1968,13 +1987,15 @@ export default function CalendarBoard() {
<h3 className="text-lg font-semibold">Termin bearbeiten</h3> <h3 className="text-lg font-semibold">Termin bearbeiten</h3>
<button <button
type="button" type="button"
className="text-sm text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600 hover:bg-slate-100"
onClick={() => { onClick={() => {
setIsEditOpen(false); setIsEditOpen(false);
setEditEvent(null); setEditEvent(null);
}} }}
aria-label="Schließen"
title="Schließen"
> >
Schließen <IconClose />
</button> </button>
</div> </div>
<form onSubmit={updateEvent} className="mt-4 space-y-3"> <form onSubmit={updateEvent} className="mt-4 space-y-3">
@@ -2117,10 +2138,12 @@ export default function CalendarBoard() {
<h3 className="text-lg font-semibold">Karte</h3> <h3 className="text-lg font-semibold">Karte</h3>
<button <button
type="button" type="button"
className="text-sm text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600 hover:bg-slate-100"
onClick={() => setMapFullscreen(false)} onClick={() => setMapFullscreen(false)}
aria-label="Schließen"
title="Schließen"
> >
Schließen <IconClose />
</button> </button>
</div> </div>
<div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-slate-600"> <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-slate-600">
@@ -2454,6 +2477,14 @@ function IconGrip() {
); );
} }
function IconClose() {
return (
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M6 6l12 12M18 6l-12 12" strokeLinecap="round" />
</svg>
);
}
function IconChevronDown() { function IconChevronDown() {
return ( return (
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2"> <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">

14
components/EventForm.tsx
View File

@@ -290,10 +290,20 @@ export default function EventForm({
<h3 className="text-lg font-semibold">Neuen Termin anlegen</h3> <h3 className="text-lg font-semibold">Neuen Termin anlegen</h3>
<button <button
type="button" type="button"
className="text-sm text-slate-600" className="rounded-full border border-slate-200 p-2 text-slate-600 hover:bg-slate-100"
onClick={() => setModalOpen(false)} onClick={() => setModalOpen(false)}
aria-label="Schließen"
title="Schließen"
> >
Schließen <svg
viewBox="0 0 24 24"
className="h-4 w-4"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M6 6l12 12M18 6l-12 12" strokeLinecap="round" />
</svg>
</button> </button>
</div> </div>
{data?.user?.role === "USER" && ( {data?.user?.role === "USER" && (

BIN
screenshots/Screenshot 2026-01-17 223049.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB