Pfadauswahl hinzugefügt

2025-06-25 21:06:03 -07:00
parent 7ad75bff63
commit 2bd8a455c8
14 changed files with 253 additions and 90 deletions
--- a/apps/hub/app/(app)/_components/FeaturedEvents.tsx
+++ b/apps/hub/app/(app)/_components/FeaturedEvents.tsx
@@ -1,6 +1,6 @@
 import { getServerSession } from "../../api/auth/[...nextauth]/auth";
 import { prisma } from "@repo/db";
-import { KursItem } from "../events/_components/item";
+import { EventCard } from "../events/_components/item";
 import { RocketIcon } from "lucide-react";
 import { eventCompleted } from "../../../helper/events";

@@ -15,15 +15,15 @@ const page = async () => {

 	const events = await prisma.event.findMany({
 		where: {
-			type: "OBLIGATED_COURSE",
+			type: "EVENT",
 		},
 		include: {
-			participants: {
+			Participants: {
 				where: {
 					userId: user.id,
 				},
 			},
-			appointments: {
+			Appointments: {
 				include: {
 					Participants: {
 						where: {
@@ -36,12 +36,10 @@ const page = async () => {
 	});

 	const filteredEvents = events.filter((event) => {
-		const userParticipant = event.participants.find(
+		const userParticipant = event.Participants.find(
 			(participant) => participant.userId === user.id,
 		);
 		if (eventCompleted(event, userParticipant)) return false;
-		if (event.type === "OBLIGATED_COURSE" && !eventCompleted(event, event.participants[0]))
-			return true;
 		return false;
 	});

@@ -56,9 +54,9 @@ const page = async () => {
 			<div className="grid grid-cols-6 gap-4">
 				{filteredEvents.map((event) => {
 					return (
-						<KursItem
-							appointments={event.appointments}
-							selectedAppointments={event.appointments.filter((a) =>
+						<EventCard
+							appointments={event.Appointments}
+							selectedAppointments={event.Appointments.filter((a) =>
 								a.Participants.find((p) => p.userId == user.id),
 							)}
 							user={user}
--- a/apps/hub/app/(app)/_components/FirstPath.tsx
+++ b/apps/hub/app/(app)/_components/FirstPath.tsx
@@ -1,9 +1,100 @@
 "use client";
+import { editUser } from "(app)/admin/user/action";
+import { Button } from "_components/ui/Button";
+import { Plane, Workflow } from "lucide-react";
+import { useSession } from "next-auth/react";
 import { useRef, useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getEvents } from "../../../helper/events";
+import { EventCard } from "(app)/events/_components/item";
+
+const PathsOptions = ({
+	selected,
+	setSelected,
+}: {
+	selected: "disponent" | "pilot" | null;
+	setSelected: (value: "disponent" | "pilot") => void;
+}) => {
+	return (
+		<>
+			<div className="flex gap-6">
+				{/* Disponent Card */}
+				<div
+					className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
+						selected === "disponent" ? "border-info ring-2 ring-info" : "border-base-300"
+					}`}
+					onClick={() => setSelected("disponent")}
+					role="button"
+					tabIndex={0}
+					aria-pressed={selected === "disponent"}
+				>
+					<h1 className="font-semibold text-lg mb-2 flex gap-2 justify-center items-center">
+						Disponent <Workflow />
+					</h1>
+					<div className="text-sm text-base-content/70">
+						Denkt sich realistische Einsatzszenarien aus, koordiniert deren Ablauf und ist die
+						zentrale Schnittstelle zwischen Piloten und bodengebundenen Rettungsmitteln. Er trägt
+						die Verantwortung für einen reibungslosen Ablauf und der erfolgreichen Durchführung der
+						Einsätze.
+						<div className="badge badge-sm badge-secondary mt-3">
+							Teilnahme an Einführungsevent Nötig
+						</div>
+					</div>
+				</div>
+				{/* Pilot Card */}
+				<div
+					className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
+						selected === "pilot" ? "border-info ring-2 ring-info" : "border-base-300"
+					}`}
+					onClick={() => setSelected("pilot")}
+					role="button"
+					tabIndex={0}
+					aria-pressed={selected === "pilot"}
+				>
+					<h1 className="font-semibold text-lg mb-2 flex gap-2 justify-center items-center">
+						Pilot <Plane />
+					</h1>
+					<div className="text-sm text-base-content/70">
+						Fliegt die vom Disponenten erstellten Einsätze und transportiert die Med-Crew sicher zum
+						Einsatzort. Er übernimmt die navigatorische Vorbereitung, achtet auf Wetterentwicklungen
+						und sorgt für die Sicherheit seiner Crew im Flug.
+					</div>
+				</div>
+			</div>
+		</>
+	);
+};
+
+const EventSelect = ({ pathSelected }: { pathSelected: "disponent" | "pilot" }) => {
+	const { data: events } = useQuery({
+		queryKey: ["events", "initial", pathSelected],
+		queryFn: () =>
+			getEvents({
+				type: pathSelected === "pilot" ? "PILOT_STARTER" : "DISPATCH_STARTER",
+			}),
+	});
+	const user = useSession().data?.user;
+	if (!user) return null;
+	return events?.map((event) => {
+		return (
+			<EventCard
+				appointments={event.Appointments}
+				selectedAppointments={event.Appointments.filter((a) =>
+					a.Participants.find((p) => p.userId == user.id),
+				)}
+				user={user}
+				event={event}
+				key={event.id}
+			/>
+		);
+	});
+};

 export const FirstPath = () => {
 	const modalRef = useRef<HTMLDialogElement>(null);
+	const { data: session } = useSession();
 	const [selected, setSelected] = useState<"disponent" | "pilot" | null>(null);
+	const [page, setPage] = useState<"path" | "event-select">("path");

 	useEffect(() => {
 		if (modalRef.current && !modalRef.current.open) {
@@ -17,59 +108,40 @@ export const FirstPath = () => {
 				<h3 className="flex items-center gap-2 text-lg font-bold mb-10">Wähle deinen Einstieg!</h3>
 				<p className="mb-8 text-base text-base-content/80 text-center">
 					Willkommen bei Virtual Air Rescue!
-					<br /> Wähle deinen ersten Pfad aus. Du kannst später jederzeit auch den anderen Pfad
+					<br /> Wie möchtest du bei uns starten? Du kannst später jederzeit auch den anderen Pfad
 					ausprobieren, wenn du möchtest.
 				</p>
 				<div className="flex flex-col items-center justify-center m-20">
-					<div className="flex gap-6">
-						{/* Disponent Card */}
-						<div
-							className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
-								selected === "disponent" ? "border-info ring-2 ring-info" : "border-base-300"
-							}`}
-							onClick={() => setSelected("disponent")}
-							role="button"
-							tabIndex={0}
-							aria-pressed={selected === "disponent"}
-						>
-							<div className="font-semibold text-lg mb-2">Disponent</div>
-							<div className="text-sm text-base-content/70">
-								Denkt sich realistische Einsatzszenarien aus, koordiniert deren Ablauf und ist die
-								zentrale Schnittstelle zwischen Piloten und bodengebundenen Rettungsmitteln. Er
-								trägt die Verantwortung für einen reibungslosen Ablauf und der erfolgreichen
-								Durchführung der Einsätze.
-								<div className="badge badge-sm badge-secondary mt-3">
-									Teilnahme an Einführungsevent Nötig
-								</div>
+					{page === "path" && <PathsOptions selected={selected} setSelected={setSelected} />}
+					{page === "event-select" && (
+						<div className="flex flex-col gap-3 min-w-[800px]">
+							<div>
+								<p className="text-left text-gray-400 text-sm">Wähle dein Einführungs-Event aus:</p>
 							</div>
+							<EventSelect pathSelected={selected!} />
 						</div>
-						{/* Pilot Card */}
-						<div
-							className={`cursor-pointer border rounded-lg p-6 w-80 transition-colors ${
-								selected === "pilot" ? "border-info ring-2 ring-info" : "border-base-300"
-							}`}
-							onClick={() => setSelected("pilot")}
-							role="button"
-							tabIndex={0}
-							aria-pressed={selected === "pilot"}
-						>
-							<div className="font-semibold text-lg mb-2">Pilot</div>
-							<div className="text-sm text-base-content/70">
-								Fliegt die vom Disponenten erstellten Einsätze und transportiert die Med-Crew sicher
-								zum Einsatzort. Er übernimmt die navigatorische Vorbereitung, achtet auf
-								Wetterentwicklungen und sorgt für die Sicherheit seiner Crew im Flug.
-							</div>
-						</div>
-					</div>
+					)}
 				</div>
 				<div className="modal-action">
-					<button
+					<button className="btn" disabled={page === "path"} onClick={() => setPage("path")}>
+						Zurück
+					</button>
+					<Button
 						className="btn btn-info"
 						disabled={!selected}
-						onClick={() => modalRef.current?.close()}
+						onClick={async () => {
+							if (page === "path") {
+								setPage("event-select");
+							} else if (session?.user.id) {
+								await editUser(session?.user.id, {
+									pathSelected: true,
+								});
+								modalRef.current?.close();
+							}
+						}}
 					>
-						Auswahl Bestätigen
-					</button>
+						{page === "path" ? "Weiter" : "Pfad auswählen"}
+					</Button>
 				</div>
 			</div>
 		</dialog>