diff options
| -rw-r--r-- | components/Button.vue | 1 | ||||
| -rw-r--r-- | components/Input.vue | 1 | ||||
| -rw-r--r-- | pages/agenda.vue | 120 | ||||
| -rw-r--r-- | stores/schedule.ts | 11 |
4 files changed, 117 insertions, 16 deletions
diff --git a/components/Button.vue b/components/Button.vue index 2bffcec..00cc1e7 100644 --- a/components/Button.vue +++ b/components/Button.vue @@ -45,6 +45,7 @@ button { border-radius: 0.375rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-size: var(--text-small); + font-family: var(--font-family); font-weight: 500; color: white; background-color: var(--color-primary); diff --git a/components/Input.vue b/components/Input.vue index 4d95700..8923a97 100644 --- a/components/Input.vue +++ b/components/Input.vue @@ -79,6 +79,7 @@ input { border-radius: 0.375rem; box-sizing: border-box; /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); */ + font-family: var(--font-family); color: var(--color-text); font-size: var(--text-small); } diff --git a/pages/agenda.vue b/pages/agenda.vue index 3e4c1df..865b693 100644 --- a/pages/agenda.vue +++ b/pages/agenda.vue @@ -4,12 +4,74 @@ import Panel from '~/components/Panel.vue'; const favouritesStore = useFavouritesStore(); const scheduleStore = useScheduleStore(); +const errorStore = useErrorStore(); +const config = useRuntimeConfig(); const favouriteEvents = computed(() => { return scheduleStore.events.filter((event) => favouritesStore.isFavourite(event)); }); -console.log(favouriteEvents.value); +const calendarStatus = ref('pending' as 'pending' | 'idle'); +const calendarLink = ref('') +const calendarLinkWithPageProtocol = computed(() => { + return window.location.protocol + '//' + calendarLink.value; +}); + +const calendarAction = ref(false); + +useFetch(config.public.baseURL + '/calendar', { + method: 'GET', + server: false, + lazy: true, + onResponseError: ({ response }) => { + calendarStatus.value = 'idle'; + }, + onResponse: ({ response }) => { + if (!response.ok) { + if (response.status !== 404) { + errorStore.setError(response._data.message || 'An unknown error occurred'); + } + } else if (response._data) { + calendarLink.value = (response._data as any).data.url; + } + calendarStatus.value = 'idle'; + }, +}); + +function generateCalendar() { + calendarAction.value = true; + useFetch(config.public.baseURL + '/calendar', { + method: 'POST', + server: false, + lazy: true, + onResponseError: ({ response }) => { + errorStore.setError(response._data.message || 'An unknown error occurred'); + calendarAction.value = false; + }, + onResponse: ({ response }) => { + if (response._data) { + calendarLink.value = (response._data as any).data.url; + } + calendarAction.value = false; + }, + }); +} + +function deleteCalendar() { + calendarAction.value = true; + useFetch(config.public.baseURL + '/calendar', { + method: 'DELETE', + server: false, + onResponseError: ({ response }) => { + errorStore.setError(response._data.message || 'An unknown error occurred'); + calendarAction.value = false; + }, + onResponse: () => { + calendarLink.value = ''; + calendarAction.value = false; + }, + }); +} </script> @@ -17,18 +79,42 @@ console.log(favouriteEvents.value); <Panel v-if="favouritesStore.status === 'pending'"> <span>Updating favourites...</span> </Panel> - <Panel v-else-if="favouriteEvents.length > 0"> - <h2 class="agenda-title">Agenda</h2> - <ul class="agenda-list"> - <li - v-for="event in favouriteEvents" - :key="event.id" - class="agenda-item" - > - <EventListing :event="event" /> - </li> - </ul> - </Panel> + + <template v-else-if="favouriteEvents.length > 0"> + <div class="page"> + <Panel> + <h2 class="agenda-title">Agenda</h2> + <ul class="agenda-list"> + <li + v-for="event in favouriteEvents" + :key="event.id" + class="agenda-item" + > + <EventListing :event="event" /> + </li> + </ul> + </Panel> + <Panel> + <h2 class="calendar-title">Calendar</h2> + <template v-if="calendarStatus === 'pending'"> + <span>Fetching calendar status...</span> + </template> + + <div v-else-if="calendarStatus === 'idle'" class="calendar"> + <template v-if="calendarLink"> + <span>You can add your agenda to your own calendar using the iCal link below.</span> + <Input :value="calendarLinkWithPageProtocol" disabled/> + <Button @click="deleteCalendar" :loading="calendarAction">Delete calendar</Button> + </template> + <template v-else> + <span>You do not have a calendar link yet. Use the button below to request a calendar link synchronise with your own calendar app.</span> + <Button @click="generateCalendar" :loading="calendarAction">Request calendar</Button> + </template> + </div> + </Panel> + </div> + </template> + <Panel v-else> <span>You have not added any favourites yet.</span> </Panel> @@ -46,7 +132,7 @@ console.log(favouriteEvents.value); border-bottom: 1px solid var(--color-background-muted); } -.agenda-title { +.agenda-title, .calendar-title { margin-bottom: 1rem; } @@ -54,4 +140,10 @@ console.log(favouriteEvents.value); border-bottom: none; } +.page, .calendar { + display: flex; + flex-direction: column; + gap: 1rem; + line-height: 1.3; +} </style>
\ No newline at end of file diff --git a/stores/schedule.ts b/stores/schedule.ts index 5d5014c..b1bf536 100644 --- a/stores/schedule.ts +++ b/stores/schedule.ts @@ -83,11 +83,15 @@ export const useScheduleStore = defineStore('schedule', () => { const setSchedule = (newSchedule: Schedule) => { schedule.value = newSchedule + console.log(newSchedule) + tracks.value = {} schedule.value.tracks.forEach(track => { track.slug = convertToSlug(track.name) tracks.value[track.name] = track }); + + console.log("hi") events.value = [] schedule.value.days.forEach(day => { @@ -107,6 +111,9 @@ export const useScheduleStore = defineStore('schedule', () => { return a.start.getTime() - b.start.getTime() }) + console.log("hi2") + console.log(newSchedule) + eventsPerDay.value = {} events.value.forEach(event => { const date = event.date.split('T')[0] @@ -129,8 +136,8 @@ export const useScheduleStore = defineStore('schedule', () => { }) function normalizeDates(event: Event, timeZone: string) { - event.start = new TZDate(event.date, timeZone) - event.end = new TZDate(event.start.getTime() + parseDuration(event.duration), timeZone) + event.start = new TZDate(event.start, timeZone) + event.end = new TZDate(event.end, timeZone) } function parseDuration(duration: string) { |