457 lines
11 KiB
Vue
457 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>start</th>
|
|
<th>end</th>
|
|
<th>duration</th>
|
|
<th>shift</th>
|
|
<th>s</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>
|
|
<input
|
|
type="text"
|
|
v-model="newShiftName"
|
|
>
|
|
</td>
|
|
<td></td>
|
|
<td>
|
|
<select
|
|
v-model="newShiftRoleId"
|
|
>
|
|
<option
|
|
v-for="role in schedule.roles.values()"
|
|
:key="role.id"
|
|
:value="role.id"
|
|
:disabled="role.deleted"
|
|
:selected="role.id === newShiftRoleId"
|
|
>{{ role.name }}</option>
|
|
</select>
|
|
</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>
|
|
<input
|
|
type="text"
|
|
:value="ss.name"
|
|
@input="editShift(ss, { name: ($event as any).target.value })"
|
|
>
|
|
</td>
|
|
<td>{{ status(ss) }}</td>
|
|
<td>
|
|
<select
|
|
:value="ss.role.id"
|
|
@change="editShift(ss, { role: schedule.roles.get(parseInt(($event as any).target.value)) })"
|
|
>
|
|
<option
|
|
v-for="role in schedule.roles.values()"
|
|
:key="role.id"
|
|
:value="role.id"
|
|
:disabled="role.deleted"
|
|
:selected="role.id === ss.role.id"
|
|
>{{ role.name }}</option>
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<AssignedCrew
|
|
:edit="true"
|
|
:modelValue="ss.assigned"
|
|
@update:modelValue="editShiftSlot(ss, { assigned: $event })"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<button
|
|
:disabled="ss.deleted"
|
|
type="button"
|
|
@click="editShiftSlot(ss, { deleted: true })"
|
|
>Remove</button>
|
|
<button
|
|
v-if="schedule.isModifiedShiftSlot(ss.slot.id)"
|
|
type="button"
|
|
@click="revertShiftSlot(ss.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>
|
|
<input
|
|
type="text"
|
|
v-model="newShiftName"
|
|
>
|
|
</td>
|
|
<td colspan="3">
|
|
<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.name }}</td>
|
|
<td>{{ status(ss) }}</td>
|
|
<td>{{ ss.role.id }}</td>
|
|
<td><AssignedCrew :modelValue="ss.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,
|
|
deleted: boolean,
|
|
shift: ClientScheduleShift,
|
|
slot: ClientScheduleShiftSlot,
|
|
name: string,
|
|
role: ClientScheduleRole,
|
|
assigned: Set<Id>,
|
|
start: DateTime,
|
|
end: DateTime,
|
|
}
|
|
|
|
interface Gap {
|
|
type: "gap",
|
|
id?: undefined,
|
|
shift?: undefined,
|
|
slot?: undefined,
|
|
name?: undefined,
|
|
role?: undefined,
|
|
start: DateTime,
|
|
end: DateTime,
|
|
}
|
|
|
|
function status(shiftSlot: ShiftSlot) {
|
|
if (
|
|
!shiftSlot.shift
|
|
|| shiftSlot.shift.name !== shiftSlot.name
|
|
) {
|
|
const shift = [...schedule.value.shifts.values()].find(shift => !shift.deleted && shift.name === shiftSlot.name);
|
|
return shift ? "L" : "N";
|
|
}
|
|
return shiftSlot.shift.slots.size === 1 ? "" : shiftSlot.shift.slots.size;
|
|
}
|
|
|
|
const accountStore = useAccountStore();
|
|
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");
|
|
},
|
|
});
|
|
const newShiftRoleId = ref(props.roleId);
|
|
watch(() => props.roleId, () => {
|
|
newShiftRoleId.value = props.roleId;
|
|
});
|
|
|
|
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 newShiftName = ref("");
|
|
function editShift(
|
|
shiftSlot: ShiftSlot,
|
|
edits: Parameters<ClientSchedule["editShift"]>[1],
|
|
) {
|
|
schedule.value.editShift(shiftSlot.shift, edits);
|
|
}
|
|
|
|
function editShiftSlot(
|
|
shiftSlot: ShiftSlot,
|
|
edits: {
|
|
deleted?: boolean,
|
|
start?: string,
|
|
end?: string,
|
|
duration?: string,
|
|
assigned?: Set<Id>,
|
|
}
|
|
) {
|
|
const computedEdits: Parameters<ClientSchedule["editShiftSlot"]>[1] = {
|
|
deleted: edits.deleted,
|
|
assigned: edits.assigned,
|
|
};
|
|
if (edits.start) {
|
|
const start = DateTime.fromISO(edits.start, { zone: accountStore.activeTimezone, locale: accountStore.activeLocale });
|
|
computedEdits.start = start;
|
|
computedEdits.end = start.plus(shiftSlot.slot.end.diff(shiftSlot.slot.start));
|
|
}
|
|
if (edits.end !== undefined) {
|
|
computedEdits.end = endFromTime(shiftSlot.start, edits.end);
|
|
}
|
|
if (edits.duration !== undefined) {
|
|
computedEdits.end = shiftSlot.start.plus(durationFromTime(edits.duration));
|
|
}
|
|
schedule.value.editShiftSlot(shiftSlot.slot, computedEdits);
|
|
}
|
|
function revertShiftSlot(id: Id) {
|
|
schedule.value.restoreShiftSlot(id);
|
|
}
|
|
function newShiftSlot(options: { start?: DateTime, end?: DateTime } = {}) {
|
|
const name = newShiftName.value;
|
|
const nameId = toId(name);
|
|
const shift = [...schedule.value.shifts.values()].find(shift => toId(shift.name) === nameId);
|
|
if (!shift) {
|
|
alert("Invalid shift");
|
|
return;
|
|
}
|
|
const role = schedule.value.roles.get(newShiftRoleId.value!);
|
|
if (!role) {
|
|
alert("Invalid role");
|
|
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 = new ClientScheduleShiftSlot(
|
|
schedule.value.nextClientId--,
|
|
false,
|
|
shift.id,
|
|
start,
|
|
end,
|
|
new Set(),
|
|
);
|
|
schedule.value.setShiftSlot(slot);
|
|
newShiftName.value = "";
|
|
}
|
|
|
|
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 shift of schedule.value.shifts.values()) {
|
|
if (props.roleId !== undefined && shift.role.id !== props.roleId)
|
|
continue;
|
|
for (const slot of shift.slots.values()) {
|
|
if (props.shiftSlotFilter && !props.shiftSlotFilter(slot))
|
|
continue;
|
|
data.push({
|
|
type: "slot",
|
|
id: slot.id,
|
|
deleted: slot.deleted || shift.deleted,
|
|
shift,
|
|
slot,
|
|
name: shift.name,
|
|
role: shift.role,
|
|
assigned: slot.assigned,
|
|
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>
|