Group Availability Tab

src/lib/components/availability/PersonalAvailability.svelte

@@ -9,13 +9,11 @@
   import {
     availabilityDates,
     availabilityTimeBlocks,
-    guestSession,
     isEditingAvailability,
     isStateUnsaved,
   } from "$lib/stores/availabilityStores";
   import type { AvailabilityBlockType, SelectionStateType } from "$lib/types/availability";
   import { ZotDate } from "$lib/utils/ZotDate";
-  import { getGeneralAvailability } from "$lib/utils/availability";
   import { cn } from "$lib/utils/utils";
 
   export let columns: number;
@@ -154,17 +152,6 @@
   }
 
   onMount(async () => {
-    $guestSession.meetingId = data.meetingId ?? "";
-
-    const generalAvailability = await getGeneralAvailability(data, $guestSession);
-    const defaultMeetingDates = data.defaultDates.map((item) => new ZotDate(item.date, false, []));
-    ZotDate.initializeAvailabilities(defaultMeetingDates);
-
-    $availabilityDates =
-      generalAvailability && generalAvailability.length > 0
-        ? generalAvailability
-        : defaultMeetingDates;
-
     lastPage = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
   });
 </script>

src/lib/db/migrate.ts

@@ -9,10 +9,12 @@ if (!MIGRATION_DB_URL) {
     "MIGRATION_DB_URL not found. Please ensure you have the MIGRATION_DB_URL variable defined inside of your environment configuration.",
   );
 }
