"feat: Added debug server and related components for improved development experience"

frontend/src/components/printer-card/countdown.tsx

@@ -0,0 +1,44 @@
+"use client";
+import { revalidate } from "@/server/actions/timer";
+import { fetcher } from "@/utils/fetch";
+import useSWR from "swr";
+
+interface CountdownProps {
+	jobId: string;
+}
+export function Countdown(props: CountdownProps) {
+	const { jobId } = props;
+	const { data, error, isLoading } = useSWR(`/api/job/${jobId}/remaining-time`, fetcher, {
+		refreshInterval: 1000 * 30,
+	});
+
+	if (error) {
+		return <span className="text-red-500">Ein Fehler ist aufgetreten.</span>;
+	}
+
+	if (isLoading) {
+		return <>...</>;
+	}
+
+	const days = Math.floor(data.remainingTime / (1000 * 60 * 60 * 24));
+	const hours = Math.floor((data.remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+	const minutes = Math.floor((data.remainingTime % (1000 * 60 * 60)) / (1000 * 60));
+	const seconds = Math.floor((data.remainingTime % (1000 * 60)) / 1000);
+
+	if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
+		revalidate();
+	}
+
+	return (
+		<span className="tabular-nums" suppressHydrationWarning>
+			{days > 0 && <>{`${days}`.padStart(2, "0")}d </>}
+			{hours === 0 && minutes === 0 ? (
+				<>{`${seconds}`.padStart(2, "0")}s</>
+			) : (
+				<>
+					{`${hours}`.padStart(2, "0")}h {`${minutes}`.padStart(2, "0")}min
+				</>
+			)}
+		</span>
+	);
+}

frontend/src/components/printer-card/index.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { PrinterReserveForm } from "@/app/printer/[printerId]/reserve/form";
+import { Countdown } from "@/components/printer-card/countdown";
+import { AlertDialogHeader } from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { UserRole, hasRole } from "@/server/auth/permissions";
+import type { InferResultType } from "@/utils/drizzle";
+import { PrinterStatus, derivePrinterStatus, translatePrinterStatus } from "@/utils/printers";
+import { cn } from "@/utils/styles";
+import type { RegisteredDatabaseUserAttributes } from "lucia";
+import { CalendarPlusIcon, ChevronRightIcon } from "lucide-react";
+import Link from "next/link";
+import { Else, If, Then } from "react-if";
+
+interface PrinterCardProps {
+	printer: InferResultType<"printers", { printJobs: true }>;
+	user?: RegisteredDatabaseUserAttributes | null;
+}
+
+export function PrinterCard(props: PrinterCardProps) {
+	const { printer, user } = props;
+	const status = derivePrinterStatus(printer);
+
+	const userIsLoggedIn = Boolean(user);
+
+	return (
+		<Card
+			className={cn("w-auto h-36", {
+				"opacity-50 select-none cursor-not-allowed": status === PrinterStatus.OUT_OF_ORDER,
+			})}
+		>
+			<CardHeader>
+				<div className="flex flex-row items-start justify-between">
+					<div>
+						<CardTitle>{printer.name}</CardTitle>
+						<CardDescription>{printer.description}</CardDescription>
+					</div>
+					<Badge
+						className={cn({
+							"bg-green-500 hover:bg-green-400": status === PrinterStatus.IDLE,
+							"bg-red-500 hover:bg-red-500": status === PrinterStatus.OUT_OF_ORDER,
+							"bg-yellow-500 hover:bg-yellow-400": status === PrinterStatus.RESERVED,
+						})}
+					>
+						{status === PrinterStatus.RESERVED && <Countdown jobId={printer.printJobs[0].id} />}
+						<If condition={status === PrinterStatus.RESERVED}>
+							<Else>{translatePrinterStatus(status)}</Else>
+						</If>
+					</Badge>
+				</div>
+			</CardHeader>
+			<CardContent className="flex justify-end">
+				<If condition={status === PrinterStatus.IDLE && userIsLoggedIn && !hasRole(user, UserRole.GUEST)}>
+					<Then>
+						<Dialog>
+							<DialogTrigger asChild>
+								<Button variant={"default"} className="flex items-center gap-2 w-full">
+									<CalendarPlusIcon className="w-4 h-4" />
+									<span>Reservieren</span>
+								</Button>
+							</DialogTrigger>
+							<DialogContent>
+								<AlertDialogHeader>
+									<DialogTitle>{printer.name} reservieren</DialogTitle>
+									<DialogDescription>Gebe die geschätzte Druckdauer an.</DialogDescription>
+								</AlertDialogHeader>
+								<PrinterReserveForm isDialog={true} printerId={printer.id} userId={user?.id ?? ""} />
+							</DialogContent>
+						</Dialog>
+					</Then>
+				</If>
+				{status === PrinterStatus.RESERVED && (
+					<Button asChild variant={"secondary"}>
+						<Link href={`/job/${printer.printJobs[0].id}`} className="flex items-center gap-2 w-full">
+							<ChevronRightIcon className="w-4 h-4" />
+							<span>Details anzeigen</span>
+						</Link>
+					</Button>
+				)}
+			</CardContent>
+		</Card>
+	);
+}