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

Make event calendar display by what is already booked

Browse Source
This commit is contained in:
Regalijan 2024-01-23 20:32:08 -05:00
parent 58f56b7a7d
commit 34b46e9fce
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 20 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,57 +31,41 @@ export async function loader({ context }: { context: RequestContext }) {
} }
export default function () { export default function () {
const data = useLoaderData<typeof loader>(); const data: { [k: string]: any }[] = useLoaderData<typeof loader>();
const daysInThisMonth = new Date().setUTCDate(0); const eventCards: ReactNode[] = [];
const dayCards: ReactNode[] = [];
for (let i = 0; i < daysInThisMonth; i++) { for (const event of data) {
const dayData: { [k: string]: any }[] = data.filter( eventCards.push(
(row) => row.day === i + 1, <Card w="100%">
);
if (!dayData.length) continue;
const fotd = dayData.find((d) => d.type === "fotd");
const gamenight = dayData.find((d) => d.type === "gamenight");
const qotd = dayData.find((d) => d.type === "qotd");
const dayCard = (
<Card width="100%">
<CardHeader>
<Heading size="md">
{new Date(
dayData[0].year,
dayData[0].month,
dayData[0].day,
).toDateString()}
</Heading>
</CardHeader>
<CardBody> <CardBody>
<Stack divider={<StackDivider />} spacing={4}> <Stack divider={<StackDivider />} spacing="4">
<Box> <Box>
<Heading size="xs">FACT OF THE DAY</Heading> <Heading size="sm">Date</Heading>
<Text pt="2">{fotd ? "" : "Not"} Booked</Text> <Text fontSize="sm" pt="2">
{event.year}-{event.month}-{event.day}
</Text>
</Box> </Box>
<Box> <Box>
<Heading size="xs">GAMENIGHT</Heading> <Heading size="sm">Event Type</Heading>
<Text pt="2">{gamenight ? "" : "Not"} Booked</Text> <Text fontSize="sm" pt="2">
{event.type.toUpperCase()}
</Text>
</Box> </Box>
<Box> <Box>
<Heading size="xs">QUESTION OF THE DAY</Heading> <Heading size="sm">Host</Heading>
<Text pt="2">{qotd ? "" : "Not"} Booked</Text> <Text fontSize="sm" pt="2">
{event.created_by}
</Text>
</Box> </Box>
</Stack> </Stack>
</CardBody> </CardBody>
</Card> </Card>,
); );
dayCards.push(dayCard);
} }
return ( return (
<Container maxW="container.lg"> <Container maxW="container.lg">
<VStack>{dayCards}</VStack> <VStack spacing="8">{eventCards}</VStack>
</Container> </Container>
); );
} }