PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

added chron to hub server, removed starterEvent

Browse Source
This commit is contained in:
PxlLoewe
2025-02-28 07:21:07 +01:00
parent bbcde2eb4a
commit a477b65c2f
20 changed files with 584 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
apps/hub/app/(app)/events/_components/modalBtn.tsx
View File

@@ -1,87 +1,156 @@
"use client";
import { useEffect } from "react";
import {
CheckCircledIcon,
CalendarIcon,
EnterIcon,
CheckCircledIcon,
CalendarIcon,
EnterIcon,
} from "@radix-ui/react-icons";
import { Event, EventAppointment, Participant, User } from "@repo/db";
import { cn } from "../../../../helper/cn";
import { addParticipant, inscribeToMoodleCourse } from "../actions";
import { useSession } from "next-auth/react";
interface ModalBtnProps {
title: string;
dates: string[];
modalId: string;
title: string;
event: Event;
dates: EventAppointment[];
participant?: Participant;
user: User;
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 ModalBtn = ({
title,
dates,
modalId,
participant,
event,
user,
}: 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 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();
};
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>
</>
);
return (
<>
<button
className={cn(
"btn btn-outline btn-info btn-wide",
event.type === "OBLIGATED_COURSE" && "btn-secondary",
)}
onClick={openModal}
>
<EnterIcon /> Anmelden
</button>
<dialog id={modalId} className="modal">
<div className="modal-box">
<h3 className="font-bold text-lg">{title}</h3>
{event.hasPresenceEvents && (
<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.appointmentDate.toLocaleString()}
</option>
))}
</select>
</div>
<p className="mt-3 text-center">
Bitte finde dich an diesem Termin in unserem Discord ein.
</p>
</div>
)}
{event.finisherMoodleCourseId && (
<MoodleCourseIndicator
user={user}
moodleCourseId={event.finisherMoodleCourseId}
completed={participant?.finisherMoodleCurseCompleted}
eventId={event.id}
/>
)}
<div className="modal-action flex justify-between">
<button className="btn" onClick={closeModal}>
Abbrechen
</button>
{event.hasPresenceEvents && (
<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;
const MoodleCourseIndicator = ({
completed,
moodleCourseId,
eventId,
user,
}: {
completed?: boolean;
moodleCourseId: string;
eventId: number;
user: User;
}) => {
const courseUrl = `${process.env.NEXT_PUBLIC_MOODLE_URL}/course/view.php?id=${moodleCourseId}`;
if (completed)
return (
<p className="py-4 flex items-center gap-2 justify-center">
<CheckCircledIcon className="text-success" />
Moodle Kurs abgeschlossen
</p>
);
return (
<p className="py-4 flex items-center gap-2 justify-center">
Moodle-Kurs Benötigt
<button
className="btn btn-xs btn-info ml-2"
onClick={async () => {
await addParticipant(eventId, user.id);
if (user.moodleId) {
await inscribeToMoodleCourse(moodleCourseId, user.moodleId);
}
window.open(courseUrl, "_blank");
}}
>
Zum Moodle Kurs
</button>
</p>
);
};