Add an accommodations reservations module #188

Merged
pierre merged 81 commits from accomodation_module into master 2024-06-22 21:30:26 +00:00
Showing only changes of commit 71abecae4e - Show all commits

View File

@ -11,6 +11,9 @@ import {
FormControlLabel,
FormGroup,
FormLabel,
Popover,
Typography,
fabClasses,
} from "@mui/material";
import React from "react";
import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
@ -55,6 +58,17 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
Set<number>
>(new Set());
const eventPopupAnchor = React.useRef<HTMLDivElement>(null);
const [activeEvent, setActiveEvent] = React.useState<
| undefined
| {
x: number;
y: number;
w: number;
h: number;
}
>();
const load = async () => {
setReservations(
await AccommodationsReservationsApi.FullListOfFamily(family.family)
@ -113,6 +127,8 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
};
const onEventClick = (ev: EventClickArg) => {
const loc = ev.el.getBoundingClientRect();
setActiveEvent({ x: loc.left, y: loc.top, w: loc.width, h: loc.height });
console.log(ev);
};
@ -271,6 +287,33 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
})}
/>
</div>
{/* Calendar event popover */}
<div
ref={eventPopupAnchor}
id="active-event-anchor"
style={{
position: "fixed",
top: activeEvent?.y + "px",
left: activeEvent?.x + "px",
width: activeEvent?.w + "px",
height: activeEvent?.h + "px",
backgroundColor: "pink",
}}
></div>
<Popover
open={activeEvent !== undefined}
anchorEl={eventPopupAnchor.current}
onClose={() => {
setActiveEvent(undefined);
}}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>
</div>
)}
/>