From a32a49b281e7d08f76154e7ec29d46acd2e518f3 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Sun, 21 Sep 2025 23:15:10 +0200
Subject: [PATCH] Add UI for setting cancelled status

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.
---
 components/CardEvent.vue               | 20 +++++++++++++++++---
 components/CardEventSlot.vue           | 13 +++++++++++--
 components/DiffScheduleEvent.vue       |  6 ++++++
 components/DiffScheduleEventSlot.vue   |  6 ++++++
 components/TableScheduleEventSlots.vue |  9 +++++++++
 components/TableScheduleEvents.vue     |  9 +++++++++
 components/Timetable.vue               | 11 ++++++++++-
 7 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/components/CardEvent.vue b/components/CardEvent.vue
index cec96b9..0d90894 100644
--- a/components/CardEvent.vue
+++ b/components/CardEvent.vue
@@ -3,7 +3,10 @@
 	SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<section class="event">
+	<section
+		class="event"
+		:class="{ cancelled: event.cancelled }"
+	>
 		<h3>{{ event.name }}</h3>
 		<p v-if=event.host>
 			Host: {{ event.host }}
@@ -36,7 +39,12 @@
 
 		<h4>Timeslots</h4>
 		<ul>
-			<li v-for="slot in event.slots.values()" :key="slot.id">
+			<li
+				v-for="slot in event.slots.values()"
+				:key="slot.id"
+				class="slot"
+				:class="{ cancelled: slot.cancelled }"
+			>
 				{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
 				<button
 					v-if="accountStore.valid && event.slots.size > 1"
@@ -91,6 +99,10 @@ async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
 	padding: 0.5rem;
 	border-radius: 0.5rem;
 }
+.event.cancelled>*, .slot.cancelled {
+	text-decoration: line-through;
+	color: grey;
+}
 .event h3 {
 	margin: 0;
 }
@@ -98,7 +110,9 @@ async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
 	margin-block-start: 0.5rem;
 }
 
