2025-06-30 18:58:24 +02:00
|
|
|
<!--
|
|
|
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
|
|
|
-->
|
2025-06-24 15:41:53 +02:00
|
|
|
<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>
|
