Hornwitser
4ff3dcb3fe
When async components are added dynamically to the tree via v-for list that change their order and position gets messed up. I am not sure what causes this, so I will just work around the issue for now and not use async components. Components that need async data loaded will instead depend on the parent page fetching this data during its setup.
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">
|
|
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>
|