Delete existing calendar, we're doing something new and less awful.
This commit is contained in:
@@ -1,198 +0,0 @@
|
||||
import calendarStyles from "react-big-calendar/lib/css/react-big-calendar.css";
|
||||
import calendarOverrides from "../styles/calendar.css";
|
||||
import eventStyles from "../styles/events-team.css";
|
||||
import { Calendar, dayjsLocalizer } from "react-big-calendar";
|
||||
import dayjs from "dayjs";
|
||||
import { type LinksFunction } from "@remix-run/cloudflare";
|
||||
import {
|
||||
Button,
|
||||
Container,
|
||||
Flex,
|
||||
Heading,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Popover,
|
||||
PopoverArrow,
|
||||
PopoverBody,
|
||||
PopoverCloseButton,
|
||||
PopoverContent,
|
||||
PopoverHeader,
|
||||
PopoverTrigger,
|
||||
Spacer,
|
||||
Text,
|
||||
useDisclosure,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import { useLoaderData } from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
import utc from "dayjs/plugin/utc.js";
|
||||
import { EtMember } from "../../generated/prisma/client.js";
|
||||
|
||||
export const links: LinksFunction = () => {
|
||||
return [
|
||||
{ href: calendarStyles, rel: "stylesheet" },
|
||||
{ href: eventStyles, rel: "stylesheet" },
|
||||
{ href: calendarOverrides, rel: "stylesheet" },
|
||||
];
|
||||
};
|
||||
|
||||
export async function loader({ context }: { context: RequestContext }) {
|
||||
if (!context.data.current_user)
|
||||
throw new Response(null, {
|
||||
status: 401,
|
||||
});
|
||||
|
||||
if (
|
||||
![1 << 3, 1 << 4, 1 << 12].find(
|
||||
(p) => context.data.current_user.permissions & p,
|
||||
)
|
||||
)
|
||||
throw new Response(null, {
|
||||
status: 403,
|
||||
});
|
||||
|
||||
const now = new Date();
|
||||
const eventsData = await context.data.prisma.event.findMany({
|
||||
orderBy: {
|
||||
day: "asc",
|
||||
},
|
||||
select: {
|
||||
answer: true,
|
||||
approved: true,
|
||||
created_by: true,
|
||||
day: true,
|
||||
details: true,
|
||||
id: true,
|
||||
month: true,
|
||||
pending: true,
|
||||
performed_at: true,
|
||||
reached_minimum_player_count: true,
|
||||
type: true,
|
||||
year: true,
|
||||
},
|
||||
where: {
|
||||
month: now.getUTCMonth() + 1,
|
||||
year: now.getUTCFullYear(),
|
||||
},
|
||||
});
|
||||
|
||||
const calendarData = eventsData.map((e) => {
|
||||
return {
|
||||
id: e.id,
|
||||
title: (e.type as string).toUpperCase(),
|
||||
allDay: true,
|
||||
// A Date object will not survive being passed to the client
|
||||
start: `${e.year}-${(e.month as number).toString().padStart(2, "0")}-${(e.day as number).toString().padStart(2, "0")}T00:00:00.000Z`,
|
||||
end: `${e.year}-${(e.month as number).toString().padStart(2, "0")}-${(e.day as number).toString().padStart(2, "0")}T00:00:00.000Z`,
|
||||
};
|
||||
});
|
||||
|
||||
const memberData = await context.data.prisma.$queryRaw<
|
||||
EtMember[]
|
||||
>`SELECT id, name FROM et_members WHERE id IN (SELECT created_by FROM events WHERE month = ${now.getUTCMonth() + 1} AND year = ${now.getUTCFullYear()});`;
|
||||
|
||||
return {
|
||||
calendarData,
|
||||
canManage: Boolean(
|
||||
[1 << 4, 1 << 12].find((p) => context.data.current_user.permissions & p),
|
||||
),
|
||||
eventList: eventsData,
|
||||
memberData,
|
||||
};
|
||||
}
|
||||
|
||||
export default function () {
|
||||
const data = useLoaderData<typeof loader>();
|
||||
const [eventData, setEventData] = useState({} as { [k: string]: any });
|
||||
const { isOpen, onClose, onOpen } = useDisclosure();
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
return (
|
||||
<Container maxW="container.lg" h="600px">
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Event Info</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Heading size="md">Host</Heading>
|
||||
<Text>
|
||||
{data.memberData.find((m) => m.id === eventData.created_by)?.name}
|
||||
</Text>
|
||||
<br />
|
||||
<Heading size="md">Event Type</Heading>
|
||||
<Text>{eventData?.type?.toUpperCase()}</Text>
|
||||
<br />
|
||||
<Heading size="md">Details</Heading>
|
||||
<Text>{eventData?.details}</Text>
|
||||
<br />
|
||||
{eventData?.type === "rotw" ? (
|
||||
<>
|
||||
<Heading size="md">Answer</Heading>
|
||||
<Text>{eventData.answer}</Text>
|
||||
</>
|
||||
) : null}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button onClick={onClose}>Close</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<Calendar
|
||||
endAccessor={(event) => new Date(event.end)}
|
||||
events={data.calendarData}
|
||||
localizer={dayjsLocalizer(dayjs)}
|
||||
onSelectEvent={(e) => {
|
||||
setEventData(
|
||||
data.eventList.find((ev) => ev.id === e.id) as { [k: string]: any },
|
||||
);
|
||||
onOpen();
|
||||
}}
|
||||
popup
|
||||
startAccessor={(event) => new Date(event.start)}
|
||||
style={{ height: 500 }}
|
||||
toolbar={false}
|
||||
views={["month"]}
|
||||
/>
|
||||
<Flex mt="16px">
|
||||
<Button as="a" colorScheme="blue" href="/book-event">
|
||||
Book Event
|
||||
</Button>
|
||||
<Spacer />
|
||||
{data.canManage ? (
|
||||
<Popover placement="top-end">
|
||||
<PopoverTrigger>
|
||||
<Button colorScheme="blue">Management</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent>
|
||||
<PopoverHeader fontWeight="semibold">
|
||||
Management Tools
|
||||
</PopoverHeader>
|
||||
<PopoverArrow />
|
||||
<PopoverCloseButton />
|
||||
<PopoverBody>
|
||||
<VStack>
|
||||
<Button as="a" href="/events-team/historical" w="100%">
|
||||
Historical Events
|
||||
</Button>
|
||||
<Button as="a" href="/et-members" w="100%">
|
||||
Member Management
|
||||
</Button>
|
||||
<Button as="a" href="/events-team/outstanding" w="100%">
|
||||
Outstanding Events
|
||||
</Button>
|
||||
</VStack>
|
||||
</PopoverBody>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : null}
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.rbc-show-more {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
.rbc-off-range-bg {
|
||||
background: #12161f;
|
||||
}
|
||||
|
||||
.rbc-overlay-header {
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.rbc-today {
|
||||
background-color: #747bff;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user