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

Add show old switch

Browse Source
This commit is contained in:
Regalijan 2024-04-01 18:19:58 -04:00
parent ed331a6a56
commit c968384827
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 140 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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