regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add forgotten event modal

Browse Source
This commit is contained in:
Regalijan
2024-09-13 15:31:52 -04:00
parent 30d9eeed7f
commit 2b7c08dbd0
1 changed files with 113 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
app/routes/events-team.tsx
View File

@ -23,7 +23,7 @@ import {
Text, Text,
useDisclosure, useDisclosure,
useToast, useToast,
VStack, VStack
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react"; import { useLoaderData } from "@remix-run/react";
import { useState } from "react"; import { useState } from "react";
@ -34,62 +34,62 @@ import { type LinksFunction } from "@remix-run/cloudflare";
export const links: LinksFunction = () => { export const links: LinksFunction = () => {
return [ return [
{ href: stylesheet, rel: "stylesheet" }, { href: stylesheet, rel: "stylesheet" },
{ href: calendarStyles, rel: "stylesheet" }, { href: calendarStyles, rel: "stylesheet" }
]; ];
}; };
export async function loader({ context }: { context: RequestContext }) { export async function loader({ context }: { context: RequestContext }) {
if (!context.data.current_user) if (!context.data.current_user)
throw new Response(null, { throw new Response(null, {
status: 401, status: 401
}); });
if ( if (
![1 << 3, 1 << 4, 1 << 12].find( ![1 << 3, 1 << 4, 1 << 12].find(
(p) => context.data.current_user.permissions & p, (p) => context.data.current_user.permissions & p
) )
) )
throw new Response(null, { throw new Response(null, {
status: 403, status: 403
}); });
const now = new Date(); const now = new Date();
const monthEventList = await context.env.D1.prepare( const monthEventList = await context.env.D1.prepare(
"SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? ORDER BY day ASC;", "SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? ORDER BY day ASC;"
) )
.bind(now.getUTCMonth() + 1, now.getUTCFullYear()) .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
.all(); .all();
if (monthEventList.error) if (monthEventList.error)
throw new Response(null, { throw new Response(null, {
status: 500, status: 500
}); });
const membersList = await context.env.D1.prepare( const membersList = await context.env.D1.prepare(
"SELECT id, name FROM et_members WHERE id IN (SELECT created_by FROM events WHERE month = ? AND year = ?);", "SELECT id, name FROM et_members WHERE id IN (SELECT created_by FROM events WHERE month = ? AND year = ?);"
) )
.bind(now.getUTCMonth() + 1, now.getUTCFullYear()) .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
.all(); .all();
if (membersList.error) if (membersList.error)
throw new Response(null, { throw new Response(null, {
status: 500, status: 500
}); });
return { return {
can_approve: Boolean( can_approve: Boolean(
[1 << 4, 1 << 12].find((p) => context.data.current_user.permissions & p), [1 << 4, 1 << 12].find((p) => context.data.current_user.permissions & p)
), ),
events: monthEventList.results, events: monthEventList.results,
members: membersList.results as { id: string; name: string }[], members: membersList.results as { id: string; name: string }[]
}; };
} }
export default function () { export default function() {
const { const {
can_approve, can_approve,
events, events,
members, members
}: { }: {
can_approve: boolean; can_approve: boolean;
events: { [k: string]: any }[]; events: { [k: string]: any }[];
@ -100,12 +100,17 @@ export default function () {
const { const {
isOpen: isCompleteOpen, isOpen: isCompleteOpen,
onClose: closeComplete, onClose: closeComplete,
onOpen: openComplete, onOpen: openComplete
} = useDisclosure(); } = useDisclosure();
const { const {
isOpen: isAnsweredOpen, isOpen: isAnsweredOpen,
onClose: closeAnswered, onClose: closeAnswered,
onOpen: openAnswered, onOpen: openAnswered
} = useDisclosure();
const {
isOpen: isForgottenOpen,
onClose: onForgottenClose,
onOpen: onForgottenOpen
} = useDisclosure(); } = useDisclosure();
const toast = useToast(); const toast = useToast();
const [selectedEvent, setSelectedEvent] = useState(""); const [selectedEvent, setSelectedEvent] = useState("");
@ -117,10 +122,10 @@ export default function () {
{ {
body: JSON.stringify({ approved }), body: JSON.stringify({ approved }),
headers: { headers: {
"content-type": "application/json", "content-type": "application/json"
}, },
method: "POST", method: "POST"
}, }
); );
if (!decisionResp.ok) { if (!decisionResp.ok) {
@ -128,12 +133,13 @@ export default function () {
try { try {
errorMsg = ((await decisionResp.json()) as { error: string }).error; errorMsg = ((await decisionResp.json()) as { error: string }).error;
} catch {} } catch {
}
toast({ toast({
description: errorMsg, description: errorMsg,
status: "error", status: "error",
title: "Oops!", title: "Oops!"
}); });
return; return;
@ -142,7 +148,7 @@ export default function () {
toast({ toast({
description: `Event ${approved ? "approved" : "rejected"}`, description: `Event ${approved ? "approved" : "rejected"}`,
status: "success", status: "success",
title: "Success", title: "Success"
}); });
const newEventData = eventData; const newEventData = eventData;
@ -160,10 +166,10 @@ export default function () {
{ {
body: "{}", body: "{}",
headers: { headers: {
"content-type": "application/json", "content-type": "application/json"
}, },
method: "POST", method: "POST"
}, }
); );
if (!certifyResp.ok) { if (!certifyResp.ok) {
@ -171,12 +177,13 @@ export default function () {
try { try {
errorMsg = ((await certifyResp.json()) as { error: string }).error; errorMsg = ((await certifyResp.json()) as { error: string }).error;
} catch {} } catch {
}
toast({ toast({
description: errorMsg, description: errorMsg,
status: "error", status: "error",
title: "Failed to certify game night", title: "Failed to certify game night"
}); });
return; return;
@ -185,13 +192,13 @@ export default function () {
toast({ toast({
description: "Game night certified", description: "Game night certified",
status: "success", status: "success",
title: "Success", title: "Success"
}); });
const newEventData = eventData; const newEventData = eventData;
newEventData[ newEventData[
eventData.findIndex((e) => e.id === eventId) eventData.findIndex((e) => e.id === eventId)
].reached_minimum_player_count = true; ].reached_minimum_player_count = true;
setEventData([...newEventData]); setEventData([...newEventData]);
setSelectedEvent(""); setSelectedEvent("");
@ -201,9 +208,9 @@ export default function () {
const answerResp = await fetch(`/api/events-team/events/${eventId}/solve`, { const answerResp = await fetch(`/api/events-team/events/${eventId}/solve`, {
body: "{}", body: "{}",
headers: { headers: {
"content-type": "application/json", "content-type": "application/json"
}, },
method: "POST", method: "POST"
}); });
closeAnswered(); closeAnswered();
@ -212,7 +219,7 @@ export default function () {
toast({ toast({
description: "Failed to mark as solved", description: "Failed to mark as solved",
status: "error", status: "error",
title: "Oops", title: "Oops"
}); });
return; return;
@ -232,10 +239,10 @@ export default function () {
{ {
body: "{}", body: "{}",
headers: { headers: {
"content-type": "application/json", "content-type": "application/json"
}, },
method: "POST", method: "POST"
}, }
); );
closeComplete(); closeComplete();
@ -245,12 +252,13 @@ export default function () {
try { try {
msg = ((await completeResp.json()) as { error: string }).error; msg = ((await completeResp.json()) as { error: string }).error;
} catch {} } catch {
}
toast({ toast({
description: msg, description: msg,
status: "error", status: "error",
title: "Failed to complete", title: "Failed to complete"
}); });
return; return;
@ -259,7 +267,7 @@ export default function () {
toast({ toast({
description: "Event marked as completed", description: "Event marked as completed",
status: "success", status: "success",
title: "Success", title: "Success"
}); });
const newEventData = eventData; const newEventData = eventData;
@ -272,6 +280,44 @@ export default function () {
setSelectedEvent(""); setSelectedEvent("");
} }
async function markForgotten(eventId: string) {
const forgottenResp = await fetch(
`/api/events-team/events/${eventId}/forgotten`,
{
body: "{}",
headers: {
"content-type": "application/json"
},
method: "POST"
}
);
onForgottenClose();
if (!forgottenResp.ok) {
let msg = "Unknown error";
try {
msg = ((await forgottenResp.json()) as { error: string }).error;
} catch {
}
toast({
description: msg,
status: "error",
title: "Failed to forget"
});
return;
}
const newEventData = eventData;
newEventData[eventData.findIndex((e) => e.id === eventId)].performed_at = 0;
setEventData([...newEventData]);
setSelectedEvent("");
}
return ( return (
<Container maxW="container.lg"> <Container maxW="container.lg">
<Modal isOpen={isOpen} onClose={onClose}> <Modal isOpen={isOpen} onClose={onClose}>
@ -345,20 +391,33 @@ export default function () {
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
<Modal isOpen={isForgottenOpen} onClose={onForgottenClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Mark as Forgotten</ModalHeader>
<ModalCloseButton />
<ModalBody>Are you sure you want to mark this event as forgotten? The creator will be given a 5 point
penalty.</ModalBody>
<ModalFooter>
<Button onClick={onForgottenClose}>Cancel</Button>
<Button colorScheme="blue" ml="8px" onClick={async () => await markForgotten(selectedEvent)}
</ModalFooter>
</ModalContent>
</Modal>
<VStack spacing="8"> <VStack spacing="8">
{eventData {eventData
.map((event) => { .map((event) => {
if (!showOld && event.day < new Date().getUTCDate()) return; if (!showOld && event.day < new Date().getUTCDate()) return;
const eventCreatorName = members.find( const eventCreatorName = members.find(
(member) => member.id === event.created_by, (member) => member.id === event.created_by
)?.name; )?.name;
const eventColors: { [k: string]: string } = { const eventColors: { [k: string]: string } = {
fotd: "cyan", fotd: "cyan",
gamenight: "blue", gamenight: "blue",
rotw: "magenta", rotw: "magenta",
qotd: "#9900FF", qotd: "#9900FF"
}; };
return ( return (
@ -419,16 +478,21 @@ export default function () {
</Button> </Button>
</> </>
) : null} ) : null}
{can_approve && !event.pending && !event.performed_at ? ( {can_approve &&
<Button !event.pending &&
colorScheme="blue" typeof event.performed_at !== "number" ? (
onClick={() => { <>
setSelectedEvent(event.id); <Button
openComplete(); colorScheme="blue"
}} onClick={() => {
> setSelectedEvent(event.id);
Mark as Completed openComplete();
</Button> }}
>
Mark as Completed
</Button>
<Button colorScheme="red">Mark as Forgotten</Button>
</>
) : null} ) : null}
{can_approve && {can_approve &&
!event.pending && !event.pending &&