owltide/components/EventCard.vue

<template>
	<section class="event">
		<h3>{{ event.name }}</h3>
		<p>{{ event.description ?? "No description provided" }}</p>
		<p v-if="event.interested">
			{{ event.interested }} interested
		</p>
		<p v-if="sessionStore.account">
			<button
				class="interested"
				:class="{ active: interestedIds.has(event.id) }"
				@click="toggle(event.id, event.slots.map(slot => slot.id))"
			>
				{{ interestedIds.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="sessionStore.account && event.slots.length > 1"
					class="interested"
					:disabled="interestedIds.has(event.id)"
					:class="{ active: interestedIds.has(event.id) || interestedIds.has(slot.id) }"
					@click="toggle(slot.id)"
				>
					{{ interestedIds.has(event.id) || interestedIds.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 { ScheduleEvent } from '~/shared/types/schedule';

defineProps<{
	event: ScheduleEvent
}>()

const runtimeConfig = useRuntimeConfig();
const sessionStore = useSessionStore();
const interestedIds = computed(() => new Set(sessionStore.account?.interestedIds ?? []));
const timezone = computed(() => sessionStore.account?.timezone ?? runtimeConfig.public.defaultTimezone);
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: timezone.value }).toFormat("yyyy-LL-dd HH:mm");
}

async function toggle(id: string, slotIds?: string[]) {
	let newIds = [...sessionStore.account!.interestedIds ?? []];
	if (interestedIds.value.has(id)) {
		newIds = newIds.filter(newId => newId !== id);
	} else {
		newIds.push(id);
		if (slotIds) {
			const filterIds = new Set(slotIds);
			newIds = newIds.filter(newId => !filterIds.has(newId));
		}
	}
	await $fetch("/api/account", {
		method: "PATCH",
		body: { interestedIds: newIds },
	})
	await sessionStore.fetch();
}
</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>