Can middle day reservations

geneit_app/src/dialogs/accommodations/UpdateReservationDialog.tsx

@@ -137,6 +137,7 @@ export function UpdateReservationDialog(p: {
             });
           }}
           minDate={Math.floor(new Date().getTime() / 1000) - 3600 * 24 * 60}
+          canSetMiddleDay
         />
 
         <PropDateInput
@@ -150,6 +151,7 @@ export function UpdateReservationDialog(p: {
             });
           }}
           minDate={reservation?.start}
+          canSetMiddleDay
         />
 
         {conflicts && conflicts.length > 0 && (

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

@@ -139,6 +139,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                       <Checkbox
                         checked={showValidated}
                         onChange={(_ev, v) => setShowValidated(v)}
+                        color="success"
                       />
                     }
                     label="Validées"
@@ -148,6 +149,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                       <Checkbox
                         checked={showRejected}
                         onChange={(_ev, v) => setShowRejected(v)}
+                        color="error"
                       />
                     }
                     label="Rejetées"
@@ -157,6 +159,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                       <Checkbox
                         checked={showPending}
                         onChange={(_ev, v) => setShowPending(v)}
+                        color="info"
                       />
                     }
                     label="En attente de validation"
@@ -239,7 +242,7 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                 headerToolbar={{
                   left: "prev,next today",
                   center: "title",
-                  right: "dayGridMonth,dayGridWeek,listWeek",
+                  right: "dayGridMonth,dayGridWeek,dayGridDay,listWeek",
                 }}
                 select={onSelect}
                 events={visibleReservations?.map((r) => {
@@ -251,7 +254,6 @@ export function AccommodationsReservationsRoute(): React.ReactElement {
                     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

geneit_app/src/utils/time_utils.ts

@@ -21,6 +21,5 @@ export function fmtUnixDateFullCalendar(time: number): string {
     .toString(10)
     .padStart(2, "0")}`;
 
-  console.info(d, s);
   return s;
 }

geneit_app/src/widgets/forms/PropDateInput.tsx

@@ -5,6 +5,7 @@ import dayjs from "dayjs";
 import "dayjs/locale/fr";
 import { fmtUnixDate } from "../../utils/time_utils";
 import { PropEdit } from "./PropEdit";
+import { Checkbox, FormControlLabel } from "@mui/material";
 
 export function PropDateInput(p: {
   editable: boolean;
@@ -14,7 +15,17 @@ export function PropDateInput(p: {
   lastSecOfDay?: boolean;
   minDate?: number;
   maxDate?: number;
+  canSetMiddleDay?: boolean;
 }): React.ReactElement {
+  // Check for mid-day value
+  let isMidDay = false;
+  if (p.value) {
+    const d = new Date(p.value * 1000);
+    isMidDay =
+      d.getHours() === 12 && d.getMinutes() === 0 && d.getSeconds() === 0;
+  }
+
+  // Shift value
   let shiftV = p.value;
   if (shiftV && p.lastSecOfDay) {
     const d = new Date(shiftV * 1000);
@@ -39,22 +50,55 @@ export function PropDateInput(p: {
   const maxDate = p.maxDate ? dayjs(new Date(p.maxDate * 1000)) : undefined;
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
-      <DatePicker
-        label={p.label}
-        value={value}
-        onChange={(v) => {
-          if (v && p.lastSecOfDay) {
-            v.set("hours", 23);
-            v.set("minutes", 59);
-            v.set("seconds", 59);
-          }
-          p.onChange?.(v ? v.unix() : undefined);
-        }}
-        minDate={minDate}
-        maxDate={maxDate}
-      />
+    <>
       <div style={{ height: "10px" }}></div>
-    </LocalizationProvider>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
+        <DatePicker
+          label={p.label}
+          value={value}
+          onChange={(v) => {
+            if (v && p.lastSecOfDay) {
+              v = v.set("hours", 23);
+              v = v.set("minutes", 59);
+              v = v.set("seconds", 59);
+            }
+            p.onChange?.(v ? v.unix() : undefined);
+          }}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </LocalizationProvider>
+      {p.canSetMiddleDay && (
+        <FormControlLabel
+          disabled={!p.value}
+          control={
+            <Checkbox
+              checked={isMidDay}
+              onChange={(_ev, midDay) => {
+                let v = value;
+                if (midDay) {
+                  v = v.set("hours", 12);
+                  v = v.set("minutes", 0);
+                  v = v.set("seconds", 0);
+                } else if (p.lastSecOfDay) {
+                  v = v.set("hours", 23);
+                  v = v.set("minutes", 59);
+                  v = v.set("seconds", 59);
+                } else {
+                  v = v.set("hours", 0);
+                  v = v.set("minutes", 0);
+                  v = v.set("seconds", 0);
+                }
+                console.log(midDay, v, v.get("hours"));
+
+                p.onChange(v.unix());
+              }}
+            />
+          }
+          label="Mi-journée"
+        />
+      )}
+      <div style={{ height: "30px" }}></div>
+    </>
   );
 }