Display the reservations

geneit_app/src/routes/family/accommodations/AccommodationsReservationsRoute.tsx

@@ -11,7 +11,6 @@ import {
   FormControlLabel,
   FormGroup,
   FormLabel,
-  Typography,
 } from "@mui/material";
 import React from "react";
 import { FamilyApi, FamilyUser } from "../../../api/FamilyApi";
@@ -23,6 +22,7 @@ import { useAlert } from "../../../hooks/context_providers/AlertDialogProvider";
 import { useLoadingMessage } from "../../../hooks/context_providers/LoadingMessageProvider";
 import { useSnackbar } from "../../../hooks/context_providers/SnackbarProvider";
 import { useUpdateAccommodationReservation } from "../../../hooks/context_providers/accommodations/UpdateReservationDialogProvider";
+import { fmtUnixDateFullCalendar } from "../../../utils/time_utils";
 import { AsyncWidget } from "../../../widgets/AsyncWidget";
 import { useFamily } from "../../../widgets/BaseFamilyRoute";
 import { FamilyPageTitle } from "../../../widgets/FamilyPageTitle";
@@ -67,6 +67,24 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
     setUsers(null);
   };
 
+  const visibleReservations = React.useMemo(() => {
+    return reservations?.filter((r) => {
+      if (!showValidated && r.validated === true) return false;
+      if (!showPending && r.validated === null) return false;
+      if (!showRejected && r.validated === false) return false;
+      if (hiddenPeople.has(r.user_id)) return false;
+      if (hiddenAccommodations.has(r.accommodation_id)) return false;
+      return true;
+    });
+  }, [
+    showValidated,
+    showRejected,
+    showPending,
+    hiddenPeople,
+    hiddenAccommodations,
+    reservations,
+  ]);
+
   const onSelect = async (d: DateSelectArg) => {
     try {
       const resa = await updateReservation(
@@ -123,7 +141,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                         onChange={(_ev, v) => setShowValidated(v)}
                       />
                     }
-                    label="Validé"
+                    label="Validées"
                   />
                   <FormControlLabel
                     control={
@@ -132,7 +150,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                         onChange={(_ev, v) => setShowRejected(v)}
                       />
                     }
-                    label="Rejetés"
+                    label="Rejetées"
                   />
                   <FormControlLabel
                     control={
@@ -224,6 +242,25 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                   right: "dayGridMonth,dayGridWeek,listWeek",
                 }}
                 select={onSelect}
+                events={visibleReservations?.map((r) => {
+                  const a = accommodations.accommodations.get(
+                    r.accommodation_id
+                  )!;
+                  const u = users?.find((u) => u.user_id === r.user_id);
+                  return {
+                    title: `${u?.user_name} - ${a.name}`,
+                    start: fmtUnixDateFullCalendar(r.reservation_start),
+                    end: fmtUnixDateFullCalendar(r.reservation_end),
+                    allDay: true,
+                    color: a.color ? "#" + a.color : undefined,
+                    borderColor:
+                      r.validated === true
+                        ? "green"
+                        : r.validated === false
+                        ? "red dotted"
+                        : "grey dotted",
+                  };
+                })}
               />
             </div>
           </div>

geneit_app/src/utils/time_utils.ts

@@ -4,3 +4,23 @@
 export function fmtUnixDate(time: number): string {
   return new Date(time * 1000).toLocaleString("fr-FR");
 }
+
+/**
+ * Get formatted UNIX date for Full Calendar
+ */
+export function fmtUnixDateFullCalendar(time: number): string {
+  const d = new Date(time * 1000);
+
+  const s = `${d.getFullYear()}-${(d.getMonth() + 1)
+    .toString(10)
+    .padStart(2, "0")}-${d.getDate().toString(10).padStart(2, "0")}T${d
+    .getHours()
+    .toString(10)
+    .padStart(2, "0")}:${d.getMinutes().toString(10).padStart(2, "0")}:${d
+    .getSeconds()
+    .toString(10)
+    .padStart(2, "0")}`;
+
+  console.info(d, s);
+  return s;
+}