Hornwitser
a32a49b281
Add indications in event cards, event slot cards and the timetable for an event or event slot being cancelled by striking it through and dimming the text colour. And a checkbox in the event and event slot list to edit the cancelled status. And a diff entry for the cancelled status on events and event slots.
116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
<!--
|
||
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
||
SPDX-License-Identifier: AGPL-3.0-or-later
|
||
-->
|
||
<template>
|
||
<section
|
||
class="eventSlot"
|
||
:class="{ cancelled: slot.cancelled || event?.cancelled }"
|
||
>
|
||
<hgroup>
|
||
<h3>{{ event?.name }}</h3>
|
||
<p>
|
||
{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
|
||
</p>
|
||
</hgroup>
|
||
<p v-if=event?.host>
|
||
Host: {{ event.host }}
|
||
</p>
|
||
<div v-if="event?.notice" class="notice preWrap">
|
||
<div class="noticeIcon">
|
||
⚠️
|
||
</div>
|
||
<p>
|
||
{{ event.notice }}
|
||
</p>
|
||
</div>
|
||
<div
|
||
v-if="descriptionHtml !== undefined"
|
||
class="flow"
|
||
v-html="descriptionHtml"
|
||
/>
|
||
<p v-if="locations.length">
|
||
At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }}
|
||
</p>
|
||
<p v-if="event?.interested">
|
||
{{ event?.interested }}
|
||
<template v-if="slot.interested">
|
||
+ {{ slot.interested }}
|
||
</template>
|
||
interested
|
||
</p>
|
||
<p v-if="slot.assigned.size">
|
||
Crew:
|
||
{{ [...slot.assigned].map(id => usersStore.users.get(id)?.name).join(", ") }}
|
||
</p>
|
||
</section>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { micromark } from 'micromark';
|
||
import { DateTime } from '~/shared/utils/luxon';
|
||
|
||
const props = defineProps<{
|
||
event?: ClientScheduleEvent,
|
||
slot: ClientScheduleEventSlot,
|
||
}>()
|
||
|
||
const descriptionHtml = computed(() => {
|
||
if (props.event?.description)
|
||
return micromark(props.event.description);
|
||
return undefined;
|
||
});
|
||
|
||
const scheduleStore = useSchedulesStore();
|
||
const schedule = scheduleStore.activeSchedule;
|
||
|
||
const usersStore = useUsersStore();
|
||
const locations = computed(() => [...props.slot.locationIds].map(id => schedule.value.locations.get(id)));
|
||
|
||
function formatTime(time: DateTime) {
|
||
return time.toFormat("yyyy-LL-dd HH:mm");
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.eventSlot {
|
||
background: color-mix(in oklab, var(--background), grey 20%);
|
||
padding: 0.5rem;
|
||
border-radius: 0.5rem;
|
||
}
|
||
.eventSlot.cancelled>* {
|
||
text-decoration: line-through;
|
||
color: grey;
|
||
}
|
||
.eventSlot h3 {
|
||
margin: 0;
|
||
}
|
||
.eventSlot + .eventSlot {
|
||
margin-block-start: 0.5rem;
|
||
}
|
||
|
||
.eventSlot .notice {
|
||
text-decoration: none;
|
||
color: CanvasText;
|
||
display: flex;
|
||
width: fit-content;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem;
|
||
margin-block: 0.5rem;
|
||
border-radius: 0.25rem;
|
||
border: 1px solid color-mix(in oklab, CanvasText, orange 50%);
|
||
background-color: color-mix(in oklab, Canvas, orange 40%);
|
||
}
|
||
.noticeIcon {
|
||
flex: 0 0 auto;
|
||
align-self: center;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
button {
|
||
padding-inline: 0.2em;
|
||
}
|
||
button.active {
|
||
color: color-mix(in oklab, var(--foreground), green 50%);
|
||
}
|
||
</style>
|