Add an accommodations reservations module #188
@ -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>
|
||||
)}
|
||||
/>
|
||||
|
Loading…
Reference in New Issue
Block a user