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.
This commit is contained in:
parent
3cdfceb037
commit
02be8a37a5
3 changed files with 721 additions and 2 deletions
|
|
@ -53,7 +53,7 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
button, input, textarea {
|
||||
button, input, textarea, select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
|
@ -71,7 +71,7 @@ label>* {
|
|||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
:is(p, form, fieldset, pre) + :is(p, form, fieldset, pre) {
|
||||
:is(p, form, fieldset, pre, ul) + :is(p, form, fieldset, pre, ul) {
|
||||
margin-block-start: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
676
components/ScheduleTable.vue
Normal file
676
components/ScheduleTable.vue
Normal file
|
|
@ -0,0 +1,676 @@
|
|||
<template>
|
||||
<div>
|
||||
<Timetable :schedule="schedulePreview" />
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>start</th>
|
||||
<th>end</th>
|
||||
<th>duration</th>
|
||||
<th>event</th>
|
||||
<th>s</th>
|
||||
<th>location</th>
|
||||
<th v-if="edit"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-if="edit">
|
||||
<tr
|
||||
v-for="es in eventSlots"
|
||||
:key='es.slot?.id ?? es.start.toMillis()'
|
||||
:class='{
|
||||
removed: es.type === "slot" && removed.has(es.id),
|
||||
gap: es.type === "gap",
|
||||
}'
|
||||
>
|
||||
<template v-if="es.type === 'gap'">
|
||||
<td colspan="2">
|
||||
{{ gapFormat(es) }}
|
||||
gap
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="time"
|
||||
v-model="newEventDuration"
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
v-model="newEventName"
|
||||
>
|
||||
</td>
|
||||
<td></td>
|
||||
<td>
|
||||
<select
|
||||
v-model="newEventLocation"
|
||||
>
|
||||
<option
|
||||
v-for="location in schedule.locations"
|
||||
:key="location.id"
|
||||
:value="location.id"
|
||||
:selected="location.id === newEventLocation"
|
||||
>{{ location.name }}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
Add at
|
||||
<button
|
||||
type="button"
|
||||
@click="newEventSlot({ start: es.start })"
|
||||
>Start</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="newEventSlot({ end: es.end })"
|
||||
>End</button>
|
||||
</td>
|
||||
</template>
|
||||
<template v-else-if='edit'>
|
||||
<td>
|
||||
<input
|
||||
type="datetime-local"
|
||||
:value="es.start.toFormat('yyyy-LL-dd\'T\'HH:mm')"
|
||||
@blur="editEventSlot(es, { start: ($event as any).target.value })"
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="time"
|
||||
:value="es.end.toFormat('HH:mm')"
|
||||
@input="editEventSlot(es, { end: ($event as any).target.value })"
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="time"
|
||||
:value='dropDay(es.end.diff(es.start)).toFormat("hh:mm")'
|
||||
@input="editEventSlot(es, { duration: ($event as any).target.value })"
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
:value="es.name"
|
||||
@input="editEventSlot(es, { name: ($event as any).target.value })"
|
||||
>
|
||||
</td>
|
||||
<td>{{ status(es) }}</td>
|
||||
<td>
|
||||
<select
|
||||
:value="es.location"
|
||||
@change="editEventSlot(es, { location: ($event as any).target.value })"
|
||||
>
|
||||
<option
|
||||
v-for="location in schedule.locations"
|
||||
:key="location.id"
|
||||
:value="location.id"
|
||||
:selected="location.id === es.location"
|
||||
>{{ location.name }}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
:disabled="removed.has(es.id)"
|
||||
type="button"
|
||||
@click="delEventSlot(es)"
|
||||
>Remove</button>
|
||||
<button
|
||||
v-if="changes.some(c => c.data.id === es.id)"
|
||||
type="button"
|
||||
@click="revertEventSlot(es.id)"
|
||||
>Revert</button>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
type="datetime-local"
|
||||
v-model="newEventStart"
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="time"
|
||||
v-model="newEventEnd"
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="time"
|
||||
v-model="newEventDuration"
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
type="text"
|
||||
v-model="newEventName"
|
||||
>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<button
|
||||
type="button"
|
||||
@click="newEventSlot()"
|
||||
>Add Event</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr
|
||||
v-for="es in eventSlots"
|
||||
:key='es.slot?.id ?? es.start.toMillis()'
|
||||
:class='{
|
||||
gap: es.type === "gap",
|
||||
}'
|
||||
>
|
||||
<template v-if="es.type === 'gap'">
|
||||
<td colspan="2">
|
||||
{{ gapFormat(es) }}
|
||||
gap
|
||||
</td>
|
||||
</template>
|
||||
<template v-else>
|
||||
<td>{{ es.start.toFormat("yyyy-LL-dd HH:mm") }}</td>
|
||||
<td>{{ es.end.toFormat("HH:mm") }}</td>
|
||||
<td>{{ es.end.diff(es.start).toFormat('hh:mm') }}</td>
|
||||
<td>{{ es.name }}</td>
|
||||
<td>{{ status(es) }}</td>
|
||||
<td>{{ es.location }}</td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<p v-if="changes.length">
|
||||
Changes are not save yet.
|
||||
<button
|
||||
type="button"
|
||||
@click="saveEventSlots"
|
||||
>Save Changes</button>
|
||||
</p>
|
||||
<details>
|
||||
<summary>Debug</summary>
|
||||
<b>EventSlot changes</b>
|
||||
<ol>
|
||||
<li v-for="change in changes">
|
||||
<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => ({ op: change.op, data }))(change.data as any), undefined, " ") }}</code></pre>
|
||||
</li>
|
||||
</ol>
|
||||
<b>ScheduleEvent changes</b>
|
||||
<ol>
|
||||
<li v-for="change in scheduleChanges">
|
||||
<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => ({ op: change.op, data }))(change.data as any), undefined, " ") }}</code></pre>
|
||||
</li>
|
||||
</ol>
|
||||
</details>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { DateTime, Duration } from 'luxon';
|
||||
import type { ChangeRecord, Schedule, ScheduleEvent, ScheduleLocation, TimeSlot } from '~/shared/types/schedule';
|
||||
import { applyChangeArray } from '~/shared/utils/changes';
|
||||
import { enumerate, pairs } from '~/shared/utils/functions';
|
||||
|
||||
const props = defineProps<{
|
||||
edit?: boolean,
|
||||
location?: string,
|
||||
}>();
|
||||
|
||||
interface EventSlot {
|
||||
type: "slot",
|
||||
id: string,
|
||||
event?: ScheduleEvent,
|
||||
slot?: TimeSlot,
|
||||
origLocation: string,
|
||||
name: string,
|
||||
location: string,
|
||||
start: DateTime,
|
||||
end: DateTime,
|
||||
}
|
||||
|
||||
interface Gap {
|
||||
type: "gap",
|
||||
id?: undefined,
|
||||
event?: undefined,
|
||||
slot?: undefined,
|
||||
name?: undefined,
|
||||
location?: string,
|
||||
start: DateTime,
|
||||
end: DateTime,
|
||||
}
|
||||
|
||||
function toId(name: string) {
|
||||
return name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
|
||||
}
|
||||
|
||||
function status(eventSlot: EventSlot) {
|
||||
if (
|
||||
!eventSlot.event
|
||||
|| eventSlot.event.name !== eventSlot.name
|
||||
) {
|
||||
const event = schedule.value.events.find(event => event.name === eventSlot.name);
|
||||
return event ? "L" : "N";
|
||||
}
|
||||
return eventSlot.event.slots.length === 1 ? "" : eventSlot.event.slots.length;
|
||||
}
|
||||
|
||||
// Filter out set records where a del record exists for the same id.
|
||||
function filterSetOps<T extends { op: "set" | "del", data: { id: string }}>(changes: T[]) {
|
||||
const deleteIds = new Set(changes.filter(c => c.op === "del").map(c => c.data.id));
|
||||
return changes.filter(c => c.op !== "set" || !deleteIds.has(c.data.id));
|
||||
}
|
||||
|
||||
function findEvent(
|
||||
eventSlot: EventSlot,
|
||||
changes: ChangeRecord<ScheduleEvent>[],
|
||||
schedule: Schedule,
|
||||
) {
|
||||
let setEvent = changes.find(
|
||||
c => c.op === "set" && c.data.name === eventSlot.name
|
||||
)?.data as ScheduleEvent | undefined;
|
||||
if (!setEvent && eventSlot.event && eventSlot.event.name === eventSlot.name) {
|
||||
setEvent = eventSlot.event;
|
||||
}
|
||||
if (!setEvent) {
|
||||
setEvent = schedule.events.find(e => e.name === eventSlot.name);
|
||||
}
|
||||
let delEvent;
|
||||
if (eventSlot.event) {
|
||||
delEvent = changes.find(
|
||||
c => c.op === "set" && c.data.name === eventSlot.event!.name
|
||||
)?.data as ScheduleEvent | undefined;
|
||||
if (!delEvent) {
|
||||
delEvent = schedule.events.find(e => e.name === eventSlot.event!.name);
|
||||
}
|
||||
}
|
||||
return { setEvent, delEvent };
|
||||
}
|
||||
|
||||
function removeSlotLocation(event: ScheduleEvent, oldSlot: TimeSlot, location: string) {
|
||||
// If location is an exact match remove the whole slot
|
||||
if (oldSlot.locations.length === 1 && oldSlot.locations[0] === location) {
|
||||
return {
|
||||
...event,
|
||||
slots: event.slots.filter(s => s.id !== oldSlot.id),
|
||||
};
|
||||
}
|
||||
// Otherwise filter out location
|
||||
return {
|
||||
...event,
|
||||
slots: event.slots.map(
|
||||
s => s.id !== oldSlot.id ? s : {
|
||||
...s,
|
||||
locations: s.locations.filter(l => l !== location)
|
||||
}
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
function mergeSlot(event: ScheduleEvent, eventSlot: EventSlot): ScheduleEvent {
|
||||
const oldSlot = event.slots.find(s => s.id === eventSlot.id);
|
||||
const nextId = Math.max(-1, ...event.slots.map(s => {
|
||||
const id = /-(\d+)$/.exec(s.id)?.[1];
|
||||
return id ? parseInt(id) : 0;
|
||||
})) + 1;
|
||||
const start = eventSlot.start.toUTC().toISO({ suppressSeconds: true })!;
|
||||
const end = eventSlot.end.toUTC().toISO({ suppressSeconds: true })!;
|
||||
|
||||
// Edit slot in-place if possible
|
||||
if (
|
||||
oldSlot
|
||||
&& oldSlot.id === eventSlot.id
|
||||
&& (
|
||||
oldSlot.locations.length <= 1
|
||||
|| oldSlot.start === start && oldSlot.end === end
|
||||
)
|
||||
) {
|
||||
return {
|
||||
...event,
|
||||
slots: event.slots.map(s => {
|
||||
if (s.id !== oldSlot.id)
|
||||
return s;
|
||||
const locations = new Set(s.locations);
|
||||
locations.delete(eventSlot.origLocation)
|
||||
locations.add(eventSlot.location);
|
||||
return {
|
||||
...s,
|
||||
locations: [...locations],
|
||||
start,
|
||||
end,
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
// Else remove old slot if it exist and insert a new one
|
||||
if (oldSlot) {
|
||||
event = removeSlotLocation(event, oldSlot, eventSlot.origLocation);
|
||||
}
|
||||
|
||||
return {
|
||||
...event,
|
||||
slots: [...event.slots, {
|
||||
id: oldSlot ? oldSlot.id : `${event.id}-${nextId}`,
|
||||
locations: [eventSlot.location],
|
||||
start,
|
||||
end,
|
||||
}],
|
||||
};
|
||||
}
|
||||
|
||||
const scheduleChanges = computed(() => {
|
||||
let eventChanges: ChangeRecord<ScheduleEvent>[] = [];
|
||||
for (const change of filterSetOps(changes.value)) {
|
||||
if (change.op === "set") {
|
||||
let { setEvent, delEvent } = findEvent(change.data, eventChanges, schedule.value);
|
||||
if (delEvent && delEvent !== setEvent) {
|
||||
eventChanges = removeSlot(eventChanges, delEvent, change.data);
|
||||
}
|
||||
if (!setEvent) {
|
||||
setEvent = {
|
||||
id: toId(change.data.name),
|
||||
name: change.data.name,
|
||||
crew: true,
|
||||
slots: [],
|
||||
};
|
||||
}
|
||||
|
||||
eventChanges = replaceChange({
|
||||
op: "set",
|
||||
data: mergeSlot(setEvent, change.data),
|
||||
}, eventChanges);
|
||||
|
||||
} else if (change.op === "del") {
|
||||
let { delEvent } = findEvent(change.data, eventChanges, schedule.value);
|
||||
if (delEvent) {
|
||||
eventChanges = removeSlot(eventChanges, delEvent, change.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
return eventChanges;
|
||||
});
|
||||
|
||||
const schedulePreview = computed(() => {
|
||||
const events = [...schedule.value.events]
|
||||
applyChangeArray(scheduleChanges.value, events);
|
||||
return {
|
||||
...schedule.value,
|
||||
events,
|
||||
};
|
||||
});
|
||||
|
||||
function removeSlot(eventChanges: ChangeRecord<ScheduleEvent>[], event: ScheduleEvent, eventSlot: EventSlot) {
|
||||
let oldSlot = event.slots.find(s => s.id === eventSlot.id);
|
||||
if (oldSlot) {
|
||||
eventChanges = replaceChange({
|
||||
op: "set",
|
||||
data: removeSlotLocation(event, oldSlot, eventSlot.origLocation),
|
||||
}, eventChanges);
|
||||
}
|
||||
return eventChanges;
|
||||
}
|
||||
|
||||
const { data: session } = await useAccountSession();
|
||||
const schedule = await useSchedule();
|
||||
const runtimeConfig = useRuntimeConfig();
|
||||
const timezone = computed(
|
||||
() => session.value?.account?.timezone ?? runtimeConfig.public.defaultTimezone
|
||||
);
|
||||
|
||||
type EventSlotChange = { op: "set" | "del", data: EventSlot } ;
|
||||
|
||||
const changes = ref<EventSlotChange[]>([]);
|
||||
const removed = computed(() => new Set(changes.value.filter(c => c.op === "del").map(c => c.data.id)));
|
||||
|
||||
function replaceChange<T extends { op: "set" | "del", data: { id: string }}>(
|
||||
change: T,
|
||||
changes: T[],
|
||||
) {
|
||||
const index = changes.findIndex(item => (
|
||||
item.op === change.op && item.data.id === change.data.id
|
||||
));
|
||||
const copy = [...changes];
|
||||
if (index !== -1)
|
||||
copy.splice(index, 1, change);
|
||||
else
|
||||
copy.push(change);
|
||||
return copy;
|
||||
}
|
||||
function revertChange<T extends { op: "set" | "del", data: { id: string }}>(id: string, changes: T[]) {
|
||||
return changes.filter(change => change.data.id !== id);
|
||||
}
|
||||
|
||||
const oneDayMs = 24 * 60 * 60 * 1000;
|
||||
function dropDay(diff: Duration) {
|
||||
if (diff.toMillis() >= oneDayMs) {
|
||||
return diff.minus({ days: 1 });
|
||||
}
|
||||
return diff;
|
||||
}
|
||||
|
||||
const newEventStart = ref("");
|
||||
const newEventDuration = ref("01:00");
|
||||
const newEventEnd = computed({
|
||||
get: () => (
|
||||
DateTime.fromISO(newEventStart.value, { zone: timezone.value })
|
||||
.plus(Duration.fromISOTime(newEventDuration.value))
|
||||
.toFormat("HH:mm")
|
||||
),
|
||||
set: (value: string) => {
|
||||
const start = DateTime.fromISO(newEventStart.value, { zone: timezone.value });
|
||||
const end = endFromTime(start, value);
|
||||
newEventDuration.value = dropDay(end.diff(start)).toFormat("hh:mm");
|
||||
},
|
||||
});
|
||||
const newEventLocation = ref(props.location);
|
||||
watch(() => props.location, () => {
|
||||
newEventLocation.value = props.location;
|
||||
});
|
||||
|
||||
function endFromTime(start: DateTime, time: string) {
|
||||
let end = start.startOf("day").plus(Duration.fromISOTime(time));
|
||||
if (end.toMillis() <= start.toMillis()) {
|
||||
end = end.plus({ days: 1 });
|
||||
}
|
||||
return end;
|
||||
}
|
||||
function durationFromTime(time: string) {
|
||||
let duration = Duration.fromISOTime(time);
|
||||
if (duration.toMillis() === 0) {
|
||||
duration = Duration.fromMillis(oneDayMs);
|
||||
}
|
||||
return duration;
|
||||
}
|
||||
const newEventName = ref("");
|
||||
function editEventSlot(
|
||||
eventSlot: EventSlot,
|
||||
edits: {
|
||||
start?: string,
|
||||
end?: string,
|
||||
duration?: string,
|
||||
name?: string,
|
||||
location?: string,
|
||||
}
|
||||
) {
|
||||
if (edits.start) {
|
||||
const start = DateTime.fromISO(edits.start, { zone: timezone.value });
|
||||
eventSlot = {
|
||||
...eventSlot,
|
||||
start,
|
||||
end: start.plus(eventSlot.end.diff(eventSlot.start)),
|
||||
};
|
||||
}
|
||||
if (edits.end !== undefined) {
|
||||
|
||||
eventSlot = {
|
||||
...eventSlot,
|
||||
end: endFromTime(eventSlot.start, edits.end),
|
||||
};
|
||||
}
|
||||
if (edits.duration !== undefined) {
|
||||
eventSlot = {
|
||||
...eventSlot,
|
||||
end: eventSlot.start.plus(durationFromTime(edits.duration)),
|
||||
};
|
||||
}
|
||||
if (edits.name !== undefined) {
|
||||
eventSlot = {
|
||||
...eventSlot,
|
||||
name: edits.name,
|
||||
};
|
||||
}
|
||||
if (edits.location !== undefined) {
|
||||
eventSlot = {
|
||||
...eventSlot,
|
||||
location: edits.location,
|
||||
};
|
||||
}
|
||||
const change = { op: "set" as const, data: eventSlot };
|
||||
changes.value = replaceChange(change, changes.value);
|
||||
}
|
||||
function delEventSlot(eventSlot: EventSlot) {
|
||||
const change = { op: "del" as const, data: eventSlot };
|
||||
changes.value = replaceChange(change, changes.value);
|
||||
}
|
||||
function revertEventSlot(id: string) {
|
||||
changes.value = revertChange(id, changes.value);
|
||||
}
|
||||
function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
|
||||
const name = newEventName.value;
|
||||
const location = newEventLocation.value;
|
||||
if (!location) {
|
||||
alert("Invalid location");
|
||||
return;
|
||||
}
|
||||
let start;
|
||||
let end;
|
||||
const duration = durationFromTime(newEventDuration.value);
|
||||
if (!duration.isValid) {
|
||||
alert("Invalid duration");
|
||||
return;
|
||||
}
|
||||
if (options.start) {
|
||||
start = options.start;
|
||||
end = options.start.plus(duration);
|
||||
} else if (options.end) {
|
||||
end = options.end;
|
||||
start = options.end.minus(duration);
|
||||
} else {
|
||||
start = DateTime.fromISO(newEventStart.value, { zone: timezone.value });
|
||||
end = endFromTime(start, newEventEnd.value);
|
||||
}
|
||||
if (!start.isValid || !end.isValid) {
|
||||
alert("Invalid start and/or end time");
|
||||
return;
|
||||
}
|
||||
const change: ChangeRecord<EventSlot> = {
|
||||
op: "set" as const,
|
||||
data: {
|
||||
type: "slot",
|
||||
id: `$new-${Date.now()}`,
|
||||
name,
|
||||
origLocation: location,
|
||||
location,
|
||||
start,
|
||||
end,
|
||||
},
|
||||
};
|
||||
newEventName.value = "";
|
||||
changes.value = replaceChange(change, changes.value);
|
||||
}
|
||||
async function saveEventSlots() {
|
||||
try {
|
||||
await $fetch("/api/schedule", {
|
||||
method: "PATCH",
|
||||
body: { events: scheduleChanges.value },
|
||||
});
|
||||
changes.value = [];
|
||||
} catch (err: any) {
|
||||
console.error(err);
|
||||
alert(err?.data?.message ?? err.message);
|
||||
}
|
||||
}
|
||||
|
||||
const oneHourMs = 60 * 60 * 1000;
|
||||
function gapFormat(gap: Gap) {
|
||||
let diff = gap.end.diff(gap.start);
|
||||
if (diff.toMillis() % oneHourMs !== 0)
|
||||
diff = diff.shiftTo("hours", "minutes");
|
||||
else
|
||||
diff = diff.shiftTo("hours");
|
||||
return diff.toHuman({ listStyle: "short", unitDisplay: "short" });
|
||||
}
|
||||
|
||||
const eventSlots = computed(() => {
|
||||
const data: (EventSlot | Gap)[] = [];
|
||||
for (const event of schedule.value.events) {
|
||||
for (const slot of event.slots) {
|
||||
for (const location of slot.locations) {
|
||||
if (props.location !== undefined && location !== props.location)
|
||||
continue;
|
||||
data.push({
|
||||
type: "slot",
|
||||
id: slot.id,
|
||||
event,
|
||||
slot,
|
||||
name: event.name,
|
||||
location,
|
||||
origLocation: location,
|
||||
start: DateTime.fromISO(slot.start, { zone: timezone.value }),
|
||||
end: DateTime.fromISO(slot.end, { zone: timezone.value }),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
applyChangeArray(changes.value.filter(change => change.op === "set"), data as EventSlot[]);
|
||||
data.sort((a, b) => a.start.toMillis() - b.start.toMillis() || a.end.toMillis() - b.end.toMillis());
|
||||
|
||||
// Insert gaps
|
||||
let maxEnd = 0;
|
||||
const gaps: [number, Gap][] = []
|
||||
for (const [index, [first, second]] of enumerate(pairs(data))) {
|
||||
maxEnd = Math.max(maxEnd, first.end.toMillis());
|
||||
if (maxEnd < second.start.toMillis()) {
|
||||
gaps.push([index, {
|
||||
type: "gap",
|
||||
location: props.location,
|
||||
start: DateTime.fromMillis(maxEnd),
|
||||
end: second.start,
|
||||
}]);
|
||||
}
|
||||
}
|
||||
gaps.reverse();
|
||||
for (const [index, gap] of gaps) {
|
||||
data.splice(index + 1, 0, gap);
|
||||
}
|
||||
return data;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
label {
|
||||
display: inline;
|
||||
padding-inline-end: 0.75em;
|
||||
}
|
||||
table {
|
||||
margin-block-start: 1rem;
|
||||
border-spacing: 0;
|
||||
}
|
||||
table th {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--foreground);
|
||||
}
|
||||
table :is(th, td) + :is(th, td) {
|
||||
padding-inline-start: 0.4em;
|
||||
}
|
||||
.gap {
|
||||
height: 1.8em;
|
||||
}
|
||||
.removed {
|
||||
background-color: color-mix(in oklab, var(--background), rgb(255, 0, 0) 40%);
|
||||
}
|
||||
.removed :is(td, input) {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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"
|
||||
><All locations></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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue