Events & Kurse User Page
This commit is contained in:
Nicolas
93
apps/hub/app/(app)/events/_components/item.tsx
Normal file
93
apps/hub/app/(app)/events/_components/item.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons";
|
||||
import { User } from "@repo/db";
|
||||
import ModalBtn from "./modalBtn";
|
||||
|
||||
export const KursItem = ({
|
||||
user,
|
||||
title,
|
||||
type,
|
||||
beschreibung,
|
||||
badge,
|
||||
moodleReq,
|
||||
}: {
|
||||
user: User;
|
||||
title: string;
|
||||
type: string;
|
||||
beschreibung: string;
|
||||
badge: string;
|
||||
moodleReq: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div className="col-span-full">
|
||||
<div className="card bg-base-200 shadow-xl mb-4">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title">{title}</h2>
|
||||
<div className="absolute top-0 right-0 m-4">
|
||||
<span className="badge badge-info badge-outline">
|
||||
Zusatzqualifikation
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-4">
|
||||
<p className="text-left text-balance">{beschreibung}</p>
|
||||
</div>
|
||||
<div className="col-span-2">{badge}</div>
|
||||
</div>
|
||||
<div className="card-actions flex justify-between items-center mt-5">
|
||||
<p className="text-gray-600 text-left flex items-center gap-2">
|
||||
<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b>
|
||||
<a className="link link-info" href="">
|
||||
Moodle Kurs /MOODLEKURSTITLE\
|
||||
</a>
|
||||
</p>
|
||||
<ModalBtn
|
||||
title={title}
|
||||
dates={["Dienstag, 25 Februar 2025", "Mittwoch, 26 Februar 2025"]}
|
||||
modalId={title + "_modal" + Math.random()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const PilotKurs = ({ user }: { user: User }) => {
|
||||
{
|
||||
/* STATISCH, DA FÜR ALLE NEUEN MITGLIEDER MANDATORY, WIRD AUSGEBLENDET WENN ABSOLVIERT */
|
||||
}
|
||||
return (
|
||||
<div className="col-span-full">
|
||||
<div className="card card-bordered border-secondary bg-base-200 shadow-xl mb-4">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title">Einsteigerkurs für Piloten</h2>
|
||||
<div className="absolute top-0 right-0 m-4">
|
||||
<span className="badge badge-secondary badge-outline">
|
||||
Verpflichtend
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-4">
|
||||
<p className="text-left text-balance">
|
||||
In diesem Kurs lernen Piloten die Grundlagen der Luftrettung,
|
||||
Einsatzverfahren, den Umgang mit dem BOS-Funk und einige
|
||||
medizinische Basics. Der Kurs bietet eine ideale Vorbereitung
|
||||
für alle Standard Operations bei Virtual Air Rescue.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-2">Badge</div>
|
||||
</div>
|
||||
<div className="card-actions flex justify-between items-center mt-5">
|
||||
<p className="text-gray-600 text-left flex items-center gap-2">
|
||||
<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b> Keine
|
||||
</p>
|
||||
<button className="btn btn-outline btn-secondary btn-wide">
|
||||
<EnterIcon /> Zum Moodle Kurs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
87
apps/hub/app/(app)/events/_components/modalBtn.tsx
Normal file
87
apps/hub/app/(app)/events/_components/modalBtn.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
CheckCircledIcon,
|
||||
CalendarIcon,
|
||||
EnterIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
|
||||
interface ModalBtnProps {
|
||||
title: string;
|
||||
dates: string[];
|
||||
modalId: string;
|
||||
}
|
||||
|
||||
const ModalBtn = ({ title, dates, modalId }: ModalBtnProps) => {
|
||||
useEffect(() => {
|
||||
const modal = document.getElementById(modalId) as HTMLDialogElement;
|
||||
const handleOpen = () => {
|
||||
document.body.classList.add("modal-open");
|
||||
};
|
||||
const handleClose = () => {
|
||||
document.body.classList.remove("modal-open");
|
||||
};
|
||||
modal?.addEventListener("show", handleOpen);
|
||||
modal?.addEventListener("close", handleClose);
|
||||
return () => {
|
||||
modal?.removeEventListener("show", handleOpen);
|
||||
modal?.removeEventListener("close", handleClose);
|
||||
};
|
||||
}, [modalId]);
|
||||
|
||||
const openModal = () => {
|
||||
const modal = document.getElementById(modalId) as HTMLDialogElement;
|
||||
document.body.classList.add("modal-open");
|
||||
modal?.showModal();
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
const modal = document.getElementById(modalId) as HTMLDialogElement;
|
||||
document.body.classList.remove("modal-open");
|
||||
modal?.close();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button className="btn btn-outline btn-info btn-wide" onClick={openModal}>
|
||||
<EnterIcon /> Anmelden
|
||||
</button>
|
||||
<dialog id={modalId} className="modal">
|
||||
<div className="modal-box">
|
||||
<h3 className="font-bold text-lg">{title}</h3>
|
||||
<p className="py-4 flex items-center gap-2 justify-center">
|
||||
<CheckCircledIcon className="text-success" />
|
||||
Moodle Kurs abgeschlossen
|
||||
</p>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 justify-center">
|
||||
<CalendarIcon />
|
||||
<select className="select w-full max-w-xs" defaultValue={0}>
|
||||
<option disabled>Bitte wähle einen Termin aus</option>
|
||||
{dates.map((date, index) => (
|
||||
<option key={index}>{date}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<p className="mt-3 text-center">
|
||||
Bitte finde dich an diesem Termin in unserem Discord ein.
|
||||
</p>
|
||||
</div>
|
||||
<div className="modal-action flex justify-between">
|
||||
<button className="btn" onClick={closeModal}>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button className="btn btn-info btn-outline btn-wide">
|
||||
<EnterIcon /> Anmelden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button className="modal-backdrop" onClick={closeModal}>
|
||||
Abbrechen
|
||||
</button>
|
||||
</dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalBtn;
|
||||
45
apps/hub/app/(app)/events/page.tsx
Normal file
45
apps/hub/app/(app)/events/page.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { getServerSession } from "../../api/auth/[...nextauth]/auth";
|
||||
import { PrismaClient } from "@repo/db";
|
||||
import { PilotKurs, KursItem } from "./_components/item";
|
||||
import {
|
||||
RocketIcon,
|
||||
DrawingPinFilledIcon,
|
||||
EnterIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
|
||||
export default async () => {
|
||||
const prisma = new PrismaClient();
|
||||
const session = await getServerSession();
|
||||
if (!session) return null;
|
||||
const user = await prisma.user.findFirst({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
});
|
||||
if (!user) return null;
|
||||
return (
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-full">
|
||||
<p className="text-2xl font-semibold text-left flex items-center gap-2">
|
||||
<RocketIcon className="w-5 h-5" /> Events & Kurse
|
||||
</p>
|
||||
</div>
|
||||
<PilotKurs user={user} />
|
||||
<KursItem
|
||||
user={user}
|
||||
title="Einsteigerkurs für Disponenten"
|
||||
type="1"
|
||||
beschreibung="In diesem Kurs lernen Teilnehmer die Aufgaben eines
|
||||
Disponenten in der Rettungsfliegerei kennen. Dazu gehören die
|
||||
Koordination von Notfalleinsätzen, die effiziente Planung von
|
||||
Ressourcen und die Kommunikation mit Piloten sowie
|
||||
Rettungsdiensten. Der Kurs vermittelt praxisnahe Kenntnisse
|
||||
für die schnelle und präzise Entscheidungsfindung unter
|
||||
Zeitdruck, um eine reibungslose Abwicklung von
|
||||
Rettungseinsätzen zu gewährleisten."
|
||||
badge="Badge"
|
||||
moodleReq={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user