Skip to content

Commit

Permalink
unregistering and minor design changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@dheidemann
dheidemann committed Oct 10, 2024
1 parent 6b8a2b1 commit 0563b55
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 31 deletions.
103 changes: 79 additions & 24 deletions frontend/app/ui/event-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import {
AddStudentRegistrationForEventDocument,
AddStudentRegistrationForEventMutation,
AddStudentRegistrationForEventMutationVariables,
DeleteStudentRegistrationForEventDocument,
DeleteStudentRegistrationForEventMutation,
DeleteStudentRegistrationForEventMutationVariables,
EventCloseupDocument,
EventCloseupQuery,
EventCloseupQueryVariables,
Expand Down Expand Up @@ -109,8 +112,10 @@ export default function EventDialog({ id }: { id: number }) {
fetchData();
}, [user, id]);

const registerForEvent = async (reg: NewUserToEventRegistration) => {
setRegLoading(true);
const registerForEvent = async (
reg: NewUserToEventRegistration,
i: number
) => {
await new Promise((resolve) => setTimeout(resolve, 250));

const vars: AddStudentRegistrationForEventMutationVariables = {
Expand All @@ -123,16 +128,62 @@ export default function EventDialog({ id }: { id: number }) {
vars
);

changeRegistrationCount(i, 1);
setRegistration(regData.addStudentRegistrationForEvent);
setRegLoading(false);
};

const increaseRegistration = (index: number) => {
const unregisterFromEvent = async (reg: NewUserToEventRegistration) => {
await new Promise((resolve) => setTimeout(resolve, 250));

const vars: DeleteStudentRegistrationForEventMutationVariables = {
registration: reg,
};

await client.request<DeleteStudentRegistrationForEventMutation>(
DeleteStudentRegistrationForEventDocument,
vars
);

event?.tutorsAssigned?.forEach((e, i) => {
if (e.room?.number === registration?.room.number && e.room?.building.ID) {
changeRegistrationCount(i, -1);
}
});
};

const changeRegistrationCount = (index: number, value: number) => {
setRegistrations((prevRegistrations) =>
prevRegistrations.map((reg, i) => (i === index ? reg + 1 : reg))
prevRegistrations.map((reg, i) => (i === index ? reg + value : reg))
);
};

const handleRegistrationChange = async (
reg: NewUserToEventRegistration,
i: number
) => {
setRegLoading(true);
if (registration) {
if (
reg.roomNumber === registration.room.number &&
reg.buildingID === registration.room.building.ID
) {
await unregisterFromEvent(reg);
setRegistration(null);
} else {
await unregisterFromEvent({
eventID: event?.ID ?? 0,
roomNumber: registration.room.number,
buildingID: registration.room.building.ID,
userMail: user?.mail ?? "",
});
await registerForEvent(reg, i);
}
} else {
await registerForEvent(reg, i);
}
setRegLoading(false);
};

return (
<DialogContent className="sm:max-w-[550px]">
{loading ? (
Expand Down Expand Up @@ -163,32 +214,34 @@ export default function EventDialog({ id }: { id: number }) {
<span>Bitte </span>
<Dialog>
<DialogTrigger asChild>
<span className="cursor-pointer text-blue-500 hover:underline">anmelden</span>
<span className="cursor-pointer text-blue-500 hover:underline">
anmelden
</span>
</DialogTrigger>
<SignInDialog />
</Dialog>
<span>, um dich eintragen zu können.</span>
</div>
)}
<div className="rounded-md border">
<div className="rounded-md border overflow-hidden">
<Table>
<TableBody>
{event?.tutorsAssigned?.map((e, i) => {
const capacity = e.room?.capacity ?? 1;
const utilization = (registrations[i] / capacity) * 100;

return (
<TableRow key={e.room?.number}>
<TableRow key={e.room?.number} className="relative">
<div
className="absolute inset-0 z-0 rounded-md"
className="absolute inset-0 z-0"
style={{
width: `${utilization}%`,
backgroundColor: `${
utilization < 100 ? "#BBF7D0" : "#FECACA"
}`,
}}
/>
<TableCell className="relative z-10">
<TableCell className="relative z-1">
{e.tutors?.map((t) => (
<HoverCard key={t.mail}>
<HoverCardTrigger asChild>
Expand All @@ -213,7 +266,7 @@ export default function EventDialog({ id }: { id: number }) {
</HoverCard>
))}
</TableCell>
<TableCell className="relative z-2">
<TableCell className="relative z-1">
<HoverCard>
<HoverCardTrigger asChild>
<div className="group">
Expand Down Expand Up @@ -276,32 +329,34 @@ export default function EventDialog({ id }: { id: number }) {
</HoverCardContent>
</HoverCard>
</TableCell>
<TableCell className="relative z-10">
<TableCell className="relative z-1">
<p>
{registrations}/{capacity}
{registrations[i]}/{capacity}
</p>
</TableCell>
<TableCell className="relative z-10">
<TableCell className="relative z-1">
<Button
disabled={utilization == 100 || !user || regLoading}
variant="outline"
onClick={() => {
registerForEvent({
userMail: user?.mail ?? "",
eventID: event.ID,
roomNumber: e.room?.number ?? "",
buildingID: e.room?.building.ID ?? 0,
});
increaseRegistration(i);
handleRegistrationChange(
{
userMail: user?.mail ?? "",
eventID: event.ID,
roomNumber: e.room?.number ?? "",
buildingID: e.room?.building.ID ?? 0,
},
i
);
}}
>
{regLoading && (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
)}
{registration
? registration.room.number === e.room?.number &&
registration.room.building.ID ===
e.room.building.ID
? e.room?.number === registration.room.number &&
e.room.building.ID ===
registration.room.building.ID
? "Abmelden"
: "Wechseln"
: "Anmelden"}
Expand Down
4 changes: 2 additions & 2 deletions frontend/lib/gql/generated/gql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
*/
const documents = {
"mutation addStudentApplicationForEvent($application: NewUserToEventApplication!) {\n addStudentApplicationForEvent(application: $application) {\n fn\n }\n}": types.AddStudentApplicationForEventDocument,
"mutation addStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n addStudentRegistrationForEvent(registration: $registration) {\n room {\n number\n building {\n ID\n }\n }\n }\n}": types.AddStudentRegistrationForEventDocument,
"mutation addStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n addStudentRegistrationForEvent(registration: $registration) {\n room {\n number\n building {\n ID\n }\n }\n }\n}\n\nmutation deleteStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n deleteStudentRegistrationForEvent(registration: $registration) {\n eventsRegistered {\n ID\n }\n }\n}": types.AddStudentRegistrationForEventDocument,
"mutation addTutor($firstName: String!, $lastName: String!, $email: String!, $eventsAvailable: [Int!]!) {\n addTutor(\n tutor: {fn: $firstName, sn: $lastName, mail: $email}\n availability: {userMail: $email, eventID: $eventsAvailable}\n ) {\n fn\n }\n}": types.AddTutorDocument,
"mutation registration($fn: String!, $sn: String, $mail: String!, $password: String!) {\n addUser(user: {fn: $fn, sn: $sn, mail: $mail, password: $password}) {\n fn\n sn\n mail\n confirmed\n }\n}": types.RegistrationDocument,
"query tutorFormEvents {\n events(needsTutors: true, onlyFuture: true) {\n ID\n title\n from\n to\n topic {\n name\n color\n }\n type {\n name\n color\n }\n }\n}\n\nquery plannerEvents($umbrellaID: Int!, $type: [String!], $topic: [String!]) {\n umbrellas(id: [$umbrellaID]) {\n title\n }\n typeLabels: labels(kind: EVENT_TYPE, umbrellaID: [$umbrellaID]) {\n name\n }\n topicLabels: labels(kind: TOPIC, umbrellaID: [$umbrellaID]) {\n name\n }\n events(umbrellaID: [$umbrellaID], type: $type, topic: $topic) {\n ID\n title\n from\n to\n topic {\n color\n }\n }\n}\n\nquery eventCloseup($id: Int!) {\n events(id: [$id]) {\n ID\n title\n description\n from\n to\n topic {\n name\n color\n }\n type {\n name\n color\n }\n tutorsAssigned {\n tutors {\n fn\n sn\n mail\n }\n room {\n capacity\n floor\n name\n number\n building {\n ID\n name\n street\n number\n city\n zip\n latitude\n longitude\n zoomLevel\n }\n }\n registrations\n }\n }\n}": types.TutorFormEventsDocument,
Expand Down Expand Up @@ -45,7 +45,7 @@ export function graphql(source: "mutation addStudentApplicationForEvent($applica
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "mutation addStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n addStudentRegistrationForEvent(registration: $registration) {\n room {\n number\n building {\n ID\n }\n }\n }\n}"): (typeof documents)["mutation addStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n addStudentRegistrationForEvent(registration: $registration) {\n room {\n number\n building {\n ID\n }\n }\n }\n}"];
export function graphql(source: "mutation addStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n addStudentRegistrationForEvent(registration: $registration) {\n room {\n number\n building {\n ID\n }\n }\n }\n}\n\nmutation deleteStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n deleteStudentRegistrationForEvent(registration: $registration) {\n eventsRegistered {\n ID\n }\n }\n}"): (typeof documents)["mutation addStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n addStudentRegistrationForEvent(registration: $registration) {\n room {\n number\n building {\n ID\n }\n }\n }\n}\n\nmutation deleteStudentRegistrationForEvent($registration: NewUserToEventRegistration!) {\n deleteStudentRegistrationForEvent(registration: $registration) {\n eventsRegistered {\n ID\n }\n }\n}"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
Loading

0 comments on commit 0563b55

Please sign in to comment.