Hornwitser
fe06d0d6bd
Rename and refactor the types passed over the API to be based on an entity that's either living or a tombstone. A living entity has a deleted property that's either undefined or false, while a tombstone has a deleted property set to true. All entities have a numeric id and an updatedAt timestamp. To sync entities, an array of replacements are passed around. Living entities are replaced with tombstones when they're deleted. And tombstones are replaced with living entities when restored.
88 lines
2.4 KiB
Vue
88 lines
2.4 KiB
Vue
<template>
|
|
<section class="event" v-if="event.deleted">
|
|
<p>
|
|
Error: Unexpected deleted event.
|
|
</p>
|
|
</section>
|
|
<section class="event" v-else>
|
|
<h3>{{ event.name }}</h3>
|
|
<p>{{ event.description ?? "No description provided" }}</p>
|
|
<p v-if="event.interested">
|
|
{{ event.interested }} interested
|
|
</p>
|
|
<p v-if="accountStore.valid">
|
|
<button
|
|
class="interested"
|
|
:class="{ active: accountStore.interestedEventIds.has(event.id) }"
|
|
@click="toggle('event', event.id, event.slots.map(slot => slot.id))"
|
|
>
|
|
{{ accountStore.interestedEventIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
|
|
</button>
|
|
</p>
|
|
|
|
<h4>Timeslots</h4>
|
|
<ul>
|
|
<li v-for="slot in event.slots" :key="slot.id">
|
|
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
|
|
<button
|
|
v-if="accountStore.valid && event.slots.length > 1"
|
|
class="interested"
|
|
:disabled="accountStore.interestedEventIds.has(event.id)"
|
|
:class="{ active: accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) }"
|
|
@click="toggle('slot', slot.id)"
|
|
>
|
|
{{ accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) ? "✔ interested" : "🔔 interested?" }}
|
|
</button>
|
|
<template v-if="slot.interested">
|
|
({{ slot.interested }} interested)
|
|
</template>
|
|
<p v-if="slot.assigned">
|
|
Crew:
|
|
{{ slot.assigned.map(id => idToAccount.get(id)?.name).join(", ") }}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { DateTime } from 'luxon';
|
|
import type { ApiScheduleEvent } from '~/shared/types/api';
|
|
|
|
defineProps<{
|
|
event: ApiScheduleEvent
|
|
}>()
|
|
|
|
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");
|
|
}
|
|
|
|
async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
|
|
await accountStore.toggleInterestedId(type, id, slotIds);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.event {
|
|
background: color-mix(in oklab, var(--background), grey 20%);
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.event h3 {
|
|
margin: 0;
|
|
}
|
|
.event + .event {
|
|
margin-block-start: 0.5rem;
|
|
}
|
|
|
|
button {
|
|
padding-inline: 0.2em;
|
|
}
|
|
button.active {
|
|
color: color-mix(in oklab, var(--foreground), green 50%);
|
|
}
|
|
</style>
|