Add cards for shifts

components/CardShift.vue

@@ -0,0 +1,54 @@
+<template>
+	<section class="shift">
+		<h3>{{ shift.name }}</h3>
+		<p>{{ shift.description ?? "No description provided" }}</p>
+
+		<h4>Timeslots</h4>
+		<ul>
+			<li v-for="slot in shift.slots.values()" :key="slot.id">
+				{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
+				<p v-if="slot.assigned">
+					Assigned:
+					{{ [...slot.assigned].map(id => usersStore.users.get(id)?.name).join(", ") }}
+				</p>
+			</li>
+		</ul>
+	</section>
+</template>
+
+<script lang="ts" setup>
+import { DateTime } from '~/shared/utils/luxon';
+
+defineProps<{
+	shift: ClientScheduleShift
+}>()
+
+const accountStore = useAccountStore();
+const usersStore = useUsersStore();
+await usersStore.fetch();
+
+function formatTime(time: DateTime) {
+	return time.toFormat("yyyy-LL-dd HH:mm");
+}
+</script>
+
+<style scoped>
+.shift {
+	background: color-mix(in oklab, var(--background), grey 20%);
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+}
+.shift h3 {
+	margin: 0;
+}
+.shift + .shift {
+	margin-block-start: 0.5rem;
+}
+
+button {
+	padding-inline: 0.2em;
+}
+button.active {
+	color: color-mix(in oklab, var(--foreground), green 50%);
+}
+</style>

pages/schedule.vue

@@ -42,7 +42,19 @@
 		</label>
 		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
 		<h2>Events</h2>
-		<CardEvent v-for="event in [...schedule.events.values()].filter(e => !e.deleted && [...e.slots.values()].some(eventSlotFilter))" :event/>
+		<CardEvent
+			v-for="event in [...schedule.events.values()].filter(e => !e.deleted && [...e.slots.values()].some(eventSlotFilter))"
+			:key="event.id"
+			:event
+		/>
+		<template v-if="accountStore.isCrew">
+			<h2>Shifts</h2>
+			<CardShift
+				v-for="shift in [...schedule.shifts.values()].filter(s => !s.deleted && [...s.slots.values()].some(shiftSlotFilter))"
+				:key="shift.id"
+				:shift
+			/>
+		</template>
 		<h2>Locations</h2>
 		<ul>
 			<li v-for="location in schedule.locations.values()" :key="location.id">