2153 lines
79 KiB
TypeScript
2153 lines
79 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
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 deLocale from "@fullcalendar/core/locales/de";
|
|
import { useSession } from "next-auth/react";
|
|
import { CircleMarker, MapContainer, Popup, TileLayer, useMap } from "react-leaflet";
|
|
import EventForm from "./EventForm";
|
|
|
|
type EventItem = {
|
|
id: string;
|
|
title: string;
|
|
description?: string | null;
|
|
location?: string | null;
|
|
locationPlaceId?: string | null;
|
|
locationLat?: number | null;
|
|
locationLng?: number | null;
|
|
startAt: string;
|
|
endAt?: string | null;
|
|
status: string;
|
|
category?: { id: string; name: string } | null;
|
|
};
|
|
|
|
type ViewItem = {
|
|
id: string;
|
|
token: string;
|
|
items: { eventId: string }[];
|
|
categories: { categoryId: string; category?: { name: string } }[];
|
|
exclusions: { eventId: string }[];
|
|
};
|
|
|
|
type DateBucket = "past" | "today" | "tomorrow" | "future";
|
|
|
|
const MAP_FILTER_STORAGE_KEY = "mapFilters";
|
|
|
|
export default function CalendarBoard() {
|
|
const { data } = useSession();
|
|
const [events, setEvents] = useState<EventItem[]>([]);
|
|
const [view, setView] = useState<ViewItem | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [query, setQuery] = useState("");
|
|
const [categoryFilter, setCategoryFilter] = useState("ALL");
|
|
const [sortKey, setSortKey] = useState("startAt");
|
|
const [sortDir, setSortDir] = useState<"asc" | "desc">("asc");
|
|
const [detailsEvent, setDetailsEvent] = useState<EventItem | null>(null);
|
|
const [placesKey, setPlacesKey] = useState("");
|
|
const [placesProvider, setPlacesProvider] = useState<"google" | "osm">("osm");
|
|
const [categories, setCategories] = useState<{ id: string; name: string }[]>(
|
|
[]
|
|
);
|
|
const [editEvent, setEditEvent] = useState<EventItem | null>(null);
|
|
const [isEditOpen, setIsEditOpen] = useState(false);
|
|
const [editStatus, setEditStatus] = useState<string | null>(null);
|
|
const [editError, setEditError] = useState<string | null>(null);
|
|
const [bulkSelection, setBulkSelection] = useState<Set<string>>(new Set());
|
|
const [mapFullscreen, setMapFullscreen] = useState(false);
|
|
const [isDarkTheme, setIsDarkTheme] = useState(false);
|
|
const [mapDateFilter, setMapDateFilter] = useState<Set<DateBucket>>(
|
|
new Set(["past", "today", "tomorrow", "future"])
|
|
);
|
|
const [mapCategoryFilter, setMapCategoryFilter] = useState<Set<string>>(
|
|
new Set()
|
|
);
|
|
const [formOpen, setFormOpen] = useState(false);
|
|
const [prefillStartAt, setPrefillStartAt] = useState<string | null>(null);
|
|
const [viewOrder, setViewOrder] = useState<
|
|
Array<"calendar" | "list" | "map">
|
|
>(["calendar", "map", "list"]);
|
|
const [collapsed, setCollapsed] = useState<{
|
|
calendar: boolean;
|
|
list: boolean;
|
|
map: boolean;
|
|
}>({
|
|
calendar: false,
|
|
list: false,
|
|
map: false
|
|
});
|
|
const [activeRange, setActiveRange] = useState<{
|
|
start: Date;
|
|
end: Date;
|
|
viewType: string;
|
|
} | null>(null);
|
|
const [initialView, setInitialView] = useState("dayGridMonth");
|
|
const [dragSource, setDragSource] = useState<
|
|
"calendar" | "list" | "map" | null
|
|
>(null);
|
|
const [dragOver, setDragOver] = useState<
|
|
"calendar" | "list" | "map" | null
|
|
>(null);
|
|
const calendarRef = useRef<HTMLDivElement | null>(null);
|
|
const listRef = useRef<HTMLDivElement | null>(null);
|
|
const mapRef = useRef<HTMLDivElement | null>(null);
|
|
const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
|
|
const detailsModalRef = useRef<HTMLDivElement | null>(null);
|
|
const lastActiveElementRef = useRef<HTMLElement | null>(null);
|
|
const isAdmin =
|
|
data?.user?.role === "ADMIN" || data?.user?.role === "SUPERADMIN";
|
|
|
|
const fetchEvents = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const [eventsResponse, viewResponse] = await Promise.all([
|
|
fetch("/api/events"),
|
|
fetch("/api/views/default")
|
|
]);
|
|
if (!eventsResponse.ok) {
|
|
throw new Error("Events konnten nicht geladen werden.");
|
|
}
|
|
const payload = await eventsResponse.json();
|
|
setEvents(payload);
|
|
if (viewResponse.ok) {
|
|
setView(await viewResponse.json());
|
|
}
|
|
} catch (err) {
|
|
setError((err as Error).message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (data?.user) {
|
|
fetchEvents();
|
|
}
|
|
}, [data?.user]);
|
|
|
|
useEffect(() => {
|
|
const loadKey = async () => {
|
|
try {
|
|
const response = await fetch("/api/settings/system");
|
|
if (!response.ok) return;
|
|
const payload = await response.json();
|
|
setPlacesKey(payload.apiKey || "");
|
|
setPlacesProvider(payload.provider === "google" ? "google" : "osm");
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
|
|
if (data?.user) {
|
|
loadKey();
|
|
}
|
|
}, [data?.user]);
|
|
|
|
useEffect(() => {
|
|
if (!data?.user || !isAdmin) return;
|
|
const loadCategories = async () => {
|
|
try {
|
|
const response = await fetch("/api/categories");
|
|
if (!response.ok) return;
|
|
const payload = await response.json();
|
|
setCategories(payload);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
loadCategories();
|
|
}, [data?.user, isAdmin]);
|
|
|
|
useEffect(() => {
|
|
const handler = () => {
|
|
fetchEvents();
|
|
};
|
|
window.addEventListener("views-updated", handler);
|
|
return () => window.removeEventListener("views-updated", handler);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const stored = window.localStorage.getItem("calendarLastView");
|
|
if (stored) {
|
|
setInitialView(stored);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (typeof document === "undefined") return;
|
|
setPortalRoot(document.body);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const stored = window.localStorage.getItem(MAP_FILTER_STORAGE_KEY);
|
|
if (!stored) return;
|
|
const parsed = JSON.parse(stored);
|
|
const allowed: DateBucket[] = ["past", "today", "tomorrow", "future"];
|
|
if (parsed?.dates && Array.isArray(parsed.dates)) {
|
|
const nextDates = parsed.dates.filter((value: string) =>
|
|
allowed.includes(value as DateBucket)
|
|
);
|
|
if (nextDates.length > 0) {
|
|
setMapDateFilter(new Set(nextDates as DateBucket[]));
|
|
}
|
|
}
|
|
if (parsed?.categories && Array.isArray(parsed.categories)) {
|
|
setMapCategoryFilter(new Set(parsed.categories.filter(Boolean)));
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const payload = {
|
|
dates: Array.from(mapDateFilter),
|
|
categories: Array.from(mapCategoryFilter)
|
|
};
|
|
window.localStorage.setItem(MAP_FILTER_STORAGE_KEY, JSON.stringify(payload));
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, [mapDateFilter, mapCategoryFilter]);
|
|
|
|
useEffect(() => {
|
|
if (typeof document === "undefined") return;
|
|
const root = document.documentElement;
|
|
const updateTheme = () => {
|
|
setIsDarkTheme(root.dataset.theme === "dark");
|
|
};
|
|
updateTheme();
|
|
const observer = new MutationObserver(updateTheme);
|
|
observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!detailsEvent) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
setDetailsEvent(null);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [detailsEvent]);
|
|
|
|
useEffect(() => {
|
|
if (!isEditOpen) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
setIsEditOpen(false);
|
|
setEditEvent(null);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [isEditOpen]);
|
|
|
|
useEffect(() => {
|
|
if (!mapFullscreen) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
setMapFullscreen(false);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [mapFullscreen]);
|
|
|
|
useEffect(() => {
|
|
if (!detailsEvent) return;
|
|
lastActiveElementRef.current = document.activeElement as HTMLElement | null;
|
|
const node = detailsModalRef.current;
|
|
if (!node) return;
|
|
const focusable = node.querySelectorAll<HTMLElement>(
|
|
'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
|
|
);
|
|
const target = focusable[0] || node;
|
|
target.focus();
|
|
}, [detailsEvent]);
|
|
|
|
useEffect(() => {
|
|
if (detailsEvent) return;
|
|
const previous = lastActiveElementRef.current;
|
|
if (previous) {
|
|
previous.focus();
|
|
lastActiveElementRef.current = null;
|
|
}
|
|
}, [detailsEvent]);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const stored = window.localStorage.getItem("listSort");
|
|
if (!stored) return;
|
|
const parsed = JSON.parse(stored);
|
|
if (
|
|
parsed &&
|
|
typeof parsed === "object" &&
|
|
typeof parsed.key === "string" &&
|
|
(parsed.dir === "asc" || parsed.dir === "desc")
|
|
) {
|
|
setSortKey(parsed.key);
|
|
setSortDir(parsed.dir);
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
window.localStorage.setItem(
|
|
"listSort",
|
|
JSON.stringify({ key: sortKey, dir: sortDir })
|
|
);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, [sortKey, sortDir]);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const stored = window.localStorage.getItem("calendarViewOrder");
|
|
if (!stored) return;
|
|
const parsed = JSON.parse(stored);
|
|
if (Array.isArray(parsed)) {
|
|
const normalized = [
|
|
...new Set(
|
|
parsed.filter((item) =>
|
|
["calendar", "list", "map"].includes(String(item))
|
|
)
|
|
)
|
|
] as Array<"calendar" | "list" | "map">;
|
|
if (normalized.includes("calendar") && normalized.includes("list")) {
|
|
if (!normalized.includes("map")) {
|
|
normalized.splice(1, 0, "map");
|
|
}
|
|
setViewOrder(normalized);
|
|
}
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const stored = window.localStorage.getItem("calendarViewCollapsed");
|
|
if (!stored) return;
|
|
const parsed = JSON.parse(stored);
|
|
if (
|
|
parsed &&
|
|
typeof parsed === "object" &&
|
|
typeof parsed.calendar === "boolean" &&
|
|
typeof parsed.list === "boolean"
|
|
) {
|
|
setCollapsed({
|
|
calendar: parsed.calendar,
|
|
list: parsed.list,
|
|
map: typeof parsed.map === "boolean" ? parsed.map : false
|
|
});
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}, []);
|
|
|
|
const persistOrder = (nextOrder: Array<"calendar" | "list" | "map">) => {
|
|
setViewOrder(nextOrder);
|
|
try {
|
|
window.localStorage.setItem("calendarViewOrder", JSON.stringify(nextOrder));
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
|
|
const toggleCollapse = (section: "calendar" | "list" | "map") => {
|
|
const next = { ...collapsed, [section]: !collapsed[section] };
|
|
setCollapsed(next);
|
|
try {
|
|
window.localStorage.setItem("calendarViewCollapsed", JSON.stringify(next));
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
|
|
const swapOrder = (
|
|
source: "calendar" | "list" | "map",
|
|
target: "calendar" | "list" | "map"
|
|
) => {
|
|
if (source === target) return;
|
|
const next = [...viewOrder];
|
|
const sourceIndex = next.indexOf(source);
|
|
const targetIndex = next.indexOf(target);
|
|
if (sourceIndex === -1 || targetIndex === -1) return;
|
|
next[sourceIndex] = target;
|
|
next[targetIndex] = source;
|
|
persistOrder(next);
|
|
};
|
|
|
|
const onDragStart = (
|
|
event: React.DragEvent<HTMLDivElement>,
|
|
section: "calendar" | "list" | "map"
|
|
) => {
|
|
event.dataTransfer.setData("text/plain", section);
|
|
event.dataTransfer.effectAllowed = "move";
|
|
setDragSource(section);
|
|
setDragOver(section);
|
|
const node =
|
|
section === "calendar"
|
|
? calendarRef.current
|
|
: section === "list"
|
|
? listRef.current
|
|
: mapRef.current;
|
|
if (node) {
|
|
event.dataTransfer.setDragImage(node, 20, 20);
|
|
}
|
|
};
|
|
|
|
const onDragEnter = (target: "calendar" | "list" | "map") => {
|
|
setDragOver(target);
|
|
};
|
|
|
|
const onDragEnd = () => {
|
|
setDragSource(null);
|
|
setDragOver(null);
|
|
};
|
|
|
|
const onDrop = (
|
|
event: React.DragEvent<HTMLDivElement>,
|
|
target: "calendar" | "list" | "map"
|
|
) => {
|
|
event.preventDefault();
|
|
const source = event.dataTransfer.getData("text/plain") as
|
|
| "calendar"
|
|
| "list"
|
|
| "map";
|
|
if (source) {
|
|
swapOrder(source, target);
|
|
}
|
|
setDragSource(null);
|
|
setDragOver(null);
|
|
};
|
|
|
|
const openFormForDate = (date: Date | null) => {
|
|
if (date) {
|
|
const prefill = new Date(date);
|
|
prefill.setHours(12, 0, 0, 0);
|
|
setPrefillStartAt(prefill.toISOString());
|
|
} else {
|
|
setPrefillStartAt(null);
|
|
}
|
|
setFormOpen(true);
|
|
};
|
|
|
|
const calendarEvents = useMemo(
|
|
() =>
|
|
events.map((event) => ({
|
|
id: event.id,
|
|
title: event.title,
|
|
start: event.startAt,
|
|
end: event.endAt || undefined,
|
|
extendedProps: {
|
|
status: event.status,
|
|
location: event.location,
|
|
description: event.description,
|
|
category: event.category?.name
|
|
}
|
|
})),
|
|
[events]
|
|
);
|
|
|
|
const selectedEventIds = useMemo(() => {
|
|
if (!view) return new Set<string>();
|
|
const ids = new Set(view.items.map((item) => item.eventId));
|
|
const excluded = new Set(view.exclusions.map((item) => item.eventId));
|
|
const subscribedCategoryIds = new Set(
|
|
view.categories.map((item) => item.categoryId)
|
|
);
|
|
events.forEach((event) => {
|
|
if (event.category?.id && subscribedCategoryIds.has(event.category.id)) {
|
|
ids.add(event.id);
|
|
}
|
|
});
|
|
excluded.forEach((eventId) => ids.delete(eventId));
|
|
return ids;
|
|
}, [view, events]);
|
|
|
|
const subscribedCategoryIds = useMemo(() => {
|
|
return new Set(view?.categories.map((item) => item.categoryId) || []);
|
|
}, [view]);
|
|
|
|
const toggleEvent = async (eventId: string) => {
|
|
if (!view) return;
|
|
const isSelected = selectedEventIds.has(eventId);
|
|
await fetch(`/api/views/${view.id}/items`, {
|
|
method: isSelected ? "DELETE" : "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ eventId })
|
|
});
|
|
await fetchEvents();
|
|
window.dispatchEvent(new Event("views-updated"));
|
|
};
|
|
|
|
const formatLocalDateTime = (value?: string | null) => {
|
|
if (!value) return "";
|
|
const date = new Date(value);
|
|
const offset = date.getTimezoneOffset() * 60000;
|
|
return new Date(date.getTime() - offset).toISOString().slice(0, 16);
|
|
};
|
|
|
|
const toIsoString = (value: FormDataEntryValue | null) => {
|
|
if (!value) return null;
|
|
const raw = String(value);
|
|
if (!raw) return null;
|
|
const date = new Date(raw);
|
|
if (Number.isNaN(date.getTime())) return null;
|
|
return date.toISOString();
|
|
};
|
|
|
|
const updateEvent = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
setEditStatus(null);
|
|
setEditError(null);
|
|
if (!editEvent) return;
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
const payload = {
|
|
title: formData.get("title"),
|
|
description: formData.get("description"),
|
|
location: formData.get("location"),
|
|
locationPlaceId: formData.get("locationPlaceId"),
|
|
locationLat: formData.get("locationLat"),
|
|
locationLng: formData.get("locationLng"),
|
|
startAt: toIsoString(formData.get("startAt")),
|
|
endAt: toIsoString(formData.get("endAt")),
|
|
categoryId: formData.get("categoryId")
|
|
};
|
|
|
|
const response = await fetch(`/api/events/${editEvent.id}`, {
|
|
method: "PATCH",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
setEditError(data.error || "Termin konnte nicht aktualisiert werden.");
|
|
return;
|
|
}
|
|
|
|
setEditStatus("Termin aktualisiert.");
|
|
setIsEditOpen(false);
|
|
setEditEvent(null);
|
|
await fetchEvents();
|
|
};
|
|
|
|
const deleteEvent = async (eventId: string) => {
|
|
const ok = window.confirm("Termin wirklich löschen?");
|
|
if (!ok) return;
|
|
const response = await fetch(`/api/events/${eventId}`, { method: "DELETE" });
|
|
if (!response.ok) {
|
|
setEditError("Termin konnte nicht gelöscht werden.");
|
|
return;
|
|
}
|
|
setEditStatus(null);
|
|
setEditError(null);
|
|
setIsEditOpen(false);
|
|
setEditEvent(null);
|
|
await fetchEvents();
|
|
};
|
|
|
|
const toggleBulkSelection = (eventId: string) => {
|
|
setBulkSelection((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(eventId)) {
|
|
next.delete(eventId);
|
|
} else {
|
|
next.add(eventId);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const toggleSelectAllVisible = (checked: boolean) => {
|
|
if (!checked) {
|
|
setBulkSelection(new Set());
|
|
return;
|
|
}
|
|
setBulkSelection(new Set(displayedEvents.map((event) => event.id)));
|
|
};
|
|
|
|
const deleteSelectedEvents = async () => {
|
|
if (bulkSelection.size === 0) return;
|
|
const ok = window.confirm(
|
|
`Wirklich ${bulkSelection.size} Termin(e) löschen?`
|
|
);
|
|
if (!ok) return;
|
|
await Promise.all(
|
|
Array.from(bulkSelection).map((eventId) =>
|
|
fetch(`/api/events/${eventId}`, { method: "DELETE" })
|
|
)
|
|
);
|
|
setBulkSelection(new Set());
|
|
await fetchEvents();
|
|
};
|
|
|
|
|
|
const filteredEvents = useMemo(() => {
|
|
const normalizedQuery = query.trim().toLowerCase();
|
|
const filtered = events.filter((event) => {
|
|
const categoryName = event.category?.name || "Ohne Kategorie";
|
|
if (categoryFilter !== "ALL" && categoryName !== categoryFilter) {
|
|
return false;
|
|
}
|
|
if (!normalizedQuery) return true;
|
|
return (
|
|
event.title.toLowerCase().includes(normalizedQuery) ||
|
|
(event.description || "").toLowerCase().includes(normalizedQuery) ||
|
|
(event.location || "").toLowerCase().includes(normalizedQuery) ||
|
|
categoryName.toLowerCase().includes(normalizedQuery)
|
|
);
|
|
});
|
|
|
|
const sorted = [...filtered].sort((a, b) => {
|
|
const dir = sortDir === "asc" ? 1 : -1;
|
|
if (sortKey === "title") {
|
|
return a.title.localeCompare(b.title) * dir;
|
|
}
|
|
if (sortKey === "category") {
|
|
const aCat = a.category?.name || "Ohne Kategorie";
|
|
const bCat = b.category?.name || "Ohne Kategorie";
|
|
return aCat.localeCompare(bCat) * dir;
|
|
}
|
|
if (sortKey === "location") {
|
|
const aLoc = a.location || "";
|
|
const bLoc = b.location || "";
|
|
return aLoc.localeCompare(bLoc) * dir;
|
|
}
|
|
if (sortKey === "status") {
|
|
return a.status.localeCompare(b.status) * dir;
|
|
}
|
|
const aDate = new Date(a.startAt).getTime();
|
|
const bDate = new Date(b.startAt).getTime();
|
|
return (aDate - bDate) * dir;
|
|
});
|
|
|
|
return sorted;
|
|
}, [events, query, categoryFilter, sortKey, sortDir]);
|
|
|
|
const categoryOptions = useMemo(() => {
|
|
const list = events
|
|
.map((event) => event.category?.name || "Ohne Kategorie")
|
|
.filter(Boolean);
|
|
return Array.from(new Set(list)).sort();
|
|
}, [events]);
|
|
|
|
const getDateBucket = (value: string): DateBucket => {
|
|
const date = new Date(value);
|
|
if (Number.isNaN(date.getTime())) return "future";
|
|
const now = new Date();
|
|
const startToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
const startTomorrow = new Date(startToday);
|
|
startTomorrow.setDate(startTomorrow.getDate() + 1);
|
|
const startAfterTomorrow = new Date(startTomorrow);
|
|
startAfterTomorrow.setDate(startAfterTomorrow.getDate() + 1);
|
|
|
|
if (date < startToday) return "past";
|
|
if (date >= startToday && date < startTomorrow) return "today";
|
|
if (date >= startTomorrow && date < startAfterTomorrow) return "tomorrow";
|
|
return "future";
|
|
};
|
|
|
|
const getCategoryColor = (value?: string | null) => {
|
|
const palette = [
|
|
"#2563eb",
|
|
"#7c3aed",
|
|
"#db2777",
|
|
"#ea580c",
|
|
"#16a34a",
|
|
"#0f766e",
|
|
"#0ea5e9",
|
|
"#65a30d"
|
|
];
|
|
const name = (value || "Ohne Kategorie").toLowerCase();
|
|
let hash = 0;
|
|
for (let i = 0; i < name.length; i += 1) {
|
|
hash = (hash * 31 + name.charCodeAt(i)) % 997;
|
|
}
|
|
return palette[hash % palette.length];
|
|
};
|
|
|
|
const mapEvents = useMemo(() => {
|
|
const currentYear = new Date().getFullYear();
|
|
return events
|
|
.filter((event) => {
|
|
if (!event.locationLat || !event.locationLng) return false;
|
|
const start = new Date(event.startAt);
|
|
return start.getFullYear() === currentYear;
|
|
})
|
|
.map((event) => ({
|
|
...event,
|
|
bucket: getDateBucket(event.startAt),
|
|
categoryName: event.category?.name || "Ohne Kategorie"
|
|
}));
|
|
}, [events]);
|
|
|
|
const filteredMapEvents = useMemo(() => {
|
|
return mapEvents.filter((event) => {
|
|
if (!mapDateFilter.has(event.bucket)) return false;
|
|
if (mapCategoryFilter.size === 0) return true;
|
|
return mapCategoryFilter.has(event.categoryName);
|
|
});
|
|
}, [mapEvents, mapDateFilter, mapCategoryFilter]);
|
|
|
|
const mapPoints = useMemo(
|
|
() =>
|
|
filteredMapEvents.map((event) => ({
|
|
lat: event.locationLat as number,
|
|
lng: event.locationLng as number
|
|
})),
|
|
[filteredMapEvents]
|
|
);
|
|
|
|
const mapCategoryOptions = useMemo(() => {
|
|
return Array.from(
|
|
new Set(mapEvents.map((event) => event.categoryName))
|
|
).sort((a, b) => a.localeCompare(b));
|
|
}, [mapEvents]);
|
|
|
|
const toggleMapDateFilter = (key: DateBucket) => {
|
|
setMapDateFilter((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(key)) {
|
|
next.delete(key);
|
|
} else {
|
|
next.add(key);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const toggleMapCategoryFilter = (category: string) => {
|
|
setMapCategoryFilter((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(category)) {
|
|
next.delete(category);
|
|
} else {
|
|
next.add(category);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const displayedEvents = useMemo(() => {
|
|
if (!activeRange) {
|
|
return filteredEvents;
|
|
}
|
|
return filteredEvents.filter((event) => {
|
|
const start = new Date(event.startAt);
|
|
return start >= activeRange.start && start < activeRange.end;
|
|
});
|
|
}, [filteredEvents, activeRange]);
|
|
|
|
useEffect(() => {
|
|
setBulkSelection((prev) => (prev.size > 0 ? new Set() : prev));
|
|
}, [query, categoryFilter, activeRange]);
|
|
|
|
const toggleSort = (nextKey: string) => {
|
|
let nextDir: "asc" | "desc" = "asc";
|
|
if (sortKey === nextKey) {
|
|
nextDir = sortDir === "asc" ? "desc" : "asc";
|
|
setSortDir(nextDir);
|
|
} else {
|
|
setSortKey(nextKey);
|
|
setSortDir("asc");
|
|
}
|
|
try {
|
|
const key = sortKey === nextKey ? sortKey : nextKey;
|
|
window.localStorage.setItem(
|
|
"listSort",
|
|
JSON.stringify({ key, dir: nextDir })
|
|
);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
|
|
if (!data?.user) {
|
|
return (
|
|
<div className="card-muted text-center">
|
|
<p className="text-slate-700">
|
|
Bitte anmelden, um die Vereinskalender zu sehen.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="space-y-4 fade-up">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">Kalender</p>
|
|
<h2 className="text-2xl font-semibold">Termine im Blick</h2>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="btn-accent"
|
|
onClick={() => openFormForDate(null)}
|
|
>
|
|
Neuer Termin
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={fetchEvents}
|
|
className="btn-ghost"
|
|
>
|
|
Aktualisieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<EventForm
|
|
variant="inline"
|
|
showTrigger={false}
|
|
open={formOpen}
|
|
onOpenChange={(open) => {
|
|
setFormOpen(open);
|
|
if (!open) {
|
|
setPrefillStartAt(null);
|
|
}
|
|
}}
|
|
prefillStartAt={prefillStartAt}
|
|
/>
|
|
{error && <p className="text-sm text-red-600">{error}</p>}
|
|
{loading && <p className="text-sm text-slate-500">Lade Termine...</p>}
|
|
{viewOrder.map((section) => {
|
|
if (section === "calendar") {
|
|
return (
|
|
<div
|
|
key="calendar"
|
|
ref={calendarRef}
|
|
className={`card drag-card ${
|
|
dragSource === "calendar" ? "dragging" : ""
|
|
} ${
|
|
dragOver === "calendar" && dragSource && dragSource !== "calendar"
|
|
? "drag-target"
|
|
: ""
|
|
} ${
|
|
dragSource === "list" && dragOver === "calendar" ? "shift-down" : ""
|
|
}`}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
onDragEnter={() => onDragEnter("calendar")}
|
|
onDrop={(event) => onDrop(event, "calendar")}
|
|
>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-slate-700">Kalender</h3>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
|
|
onClick={() => toggleCollapse("calendar")}
|
|
aria-label={collapsed.calendar ? "Kalender aufklappen" : "Kalender zuklappen"}
|
|
title={collapsed.calendar ? "Aufklappen" : "Zuklappen"}
|
|
>
|
|
{collapsed.calendar ? <IconChevronDown /> : <IconChevronUp />}
|
|
</button>
|
|
<div
|
|
className="drag-handle"
|
|
draggable
|
|
onDragStart={(event) => onDragStart(event, "calendar")}
|
|
onDragEnd={onDragEnd}
|
|
title="Zum Tauschen ziehen"
|
|
aria-label="Kalender verschieben"
|
|
>
|
|
<IconGrip />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!collapsed.calendar && (
|
|
<FullCalendar
|
|
plugins={[dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin]}
|
|
locale={deLocale}
|
|
initialView={initialView}
|
|
firstDay={1}
|
|
headerToolbar={{
|
|
left: "prev,next today",
|
|
center: "title",
|
|
right: "dayGridMonth,timeGridWeek,dayGridYear,listWeek"
|
|
}}
|
|
views={{
|
|
dayGridMonth: { buttonText: "Monat" },
|
|
timeGridWeek: {
|
|
buttonText: "Woche",
|
|
slotDuration: "02:00:00",
|
|
slotLabelInterval: "02:00:00",
|
|
slotLabelFormat: { hour: "2-digit", minute: "2-digit", hour12: false }
|
|
},
|
|
dayGridYear: { buttonText: "Jahr" },
|
|
listWeek: { buttonText: "Übersicht" }
|
|
}}
|
|
buttonText={{ today: "Heute" }}
|
|
events={calendarEvents}
|
|
dayCellContent={(arg) => {
|
|
if (arg.view.type !== "dayGridMonth") {
|
|
return arg.dayNumberText;
|
|
}
|
|
return (
|
|
<div className="flex items-center justify-between">
|
|
<span>{arg.dayNumberText}</span>
|
|
<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"
|
|
aria-label={`Termin am ${arg.date.toLocaleDateString("de-DE")} anlegen`}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
openFormForDate(arg.date);
|
|
}}
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
);
|
|
}}
|
|
eventClick={(info) => {
|
|
const match = events.find((event) => event.id === info.event.id);
|
|
if (match) {
|
|
setDetailsEvent(match);
|
|
}
|
|
}}
|
|
eventContent={(arg) => {
|
|
const status = arg.event.extendedProps.status as string;
|
|
const isSelected = selectedEventIds.has(arg.event.id);
|
|
return (
|
|
<div className="event-shell">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium truncate">{arg.event.title}</div>
|
|
<div className="text-xs text-slate-600 truncate">
|
|
{arg.event.extendedProps.category || "Ohne Kategorie"}
|
|
</div>
|
|
</div>
|
|
<ViewToggleButton
|
|
isSelected={isSelected}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
toggleEvent(arg.event.id);
|
|
}}
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
);
|
|
}}
|
|
height="auto"
|
|
datesSet={(arg) => {
|
|
setActiveRange({
|
|
start: arg.start,
|
|
end: arg.end,
|
|
viewType: arg.view.type
|
|
});
|
|
try {
|
|
window.localStorage.setItem("calendarLastView", arg.view.type);
|
|
} catch {
|
|
// ignore
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (section === "map") {
|
|
return (
|
|
<div
|
|
key="map"
|
|
ref={mapRef}
|
|
className={`card drag-card ${
|
|
dragSource === "map" ? "dragging" : ""
|
|
} ${
|
|
dragOver === "map" && dragSource && dragSource !== "map"
|
|
? "drag-target"
|
|
: ""
|
|
} ${dragSource === "calendar" && dragOver === "map" ? "shift-down" : ""} ${
|
|
dragSource === "list" && dragOver === "map" ? "shift-up" : ""
|
|
}`}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
onDragEnter={() => onDragEnter("map")}
|
|
onDrop={(event) => onDrop(event, "map")}
|
|
>
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-slate-700">Karte</h3>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
|
|
onClick={() => toggleCollapse("map")}
|
|
aria-label={collapsed.map ? "Karte aufklappen" : "Karte zuklappen"}
|
|
title={collapsed.map ? "Aufklappen" : "Zuklappen"}
|
|
>
|
|
{collapsed.map ? <IconChevronDown /> : <IconChevronUp />}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
|
|
onClick={() => setMapFullscreen(true)}
|
|
>
|
|
Vollbild
|
|
</button>
|
|
<div
|
|
className="drag-handle"
|
|
draggable
|
|
onDragStart={(event) => onDragStart(event, "map")}
|
|
onDragEnd={onDragEnd}
|
|
title="Zum Tauschen ziehen"
|
|
aria-label="Karte verschieben"
|
|
>
|
|
<IconGrip />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!collapsed.map && (
|
|
<div className="space-y-3">
|
|
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setMapDateFilter(new Set(["past", "today", "tomorrow", "future"]));
|
|
setMapCategoryFilter(new Set());
|
|
}}
|
|
className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
|
|
>
|
|
Alles
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setMapDateFilter(new Set());
|
|
setMapCategoryFilter(new Set(mapCategoryOptions));
|
|
}}
|
|
className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
|
|
>
|
|
Nichts
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("today")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("today")
|
|
? "border-amber-300 bg-amber-50 text-amber-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-amber-500 bg-amber-200"></span>
|
|
Heute
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("tomorrow")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("tomorrow")
|
|
? "border-emerald-300 bg-emerald-50 text-emerald-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-emerald-500 bg-emerald-200"></span>
|
|
Morgen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("past")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("past")
|
|
? "border-slate-300 bg-slate-100 text-slate-700"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-200"></span>
|
|
Vergangenheit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("future")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("future")
|
|
? "border-sky-200 bg-sky-50 text-sky-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-100"></span>
|
|
Zukunft
|
|
</button>
|
|
{mapCategoryOptions.map((category) => {
|
|
const active = mapCategoryFilter.has(category);
|
|
return (
|
|
<button
|
|
key={category}
|
|
type="button"
|
|
onClick={() => toggleMapCategoryFilter(category)}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
active
|
|
? "border-slate-300 bg-slate-100 text-slate-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span
|
|
className="h-2.5 w-2.5 rounded-full"
|
|
style={{ backgroundColor: getCategoryColor(category) }}
|
|
></span>
|
|
{category}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<div
|
|
className="h-80 overflow-hidden rounded-xl overscroll-contain"
|
|
onWheel={(event) => event.stopPropagation()}
|
|
>
|
|
<MapContainer
|
|
center={[52.52, 13.405]}
|
|
zoom={5}
|
|
scrollWheelZoom
|
|
className="h-full w-full"
|
|
>
|
|
<TileLayer
|
|
attribution={
|
|
isDarkTheme
|
|
? '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>'
|
|
: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}
|
|
url={
|
|
isDarkTheme
|
|
? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
|
|
: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
}
|
|
/>
|
|
<MapAutoBounds points={mapPoints} />
|
|
{filteredMapEvents.map((event) => {
|
|
const fillColor = getCategoryColor(event.categoryName);
|
|
const isPast = event.bucket === "past";
|
|
const isToday = event.bucket === "today";
|
|
const isTomorrow = event.bucket === "tomorrow";
|
|
const strokeColor = isPast
|
|
? "#94a3b8"
|
|
: isToday
|
|
? "#f59e0b"
|
|
: isTomorrow
|
|
? "#10b981"
|
|
: fillColor;
|
|
return (
|
|
<CircleMarker
|
|
key={event.id}
|
|
center={[event.locationLat as number, event.locationLng as number]}
|
|
radius={isToday || isTomorrow ? 8 : 6}
|
|
color={strokeColor}
|
|
fillColor={fillColor}
|
|
fillOpacity={isPast ? 0.35 : 0.75}
|
|
weight={isToday || isTomorrow ? 2 : 1}
|
|
>
|
|
<Popup>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold">{event.title}</p>
|
|
<p className="text-xs text-slate-600">
|
|
{new Date(event.startAt).toLocaleString("de-DE", {
|
|
dateStyle: "medium",
|
|
timeStyle: "short"
|
|
})}
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
{event.categoryName}
|
|
</p>
|
|
{event.location && (
|
|
<p className="text-xs text-slate-600">
|
|
{event.location}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Popup>
|
|
</CircleMarker>
|
|
);
|
|
})}
|
|
</MapContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key="list"
|
|
ref={listRef}
|
|
className={`card space-y-4 drag-card ${
|
|
dragSource === "list" ? "dragging" : ""
|
|
} ${
|
|
dragOver === "list" && dragSource && dragSource !== "list" ? "drag-target" : ""
|
|
} ${
|
|
dragSource === "calendar" && dragOver === "list" ? "shift-up" : ""
|
|
}`}
|
|
onDragOver={(event) => event.preventDefault()}
|
|
onDragEnter={() => onDragEnter("list")}
|
|
onDrop={(event) => onDrop(event, "list")}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-slate-700">Liste</h3>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 px-2 py-1 text-xs text-slate-600"
|
|
onClick={() => toggleCollapse("list")}
|
|
aria-label={collapsed.list ? "Liste aufklappen" : "Liste zuklappen"}
|
|
title={collapsed.list ? "Aufklappen" : "Zuklappen"}
|
|
>
|
|
{collapsed.list ? <IconChevronDown /> : <IconChevronUp />}
|
|
</button>
|
|
<div
|
|
className="drag-handle"
|
|
draggable
|
|
onDragStart={(event) => onDragStart(event, "list")}
|
|
onDragEnd={onDragEnd}
|
|
title="Zum Tauschen ziehen"
|
|
aria-label="Liste verschieben"
|
|
>
|
|
<IconGrip />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!collapsed.list && (
|
|
<>
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder="Suchen..."
|
|
className="min-w-[220px] rounded-xl border border-slate-300 px-3 py-2 text-sm"
|
|
/>
|
|
{isAdmin && (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700"
|
|
onClick={() => toggleSelectAllVisible(true)}
|
|
disabled={displayedEvents.length === 0}
|
|
>
|
|
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>
|
|
<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" />
|
|
<path d="M8 6V4h8v2" strokeLinecap="round" />
|
|
<path d="M19 6l-1 14H6L5 6" strokeLinecap="round" />
|
|
<path d="M10 11v6M14 11v6" strokeLinecap="round" />
|
|
</svg>
|
|
</button>
|
|
<span className="text-xs text-slate-500">
|
|
{bulkSelection.size} ausgewählt
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="list-table min-w-full text-left text-sm">
|
|
<thead className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
<tr>
|
|
{isAdmin && (
|
|
<th className="pb-2 w-[44px] pl-2">
|
|
<input
|
|
type="checkbox"
|
|
aria-label="Alle sichtbaren Termine auswählen"
|
|
checked={
|
|
displayedEvents.length > 0 &&
|
|
displayedEvents.every((event) =>
|
|
bulkSelection.has(event.id)
|
|
)
|
|
}
|
|
onChange={(event) =>
|
|
toggleSelectAllVisible(event.target.checked)
|
|
}
|
|
/>
|
|
</th>
|
|
)}
|
|
<th className="pb-2">
|
|
<SortButton
|
|
label="Datum"
|
|
active={sortKey === "startAt"}
|
|
direction={sortDir}
|
|
onClick={() => toggleSort("startAt")}
|
|
/>
|
|
</th>
|
|
<th className="pb-2">
|
|
<SortButton
|
|
label="Titel"
|
|
active={sortKey === "title"}
|
|
direction={sortDir}
|
|
onClick={() => toggleSort("title")}
|
|
/>
|
|
</th>
|
|
<th className="pb-2">
|
|
<div className="flex items-center gap-2">
|
|
<SortButton
|
|
label="Kategorie"
|
|
active={sortKey === "category"}
|
|
direction={sortDir}
|
|
onClick={() => toggleSort("category")}
|
|
/>
|
|
<select
|
|
className="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs text-slate-600"
|
|
value={categoryFilter}
|
|
onChange={(event) => setCategoryFilter(event.target.value)}
|
|
aria-label="Kategorie filtern"
|
|
>
|
|
<option value="ALL">Alle</option>
|
|
{categoryOptions.map((category) => (
|
|
<option key={category} value={category}>
|
|
{category}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</th>
|
|
<th className="pb-2">
|
|
<SortButton
|
|
label="Ort"
|
|
active={sortKey === "location"}
|
|
direction={sortDir}
|
|
onClick={() => toggleSort("location")}
|
|
/>
|
|
</th>
|
|
<th className="pb-2 w-[96px]">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{displayedEvents.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={isAdmin ? 6 : 5} className="py-4 text-slate-600">
|
|
Keine Termine für die aktuelle Auswahl.
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
displayedEvents.map((event) => (
|
|
<tr
|
|
key={event.id}
|
|
data-bucket={getDateBucket(event.startAt)}
|
|
className={`border-t border-slate-200 ${
|
|
getDateBucket(event.startAt) === "past"
|
|
? "bg-slate-50 text-slate-500"
|
|
: getDateBucket(event.startAt) === "today"
|
|
? "bg-amber-50/60"
|
|
: getDateBucket(event.startAt) === "tomorrow"
|
|
? "bg-emerald-50/60"
|
|
: "bg-sky-50/40"
|
|
}`}
|
|
>
|
|
{isAdmin && (
|
|
<td className="py-3 pr-3 pl-2">
|
|
<input
|
|
type="checkbox"
|
|
aria-label={`${event.title} auswählen`}
|
|
checked={bulkSelection.has(event.id)}
|
|
onChange={() => toggleBulkSelection(event.id)}
|
|
/>
|
|
</td>
|
|
)}
|
|
<td className="py-3 pr-3 pl-2 whitespace-nowrap">
|
|
{new Date(event.startAt).toLocaleString("de-DE", {
|
|
dateStyle: "medium",
|
|
timeStyle: "short"
|
|
})}
|
|
</td>
|
|
<td className="py-3 pr-3 font-medium">{event.title}</td>
|
|
<td className="py-3 pr-3">
|
|
{event.category?.name || "Ohne Kategorie"}
|
|
</td>
|
|
<td className="py-3 pr-3">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="flex-1">{formatLocation(event.location)}</span>
|
|
{event.locationLat && event.locationLng && (
|
|
<a
|
|
className="inline-flex items-center justify-center rounded-full border border-slate-200 p-1 text-slate-600 hover:bg-slate-100"
|
|
href={`https://maps.google.com/?q=${event.locationLat},${event.locationLng}&z=14`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
title="Google Maps"
|
|
aria-label="Google Maps"
|
|
>
|
|
<IconMapPin />
|
|
</a>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="py-3 pr-3">
|
|
<div className="flex flex-nowrap gap-1">
|
|
<ViewToggleButton
|
|
isSelected={selectedEventIds.has(event.id)}
|
|
onClick={() => toggleEvent(event.id)}
|
|
/>
|
|
{isAdmin && (
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 p-2 text-slate-600"
|
|
onClick={() => {
|
|
setEditStatus(null);
|
|
setEditError(null);
|
|
setEditEvent(event);
|
|
setIsEditOpen(true);
|
|
}}
|
|
aria-label="Termin bearbeiten"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<path
|
|
d="M4 20h4l10-10-4-4L4 16v4z"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M13 7l4 4"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 p-2 text-slate-600"
|
|
onClick={() => setDetailsEvent(event)}
|
|
aria-label="Termin Details"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className="h-4 w-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M12 8h.01M12 12v4" strokeLinecap="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
{detailsEvent && portalRoot
|
|
? createPortal(
|
|
<div
|
|
className="fixed inset-0 z-30 flex items-center justify-center bg-black/40 px-4 py-6"
|
|
onClick={() => setDetailsEvent(null)}
|
|
>
|
|
<div
|
|
className="card w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
|
ref={detailsModalRef}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
tabIndex={-1}
|
|
onClick={(event) => event.stopPropagation()}
|
|
onKeyDown={(event) => {
|
|
if (event.key !== "Tab") return;
|
|
const node = detailsModalRef.current;
|
|
if (!node) return;
|
|
const focusable = node.querySelectorAll<HTMLElement>(
|
|
'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
|
|
);
|
|
if (focusable.length === 0) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
const first = focusable[0];
|
|
const last = focusable[focusable.length - 1];
|
|
if (event.shiftKey && document.activeElement === first) {
|
|
event.preventDefault();
|
|
last.focus();
|
|
} else if (!event.shiftKey && document.activeElement === last) {
|
|
event.preventDefault();
|
|
first.focus();
|
|
}
|
|
}}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold">Termin Details</h3>
|
|
<div className="flex items-center gap-2">
|
|
{isAdmin && (
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700"
|
|
onClick={() => {
|
|
setEditStatus(null);
|
|
setEditError(null);
|
|
setEditEvent(detailsEvent);
|
|
setIsEditOpen(true);
|
|
setDetailsEvent(null);
|
|
}}
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="text-sm text-slate-600"
|
|
onClick={() => setDetailsEvent(null)}
|
|
>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-2">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
Titel
|
|
</p>
|
|
<p className="text-sm font-semibold">{detailsEvent.title}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
Zeitpunkt
|
|
</p>
|
|
<p className="text-sm">
|
|
{new Date(detailsEvent.startAt).toLocaleString("de-DE", {
|
|
dateStyle: "full",
|
|
timeStyle: "short"
|
|
})}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
Ort
|
|
</p>
|
|
<p className="text-sm">{detailsEvent.location || "-"}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
Kategorie
|
|
</p>
|
|
<p className="text-sm">
|
|
{detailsEvent.category?.name || "Ohne Kategorie"}
|
|
</p>
|
|
</div>
|
|
{detailsEvent.description && (
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
|
Beschreibung
|
|
</p>
|
|
<p className="text-sm text-slate-700">
|
|
{detailsEvent.description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{detailsEvent.locationLat && detailsEvent.locationLng && (
|
|
<div className="flex flex-wrap gap-2">
|
|
<a
|
|
className="btn-ghost"
|
|
href={`https://maps.google.com/?q=${detailsEvent.locationLat},${detailsEvent.locationLng}&z=14`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Google Maps
|
|
</a>
|
|
<a
|
|
className="btn-ghost"
|
|
href={`https://maps.apple.com/?ll=${detailsEvent.locationLat},${detailsEvent.locationLng}`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Apple Karten
|
|
</a>
|
|
<a
|
|
className="btn-ghost"
|
|
href={`https://www.openstreetmap.org/?mlat=${detailsEvent.locationLat}&mlon=${detailsEvent.locationLng}#map=17/${detailsEvent.locationLat}/${detailsEvent.locationLng}`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
OpenStreetMap
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="min-h-[240px] overflow-hidden rounded-xl border border-slate-200 bg-slate-100">
|
|
{placesProvider === "google" &&
|
|
placesKey &&
|
|
(detailsEvent.locationPlaceId ||
|
|
(detailsEvent.locationLat && detailsEvent.locationLng)) ? (
|
|
<iframe
|
|
title="Karte"
|
|
className="h-[320px] w-full"
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
src={
|
|
detailsEvent.locationPlaceId
|
|
? `https://www.google.com/maps/embed/v1/place?key=${placesKey}&q=place_id:${detailsEvent.locationPlaceId}&zoom=14`
|
|
: `https://www.google.com/maps/embed/v1/place?key=${placesKey}&q=${detailsEvent.locationLat},${detailsEvent.locationLng}&zoom=14`
|
|
}
|
|
/>
|
|
) : placesProvider === "osm" &&
|
|
detailsEvent.locationLat &&
|
|
detailsEvent.locationLng ? (
|
|
<iframe
|
|
title="Karte"
|
|
className="h-[320px] w-full"
|
|
loading="lazy"
|
|
src={`https://www.openstreetmap.org/export/embed.html?bbox=${
|
|
detailsEvent.locationLng - 0.0045
|
|
},${detailsEvent.locationLat - 0.0045},${
|
|
detailsEvent.locationLng + 0.0045
|
|
},${detailsEvent.locationLat + 0.0045}&layer=mapnik&marker=${detailsEvent.locationLat},${detailsEvent.locationLng}`}
|
|
/>
|
|
) : (
|
|
<div className="flex h-full items-center justify-center text-sm text-slate-500">
|
|
Keine Karte verfügbar.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
portalRoot
|
|
)
|
|
: null}
|
|
{isEditOpen && editEvent && portalRoot
|
|
? createPortal(
|
|
<div
|
|
className="fixed inset-0 z-30 flex items-center justify-center bg-black/40 px-4 py-6"
|
|
onClick={() => {
|
|
setIsEditOpen(false);
|
|
setEditEvent(null);
|
|
}}
|
|
>
|
|
<div
|
|
className="card w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold">Termin bearbeiten</h3>
|
|
<button
|
|
type="button"
|
|
className="text-sm text-slate-600"
|
|
onClick={() => {
|
|
setIsEditOpen(false);
|
|
setEditEvent(null);
|
|
}}
|
|
>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
<form onSubmit={updateEvent} className="mt-4 space-y-3">
|
|
<div className="grid gap-3 md:grid-cols-2">
|
|
<input
|
|
name="title"
|
|
required
|
|
defaultValue={editEvent.title}
|
|
className="rounded-xl border border-slate-300 px-3 py-2"
|
|
placeholder="Titel"
|
|
/>
|
|
<input
|
|
name="location"
|
|
defaultValue={editEvent.location || ""}
|
|
className="rounded-xl border border-slate-300 px-3 py-2"
|
|
placeholder="Ort"
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="locationPlaceId"
|
|
value={editEvent.locationPlaceId || ""}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="locationLat"
|
|
value={editEvent.locationLat ?? ""}
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
name="locationLng"
|
|
value={editEvent.locationLng ?? ""}
|
|
/>
|
|
<input
|
|
name="startAt"
|
|
type="datetime-local"
|
|
required
|
|
defaultValue={formatLocalDateTime(editEvent.startAt)}
|
|
className="rounded-xl border border-slate-300 px-3 py-2"
|
|
/>
|
|
<input
|
|
name="endAt"
|
|
type="datetime-local"
|
|
defaultValue={formatLocalDateTime(editEvent.endAt)}
|
|
className="rounded-xl border border-slate-300 px-3 py-2"
|
|
/>
|
|
<select
|
|
name="categoryId"
|
|
required
|
|
defaultValue={editEvent.category?.id || ""}
|
|
className="rounded-xl border border-slate-300 px-3 py-2 md:col-span-2"
|
|
>
|
|
<option value="" disabled>
|
|
Kategorie wählen
|
|
</option>
|
|
{categories.map((category) => (
|
|
<option key={category.id} value={category.id}>
|
|
{category.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<textarea
|
|
name="description"
|
|
defaultValue={editEvent.description || ""}
|
|
placeholder="Beschreibung"
|
|
className="min-h-[96px] rounded-xl border border-slate-300 px-3 py-2"
|
|
/>
|
|
<button type="submit" className="btn-accent">
|
|
Speichern
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-red-200 px-3 py-1 text-xs text-red-600"
|
|
onClick={() => deleteEvent(editEvent.id)}
|
|
>
|
|
Löschen
|
|
</button>
|
|
{editStatus && (
|
|
<p className="text-sm text-emerald-600">{editStatus}</p>
|
|
)}
|
|
{editError && (
|
|
<p className="text-sm text-red-600">{editError}</p>
|
|
)}
|
|
</form>
|
|
</div>
|
|
</div>,
|
|
portalRoot
|
|
)
|
|
: null}
|
|
{mapFullscreen && portalRoot
|
|
? createPortal(
|
|
<div
|
|
className="fixed inset-0 z-40 flex flex-col bg-slate-950/40 p-4"
|
|
onClick={() => setMapFullscreen(false)}
|
|
>
|
|
<div
|
|
className="card flex h-full w-full flex-col"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold">Karte</h3>
|
|
<button
|
|
type="button"
|
|
className="text-sm text-slate-600"
|
|
onClick={() => setMapFullscreen(false)}
|
|
>
|
|
Schließen
|
|
</button>
|
|
</div>
|
|
<div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-slate-600">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setMapDateFilter(new Set(["past", "today", "tomorrow", "future"]));
|
|
setMapCategoryFilter(new Set());
|
|
}}
|
|
className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
|
|
>
|
|
Alles
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setMapDateFilter(new Set());
|
|
setMapCategoryFilter(new Set(mapCategoryOptions));
|
|
}}
|
|
className="inline-flex items-center rounded-full border border-slate-200 bg-white px-2 py-1"
|
|
>
|
|
Nichts
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("today")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("today")
|
|
? "border-amber-300 bg-amber-50 text-amber-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-amber-500 bg-amber-200"></span>
|
|
Heute
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("tomorrow")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("tomorrow")
|
|
? "border-emerald-300 bg-emerald-50 text-emerald-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-emerald-500 bg-emerald-200"></span>
|
|
Morgen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("past")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("past")
|
|
? "border-slate-300 bg-slate-100 text-slate-700"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-200"></span>
|
|
Vergangenheit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleMapDateFilter("future")}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
mapDateFilter.has("future")
|
|
? "border-sky-200 bg-sky-50 text-sky-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span className="h-2.5 w-2.5 rounded-full border border-slate-300 bg-slate-100"></span>
|
|
Zukunft
|
|
</button>
|
|
{mapCategoryOptions.map((category) => {
|
|
const active = mapCategoryFilter.has(category);
|
|
return (
|
|
<button
|
|
key={category}
|
|
type="button"
|
|
onClick={() => toggleMapCategoryFilter(category)}
|
|
className={`inline-flex items-center gap-2 rounded-full border px-2 py-1 ${
|
|
active
|
|
? "border-slate-300 bg-slate-100 text-slate-900"
|
|
: "border-slate-200 bg-white"
|
|
}`}
|
|
>
|
|
<span
|
|
className="h-2.5 w-2.5 rounded-full"
|
|
style={{ backgroundColor: getCategoryColor(category) }}
|
|
></span>
|
|
{category}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<div
|
|
className="mt-4 flex-1 overflow-hidden rounded-xl overscroll-contain"
|
|
onWheel={(event) => event.stopPropagation()}
|
|
>
|
|
<MapContainer
|
|
center={[52.52, 13.405]}
|
|
zoom={5}
|
|
scrollWheelZoom
|
|
className="h-full w-full"
|
|
>
|
|
<TileLayer
|
|
attribution={
|
|
isDarkTheme
|
|
? '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://carto.com/attributions">CARTO</a>'
|
|
: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}
|
|
url={
|
|
isDarkTheme
|
|
? "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
|
|
: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
}
|
|
/>
|
|
<MapAutoBounds points={mapPoints} />
|
|
{filteredMapEvents.map((event) => {
|
|
const fillColor = getCategoryColor(event.categoryName);
|
|
const isPast = event.bucket === "past";
|
|
const isToday = event.bucket === "today";
|
|
const isTomorrow = event.bucket === "tomorrow";
|
|
const strokeColor = isPast
|
|
? "#94a3b8"
|
|
: isToday
|
|
? "#f59e0b"
|
|
: isTomorrow
|
|
? "#10b981"
|
|
: fillColor;
|
|
return (
|
|
<CircleMarker
|
|
key={event.id}
|
|
center={[event.locationLat as number, event.locationLng as number]}
|
|
radius={isToday || isTomorrow ? 8 : 6}
|
|
color={strokeColor}
|
|
fillColor={fillColor}
|
|
fillOpacity={isPast ? 0.35 : 0.75}
|
|
weight={isToday || isTomorrow ? 2 : 1}
|
|
>
|
|
<Popup>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold">{event.title}</p>
|
|
<p className="text-xs text-slate-600">
|
|
{new Date(event.startAt).toLocaleString("de-DE", {
|
|
dateStyle: "medium",
|
|
timeStyle: "short"
|
|
})}
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
{event.categoryName}
|
|
</p>
|
|
{event.location && (
|
|
<p className="text-xs text-slate-600">
|
|
{event.location}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Popup>
|
|
</CircleMarker>
|
|
);
|
|
})}
|
|
</MapContainer>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
portalRoot
|
|
)
|
|
: null}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function formatLocation(value?: string | null) {
|
|
if (!value) return "-";
|
|
const parts = value.split(",").map((part) => part.trim()).filter(Boolean);
|
|
if (parts.length === 0) return value;
|
|
const postal = parts.find((part) => /\b\d{5}\b/.test(part));
|
|
const street = parts[0] || "";
|
|
const city = parts[1] || "";
|
|
if (postal && city) {
|
|
return street ? `${street}, ${postal} ${city}` : `${postal} ${city}`;
|
|
}
|
|
if (postal) {
|
|
return street ? `${street}, ${postal}` : postal;
|
|
}
|
|
const main = parts.slice(0, 2).join(", ");
|
|
return main || value;
|
|
}
|
|
|
|
function MapAutoBounds({ points }: { points: Array<{ lat: number; lng: number }> }) {
|
|
const map = useMap();
|
|
useEffect(() => {
|
|
if (points.length === 0) return;
|
|
const bounds = points.map((point) => [point.lat, point.lng]) as [
|
|
number,
|
|
number
|
|
][];
|
|
map.fitBounds(bounds, { padding: [24, 24] });
|
|
}, [map, points]);
|
|
return null;
|
|
}
|
|
|
|
function StatusIcon({ status }: { status: string }) {
|
|
if (status === "APPROVED") {
|
|
return (
|
|
<span title="Freigegeben" aria-label="Freigegeben" className="text-emerald-600">
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M5 12l4 4L19 6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
if (status === "REJECTED") {
|
|
return (
|
|
<span title="Abgelehnt" aria-label="Abgelehnt" className="text-red-600">
|
|
<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>
|
|
</span>
|
|
);
|
|
}
|
|
return (
|
|
<span title="Offen" aria-label="Offen" className="text-amber-600">
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M12 6v6l4 2" strokeLinecap="round" strokeLinejoin="round" />
|
|
<circle cx="12" cy="12" r="9" />
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function ViewToggleButton({
|
|
isSelected,
|
|
onClick,
|
|
size = "md"
|
|
}: {
|
|
isSelected: boolean;
|
|
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
size?: "sm" | "md";
|
|
}) {
|
|
const base =
|
|
size === "sm"
|
|
? "event-toggle rounded-full bg-white/80 px-2 py-1 text-[10px] text-slate-700"
|
|
: "rounded-full border border-slate-200 px-3 py-1 text-xs text-slate-700";
|
|
const label = isSelected
|
|
? "Vom Kalenderfeed entfernen"
|
|
: "Zum Kalenderfeed hinzufügen";
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={base}
|
|
onClick={onClick}
|
|
aria-label={label}
|
|
title={label}
|
|
>
|
|
{isSelected ? <IconBell /> : <IconSleep />}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function IconBell() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M6 8a6 6 0 1112 0c0 7 2 7 2 7H4s2 0 2-7" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M10 19a2 2 0 004 0" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconSleep() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M3 5h6l-6 6h6" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M9 9h6l-6 6h6" strokeLinecap="round" strokeLinejoin="round" />
|
|
<path d="M15 13h6l-6 6h6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconGrip() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<circle cx="8" cy="6" r="1" />
|
|
<circle cx="16" cy="6" r="1" />
|
|
<circle cx="8" cy="12" r="1" />
|
|
<circle cx="16" cy="12" r="1" />
|
|
<circle cx="8" cy="18" r="1" />
|
|
<circle cx="16" cy="18" r="1" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconChevronDown() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconChevronUp() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M6 15l6-6 6 6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function SortButton({
|
|
label,
|
|
active,
|
|
direction,
|
|
onClick
|
|
}: {
|
|
label: string;
|
|
active: boolean;
|
|
direction: "asc" | "desc";
|
|
onClick: () => void;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`inline-flex items-center gap-1 text-xs uppercase tracking-[0.2em] ${
|
|
active ? "text-slate-900" : "text-slate-500"
|
|
}`}
|
|
title="Sortieren"
|
|
>
|
|
{label}
|
|
<SortIcon direction={direction} active={active} />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function SortIcon({
|
|
direction,
|
|
active
|
|
}: {
|
|
direction: "asc" | "desc";
|
|
active: boolean;
|
|
}) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
className={`h-3 w-3 ${active ? "opacity-100" : "opacity-40"}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
{direction === "asc" ? (
|
|
<path d="M6 15l6-6 6 6" strokeLinecap="round" strokeLinejoin="round" />
|
|
) : (
|
|
<path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
|
|
)}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function IconMapPin() {
|
|
return (
|
|
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M12 21s6-6.5 6-11a6 6 0 10-12 0c0 4.5 6 11 6 11z" strokeLinecap="round" strokeLinejoin="round" />
|
|
<circle cx="12" cy="10" r="2.5" />
|
|
</svg>
|
|
);
|
|
}
|