Skip to content

Commit

Permalink
feat: read meeting data from db (#105)
Browse files Browse the repository at this point in the history
* fix: πŸ› correct type import

* feat: ✨ read time start and end from db

* fix: πŸ› remove guestForm from pageData, correct type

* feat: ✨ update data on mount

* feat: ✨ read meeting name from db
  • Loading branch information
KevinWu098 authored May 21, 2024
1 parent 98e939f commit d7919d5
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 22 deletions.
6 changes: 3 additions & 3 deletions src/lib/components/availability/LoginModal.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import type { ActionResult } from "@sveltejs/kit";
import { superForm } from "sveltekit-superforms/client";
import type { PageData } from "../../../routes/availability/$types";
import type { PageData } from "../../../routes/availability/[slug]/$types";
import { deserialize } from "$app/forms";
import { userSchema } from "$lib/config/zod-schemas";
Expand Down Expand Up @@ -87,7 +87,7 @@
$guestSession = {
guestName: guestData.data?.username,
meetingId: data.meetingId,
meetingId: data.meetingId ?? "",
};
$isEditingAvailability = false;
Expand Down Expand Up @@ -182,7 +182,7 @@
<form
bind:this={guestForm}
class="flex-center w-full grow flex-col items-center space-y-4 md:w-[250px]"
on:submit|preventDefault={() => handleGuestSubmit(data.meetingId)}
on:submit|preventDefault={() => handleGuestSubmit(data.meetingId ?? "")}
>
{#if formState === "failure"}
<aside class="variant-filled-error alert">
Expand Down
9 changes: 6 additions & 3 deletions src/lib/components/availability/PersonalAvailability.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
import type { PageData } from "../../../routes/availability/$types";
import type { PageData } from "../../../routes/availability/[slug]/$types";
import LoginFlow from "./LoginModal.svelte";
Expand All @@ -26,7 +26,7 @@
itemsPerPage = columns;
}
const lastPage: number = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
let lastPage: number = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
const numPaddingDates: number =
$availabilityDates.length % itemsPerPage === 0
? 0
Expand All @@ -37,6 +37,7 @@
let currentPage = 0;
console.log(currentPage, lastPage);
let currentPageAvailability: (ZotDate | null)[];
let selectionState: SelectionStateType | null = null;
Expand Down Expand Up @@ -154,7 +155,7 @@
}
onMount(async () => {
$guestSession.meetingId = data.meetingId;
$guestSession.meetingId = data.meetingId ?? "";
const generalAvailability = await getGeneralAvailability(data, $guestSession);
const defaultMeetingDates = data.defaultDates.map((item) => new ZotDate(item.date, false, []));
Expand All @@ -164,6 +165,8 @@
generalAvailability && generalAvailability.length > 0
? generalAvailability
: defaultMeetingDates;
lastPage = Math.floor(($availabilityDates.length - 1) / itemsPerPage);
});
</script>

Expand Down
28 changes: 17 additions & 11 deletions src/lib/stores/availabilityStores.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,28 @@ import { readable, writable } from "svelte/store";

import type { GuestSession, MemberAvailability } from "./../types/availability";

import { TimeConstants } from "$lib/types/chrono";
import { startTime, endTime } from "$lib/stores/meetingSetupStores";
import { TimeConstants, type HourMinuteString } from "$lib/types/chrono";
import { ZotDate } from "$lib/utils/ZotDate";

export const BLOCK_LENGTH: number = 15;
export const getTimeFromHoursAndMinutes = (hours: number, minutes: number = 0): number => {
return hours * TimeConstants.MINUTES_PER_HOUR + minutes;
};
export const getTimeFromString = (timeString: string): number => {
const [hourString, minuteString] = timeString.split(":");
const hours = parseInt(hourString, 10);
const minutes = parseInt(minuteString, 10);
return getTimeFromHoursAndMinutes(hours, minutes);

export const getTimeFromHourMinuteString = (hourMinuteString: HourMinuteString): number => {
const [hours, minutes] = hourMinuteString.split(":");

return Number(hours) * TimeConstants.MINUTES_PER_HOUR + Number(minutes);
};

const earliestTime: number = getTimeFromHoursAndMinutes(8);
const latestTime: number = getTimeFromHoursAndMinutes(17, 30);
let earliestTime: number = getTimeFromHourMinuteString("08:00");
let latestTime: number = getTimeFromHourMinuteString("17:30");

startTime.subscribe((value) => {
earliestTime = getTimeFromHourMinuteString(value ?? "08:00");
});

endTime.subscribe((value) => {
latestTime = getTimeFromHourMinuteString(value ?? "17:30");
});

const sampleMembers: MemberAvailability[] = [
{
Expand Down
7 changes: 3 additions & 4 deletions src/routes/availability/[slug]/+page.server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { superValidate } from "sveltekit-superforms/server";
import type { PageServerLoad } from "../$types";
import { _loginSchema } from "../../auth/login/+page.server";

import { guestSchema } from "$lib/config/zod-schemas";
import { getExistingGuest, getExistingMeeting } from "$lib/db/databaseUtils.server";
import { db } from "$lib/db/drizzle";
import {
Expand All @@ -18,16 +17,16 @@ import {
} from "$lib/db/schema";
import type { ZotDate } from "$lib/utils/ZotDate";

const guestLoginSchema = guestSchema.pick({ username: true });

export const load: PageServerLoad = (async ({ locals, params }) => {
const user = locals.user;

// 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),
guestForm: await superValidate(guestLoginSchema),
availability: user ? await getAvailability(user, params?.slug) : null,
meetingId: params?.slug as string | undefined,
meetingData: await getExistingMeeting(params?.slug),
defaultDates: (await getMeetingDates(params?.slug)) ?? [],
};
}) satisfies PageServerLoad;
Expand Down
21 changes: 20 additions & 1 deletion src/routes/availability/[slug]/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
<script lang="ts">
import { onMount } from "svelte";
import type { PageData } from "./$types";
import { enhance } from "$app/forms";
import { GroupAvailability, PersonalAvailability } from "$lib/components/availability";
import {
availabilityDates,
availabilityTimeBlocks,
generateSampleDates,
generateTimeBlocks,
getTimeFromHourMinuteString,
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 { cn } from "$lib/utils/utils";
import CancelCircleOutline from "~icons/mdi/cancel-circle-outline";
Expand Down Expand Up @@ -48,13 +55,25 @@
$: mobileView = innerWidth < 768;
let form: HTMLFormElement;
onMount(async () => {
$startTime = data.meetingData.from_time as HourMinuteString;
$endTime = data.meetingData.to_time as HourMinuteString;
});
$: availabilityTimeBlocks.set(
generateTimeBlocks(
getTimeFromHourMinuteString($startTime),
getTimeFromHourMinuteString($endTime),
),
);
</script>

<svelte:window bind:innerWidth />

<div class="flex-between px-2 pt-8 md:px-4 md:pt-10 lg:px-[60px]">
<h1 class="line-clamp-1 h-8 pr-2 font-montserrat text-xl font-medium md:h-fit md:text-3xl">
Sample Meeting Winter 2024
{data.meetingData.title}
</h1>

{#if $isEditingAvailability}
Expand Down

0 comments on commit d7919d5

Please sign in to comment.