Hornwitser
5144bf2b37
Allow a shift to have no role associated with it in order to simplify conflict resolution around situations like a shift being created while the role it was assoiated with was deleted. This also allows for shifts that are freestanding to be created in case having a role doesn't make sense for it.
390 lines
9.4 KiB
Vue
390 lines
9.4 KiB
Vue
<template>
|
|
<div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>start</th>
|
|
<th>end</th>
|
|
<th>duration</th>
|
|
<th>shift</th>
|
|
<th>role</th>
|
|
<th>assigned</th>
|
|
<th v-if="edit"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-if="edit">
|
|
<tr
|
|
v-for="ss in shiftSlots"
|
|
:key='ss.slot?.id ?? ss.start.toMillis()'
|
|
:class='{
|
|
removed: ss.slot?.deleted || ss.shift?.deleted,
|
|
gap: ss.type === "gap",
|
|
}'
|
|
>
|
|
<template v-if="ss.type === 'gap'">
|
|
<td colspan="2">
|
|
{{ gapFormat(ss) }}
|
|
gap
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="time"
|
|
v-model="newShiftDuration"
|
|
>
|
|
</td>
|
|
<td>
|
|
<SelectSingleEntity
|
|
:entities="schedule.shifts"
|
|
v-model="newShiftId"
|
|
/>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>
|
|
Add at
|
|
<button
|
|
type="button"
|
|
@click="newShiftSlot({ start: ss.start })"
|
|
>Start</button>
|
|
<button
|
|
type="button"
|
|
@click="newShiftSlot({ end: ss.end })"
|
|
>End</button>
|
|
</td>
|
|
</template>
|
|
<template v-else-if='edit'>
|
|
<td>
|
|
<input
|
|
type="datetime-local"
|
|
:value="ss.start.toFormat('yyyy-LL-dd\'T\'HH:mm')"
|
|
@blur="editShiftSlot(ss, { start: ($event as any).target.value })"
|
|
>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="time"
|
|
:value="ss.end.toFormat('HH:mm')"
|
|
@input="editShiftSlot(ss, { end: ($event as any).target.value })"
|
|
>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="time"
|
|
:value='dropDay(ss.end.diff(ss.start)).toFormat("hh:mm")'
|
|
@input="editShiftSlot(ss, { duration: ($event as any).target.value })"
|
|
>
|
|
</td>
|
|
<td>
|
|
<SelectSingleEntity
|
|
:entities="schedule.shifts"
|
|
:modelValue="ss.slot.shiftId"
|
|
@update:modelValue="ss.slot.setShiftId($event)"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<SelectSingleEntity
|
|
v-if="ss.shift"
|
|
:entities="schedule.roles"
|
|
v-model="ss.shift.roleId"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<SelectMultiEntity
|
|
:entities="usersStore.users"
|
|
v-model="ss.slot.assigned"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<button
|
|
:disabled="ss.slot.deleted"
|
|
type="button"
|
|
@click="ss.slot.deleted = true"
|
|
>Remove</button>
|
|
<button
|
|
v-if="ss.slot.isModified()"
|
|
type="button"
|
|
@click="schedule.discardShiftSlot(ss.slot.id)"
|
|
>Revert</button>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<input
|
|
type="datetime-local"
|
|
v-model="newShiftStart"
|
|
>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="time"
|
|
v-model="newShiftEnd"
|
|
>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="time"
|
|
v-model="newShiftDuration"
|
|
>
|
|
</td>
|
|
<td>
|
|
<SelectSingleEntity
|
|
:entities="schedule.shifts"
|
|
v-model="newShiftId"
|
|
/>
|
|
</td>
|
|
<td></td>
|
|
<td colspan="2">
|
|
<button
|
|
type="button"
|
|
@click="newShiftSlot()"
|
|
>Add Shift</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template v-else>
|
|
<tr
|
|
v-for="ss in shiftSlots"
|
|
:key='ss.slot?.id ?? ss.start.toMillis()'
|
|
:class='{
|
|
gap: ss.type === "gap",
|
|
}'
|
|
>
|
|
<template v-if="ss.type === 'gap'">
|
|
<td colspan="2">
|
|
{{ gapFormat(ss) }}
|
|
gap
|
|
</td>
|
|
</template>
|
|
<template v-else>
|
|
<td>{{ ss.start.toFormat("yyyy-LL-dd HH:mm") }}</td>
|
|
<td>{{ ss.end.toFormat("HH:mm") }}</td>
|
|
<td>{{ ss.end.diff(ss.start).toFormat('hh:mm') }}</td>
|
|
<td>{{ ss.shift?.name }}</td>
|
|
<td>{{ ss.shift?.roleId }}</td>
|
|
<td>
|
|
<AssignedCrew :modelValue="ss.slot.assigned" :edit="false" />
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { DateTime, Duration } from '~/shared/utils/luxon';
|
|
import { enumerate, pairs, toId } from '~/shared/utils/functions';
|
|
import type { Id } from '~/shared/types/common';
|
|
|
|
const props = defineProps<{
|
|
edit?: boolean,
|
|
roleId?: Id,
|
|
shiftSlotFilter?: (slot: ClientScheduleShiftSlot) => boolean,
|
|
}>();
|
|
|
|
interface ShiftSlot {
|
|
type: "slot",
|
|
id: Id,
|
|
shift?: ClientScheduleShift,
|
|
slot: ClientScheduleShiftSlot,
|
|
start: DateTime,
|
|
end: DateTime,
|
|
}
|
|
|
|
interface Gap {
|
|
type: "gap",
|
|
id?: undefined,
|
|
shift?: undefined,
|
|
slot?: undefined,
|
|
start: DateTime,
|
|
end: DateTime,
|
|
}
|
|
|
|
const accountStore = useAccountStore();
|
|
const usersStore = useUsersStore();
|
|
await usersStore.fetch();
|
|
const schedule = await useSchedule();
|
|
|
|
const oneDayMs = 24 * 60 * 60 * 1000;
|
|
function dropDay(diff: Duration) {
|
|
if (diff.toMillis() >= oneDayMs) {
|
|
return diff.minus({ days: 1 });
|
|
}
|
|
return diff;
|
|
}
|
|
|
|
const newShiftStart = ref("");
|
|
const newShiftDuration = ref("01:00");
|
|
const newShiftEnd = computed({
|
|
get: () => {
|
|
try {
|
|
return DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale })
|
|
.plus(Duration.fromISOTime(newShiftDuration.value, { locale: accountStore.activeLocale }))
|
|
.toFormat("HH:mm")
|
|
} catch (err) {
|
|
return "";
|
|
}
|
|
},
|
|
set: (value: string) => {
|
|
const start = DateTime.fromISO(newShiftStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
|
|
const end = endFromTime(start, value);
|
|
newShiftDuration.value = dropDay(end.diff(start)).toFormat("hh:mm");
|
|
},
|
|
});
|
|
|
|
function endFromTime(start: DateTime, time: string) {
|
|
let end = start.startOf("day").plus(Duration.fromISOTime(time, { locale: accountStore.activeLocale }));
|
|
if (end.toMillis() <= start.toMillis()) {
|
|
end = end.plus({ days: 1 });
|
|
}
|
|
return end;
|
|
}
|
|
function durationFromTime(time: string) {
|
|
let duration = Duration.fromISOTime(time, { locale: accountStore.activeLocale });
|
|
if (duration.toMillis() === 0) {
|
|
duration = Duration.fromMillis(oneDayMs, { locale: accountStore.activeLocale });
|
|
}
|
|
return duration;
|
|
}
|
|
const newShiftId = ref<Id>();
|
|
|
|
function editShiftSlot(
|
|
shiftSlot: ShiftSlot,
|
|
edits: {
|
|
start?: string,
|
|
end?: string,
|
|
duration?: string,
|
|
}
|
|
) {
|
|
if (edits.start) {
|
|
const start = DateTime.fromISO(edits.start, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
|
|
shiftSlot.slot.start = start;
|
|
shiftSlot.slot.end = start.plus(shiftSlot.slot.end.diff(shiftSlot.slot.start));
|
|
}
|
|
if (edits.end !== undefined) {
|
|
shiftSlot.slot.end = endFromTime(shiftSlot.slot.start, edits.end);
|
|
}
|
|
if (edits.duration !== undefined) {
|
|
shiftSlot.slot.end = shiftSlot.slot.start.plus(durationFromTime(edits.duration));
|
|
}
|
|
}
|
|
function newShiftSlot(options: { start?: DateTime, end?: DateTime } = {}) {
|
|
const shift = schedule.value.shifts.get(newShiftId.value!);
|
|
if (!shift) {
|
|
alert("Invalid shift");
|
|
return;
|
|
}
|
|
let start;
|
|
let end;
|
|
const duration = durationFromTime(newShiftDuration.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(newShiftStart.value, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
|
|
end = endFromTime(start, newShiftEnd.value);
|
|
}
|
|
if (!start.isValid || !end.isValid) {
|
|
alert("Invalid start and/or end time");
|
|
return;
|
|
}
|
|
const slot = ClientScheduleShiftSlot.create(
|
|
schedule.value,
|
|
schedule.value.nextClientId--,
|
|
shift.id,
|
|
start,
|
|
end,
|
|
new Set(),
|
|
);
|
|
schedule.value.shiftSlots.set(slot.id, slot);
|
|
shift.slotIds.add(slot.id);
|
|
newShiftId.value = undefined;
|
|
}
|
|
|
|
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 shiftSlots = computed(() => {
|
|
const data: (ShiftSlot | Gap)[] = [];
|
|
for (const slot of schedule.value.shiftSlots.values()) {
|
|
const shift = schedule.value.shifts.get(slot.shiftId!);
|
|
if (shift && props.roleId !== undefined && shift.roleId !== props.roleId)
|
|
continue;
|
|
if (props.shiftSlotFilter && !props.shiftSlotFilter(slot))
|
|
continue;
|
|
data.push({
|
|
type: "slot",
|
|
id: slot.id,
|
|
shift,
|
|
slot,
|
|
start: slot.start,
|
|
end: slot.end,
|
|
});
|
|
}
|
|
const byTime = (a: DateTime, b: DateTime) => a.toMillis() - b.toMillis();
|
|
data.sort((a, b) => byTime(a.start, b.start) || byTime(a.end, b.end));
|
|
|
|
// 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",
|
|
start: DateTime.fromMillis(maxEnd, { locale: accountStore.activeLocale }),
|
|
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>
|