Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add show old switch
  • Loading branch information
@regalijan
regalijan committed Apr 1, 2024
1 parent ed331a6 commit c968384
Showing 1 changed file with 139 additions and 117 deletions.
256 changes: 139 additions & 117 deletions app/routes/events-team.tsx
View file
Expand Up @@ -6,6 +6,8 @@ import {
CardFooter,
Container,
Flex,
FormControl,
FormLabel,
Heading,
Link,
Modal,
Expand All @@ -17,6 +19,7 @@ import {
ModalOverlay,
Stack,
StackDivider,
Switch,
Text,
useDisclosure,
useToast,
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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;

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">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" ? (
{eventData
.map((event) => {
if (!showOld && event.day < new Date().getUTCDate()) return;

const eventCreatorName = members.find(
(member) => member.id === event.created_by,
)?.name;

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 ? (
<>
<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={() => {
setSelectedEvent(event.id);
openComplete();
}}
>
Mark as Completed
</Button>
) : null}
{can_approve &&
!event.pending &&
event.approved &&
event.performed_at &&
event.type === "rotw" &&
!event.answered_at ? (
<Button
colorScheme="red"
onClick={async () => await decide(false, event.id)}
colorScheme="blue"
onClick={() => {
setSelectedEvent(event.id);
openAnswered();
}}
>
Reject
Mark as Solved
</Button>
) : null}
{can_approve &&
event.approved &&
event.type === "gamenight" &&
event.performed_at &&
!event.reached_minimum_player_count ? (
<Button
colorScheme="blue"
onClick={async () => await decide(true, event.id)}
onClick={() => {
setSelectedEvent(event.id);
onOpen();
}}
>
Approve
Certify Game Night
</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}
</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>
Expand Down

0 comments on commit c968384

Please sign in to comment.