first commit
This commit is contained in:
90
components/AdminPanel.tsx
Normal file
90
components/AdminPanel.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type EventItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
startAt: string;
|
||||
endAt: string;
|
||||
status: string;
|
||||
location?: string | null;
|
||||
description?: string | null;
|
||||
};
|
||||
|
||||
export default function AdminPanel() {
|
||||
const [events, setEvents] = useState<EventItem[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/events?status=PENDING");
|
||||
if (!response.ok) {
|
||||
throw new Error("Vorschlaege konnten nicht geladen werden.");
|
||||
}
|
||||
setEvents(await response.json());
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const updateStatus = async (id: string, status: "APPROVED" | "REJECTED") => {
|
||||
await fetch(`/api/events/${id}`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ status })
|
||||
});
|
||||
load();
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<h1 className="text-2xl font-semibold">Adminfreigaben</h1>
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
{events.length === 0 ? (
|
||||
<p className="text-slate-600">Keine offenen Vorschlaege.</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{events.map((event) => (
|
||||
<div key={event.id} className="rounded border border-slate-200 bg-white p-4">
|
||||
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-medium">{event.title}</h2>
|
||||
<p className="text-sm text-slate-600">
|
||||
{new Date(event.startAt).toLocaleString()} - {new Date(event.endAt).toLocaleString()}
|
||||
</p>
|
||||
{event.location && (
|
||||
<p className="text-sm text-slate-600">Ort: {event.location}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateStatus(event.id, "APPROVED")}
|
||||
className="rounded bg-emerald-600 px-3 py-1.5 text-white"
|
||||
>
|
||||
Freigeben
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => updateStatus(event.id, "REJECTED")}
|
||||
className="rounded bg-red-600 px-3 py-1.5 text-white"
|
||||
>
|
||||
Ablehnen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{event.description && (
|
||||
<p className="mt-2 text-sm text-slate-700">{event.description}</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
116
components/CalendarBoard.tsx
Normal file
116
components/CalendarBoard.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import FullCalendar from "@fullcalendar/react";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
type EventItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string | null;
|
||||
location?: string | null;
|
||||
startAt: string;
|
||||
endAt: string;
|
||||
status: string;
|
||||
};
|
||||
|
||||
export default function CalendarBoard() {
|
||||
const { data } = useSession();
|
||||
const [events, setEvents] = useState<EventItem[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const fetchEvents = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await fetch("/api/events");
|
||||
if (!response.ok) {
|
||||
throw new Error("Events konnten nicht geladen werden.");
|
||||
}
|
||||
const payload = await response.json();
|
||||
setEvents(payload);
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.user) {
|
||||
fetchEvents();
|
||||
}
|
||||
}, [data?.user]);
|
||||
|
||||
const calendarEvents = useMemo(
|
||||
() =>
|
||||
events.map((event) => ({
|
||||
id: event.id,
|
||||
title: event.title,
|
||||
start: event.startAt,
|
||||
end: event.endAt,
|
||||
extendedProps: {
|
||||
status: event.status,
|
||||
location: event.location,
|
||||
description: event.description
|
||||
}
|
||||
})),
|
||||
[events]
|
||||
);
|
||||
|
||||
if (!data?.user) {
|
||||
return (
|
||||
<div className="rounded border border-dashed border-slate-300 bg-white p-8 text-center">
|
||||
<p className="text-slate-700">
|
||||
Bitte anmelden, um die Vereinskalender zu sehen.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold">Kalender</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={fetchEvents}
|
||||
className="rounded border border-slate-300 px-3 py-1.5 text-sm text-slate-700"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
{loading && <p className="text-sm text-slate-500">Lade Termine...</p>}
|
||||
<div className="rounded bg-white p-4 shadow-sm">
|
||||
<FullCalendar
|
||||
plugins={[dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]}
|
||||
initialView="dayGridMonth"
|
||||
headerToolbar={{
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "dayGridMonth,timeGridWeek,listWeek"
|
||||
}}
|
||||
events={calendarEvents}
|
||||
eventContent={(arg) => {
|
||||
const status = arg.event.extendedProps.status;
|
||||
return (
|
||||
<div>
|
||||
<div className="text-sm font-medium">{arg.event.title}</div>
|
||||
{status !== "APPROVED" && (
|
||||
<div className="text-xs text-amber-600">{status}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
height="auto"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
85
components/EventForm.tsx
Normal file
85
components/EventForm.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
export default function EventForm() {
|
||||
const [status, setStatus] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setStatus(null);
|
||||
setError(null);
|
||||
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const payload = {
|
||||
title: formData.get("title"),
|
||||
description: formData.get("description"),
|
||||
location: formData.get("location"),
|
||||
startAt: formData.get("startAt"),
|
||||
endAt: formData.get("endAt")
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/events", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Fehler beim Speichern.");
|
||||
}
|
||||
|
||||
event.currentTarget.reset();
|
||||
setStatus("Termin vorgeschlagen. Ein Admin bestaetigt ihn.");
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="rounded bg-white p-4 shadow-sm">
|
||||
<h2 className="text-lg font-semibold">Termin vorschlagen</h2>
|
||||
<form onSubmit={onSubmit} className="mt-4 grid gap-3 md:grid-cols-2">
|
||||
<input
|
||||
name="title"
|
||||
placeholder="Titel"
|
||||
required
|
||||
className="rounded border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<input
|
||||
name="location"
|
||||
placeholder="Ort"
|
||||
className="rounded border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<input
|
||||
name="startAt"
|
||||
type="datetime-local"
|
||||
required
|
||||
className="rounded border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<input
|
||||
name="endAt"
|
||||
type="datetime-local"
|
||||
required
|
||||
className="rounded border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<textarea
|
||||
name="description"
|
||||
placeholder="Beschreibung"
|
||||
className="min-h-[96px] rounded border border-slate-300 px-3 py-2 md:col-span-2"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-brand-500 px-4 py-2 text-white md:col-span-2"
|
||||
>
|
||||
Vorschlag senden
|
||||
</button>
|
||||
</form>
|
||||
{status && <p className="mt-3 text-sm text-emerald-600">{status}</p>}
|
||||
{error && <p className="mt-3 text-sm text-red-600">{error}</p>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
50
components/NavBar.tsx
Normal file
50
components/NavBar.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { signIn, signOut, useSession } from "next-auth/react";
|
||||
|
||||
export default function NavBar() {
|
||||
const { data } = useSession();
|
||||
const isAdmin = data?.user?.role === "ADMIN";
|
||||
|
||||
return (
|
||||
<header className="border-b border-slate-200/70 bg-white/80 backdrop-blur">
|
||||
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
|
||||
<Link href="/" className="text-lg font-semibold text-slate-900">
|
||||
Vereinskalender
|
||||
</Link>
|
||||
<nav className="flex items-center gap-4 text-sm">
|
||||
{data?.user && (
|
||||
<>
|
||||
<Link href="/views" className="text-slate-700 hover:text-slate-900">
|
||||
Meine Ansichten
|
||||
</Link>
|
||||
{isAdmin && (
|
||||
<Link href="/admin" className="text-slate-700 hover:text-slate-900">
|
||||
Admin
|
||||
</Link>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{data?.user ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => signOut()}
|
||||
className="rounded bg-slate-900 px-3 py-1.5 text-white"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => signIn()}
|
||||
className="rounded bg-brand-500 px-3 py-1.5 text-white"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
199
components/ViewManager.tsx
Normal file
199
components/ViewManager.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
type EventItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
startAt: string;
|
||||
endAt: string;
|
||||
status: string;
|
||||
};
|
||||
|
||||
type ViewItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
token: string;
|
||||
items: { event: EventItem }[];
|
||||
};
|
||||
|
||||
export default function ViewManager() {
|
||||
const [views, setViews] = useState<ViewItem[]>([]);
|
||||
const [events, setEvents] = useState<EventItem[]>([]);
|
||||
const [selectedView, setSelectedView] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const [viewsRes, eventsRes] = await Promise.all([
|
||||
fetch("/api/views"),
|
||||
fetch("/api/events?status=APPROVED")
|
||||
]);
|
||||
|
||||
if (!viewsRes.ok || !eventsRes.ok) {
|
||||
throw new Error("Daten konnten nicht geladen werden.");
|
||||
}
|
||||
|
||||
const viewsData = await viewsRes.json();
|
||||
const eventsData = await eventsRes.json();
|
||||
setViews(viewsData);
|
||||
setEvents(eventsData);
|
||||
if (viewsData.length > 0 && !selectedView) {
|
||||
setSelectedView(viewsData[0].id);
|
||||
}
|
||||
} catch (err) {
|
||||
setError((err as Error).message);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
const icalBase = typeof window === "undefined" ? "" : window.location.origin;
|
||||
const activeView = useMemo(
|
||||
() => views.find((view) => view.id === selectedView) || null,
|
||||
[views, selectedView]
|
||||
);
|
||||
|
||||
const createView = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const name = formData.get("name");
|
||||
const response = await fetch("/api/views", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
event.currentTarget.reset();
|
||||
load();
|
||||
}
|
||||
};
|
||||
|
||||
const addItem = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (!selectedView) return;
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const eventId = formData.get("eventId");
|
||||
|
||||
await fetch(`/api/views/${selectedView}/items`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ eventId })
|
||||
});
|
||||
|
||||
load();
|
||||
};
|
||||
|
||||
const removeItem = async (eventId: string) => {
|
||||
if (!selectedView) return;
|
||||
await fetch(`/api/views/${selectedView}/items`, {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ eventId })
|
||||
});
|
||||
load();
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold">Meine Kalenderansichten</h1>
|
||||
<p className="text-slate-600">
|
||||
Stelle dir eine persoenliche Terminansicht zusammen und abonnieren sie als iCal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-4 rounded bg-white p-4 shadow-sm">
|
||||
<h2 className="text-lg font-semibold">Neue Ansicht</h2>
|
||||
<form onSubmit={createView} className="flex gap-2">
|
||||
<input
|
||||
name="name"
|
||||
required
|
||||
placeholder="z.B. Jugendtermine"
|
||||
className="flex-1 rounded border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<button className="rounded bg-brand-500 px-3 py-2 text-white" type="submit">
|
||||
Anlegen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-700">Ansicht waehlen</label>
|
||||
<select
|
||||
className="w-full rounded border border-slate-300 px-3 py-2"
|
||||
value={selectedView || ""}
|
||||
onChange={(event) => setSelectedView(event.target.value)}
|
||||
>
|
||||
{views.map((view) => (
|
||||
<option key={view.id} value={view.id}>
|
||||
{view.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{activeView && (
|
||||
<div className="rounded border border-slate-200 bg-slate-50 p-3 text-sm">
|
||||
<p className="font-medium">iCal URL</p>
|
||||
<p className="break-all text-slate-700">
|
||||
{icalBase}/api/ical/{activeView.token}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 rounded bg-white p-4 shadow-sm">
|
||||
<h2 className="text-lg font-semibold">Termine hinzufuegen</h2>
|
||||
<form onSubmit={addItem} className="space-y-3">
|
||||
<select
|
||||
name="eventId"
|
||||
className="w-full rounded border border-slate-300 px-3 py-2"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>
|
||||
Termin waehlen
|
||||
</option>
|
||||
{events.map((event) => (
|
||||
<option key={event.id} value={event.id}>
|
||||
{event.title} ({new Date(event.startAt).toLocaleDateString()})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button className="w-full rounded bg-slate-900 px-3 py-2 text-white" type="submit">
|
||||
Zur Ansicht hinzufuegen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-semibold text-slate-700">Inhalte der Ansicht</h3>
|
||||
{activeView?.items.length ? (
|
||||
activeView.items.map((item) => (
|
||||
<div
|
||||
key={item.event.id}
|
||||
className="flex items-center justify-between rounded border border-slate-200 px-3 py-2"
|
||||
>
|
||||
<span className="text-sm">{item.event.title}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-red-600"
|
||||
onClick={() => removeItem(item.event.id)}
|
||||
>
|
||||
Entfernen
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-slate-500">Noch keine Termine.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user