-const migrationClient = postgres(
-  `${MIGRATION_DB_URL}${process.env["STAGE"] === "prod" ? "" : "?search_path=dev"}`,
-  { max: 1, ssl: "prefer" },
-);
+
+const isProd = process.env["STAGE"] === "prod";
+console.log(`Running migrations in ${isProd ? "production" : "development"} mode.`);
+
+const migrationConnectionString = `${MIGRATION_DB_URL}${isProd ? "" : "?search_path=dev"}`;
+const migrationClient = postgres(migrationConnectionString, { max: 1, ssl: "prefer" });
 const db = drizzle(migrationClient);
 
 await migrate(db, {

src/lib/db/schema.ts

@@ -16,7 +16,7 @@ import {
 export const attendanceValues = ["accepted", "maybe", "declined"] as const;
 export type AttendanceValue = (typeof attendanceValues)[number];
 
-export const attendanceEnum = pgEnum("attendance", ["accepted", "maybe", "declined"]);
+export const attendanceEnum = pgEnum("attendance", attendanceValues);
 
 // Members encompasses anyone who uses ZotMeet, regardless of guest or user status.
 export const members = pgTable("members", {

src/lib/stores/availabilityStores.ts

@@ -1,4 +1,4 @@
-import { readable, writable } from "svelte/store";
+import { writable } from "svelte/store";
 
 import type { GuestSession, MemberAvailability } from "./../types/availability";
 
@@ -25,41 +25,9 @@ endTime.subscribe((value) => {
   latestTime = getTimeFromHourMinuteString(value ?? "17:30");
 });
 
-const sampleMembers: MemberAvailability[] = [
-  {
-    name: "Sean Fong",
-    availableBlocks: [[1], [2], [3, 4, 5], [], [], [], []],
-  },
-  {
-    name: "Joe Biden",
-    availableBlocks: [[], [1, 2], [4, 5, 6, 22, 23, 24, 25, 26, 27, 28], [], [], [], []],
-  },
-  {
-    name: "Chuck Norris",
-    availableBlocks: [
-      [4, 5, 6, 7, 8, 9, 10, 11, 20, 21, 22, 23, 24],
-      [3, 4, 5, 6, 7],
-      [4, 5, 6],
-      [],
-      [],
-      [],
-      [],
-    ],
-  },
-  {
-    name: "Dwayne the Rock",
-    availableBlocks: [[], [1, 2, 3, 4, 5], [4, 5, 6, 25, 26, 27, 28], [], [], [], []],
-  },
-  {
-    name: "Kevin Hart",
-    availableBlocks: [[], [1, 2], [26, 27, 28, 29, 30, 31], [], [], [], []],
-  },
-];
-
 export const generateSampleDates = (
   startTime: number = earliestTime,
   endTime: number = latestTime,
-  groupMembers: MemberAvailability[] = sampleMembers,
 ): ZotDate[] => {
   // Placeholder date array from Calendar component
   const selectedCalendarDates: ZotDate[] = [
@@ -74,12 +42,6 @@ export const generateSampleDates = (
 
   ZotDate.initializeAvailabilities(selectedCalendarDates, startTime, endTime, BLOCK_LENGTH);
 
-  groupMembers.forEach(({ availableBlocks }, memberIndex) => {
-    availableBlocks.forEach((availableBlocks, dateIndex) => {
-      selectedCalendarDates[dateIndex].setGroupMemberAvailability(memberIndex, availableBlocks);
-    });
-  });
-
   return selectedCalendarDates;
 };
 
@@ -95,11 +57,9 @@ export const generateTimeBlocks = (startTime: number, endTime: number): number[]
 };
 
 const defaultTimeBlocks = generateTimeBlocks(earliestTime, latestTime);
-export const availabilityDates = writable<ZotDate[]>(
-  generateSampleDates(earliestTime, latestTime, sampleMembers),
-);
+export const availabilityDates = writable<ZotDate[]>(generateSampleDates(earliestTime, latestTime));
 export const availabilityTimeBlocks = writable<number[]>(defaultTimeBlocks);
-export const groupAvailabilities = readable<MemberAvailability[]>(sampleMembers);
+export const groupAvailabilities = writable<MemberAvailability[]>([]);
 
 export const isEditingAvailability = writable<boolean>(false);
 export const isStateUnsaved = writable<boolean>(false);

src/lib/types/availability.ts

@@ -15,7 +15,7 @@ export type SelectionStateType = {
 
 export interface MemberAvailability {
   name: string;
-  availableBlocks: number[][];
+  availableBlocks: boolean[][];
 }
 
 export interface LoginModalProps {

src/lib/utils/ZotDate.ts

@@ -355,7 +355,7 @@ export class ZotDate {
    *
    * e.g. A group member array: `['Sean', 'Collan', 'Joe']`
    *
-   *   `setGroupMemberAvailability(1, [3, 4, 5])` will update availability time blocks 3 - 5
+   *   `setGroupMemberAvailability(1, [false, false, true, true, true])` will update availability time blocks 3 - 5
    *   to indicate Collan is available.
    *   - if Sean was already available on block 3, block 3 will be changed from `[0]` to `[0, 1]`.
    *   - if nobody was already available on block 4, block 4 will be changed from `null` to `[1]`.
@@ -366,8 +366,10 @@ export class ZotDate {
    * @param memberIndex the index of a member in an array
    * @param availableBlocks an array of availability blocks to set that member's availability
    */
-  setGroupMemberAvailability(memberIndex: number, availableBlocks: number[]): void {
-    availableBlocks.forEach((blockIndex) => {
+  setGroupMemberAvailability(memberIndex: number, availableBlocks: boolean[]): void {
+    availableBlocks.forEach((isAvailable, blockIndex) => {
+      if (!isAvailable) return;
+
       if (!this.groupAvailability[blockIndex]) {
         this.groupAvailability[blockIndex] = [memberIndex];
       } else {
@@ -376,6 +378,13 @@ export class ZotDate {
     });
   }
 
+  /**
+   * Resets the group availability array
+   */
+  resetGroupAvailability(): void {
+    this.groupAvailability = [];
+  }
+
   /**
    * Gets the group availability block based on the block index
    * @param index index of the availability block

src/lib/utils/availability.ts

@@ -3,7 +3,7 @@ import type { PageData } from "../../routes/availability/[slug]/$types";
 import { ZotDate } from "./ZotDate";
 
 import type { AvailabilityMeetingDateJoinSchema } from "$lib/db/schema";
-import type { GuestSession } from "$lib/types/availability";
+import type { GuestSession, MemberAvailability } from "$lib/types/availability";
 
 export async function getGuestAvailability(guestSession: GuestSession) {
   const response = await fetch("/api/availability", {
@@ -55,3 +55,16 @@ export const getGeneralAvailability = async (data: PageData, guestSession: Guest
 
   return null;
 };
+
+export function availabilityDatesToBlocks(
+  memberAvailabilities: Record<string, { day: Date; availability_string: string }[]>,
+): MemberAvailability[] {
+  return Object.entries(memberAvailabilities).map(([name, availabilities]) => {
+    return {
+      name,
+      availableBlocks: availabilities.map((availability) => {
+        return availability.availability_string.split("").map((char) => char === "1");
+      }),
+    };
+  });
+}

src/routes/availability/[slug]/+page.server.ts

@@ -15,24 +15,29 @@ import {
   type AvailabilityInsertSchema,
   type AvailabilityMeetingDateJoinSchema,
   type MeetingDateSelectSchema,
+  users,
+  meetings,
+  members,
 } from "$lib/db/schema";
 import type { ZotDate } from "$lib/utils/ZotDate";
 
 export const load: PageServerLoad = (async ({ locals, params }) => {
   const user = locals.user;
+  const meeting_id: string = params?.slug ?? "";
 
   // TODO: If no slug is in the URL (i.e. no meeting ID), we should redirect to an error page
 
   return {
     form: await superValidate(_loginSchema),
-    availability: user ? await getAvailability(user, params?.slug) : null,
-    meetingId: params?.slug as string | undefined,
-    meetingData: await getExistingMeeting(params?.slug),
-    defaultDates: (await _getMeetingDates(params?.slug)) ?? [],
+    availability: user ? await getUserSpecificAvailability(user, meeting_id) : null,
+    groupAvailabilities: await getMeetingMemberAvailabilities(meeting_id),
+    meetingId: meeting_id as string | undefined,
+    meetingData: await getExistingMeeting(meeting_id),
+    defaultDates: (await _getMeetingDates(meeting_id)) ?? [],
   };
 }) satisfies PageServerLoad;
 
-const getAvailability = async (
+const getUserSpecificAvailability = async (
   user: User,
   meetingId: string | undefined,
 ): Promise<AvailabilityMeetingDateJoinSchema[]> => {
@@ -47,6 +52,48 @@ const getAvailability = async (
   return availability.sort((a, b) => (a.meeting_dates.date > b.meeting_dates.date ? 1 : -1));
 };
 
+/**
+ * Get all availabilities of members for a meeting
+ *
+ * @param meetingId
+ * @returns a record of the member name to their availabilities, each sorted by date
+ */
+async function getMeetingMemberAvailabilities(meetingId: string) {
+  const raw_availabilities = await db
+    .select({
+      username: users.displayName,
+      availability_string: availabilities.availability_string,
+      day: meetingDates.date,
+    })
+    .from(availabilities)
+    .innerJoin(meetingDates, eq(availabilities.meeting_day, meetingDates.id))
+    .innerJoin(meetings, eq(meetingDates.meeting_id, meetings.id))
+    .innerJoin(members, eq(availabilities.member_id, members.id))
+    .innerJoin(users, eq(members.id, users.id))
+    .where(eq(meetings.id, meetingId));
+
+  // Group availabilities by user
+  const userAvailabilities = raw_availabilities.reduce(
+    (acc, { username, availability_string, day }) => {
+      if (!acc[username]) {
+        acc[username] = [];
+      }
+
+      acc[username].push({ day, availability_string });
+
+      return acc;
+    },
+    {} as Record<string, { day: Date; availability_string: string }[]>,
+  );
+
+  // Sort availabilities by date
+  for (const username in userAvailabilities) {
+    userAvailabilities[username].sort((a, b) => (a.day < b.day ? -1 : 1));
+  }
+
+  return userAvailabilities;
+}
+
 export const actions: Actions = {
   save: save,
 };

src/routes/availability/[slug]/+page.svelte

@@ -11,13 +11,15 @@
     generateSampleDates,
     generateTimeBlocks,
     getTimeFromHourMinuteString,
+    groupAvailabilities,
     guestSession,
     isEditingAvailability,
     isStateUnsaved,
   } from "$lib/stores/availabilityStores";
   import { endTime, startTime } from "$lib/stores/meetingSetupStores";
   import type { HourMinuteString } from "$lib/types/chrono";
-  import { getGeneralAvailability } from "$lib/utils/availability";
+  import { ZotDate } from "$lib/utils/ZotDate";
+  import { availabilityDatesToBlocks, getGeneralAvailability } from "$lib/utils/availability";
   import { cn } from "$lib/utils/utils";
   import CancelCircleOutline from "~icons/mdi/cancel-circle-outline";
   import CheckboxMarkerdCircleOutlineIcon from "~icons/mdi/checkbox-marked-circle-outline";
@@ -51,22 +53,61 @@
     $isStateUnsaved = false;
   };
 
-  let innerWidth = 0;
-  $: mobileView = innerWidth < 768;
+  const updatePersonalAvailability = async () => {
+    if (data.meetingId) {
+      $guestSession.meetingId = data.meetingId;
+    }
+
+    const generalAvailability = await getGeneralAvailability(data, $guestSession);
+
+    const defaultMeetingDates = data.defaultDates.map((item) => new ZotDate(item.date, false, []));
+    ZotDate.initializeAvailabilities(defaultMeetingDates);
+
+    $availabilityDates =
+      generalAvailability && generalAvailability.length > 0
+        ? generalAvailability
+        : defaultMeetingDates;
+  };
+
+  const updateGroupAvailability = () => {
+    const groupAvailabilitiesBlocks = availabilityDatesToBlocks(data.groupAvailabilities);
+
+    $availabilityDates.forEach((date) => date.resetGroupAvailability());
+
+    groupAvailabilitiesBlocks.forEach(({ availableBlocks }, memberIndex) => {
+      availableBlocks.forEach((blocks, dateIndex) => {
+        $availabilityDates[dateIndex].setGroupMemberAvailability(memberIndex, blocks);
+      });
+    });
 
+    $groupAvailabilities = groupAvailabilitiesBlocks;
+  };
+
+  let innerWidth = 0;
   let form: HTMLFormElement;
 
-  onMount(async () => {
-    $startTime = data.meetingData.from_time as HourMinuteString;
-    $endTime = data.meetingData.to_time as HourMinuteString;
-  });
+  $: mobileView = innerWidth < 768;
+
+  $: {
+    if (data) {
+      updateGroupAvailability();
+    }
+  }
 
   $: availabilityTimeBlocks.set(
     generateTimeBlocks(
       getTimeFromHourMinuteString($startTime),
       getTimeFromHourMinuteString($endTime),
     ),
   );
+
+  onMount(async () => {
+    $startTime = data.meetingData.from_time as HourMinuteString;
+    $endTime = data.meetingData.to_time as HourMinuteString;
+
+    await updatePersonalAvailability();
+    updateGroupAvailability();
+  });
 </script>
 
 <svelte:window bind:innerWidth />