-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: ✨ create availability page * feat: ✨ represent availability as a class * feat: ✨ create a store for availability and establish representation * refactor: ♻️ ✨ fix up the store representation of availability * feat: ✨ initially created ZotDate class * feat: ✨ added helper functions to ZotDate class * refactor: ♻️ allowed strings and dates in constructor, commented on functions * feat: ✨ added CalendarDay functions to ZotDate * refactor: ♻️ corrected inaccurate function name * refactor: ♻️ change calendar component to use ZotDate class * refactor: ♻️ update method call of generating calendar days to new signature * fix: 🐛 fixed incorrect constructor implementation * fix: 🐛 attempted fixing ZotDate availability error * refactor: ♻️ clean up ZotDate class * feat: ✨ add personal availability page * feat: ✨ add selection interaction to availability page * feat: ✨ add desktop mouse interaction with availability * feat: ✨ add mobile interaction for availability * fix: 🐛 correct 0AM text to display as 12AM instead * refactor: ♻️ add docstrings for new functions and methods * feat: ✨ add pagination to mobile availability dates * feat: ✨ added availability and related stores * feat: ✨ sync availability component with store * feat: ✨ improve pagination spacing for partially-filled availability pages * refactor: ♻️ add type annotations to availability component states * chore: 🔧 remove old availability class that was migrated to ZotDate --------- Co-authored-by: Adithya Anandsaikrishnan <[email protected]>
- Loading branch information
Showing
12 changed files
with
710 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,26 @@ | ||
| <script lang="ts"> | ||
| import type { Day } from "$lib/components/Calendar/CalendarDay"; | ||
| import type { ZotDate } from "$lib/utils/ZotDate"; | ||
| export let isHighlighted: boolean | null; | ||
| export let calendarDay: Day; | ||
| export let calendarDay: ZotDate; | ||
| </script> | ||
|
|
||
| {#if isHighlighted} | ||
| <div | ||
| class="absolute w-10 h-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-200 top-1/2 left-1/2" | ||
| class="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-200" | ||
| ></div> | ||
| {:else if calendarDay.isSelected} | ||
| <div | ||
| class="absolute w-10 h-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-400 top-1/2 left-1/2" | ||
| class="absolute left-1/2 top-1/2 h-10 w-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-400" | ||
| ></div> | ||
| {/if} | ||
|
|
||
| <p | ||
| class="relative p-2 text-base font-medium text-gray-500" | ||
| data-day={calendarDay.day} | ||
| data-month={calendarDay.month} | ||
| data-year={calendarDay.year} | ||
| data-day={calendarDay.getDay()} | ||
| data-month={calendarDay.getMonth()} | ||
| data-year={calendarDay.getYear()} | ||
| data-selected={calendarDay.isSelected} | ||
| > | ||
| {calendarDay.day} | ||
| {calendarDay.getDay()} | ||
| </p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <script lang="ts"> | ||
| import type { SelectionStateType } from "$lib/types/availability"; | ||
| export let isAvailable: boolean; | ||
| export let zotDateIndex: number; | ||
| export let blockIndex: number; | ||
| export let selectionState: SelectionStateType | null; | ||
| let backgroundColor: string = ""; | ||
| /** | ||
| * Updates the background color of a single time block cell | ||
| * @param selectionState the current boundaries describing the user's selection | ||
| */ | ||
| const updateBlockColor = (selectionState: SelectionStateType | null): void => { | ||
| // Render different background color if user is in middle of making a selection and is in range | ||
| if (selectionState) { | ||
| const { earlierDateIndex, laterDateIndex, earlierBlockIndex, laterBlockIndex } = | ||
| selectionState; | ||
| const dateInRange = earlierDateIndex <= zotDateIndex && zotDateIndex <= laterDateIndex; | ||
| const timeInRange = earlierBlockIndex <= blockIndex && blockIndex <= laterBlockIndex; | ||
| if (dateInRange && timeInRange) { | ||
| backgroundColor = "bg-success-200"; | ||
| return; | ||
| } | ||
| } | ||
| backgroundColor = isAvailable ? "bg-success-400" : "bg-neutral-200"; | ||
| }; | ||
| $: { | ||
| updateBlockColor(selectionState); | ||
| } | ||
| </script> | ||
|
|
||
| <div | ||
| data-date-index={zotDateIndex} | ||
| data-block-index={blockIndex} | ||
| class={`${backgroundColor} block h-full w-full py-2`} | ||
| ></div> |
Oops, something went wrong.