public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactor to use ClientSchedule on client

Browse source 
Use the ClientSchedule data structure for deserialising and tracking
edit state on the client instead of trying to directly deal with the
ApiSchedule type which is not build for ease of edits or rendering.
This commit is contained in:
Hornwitser 2025-06-14 19:22:53 +02:00
parent ce9f758f84
commit bb450fd583
15 changed files with 488 additions and 1297 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/EventCard.vue
View file

@ -1,10 +1,5 @@
<template>
<section class="event" v-if="event.deleted">
<p>
Error: Unexpected deleted event.
</p>
</section>
<section class="event" v-else>
<section class="event">
<h3>{{ event.name }}</h3>
<p>{{ event.description ?? "No description provided" }}</p>
<p v-if="event.interested">
@ -14,7 +9,7 @@
<button
class="interested"
:class="{ active: accountStore.interestedEventIds.has(event.id) }"
@click="toggle('event', event.id, event.slots.map(slot => slot.id))"
@click="toggle('event', event.id, [...event.slots.keys()])"
>
{{ accountStore.interestedEventIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
</button>
@ -22,10 +17,10 @@
<h4>Timeslots</h4>
<ul>
<li v-for="slot in event.slots" :key="slot.id">
<li v-for="slot in event.slots.values()" :key="slot.id">
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
<button
v-if="accountStore.valid && event.slots.length > 1"
v-if="accountStore.valid && event.slots.size > 1"
class="interested"
:disabled="accountStore.interestedEventIds.has(event.id)"
:class="{ active: accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) }"
@ -38,7 +33,7 @@
</template>
<p v-if="slot.assigned">
Crew:
{{ slot.assigned.map(id => idToAccount.get(id)?.name).join(", ") }}
{{ [...slot.assigned].map(id => idToAccount.get(id)?.name).join(", ") }}
</p>
</li>
</ul>
@ -47,18 +42,17 @@
<script lang="ts" setup>
import { DateTime } from 'luxon';
import type { ApiScheduleEvent } from '~/shared/types/api';
defineProps<{
event: ApiScheduleEvent
event: ClientScheduleEvent
}>()
const accountStore = useAccountStore();
const { data: accounts } = await useAccounts();
const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
function formatTime(time: string) {
return DateTime.fromISO(time, { zone: accountStore.activeTimezone, locale: "en-US" }).toFormat("yyyy-LL-dd HH:mm");
function formatTime(time: DateTime) {
return time.toFormat("yyyy-LL-dd HH:mm");
}
async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {