added exception dates to calendar

JulienR1 · Mar 2, 2025 · 64b0f5e · 64b0f5e
1 parent 27fae14
commit 64b0f5e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 12 deletions.
diff --git a/packages/common/src/models/activities.ts b/packages/common/src/models/activities.ts
@@ -1,16 +1,21 @@
 import { z } from "zod";
 
-export const Time = z.object({ hour: z.number(), minute: z.number() })
+export const Time = z.object({ hour: z.number(), minute: z.number() });
 
 export const Activity = z.object({
-    type: z.number(),
-    title: z.string(),
-    subtitle: z.string().optional(),
-    time: z.object({ start: Time, end: Time }),
-    lessons: z.object({ count: z.number(), first: z.date(), last: z.date() }),
-    price: z.number(),
-    color: z.string()
-})
+  type: z.number(),
+  title: z.string(),
+  subtitle: z.string().optional(),
+  time: z.object({ start: Time, end: Time }),
+  lessons: z.object({
+    count: z.number(),
+    first: z.date(),
+    last: z.date(),
+    exceptions: z.array(z.date()),
+  }),
+  price: z.number(),
+  color: z.string(),
+});
 
-export type Time = z.infer<typeof Time>
-export type Activity = z.infer<typeof Activity>
+export type Time = z.infer<typeof Time>;
+export type Activity = z.infer<typeof Activity>;
diff --git a/packages/web/src/components/Calendar.astro b/packages/web/src/components/Calendar.astro
@@ -2,7 +2,7 @@
 import type { Activity, Time } from "common";
 import { gcd } from "../lib/maths";
 import { cn, dark, contrast } from "../lib/utils";
-import { dateFormatter } from "../lib/formatters";
+import { dateFormatter, listFormatter } from "../lib/formatters";
 import { weekdays } from "../lib/constants";
 
 interface Props {
@@ -209,6 +209,14 @@ function shiftWeekday(weekday: number) {
                             data-amount={activity.price.toFixed(2)}
                             data-lessons={activity.lessons.count}
                             data-weekday={weekdays[weekday]}
+                            data-except-dates={listFormatter.format(
+                                activity.lessons.exceptions
+                                    .sort((a, b) => a.getTime() - b.getTime())
+                                    .map(
+                                        (date) =>
+                                            `<b class="text-nowrap">${dateFormatter.format(date)}</b>`,
+                                    ),
+                            )}
                         >
                             <span class="hidden sm:block text-xs whitespace-nowrap overflow-hidden">
                                 {formatTime(activity.time.start)} -{" "}
@@ -303,6 +311,19 @@ function shiftWeekday(weekday: number) {
                         <span class="material-symbols-outlined">sell</span>
                         <span id="dialog-price"></span>
                     </p>
+                    <p
+                        id="dialog-except-dates"
+                        class="items-center text-sm gap-2 hidden data-[visible=true]:flex"
+                        data-visible="false"
+                    >
+                        <span class="material-symbols-outlined">
+                            do_not_disturb_on
+                        </span>
+                        <span class="sm:max-w-56 ml-2 -indent-2">
+                            Hormis ces dates:
+                            <span id="dialog-except-dates-list"></span>{"."}
+                        </span>
+                    </p>
                 </div>
             </div>
         </div>
@@ -321,6 +342,10 @@ function shiftWeekday(weekday: number) {
     const time = document.getElementById("dialog-time")!;
     const dateRange = document.getElementById("dialog-date-range")!;
     const price = document.getElementById("dialog-price")!;
+    const exceptDates = document.getElementById("dialog-except-dates")!;
+    const exceptDatesList = document.getElementById(
+        "dialog-except-dates-list",
+    )!;
 
     const calendar = document.getElementById("calendar")!;
     const activities = calendar.querySelectorAll<HTMLDivElement>(".activity");
@@ -343,6 +368,10 @@ function shiftWeekday(weekday: number) {
         time.innerText = `${dataset.weekday}, de ${dataset.startTime} à ${dataset.endTime}`;
         dateRange.innerText = `${dataset.firstLesson} au ${dataset.lastLesson}`;
         price.innerText = `${dataset.amount}$ pour ${dataset.lessons} cours`;
+
+        const exceptions = dataset.exceptDates ?? "";
+        exceptDates.dataset.visible = (exceptions.length > 0).toString();
+        exceptDatesList.innerHTML = exceptions;
     }
 
     function position(activity: HTMLDivElement, xOffset = 0) {

diff --git a/packages/web/src/lib/formatters.ts b/packages/web/src/lib/formatters.ts
@@ -1,3 +1,5 @@
 export const dateFormatter = new Intl.DateTimeFormat("fr-CA", {
     dateStyle: "long",
 });
+
+export const listFormatter = new Intl.ListFormat("fr-CA");
diff --git a/packages/web/src/pages/horaire.astro b/packages/web/src/pages/horaire.astro
@@ -19,6 +19,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#ff00ff",
@@ -34,6 +35,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#0ff0ff",
@@ -49,6 +51,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#f0f0ff",
@@ -67,6 +70,7 @@ const activities: Activity[][] = [
                 count: 2,
                 first: new Date(2025, 2, 2),
                 last: new Date(2025, 3, 4),
+                exceptions: [],
             },
             price: 28,
             color: "#12fa83",
@@ -83,6 +87,7 @@ const activities: Activity[][] = [
                 count: 2,
                 first: new Date(2025, 2, 2),
                 last: new Date(2025, 3, 4),
+                exceptions: [],
             },
             price: 28,
             color: "#fa1283",
@@ -100,6 +105,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#0f0f00",
@@ -115,6 +121,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#f0f000",
@@ -130,6 +137,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#0fff30",
@@ -145,6 +153,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#ffff00",
@@ -164,6 +173,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [new Date(2025, 7, 1), new Date(2025, 6, 24)],
             },
             price: 120,
             color: "#ff0000",
@@ -179,6 +189,7 @@ const activities: Activity[][] = [
                 count: 8,
                 first: new Date(2025, 1, 6),
                 last: new Date(2025, 5, 5),
+                exceptions: [],
             },
             price: 120,
             color: "#0ff000",