Mark /api/events endpoint as uncachable

The content of the events stream is generated live in response to
changes done in the system as they occur.  It therefore can't be
meaningfully cached or stored in any way.  Mark the response as
uncacheable to prevent potential problems with caches.

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;

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;

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"

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"

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>

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)"

components/Tabs.vue

@@ -55,7 +55,6 @@ nav {
 }
 .tab {
 	display: flex;
-	flex-wrap: wrap;
 }
 .tab.active {
 	padding-block-start: 1px;
@@ -65,6 +64,7 @@ nav {
 }
 .tab .spacer {
 	flex: 1 0 0.75rem;
+	width: 0.75rem;
 }
 .tab .flap,
 .tab .spacer {

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>

server/api/events.ts

@@ -43,6 +43,7 @@ export default defineEventHandler(async (event) => {
 	// Workaround to properly handle stream errors. See https://github.com/unjs/h3/issues/986
 	setHeader(event, "Access-Control-Allow-Origin", "*");
 	setHeader(event, "Content-Type", "text/event-stream");
+	setHeader(event, "Cache-Control", "no-store");
 	pipeline(stream as unknown as NodeJS.ReadableStream, event.node.res, (err) => { /* ignore */ });
 	event._handled = true;
 });

server/streams.ts

@@ -192,9 +192,10 @@ function sendEventToStream(stream: EventStream, event: ApiEvent) {
 	if (event.type === "session-expired") {
 		if (stream.sessionId === event.sessionId) {
 			stream.close("session expired");
-		}
 			return false;
 		}
+		return true;
+	}
 
 	// Account events are specially handled and only sent to the user they belong to.
 	if (event.type === "account-update") {