Hornwitser
7a95d6c3c4
Start component names with the kind of element it creates on the page (button, input, table, card, etc), then follow it with an hierarchy like set of parts describing what part of the system it operates on. This makes related components stick together in the directory listing of components and auto-complete work better.
82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<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 => idToAccount.get(id)?.name).join(", ") }}
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { DateTime } from 'luxon';
|
|
|
|
defineProps<{
|
|
event: ClientScheduleEvent
|
|
}>()
|
|
|
|
const accountStore = useAccountStore();
|
|
const { data: accounts } = await useAccounts();
|
|
const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
|
|
|
|
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>
|