Add Booking System
This commit is contained in:
nocnico
425
apps/hub/app/_components/BookingTimelineModal.tsx
Normal file
425
apps/hub/app/_components/BookingTimelineModal.tsx
Normal file
@@ -0,0 +1,425 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { CalendarIcon, Plus, X, ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
interface BookingUser {
|
||||
id: string;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
}
|
||||
|
||||
interface BookingStation {
|
||||
id: number;
|
||||
bosCallsign: string;
|
||||
bosCallsignShort: string;
|
||||
}
|
||||
|
||||
interface Booking {
|
||||
id: string;
|
||||
userId: string;
|
||||
type: "STATION" | "LST_01" | "LST_02" | "LST_03" | "LST_04";
|
||||
stationId?: number;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
user: BookingUser;
|
||||
station?: BookingStation;
|
||||
}
|
||||
|
||||
interface BookingTimelineModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onOpenNewBooking: () => void;
|
||||
currentUser: {
|
||||
id: string;
|
||||
emailVerified: boolean;
|
||||
is_banned: boolean;
|
||||
permissions: string[];
|
||||
};
|
||||
}
|
||||
|
||||
type ViewMode = "day" | "week" | "month";
|
||||
|
||||
export const BookingTimelineModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onOpenNewBooking,
|
||||
currentUser,
|
||||
}: BookingTimelineModalProps) => {
|
||||
const [bookings, setBookings] = useState<Booking[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [viewMode, setViewMode] = useState<ViewMode>("day");
|
||||
|
||||
// Check if user can create bookings
|
||||
const canCreateBookings =
|
||||
currentUser &&
|
||||
currentUser.emailVerified &&
|
||||
!currentUser.is_banned &&
|
||||
(currentUser.permissions.includes("PILOT") || currentUser.permissions.includes("DISPO"));
|
||||
|
||||
// Check if user can delete a booking
|
||||
const canDeleteBooking = (bookingUserId: string) => {
|
||||
if (!currentUser) return false;
|
||||
|
||||
// User can delete their own bookings if they meet basic requirements
|
||||
if (bookingUserId === currentUser.id && currentUser.emailVerified && !currentUser.is_banned) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Admins can delete any booking
|
||||
return currentUser.permissions.includes("ADMIN_KICK");
|
||||
};
|
||||
|
||||
const deleteBooking = async (bookingId: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/booking/${bookingId}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete booking");
|
||||
}
|
||||
|
||||
// Refresh the bookings
|
||||
fetchBookings();
|
||||
} catch (error) {
|
||||
console.error("Error deleting booking:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchBookings = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch("/api/booking");
|
||||
if (!response.ok) throw new Error("Failed to fetch bookings");
|
||||
const data = await response.json();
|
||||
// API returns { bookings: [] }, so we need to access the bookings property
|
||||
setBookings(data.bookings || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching bookings:", error);
|
||||
toast.error("Fehler beim Laden der Buchungen");
|
||||
setBookings([]); // Set empty array on error
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchBookings();
|
||||
}
|
||||
}, [isOpen, fetchBookings]);
|
||||
|
||||
const getTimeRange = () => {
|
||||
const start = new Date(currentDate);
|
||||
const end = new Date(currentDate);
|
||||
|
||||
switch (viewMode) {
|
||||
case "day":
|
||||
start.setHours(0, 0, 0, 0);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
break;
|
||||
case "week": {
|
||||
const dayOfWeek = start.getDay();
|
||||
const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
|
||||
start.setDate(start.getDate() + mondayOffset);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
end.setDate(start.getDate() + 6);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
break;
|
||||
}
|
||||
case "month":
|
||||
start.setDate(1);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
end.setMonth(end.getMonth() + 1);
|
||||
end.setDate(0);
|
||||
end.setHours(23, 59, 59, 999);
|
||||
break;
|
||||
}
|
||||
|
||||
return { start, end };
|
||||
};
|
||||
|
||||
const navigate = (direction: "prev" | "next") => {
|
||||
const newDate = new Date(currentDate);
|
||||
|
||||
switch (viewMode) {
|
||||
case "day":
|
||||
newDate.setDate(newDate.getDate() + (direction === "next" ? 1 : -1));
|
||||
break;
|
||||
case "week":
|
||||
newDate.setDate(newDate.getDate() + (direction === "next" ? 7 : -7));
|
||||
break;
|
||||
case "month":
|
||||
newDate.setMonth(newDate.getMonth() + (direction === "next" ? 1 : -1));
|
||||
break;
|
||||
}
|
||||
|
||||
setCurrentDate(newDate);
|
||||
};
|
||||
|
||||
const getFilteredBookings = () => {
|
||||
// Ensure bookings is an array before filtering
|
||||
if (!Array.isArray(bookings)) {
|
||||
console.warn("Bookings is not an array:", bookings);
|
||||
return [];
|
||||
}
|
||||
|
||||
const { start, end } = getTimeRange();
|
||||
return bookings.filter((booking) => {
|
||||
const bookingStart = new Date(booking.startTime);
|
||||
const bookingEnd = new Date(booking.endTime);
|
||||
return bookingStart <= end && bookingEnd >= start;
|
||||
});
|
||||
};
|
||||
|
||||
const formatDateRange = () => {
|
||||
const { start, end } = getTimeRange();
|
||||
const options: Intl.DateTimeFormatOptions = {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
};
|
||||
|
||||
switch (viewMode) {
|
||||
case "day":
|
||||
return start.toLocaleDateString("de-DE", options);
|
||||
case "week":
|
||||
return `${start.toLocaleDateString("de-DE", options)} - ${end.toLocaleDateString("de-DE", options)}`;
|
||||
case "month":
|
||||
return start.toLocaleDateString("de-DE", { month: "long", year: "numeric" });
|
||||
}
|
||||
};
|
||||
|
||||
const groupBookingsByResource = () => {
|
||||
const filteredBookings = getFilteredBookings();
|
||||
|
||||
// For day view, group by resource (station/type)
|
||||
if (viewMode === "day") {
|
||||
const groups: Record<string, Booking[]> = {};
|
||||
|
||||
filteredBookings.forEach((booking) => {
|
||||
let key: string = booking.type;
|
||||
if (booking.station) {
|
||||
key = `${booking.station.bosCallsign}`;
|
||||
}
|
||||
|
||||
if (!groups[key]) {
|
||||
groups[key] = [];
|
||||
}
|
||||
groups[key]!.push(booking);
|
||||
});
|
||||
|
||||
// Sort bookings within each group, LST_ types first, then alphanumerical
|
||||
Object.keys(groups).forEach((key) => {
|
||||
groups[key] = groups[key]!.sort((a, b) => {
|
||||
const aIsLST = a.type.startsWith("LST_");
|
||||
const bIsLST = b.type.startsWith("LST_");
|
||||
if (aIsLST && !bIsLST) return -1;
|
||||
if (!aIsLST && bIsLST) return 1;
|
||||
// Within same category (both LST_ or both non-LST_), sort alphanumerically by type
|
||||
return a.type.localeCompare(b.type);
|
||||
});
|
||||
});
|
||||
|
||||
// Sort the groups themselves - LST_ types first, then alphabetical
|
||||
const sortedGroups: Record<string, Booking[]> = {};
|
||||
Object.keys(groups)
|
||||
.sort((a, b) => {
|
||||
// Check if groups contain LST_ types
|
||||
const aHasLST = groups[a]?.some((booking) => booking.type.startsWith("LST_"));
|
||||
const bHasLST = groups[b]?.some((booking) => booking.type.startsWith("LST_"));
|
||||
if (aHasLST && !bHasLST) return -1;
|
||||
if (!aHasLST && bHasLST) return 1;
|
||||
// Within same category, sort alphabetically by group name
|
||||
return a.localeCompare(b);
|
||||
})
|
||||
.forEach((key) => {
|
||||
sortedGroups[key] = groups[key]!;
|
||||
});
|
||||
|
||||
return sortedGroups;
|
||||
}
|
||||
|
||||
// For week and month views, group by date
|
||||
const groups: Record<string, Booking[]> = {};
|
||||
|
||||
filteredBookings.forEach((booking) => {
|
||||
const dateKey = new Date(booking.startTime).toLocaleDateString("de-DE", {
|
||||
weekday: "long",
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
if (!groups[dateKey]) {
|
||||
groups[dateKey] = [];
|
||||
}
|
||||
groups[dateKey]!.push(booking);
|
||||
});
|
||||
|
||||
// Sort groups by date for week/month view and sort bookings within each group
|
||||
const sortedGroups: Record<string, Booking[]> = {};
|
||||
Object.keys(groups)
|
||||
.sort((a, b) => {
|
||||
// Extract date from the formatted string and compare
|
||||
const dateA = groups[a]?.[0]?.startTime;
|
||||
const dateB = groups[b]?.[0]?.startTime;
|
||||
if (!dateA || !dateB) return 0;
|
||||
return new Date(dateA).getTime() - new Date(dateB).getTime();
|
||||
})
|
||||
.forEach((key) => {
|
||||
const bookingsForKey = groups[key];
|
||||
if (bookingsForKey) {
|
||||
// Sort bookings within each date group, LST_ types first, then alphanumerical
|
||||
sortedGroups[key] = bookingsForKey.sort((a, b) => {
|
||||
const aIsLST = a.type.startsWith("LST_");
|
||||
const bIsLST = b.type.startsWith("LST_");
|
||||
if (aIsLST && !bIsLST) return -1;
|
||||
if (!aIsLST && bIsLST) return 1;
|
||||
// Within same category (both LST_ or both non-LST_), sort alphanumerically by type
|
||||
return a.type.localeCompare(b.type);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return sortedGroups;
|
||||
};
|
||||
|
||||
const formatUserName = (user: BookingUser) => {
|
||||
return `${user.firstname} ${user.lastname.charAt(0)}.`;
|
||||
};
|
||||
|
||||
const formatTimeRange = (booking: Booking) => {
|
||||
const start = new Date(booking.startTime);
|
||||
const end = new Date(booking.endTime);
|
||||
return `${start.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })} - ${end.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" })}`;
|
||||
};
|
||||
|
||||
const getStationDisplay = (booking: Booking) => {
|
||||
if (booking.station) {
|
||||
return booking.station.bosCallsignShort || booking.station.bosCallsign;
|
||||
}
|
||||
return booking.type;
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const groupedBookings = groupBookingsByResource();
|
||||
|
||||
return (
|
||||
<div className="modal modal-open">
|
||||
<div className="modal-box flex max-h-[83vh] w-11/12 max-w-7xl flex-col">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="flex items-center gap-2 text-lg font-bold">
|
||||
<CalendarIcon size={24} />
|
||||
Slot Buchung
|
||||
</h3>
|
||||
<button className="btn btn-sm btn-circle btn-ghost" onClick={onClose}>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="btn btn-sm btn-ghost" onClick={() => navigate("prev")}>
|
||||
<ChevronLeft size={16} />
|
||||
</button>
|
||||
<span className="min-w-[200px] text-center font-medium">{formatDateRange()}</span>
|
||||
<button className="btn btn-sm btn-ghost" onClick={() => navigate("next")}>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="join">
|
||||
{(["day", "week", "month"] as ViewMode[]).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
className={`btn btn-sm join-item ${viewMode === mode ? "btn-active" : ""}`}
|
||||
onClick={() => setViewMode(mode)}
|
||||
>
|
||||
{mode === "day" ? "Tag" : mode === "week" ? "Woche" : "Monat"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<span className="loading loading-spinner loading-lg"></span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid max-h-[calc(83vh-200px)] grid-cols-1 gap-3 overflow-y-auto md:grid-cols-2">
|
||||
{Object.entries(groupedBookings).map(([groupName, resourceBookings]) => (
|
||||
<div key={groupName} className="card bg-base-200 shadow-sm">
|
||||
<div className="card-body p-3">
|
||||
<h4 className="mb-2 text-sm font-medium opacity-70">
|
||||
{viewMode === "day" ? groupName : groupName}
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
{resourceBookings.map((booking) => (
|
||||
<div
|
||||
key={booking.id}
|
||||
className={`alert alert-horizontal ${booking.type.startsWith("LST_") ? "alert-success" : "alert-info"} alert-soft px-3 py-2`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="badge badge-outline text-xs">
|
||||
{getStationDisplay(booking)}
|
||||
</span>
|
||||
<span className="text-sm font-medium">
|
||||
{formatUserName(booking.user)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-right">
|
||||
<p className="text-xs font-medium">{formatTimeRange(booking)}</p>
|
||||
</div>
|
||||
{canDeleteBooking(booking.user.id) && (
|
||||
<button
|
||||
onClick={() => deleteBooking(booking.id)}
|
||||
className={`btn btn-xs ${
|
||||
currentUser?.permissions.includes("ADMIN_KICK") &&
|
||||
booking.user.id !== currentUser.id
|
||||
? "btn-error"
|
||||
: "btn-neutral"
|
||||
}`}
|
||||
title="Buchung löschen"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(groupedBookings).length === 0 && !loading && (
|
||||
<div className="col-span-full py-8 text-center opacity-70">
|
||||
Keine Buchungen im aktuellen Zeitraum gefunden
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="modal-action">
|
||||
{canCreateBookings && (
|
||||
<button className="btn btn-primary" onClick={onOpenNewBooking}>
|
||||
<Plus size={20} />
|
||||
Neue Buchung
|
||||
</button>
|
||||
)}
|
||||
<button className="btn" onClick={onClose}>
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user