Hornwitser
085e348aa8
It used to be that the assigned property was not present for clients who are not crew, but this changed with the client state refactor. It makes more sense to only show the crew field if there are any crew present.
85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<section class="event">
|
|
<h3>{{ event.name }}</h3>
|
|
<p>{{ event.description ?? "No description provided" }}</p>
|
|
<p v-if="event.interested">
|
|
{{ event.interested }} interested
|
|
</p>
|
|
<p v-if="accountStore.valid">
|
|
<button
|
|
class="interested"
|
|
:class="{ active: accountStore.interestedEventIds.has(event.id) }"
|
|
@click="toggle('event', event.id, [...event.slots.keys()])"
|
|
>
|
|
{{ accountStore.interestedEventIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
|
|
</button>
|
|
</p>
|
|
|
|
<h4>Timeslots</h4>
|
|
<ul>
|
|
<li v-for="slot in event.slots.values()" :key="slot.id">
|
|
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
|
|
<button
|
|
v-if="accountStore.valid && event.slots.size > 1"
|
|
class="interested"
|
|
:disabled="accountStore.interestedEventIds.has(event.id)"
|
|
:class="{ active: accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) }"
|
|
@click="toggle('slot', slot.id)"
|
|
>
|
|
{{ accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) ? "✔ interested" : "🔔 interested?" }}
|
|
</button>
|
|
<template v-if="slot.interested">
|
|
({{ slot.interested }} interested)
|
|
</template>
|
|
<p v-if="slot.assigned.size">
|
|
Crew:
|
|
{{ [...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<{
|
|
event: ClientScheduleEvent
|
|
}>()
|
|
|
|
const accountStore = useAccountStore();
|
|
const usersStore = useUsersStore();
|
|
|
|
function formatTime(time: DateTime) {
|
|
return time.toFormat("yyyy-LL-dd HH:mm");
|
|
}
|
|
|
|
async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
|
|
await accountStore.toggleInterestedId(type, id, slotIds);
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.event {
|
|
background: color-mix(in oklab, var(--background), grey 20%);
|
|
padding: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.event h3 {
|
|
margin: 0;
|
|
}
|
|
.event + .event {
|
|
margin-block-start: 0.5rem;
|
|
}
|
|
|
|
button {
|
|
padding-inline: 0.2em;
|
|
}
|
|
button.active {
|
|
color: color-mix(in oklab, var(--foreground), green 50%);
|
|
}
|
|
</style>
|