Add forgotten event modal
This commit is contained in:
@ -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 &&
|
||||||
|
Reference in New Issue
Block a user