92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function ViewManager() {
|
|
const [view, setView] = useState<{
|
|
id: string;
|
|
name: string;
|
|
token: string;
|
|
icalPastDays?: number;
|
|
} | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [appName, setAppName] = useState("Vereinskalender");
|
|
|
|
const load = async () => {
|
|
try {
|
|
const viewRes = await fetch("/api/views/default");
|
|
if (!viewRes.ok) {
|
|
throw new Error("Daten konnten nicht geladen werden.");
|
|
}
|
|
setView(await viewRes.json());
|
|
} catch (err) {
|
|
setError((err as Error).message);
|
|
}
|
|
};
|
|
|
|
const loadAppName = async () => {
|
|
try {
|
|
const nameResponse = await fetch("/api/settings/app-name");
|
|
if (nameResponse.ok) {
|
|
const payload = await nameResponse.json();
|
|
setAppName(payload.name || "Vereinskalender");
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
load();
|
|
loadAppName();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const handler = () => load();
|
|
window.addEventListener("views-updated", handler);
|
|
return () => window.removeEventListener("views-updated", handler);
|
|
}, []);
|
|
|
|
const toFilename = (value: string) =>
|
|
value
|
|
.trim()
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, "-")
|
|
.replace(/(^-|-$)/g, "") || "kalender";
|
|
|
|
const icalBase = typeof window === "undefined" ? "" : window.location.origin;
|
|
|
|
return (
|
|
<section className="space-y-6 fade-up">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">Persönlich</p>
|
|
<h1 className="text-2xl font-semibold">Meine Terminansicht</h1>
|
|
<p className="text-slate-600">
|
|
Stelle dir eine persönliche Terminansicht zusammen und abonniere sie als iCal.
|
|
</p>
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
|
|
<div className="card space-y-4">
|
|
<h2 className="text-lg font-semibold">Deine Standardansicht</h2>
|
|
<p className="text-sm text-slate-600">
|
|
Diese Ansicht kannst du im Kalender oder in der Listenansicht direkt befüllen.
|
|
</p>
|
|
{view && (
|
|
<div className="rounded-xl 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/{view.token}/{toFilename(appName)}.ical{
|
|
view.icalPastDays && view.icalPastDays > 0
|
|
? `?pastDays=${view.icalPastDays}`
|
|
: ""
|
|
}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|