From eb3cbce370bb9b66bf67b1522179147f879a4b0b Mon Sep 17 00:00:00 2001 From: Aaron Brethorst Date: Sun, 24 Nov 2024 15:45:48 -0800 Subject: [PATCH 1/6] Add custom Accordion component --- src/components/containers/Accordion.svelte | 35 +++++++++++++++ .../containers/AccordionItem.svelte | 43 +++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 src/components/containers/Accordion.svelte create mode 100644 src/components/containers/AccordionItem.svelte diff --git a/src/components/containers/Accordion.svelte b/src/components/containers/Accordion.svelte new file mode 100644 index 0000000..21e7320 --- /dev/null +++ b/src/components/containers/Accordion.svelte @@ -0,0 +1,35 @@ + + +
+ +
diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte new file mode 100644 index 0000000..23a8f56 --- /dev/null +++ b/src/components/containers/AccordionItem.svelte @@ -0,0 +1,43 @@ + + +
+
+ +
+ + {#if $isActive} +
+
+ +
+
+ {/if} +
From d88b5b0fa7f172ddbd509361e485b7017a8aff3a Mon Sep 17 00:00:00 2001 From: Aaron Brethorst Date: Sun, 24 Nov 2024 16:01:10 -0800 Subject: [PATCH 2/6] Extract RouteScheduleTable component from ScheduleAccordionItem ...and use it on the schedule page. By extracting the inner component from the accordion item, we decouple some implementation details of the Flowbite accordion from this piece of UI, and allow ourselves to further reuse it elsewhere if and when we need to. This commit is a WIP. - [ ] Show all routes/Collapse all routes buttons aren't working - [ ] Sticky route schedule headers have a gap above them - [ ] The datepicker appears behind the sticky headers - [ ] All schedules should be expanded by default --- .../RouteScheduleTable.svelte | 107 ++++++++++++++++ .../ScheduleAccordionItem.svelte | 114 ------------------ .../stops/[stopID]/schedule/+page.svelte | 16 +-- 3 files changed, 115 insertions(+), 122 deletions(-) create mode 100644 src/components/schedule-for-stop/RouteScheduleTable.svelte delete mode 100644 src/components/schedule-for-stop/ScheduleAccordionItem.svelte diff --git a/src/components/schedule-for-stop/RouteScheduleTable.svelte b/src/components/schedule-for-stop/RouteScheduleTable.svelte new file mode 100644 index 0000000..ae0e8cb --- /dev/null +++ b/src/components/schedule-for-stop/RouteScheduleTable.svelte @@ -0,0 +1,107 @@ + + +
+ + + + + + + + + + + + {#if renderScheduleTable(schedule).amTimes.length === 0} + + + + {:else} + {#each renderScheduleTable(schedule).amTimes as [hour, times]} + + + + + {/each} + {/if} + + + + + {#if renderScheduleTable(schedule).pmTimes.length === 0} + + + + {:else} + {#each renderScheduleTable(schedule).pmTimes as [hour, times]} + + + + + {/each} + {/if} + +
{$t('schedule_for_stop.hour')}{$t('schedule_for_stop.minutes')}
AM
+ {$t('schedule_for_stop.no_am_schedules_available')} +
+ {formatHour(hour)} AM + + {#each times as stopTime, index (index)} + + {extractMinutes(stopTime.arrivalTime)} + {index < times.length - 1 ? ', ' : ''} + + {/each} +
PM
+ {$t('schedule_for_stop.no_pm_schedules_available')} +
+ {formatHour(hour)} PM + + {#each times as stopTime, index (index)} + + {extractMinutes(stopTime.arrivalTime)} + {index < times.length - 1 ? ', ' : ''} + + {/each} +
+
diff --git a/src/components/schedule-for-stop/ScheduleAccordionItem.svelte b/src/components/schedule-for-stop/ScheduleAccordionItem.svelte deleted file mode 100644 index d5c50cd..0000000 --- a/src/components/schedule-for-stop/ScheduleAccordionItem.svelte +++ /dev/null @@ -1,114 +0,0 @@ - - - - - {schedule.tripHeadsign} - -
- - - - - - - - - - - - {#if renderScheduleTable(schedule).amTimes.length === 0} - - - - {:else} - {#each renderScheduleTable(schedule).amTimes as [hour, times]} - - - - - {/each} - {/if} - - - - - {#if renderScheduleTable(schedule).pmTimes.length === 0} - - - - {:else} - {#each renderScheduleTable(schedule).pmTimes as [hour, times]} - - - - - {/each} - {/if} - -
{$t('schedule_for_stop.hour')}{$t('schedule_for_stop.minutes')}
AM
- {$t('schedule_for_stop.no_am_schedules_available')} -
- {formatHour(hour)} AM - - {#each times as stopTime, index (index)} - - {extractMinutes(stopTime.arrivalTime)} - {index < times.length - 1 ? ', ' : ''} - - {/each} -
PM
- {$t('schedule_for_stop.no_pm_schedules_available')} -
- {formatHour(hour)} PM - - {#each times as stopTime, index (index)} - - {extractMinutes(stopTime.arrivalTime)} - {index < times.length - 1 ? ', ' : ''} - - {/each} -
-
- diff --git a/src/routes/stops/[stopID]/schedule/+page.svelte b/src/routes/stops/[stopID]/schedule/+page.svelte index 71243cc..dec45b2 100644 --- a/src/routes/stops/[stopID]/schedule/+page.svelte +++ b/src/routes/stops/[stopID]/schedule/+page.svelte @@ -1,11 +1,12 @@ diff --git a/src/components/schedule-for-stop/RouteScheduleTable.svelte b/src/components/schedule-for-stop/RouteScheduleTable.svelte index ae0e8cb..1f54fbe 100644 --- a/src/components/schedule-for-stop/RouteScheduleTable.svelte +++ b/src/components/schedule-for-stop/RouteScheduleTable.svelte @@ -1,15 +1,8 @@ @@ -151,10 +141,10 @@
- -
@@ -166,8 +156,8 @@ {$t('schedule_for_stop.no_schedules_available')}

{:else} - - {#each schedules as schedule, index (schedule.tripHeadsign)} + + {#each schedules as schedule} {schedule.tripHeadsign} From ade67de09e537db9edcbc46dd0972a59c3a609c5 Mon Sep 17 00:00:00 2001 From: Aaron Brethorst Date: Sun, 24 Nov 2024 18:42:22 -0800 Subject: [PATCH 4/6] Add skipAnimation option to Accordion --- src/components/containers/Accordion.svelte | 18 ++++++++++++++---- src/components/containers/AccordionItem.svelte | 8 ++++++-- .../stops/[stopID]/schedule/+page.svelte | 2 +- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/containers/Accordion.svelte b/src/components/containers/Accordion.svelte index a85b03a..2bebc25 100644 --- a/src/components/containers/Accordion.svelte +++ b/src/components/containers/Accordion.svelte @@ -5,6 +5,9 @@ // Props to track all possible item IDs export let items = []; + // Store for animation state + const skipAnimation = writable(false); + // Create a store to track multiple active items using a Set const activeItems = writable(new Set()); @@ -13,14 +16,20 @@ const dispatch = createEventDispatcher(); // Methods to open/close all items - export const openAll = () => { + export const openAll = (animate = true) => { + skipAnimation.set(!animate); activeItems.set(new Set(items)); - dispatch('openAll'); + dispatch('openAll', { animated: animate }); + // Reset skip animation after a short delay + setTimeout(() => skipAnimation.set(false), 0); }; - export const closeAll = () => { + export const closeAll = (animate = true) => { + skipAnimation.set(!animate); activeItems.set(new Set()); - dispatch('closeAll'); + dispatch('closeAll', { animated: animate }); + // Reset skip animation after a short delay + setTimeout(() => skipAnimation.set(false), 0); }; // Watch for changes to activeItems and dispatch event @@ -39,6 +48,7 @@ const isActive = derived(activeItems, ($activeItems) => $activeItems.has(id)); return { isActive, + skipAnimation, activate: () => { activeItems.update((items) => { const newItems = new Set(items); diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte index 23a8f56..5231ced 100644 --- a/src/components/containers/AccordionItem.svelte +++ b/src/components/containers/AccordionItem.svelte @@ -3,7 +3,7 @@ import { slide } from 'svelte/transition'; const id = crypto.randomUUID(); const { registerItem } = getContext('accordion'); - const { isActive, activate } = registerItem(id); + const { isActive, skipAnimation, activate } = registerItem(id); function toggle() { activate(); } @@ -34,7 +34,11 @@ {#if $isActive} -
+
diff --git a/src/routes/stops/[stopID]/schedule/+page.svelte b/src/routes/stops/[stopID]/schedule/+page.svelte index 4a1a761..a116741 100644 --- a/src/routes/stops/[stopID]/schedule/+page.svelte +++ b/src/routes/stops/[stopID]/schedule/+page.svelte @@ -115,7 +115,7 @@ onMount(async () => { const formattedDate = currentDate.toISOString().split('T')[0]; await fetchScheduleForStop(stopId, formattedDate); - accordionComponent.openAll(); + accordionComponent.openAll(false); }); From 4c65e405956e283a4f0269ca36307fa4015e8108 Mon Sep 17 00:00:00 2001 From: Aaron Brethorst Date: Sun, 24 Nov 2024 18:46:55 -0800 Subject: [PATCH 5/6] Fix DatePicker underlapping AccordionItem header --- src/components/containers/AccordionItem.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte index 5231ced..34c2f42 100644 --- a/src/components/containers/AccordionItem.svelte +++ b/src/components/containers/AccordionItem.svelte @@ -10,7 +10,7 @@
-
+