Implement editing of time slots

Render the timeslots as an editable table of times with associated
event.  When the event it's linked to is edited the time slot is removed
from the original event it belonged to and added to the possibly new
event it now belongs to.  This gives a somewhat intutive editing
experience when editing time slots linked to events with multiple times.

pages/edit.vue

@@ -3,15 +3,58 @@
 		<h1>Edit</h1>
 		<h2>Locations</h2>
 		<LocationsTable :edit="isAdmin" />
+		<h2>Schedule</h2>
+		<label>
+			Location Filter:
+			<select
+				v-model="locationFilter"
+			>
+				<option
+					:value="undefined"
+					:selected="locationFilter === undefined"
+				>&lt;All locations&gt;</option>
+				<option
+					v-for="location in schedule.locations"
+					:key="location.id"
+					:value="location.id"
+					:selected="locationFilter === location.id"
+				>{{ location.name }}</option>
+			</select>
+		</label>
+		<ScheduleTable :edit="true" :location="locationFilter" />
 	</main>
 </template>
 
 <script lang="ts" setup>
+import type { LocationQueryValue } from 'vue-router';
+
 definePageMeta({
 	middleware: ["authenticated"],
 	allowedAccountTypes: ["crew", "admin"],
 });
 
+const schedule = await useSchedule();
+
+function queryToString(item?: null | LocationQueryValue | LocationQueryValue[]) {
+	if (item === null)
+		return "";
+	if (item instanceof Array)
+		return queryToString(item[0])
+	return item;
+}
+
+const route = useRoute();
+const locationFilter = computed({
+	get: () => queryToString(route.query.location),
+	set: (value: string | undefined) => navigateTo({
+		path: route.path,
+		query: {
+			...route.query,
+			location: value,
+		},
+	}),
+});
+
 const { data: session } = await useAccountSession();
 const isAdmin = computed(() => session.value?.account.type === "admin")
 </script>