Add show old switch
This commit is contained in:
parent
ed331a6a56
commit
c968384827
GPG Key ID:
5D4196DA269EF520
@ -6,6 +6,8 @@ import {
|
||||
CardFooter,
|
||||
Container,
|
||||
Flex,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Heading,
|
||||
Link,
|
||||
Modal,
|
||||
@ -17,6 +19,7 @@ import {
|
||||
ModalOverlay,
|
||||
Stack,
|
||||
StackDivider,
|
||||
Switch,
|
||||
Text,
|
||||
useDisclosure,
|
||||
useToast,
|
||||
@ -102,6 +105,7 @@ export default function () {
|
||||
} = useDisclosure();
|
||||
const toast = useToast();
|
||||
const [selectedEvent, setSelectedEvent] = useState("");
|
||||
const [showOld, setShowOld] = useState(false);
|
||||
|
||||
async function decide(approved: boolean, eventId: string) {
|
||||
const decisionResp = await fetch(
|
||||
@ -338,136 +342,154 @@ export default function () {
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<VStack spacing="8">
|
||||
{eventData.map((event) => {
|
||||
const eventCreatorName = members.find(
|
||||
(member) => member.id === event.created_by,
|
||||
)?.name;
|
||||
{eventData
|
||||
.map((event) => {
|
||||
if (!showOld && event.day < new Date().getUTCDate()) return;
|
||||
|
||||
const eventColors: { [k: string]: string } = {
|
||||
fotd: "cyan",
|
||||
gamenight: "blue",
|
||||
rotw: "magenta",
|
||||
qotd: "#9900FF",
|
||||
};
|
||||
const eventCreatorName = members.find(
|
||||
(member) => member.id === event.created_by,
|
||||
)?.name;
|
||||
|
||||
return (
|
||||
<Card w="100%">
|
||||
<CardBody>
|
||||
<Stack divider={<StackDivider />} spacing="4">
|
||||
<Box>
|
||||
<Heading size="sm">Date</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.year}-{event.month}-{event.day}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading size="sm">Event Type</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.type.toUpperCase()}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading size="sm">Event Details</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.details}
|
||||
</Text>
|
||||
</Box>
|
||||
{event.type === "rotw" ? (
|
||||
const eventColors: { [k: string]: string } = {
|
||||
fotd: "cyan",
|
||||
gamenight: "blue",
|
||||
rotw: "magenta",
|
||||
qotd: "#9900FF",
|
||||
};
|
||||
|
||||
return (
|
||||
<Card w="100%">
|
||||
<CardBody>
|
||||
<Stack divider={<StackDivider />} spacing="4">
|
||||
<Box>
|
||||
<Heading size="sm">Riddle Answer</Heading>
|
||||
<Heading size="sm">Date</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.answer}
|
||||
{event.year}-{event.month}-{event.day}
|
||||
</Text>
|
||||
</Box>
|
||||
) : null}
|
||||
<Box>
|
||||
<Heading size="sm">Host</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{eventCreatorName
|
||||
? `${eventCreatorName} (${event.created_by})`
|
||||
: event.created_by}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Flex gap="8px" mr="8px">
|
||||
{can_approve && event.pending ? (
|
||||
<>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
onClick={async () => await decide(false, event.id)}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
<Box>
|
||||
<Heading size="sm">Event Type</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.type.toUpperCase()}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading size="sm">Event Details</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.details}
|
||||
</Text>
|
||||
</Box>
|
||||
{event.type === "rotw" ? (
|
||||
<Box>
|
||||
<Heading size="sm">Riddle Answer</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.answer}
|
||||
</Text>
|
||||
</Box>
|
||||
) : null}
|
||||
<Box>
|
||||
<Heading size="sm">Host</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{eventCreatorName
|
||||
? `${eventCreatorName} (${event.created_by})`
|
||||
: event.created_by}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Flex gap="8px" mr="8px">
|
||||
{can_approve && event.pending ? (
|
||||
<>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
onClick={async () => await decide(false, event.id)}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={async () => await decide(true, event.id)}
|
||||
>
|
||||
Approve
|
||||
</Button>
|
||||
</>
|
||||
) : null}
|
||||
{can_approve && !event.pending && !event.performed_at ? (
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={async () => await decide(true, event.id)}
|
||||
onClick={() => {
|
||||
setSelectedEvent(event.id);
|
||||
openComplete();
|
||||
}}
|
||||
>
|
||||
Approve
|
||||
Mark as Completed
|
||||
</Button>
|
||||
</>
|
||||
) : null}
|
||||
{can_approve && !event.pending && !event.performed_at ? (
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={() => {
|
||||
setSelectedEvent(event.id);
|
||||
openComplete();
|
||||
}}
|
||||
>
|
||||
Mark as Completed
|
||||
</Button>
|
||||
) : null}
|
||||
{can_approve &&
|
||||
!event.pending &&
|
||||
event.performed_at &&
|
||||
event.type === "rotw" &&
|
||||
!event.answered_at ? (
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={() => {
|
||||
setSelectedEvent(event.id);
|
||||
openAnswered();
|
||||
}}
|
||||
>
|
||||
Mark as Solved
|
||||
</Button>
|
||||
) : null}
|
||||
{can_approve &&
|
||||
event.approved &&
|
||||
event.type === "gamenight" &&
|
||||
event.performed_at &&
|
||||
!event.reached_minimum_player_count ? (
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={() => {
|
||||
setSelectedEvent(event.id);
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
Certify Game Night
|
||||
</Button>
|
||||
) : null}
|
||||
</Flex>
|
||||
<Text alignSelf="center" fontSize="sm">
|
||||
Status:{" "}
|
||||
{event.pending
|
||||
? "Pending"
|
||||
: event.approved
|
||||
? "Approved"
|
||||
: "Denied"}
|
||||
</Text>
|
||||
<span
|
||||
className="dot"
|
||||
style={{ backgroundColor: eventColors[event.type] }}
|
||||
></span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
) : null}
|
||||
{can_approve &&
|
||||
!event.pending &&
|
||||
event.approved &&
|
||||
event.performed_at &&
|
||||
event.type === "rotw" &&
|
||||
!event.answered_at ? (
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={() => {
|
||||
setSelectedEvent(event.id);
|
||||
openAnswered();
|
||||
}}
|
||||
>
|
||||
Mark as Solved
|
||||
</Button>
|
||||
) : null}
|
||||
{can_approve &&
|
||||
event.approved &&
|
||||
event.type === "gamenight" &&
|
||||
event.performed_at &&
|
||||
!event.reached_minimum_player_count ? (
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
onClick={() => {
|
||||
setSelectedEvent(event.id);
|
||||
onOpen();
|
||||
}}
|
||||
>
|
||||
Certify Game Night
|
||||
</Button>
|
||||
) : null}
|
||||
</Flex>
|
||||
<Text alignSelf="center" fontSize="sm">
|
||||
Status:{" "}
|
||||
{event.pending
|
||||
? "Pending"
|
||||
: event.approved
|
||||
? "Approved"
|
||||
: "Denied"}
|
||||
</Text>
|
||||
<span
|
||||
className="dot"
|
||||
style={{ backgroundColor: eventColors[event.type] }}
|
||||
></span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
})
|
||||
.filter((e) => e)}
|
||||
</VStack>
|
||||
<VStack alignItems="start" gap="8px" my="16px">
|
||||
<FormControl>
|
||||
<FormLabel
|
||||
htmlFor="show-old-events"
|
||||
mb="0"
|
||||
onChange={() => {
|
||||
setShowOld(true);
|
||||
setEventData([...eventData]);
|
||||
}}
|
||||
>
|
||||
Show old events
|
||||
</FormLabel>
|
||||
<Switch id="show-old-events" />
|
||||
</FormControl>
|
||||
<Link color="#646cff" href="/book-event" mt="16px" target="_blank">
|
||||
Book an Event
|
||||
</Link>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user