-.notice {
+.event .notice {
+	text-decoration: none;
+	color: CanvasText;
 	display: flex;
 	width: fit-content;
 	gap: 0.5rem;
diff --git a/components/CardEventSlot.vue b/components/CardEventSlot.vue
index 87c9f20..baecbb5 100644
--- a/components/CardEventSlot.vue
+++ b/components/CardEventSlot.vue
@@ -3,7 +3,10 @@
 	SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<section class="eventSlot">
+	<section
+		class="eventSlot"
+		:class="{ cancelled: slot.cancelled || event?.cancelled }"
+	>
 		<hgroup>
 			<h3>{{ event?.name }}</h3>
 			<p>
@@ -75,6 +78,10 @@ function formatTime(time: DateTime) {
 	padding: 0.5rem;
 	border-radius: 0.5rem;
 }
+.eventSlot.cancelled>* {
+	text-decoration: line-through;
+	color: grey;
+}
 .eventSlot h3 {
 	margin: 0;
 }
@@ -82,7 +89,9 @@ function formatTime(time: DateTime) {
 	margin-block-start: 0.5rem;
 }
 
-.notice {
+.eventSlot .notice {
+	text-decoration: none;
+	color: CanvasText;
 	display: flex;
 	width: fit-content;
 	gap: 0.5rem;
diff --git a/components/DiffScheduleEvent.vue b/components/DiffScheduleEvent.vue
index 6cf081e..959f133 100644
--- a/components/DiffScheduleEvent.vue
+++ b/components/DiffScheduleEvent.vue
@@ -29,6 +29,12 @@
 			:after='event.crew ? "No" : "Yes"'
 			:state
 		/>
+		<DiffFieldString
+			title="Cancelled"
+			:before='event.serverCancelled ? "Yes" : "No"'
+			:after='event.cancelled ? "Yes" : "No"'
+			:state
+		/>
 		<DiffFieldString
 			title="Notice"
 			:before="event.serverNotice"
diff --git a/components/DiffScheduleEventSlot.vue b/components/DiffScheduleEventSlot.vue
index f50b92a..d42df5b 100644
--- a/components/DiffScheduleEventSlot.vue
+++ b/components/DiffScheduleEventSlot.vue
@@ -24,6 +24,12 @@
 			:entities="schedule.locations"
 			:state
 		/>
+		<DiffFieldString
+			title="Cancelled"
+			:before='slot.serverCancelled ? "Yes" : "No"'
+			:after='slot.cancelled ? "Yes" : "No"'
+			:state
+		/>
 		<DiffFieldSetEntityId
 			title="Assigned"
 			:before="slot.serverAssigned"
diff --git a/components/TableScheduleEventSlots.vue b/components/TableScheduleEventSlots.vue
index 9699f79..f692100 100644
--- a/components/TableScheduleEventSlots.vue
+++ b/components/TableScheduleEventSlots.vue
@@ -12,6 +12,7 @@
 					<th>duration</th>
 					<th>event</th>
 					<th>location</th>
+					<th title="cancelled">c</th>
 					<th>assigned</th>
 					<th v-if="edit"></th>
 				</tr>
@@ -50,6 +51,7 @@
 								/>
 							</td>
 							<td></td>
+							<td></td>
 							<td>
 								Add at
 								<button
@@ -97,6 +99,11 @@
 									v-model="es.slot.locationIds"
 								/>
 							</td>
+							<td>
+								<input
+									type="checkbox"
+									v-model="es.slot.cancelled">
+							</td>
 							<td>
 								<SelectMultiEntity
 									:entities="usersStore.users"
@@ -149,6 +156,7 @@
 							/>
 						</td>
 						<td></td>
+						<td></td>
 						<td colspan="2">
 							<button
 								type="button"
@@ -177,6 +185,7 @@
 							<td>{{ es.end.diff(es.start).toFormat('hh:mm') }}</td>
 							<td>{{ es.event?.name }}</td>
 							<td></td>
+							<td>{{ es.slot.cancelled ? "x" : undefined }}</td>
 							<td><AssignedCrew :modelValue="es.slot.assigned" :edit="false" /></td>
 						</template>
 					</tr>
diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index caf3e48..21bfda8 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -14,6 +14,7 @@
 					<th>notice</th>
 					<th>description</th>
 					<th>p</th>
+					<th title="cancelled">c</th>
 					<th>s</th>
 					<th v-if="edit"></th>
 				</tr>
@@ -69,6 +70,13 @@
 								@change="event.crew = !event.crew"
 							>
 						</td>
+						<td>
+							<input
+								type="checkbox"
+								:disabled="!canEdit(event)"
+								v-model="event.cancelled"
+							>
+						</td>
 						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
 						<td>
 							<button
@@ -123,6 +131,7 @@
 							>
 						</td>
 						<td></td>
+						<td></td>
 						<td>
 							<button
 								v-if="eventExists(newEventName)"
diff --git a/components/Timetable.vue b/components/Timetable.vue
index 86e4af9..c73ae80 100644
--- a/components/Timetable.vue
+++ b/components/Timetable.vue
@@ -102,7 +102,11 @@
 							v-for="cell, index in row"
 							:key="index"
 							:colSpan="cell.span"
-							:class='{"event": cell.slot, "crew": cell.event?.crew }'
+							:class="{
+								event: cell.slot,
+								crew: cell.event?.crew,
+								cancelled: cell.event?.cancelled || cell.slot?.cancelled,
+							}"
 							:title="cell.event?.name"
 						>
 							{{ cell.event?.notice ? "⚠️" : undefined }}
@@ -791,4 +795,9 @@ tr.hours>th + th.dayShift div {
 .event.crew {
 	background-color: color-mix(in oklab, var(--background), rgb(127, 127, 127) 60%);
 }
+
+.event.cancelled {
+	color: color-mix(in oklab, CanvasText, rgb(127, 127, 127) 80%);
+	text-decoration: line-through;
+}
 </style>