owltide/pages/schedule.vue

<template>
	<main>
		<h1>Schedule & Events</h1>
		<p>
			Study carefully, we only hold these events once a year.
		</p>
		<p v-if="!session">
			<NuxtLink to="/login">Login</NuxtLink> or <NuxtLink to="/login#create-account">Create an account</NuxtLink>
			to get notified about updates to the schedule.
		</p>
		<p v-else>
			Check out your <NuxtLink to="/account/settings">Account Setting</NuxtLink> to set up notifications for changes to schedule.
		</p>
		<h2>Schedule</h2>
		<label v-if="session">
			Filter:
			<select
				v-model="filter"
			>
				<option
					:value="undefined"
					:selected="filter === undefined"
				>&lt;All events&gt;</option>
				<option
					value="my-schedule"
					:selected='filter === "my-schedule"'
				>My Schedule</option>
				<option
					v-if="isCrew"
					value="assigned"
					:selected='filter === "assigned"'
				>Assigned to Me</option>
				<optgroup v-if="isCrew && accounts" label="Crew">
					<option
						v-for="account in accounts.filter(a => a.type === 'crew' || a.type === 'admin')"
						:key="account.id"
						:value="`crew-${account.id}`"
						:selected="filter === `crew-${account.id}`"
					>{{ account.name }}</option>
				</optgroup>
			</select>
		</label>
		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
		<EventsEdit />
		<h2>Events</h2>
		<EventCard v-for="event in schedule.events.filter(e => e.slots.some(eventSlotFilter))" :event/>
		<h2>Locations</h2>
		<ul>
			<li v-for="location in schedule.locations" :key="location.id">
				<h3>{{ location.name }}</h3>
				{{ location.description ?? "No description provided" }}
			</li>
		</ul>
	</main>
</template>

<script setup lang="ts">
import type { ShiftSlot, TimeSlot } from '~/shared/types/schedule';

const { data: session } = await useAccountSession();
const { data: accounts } = await useAccounts();
const schedule = await useSchedule();
const isCrew = computed(() => (
	session.value?.account?.type === "crew"
	|| session.value?.account?.type === "admin"
));

const route = useRoute();
const filter = computed({
	get: () => queryToString(route.query.filter),
	set: (value: string | undefined) => navigateTo({
		path: route.path,
		query: {
			...route.query,
			filter: value,
		},
	}),
});

const eventSlotFilter = computed(() => {
	if (filter.value === undefined || !session.value) {
		return () => true;
	}
	const aid = session.value?.account?.id;
	if (filter.value === "my-schedule") {
		const ids = new Set(session.value?.account?.interestedIds);
		for (const event of schedule.value.events) {
			if (ids.has(event.id)) {
				for (const slot of event.slots) {
					ids.add(slot.id);
				}
			}
		}
		return (slot: TimeSlot) => ids.has(slot.id) || slot.assigned?.some(id => id === aid) || false;
	}
	if (filter.value === "assigned") {
		return (slot: TimeSlot) => slot.assigned?.some(id => id === aid) || false;
	}
	if (filter.value.startsWith("crew-")) {
		const cid = parseInt(filter.value.slice(5));
		return (slot: TimeSlot) => slot.assigned?.some(id => id === cid) || false;
	}
	return () => false;
});
const shiftSlotFilter = computed(() => {
	if (filter.value === undefined || !session.value) {
		return () => true;
	}
	if (filter.value === "my-schedule" || filter.value === "assigned") {
		const aid = session.value?.account?.id;
		return (slot: ShiftSlot) => slot.assigned?.some(id => id === aid) || false;
	}
	if (filter.value.startsWith("crew-")) {
		const cid = parseInt(filter.value.slice(5));
		return (slot: ShiftSlot) => slot.assigned?.some(id => id === cid) || false;
	}
	return () => false;
});
</script>