Add UI to edit and display event notices

Add a warning like display of event notices to the event card and the
event slot card and indicate in the timesheet that an event has a
notice.  Also includes the input controls needed to edit the notice.

components/CardEvent.vue

@@ -8,6 +8,14 @@
 		<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>
 		<p class="preWrap">{{ event.description ?? "No description provided" }}</p>
 		<p v-if="event.interested">
 			{{ event.interested }} interested
@@ -79,6 +87,22 @@ async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
 	margin-block-start: 0.5rem;
 }
 
+.notice {
+	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;
 }

components/CardEventSlot.vue

@@ -13,6 +13,14 @@
 		<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>
 		<p class="preWrap">{{ event?.description ?? "No description provided" }}</p>
 		<p v-if="locations.length">
 			At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }}
@@ -62,6 +70,22 @@ function formatTime(time: DateTime) {
 	margin-block-start: 0.5rem;
 }
 
+.notice {
+	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;
 }

components/TableScheduleEvents.vue

@@ -10,6 +10,7 @@
 					<th>id</th>
 					<th>name</th>
 					<th>host</th>
+					<th>notice</th>
 					<th>description</th>
 					<th>p</th>
 					<th>s</th>
@@ -38,6 +39,13 @@
 								v-model="event.host"
 							>
 						</td>
+						<td>
+							<textarea
+								rows="1"
+								:disabled="!canEdit(event)"
+								v-model="event.notice"
+							/>
+						</td>
 						<td>
 							<textarea
 								rows="1"
@@ -81,6 +89,12 @@
 								v-model="newEventHost"
 							>
 						</td>
+						<td>
+							<textarea
+								rows="1"
+								v-model="newEventNotice"
+							/>
+						</td>
 						<td>
 							<textarea
 								rows="1"
@@ -116,6 +130,7 @@
 						<td>{{ event.id }}</td>
 						<td>{{ event.name }}</td>
 						<td>{{ event.host }}</td>
+						<td class="preWrap">{{ event.notice }}</td>
 						<td class="preWrap">{{ event.description }}</td>
 						<td>{{ event.crew ? "" : "Yes"}}</td>
 						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
@@ -143,6 +158,7 @@ function canEdit(event: ClientScheduleEvent) {
 
 const newEventName = ref("");
 const newEventHost = ref("");
+const newEventNotice = ref("");
 const newEventDescription = ref("");
 const newEventPublic = ref(false);
 function eventExists(name: string) {
@@ -165,7 +181,7 @@ function newEvent() {
 		!newEventPublic.value,
 		newEventHost.value,
 		false,
-		"",
+		newEventNotice.value,
 		newEventDescription.value,
 		0,
 		new Set(),
@@ -174,6 +190,7 @@ function newEvent() {
 	schedule.value.events.add(event);
 	newEventName.value = "";
 	newEventHost.value = "";
+	newEventNotice.value = "";
 	newEventDescription.value = "";
 	newEventPublic.value = false;
 }

components/Timetable.vue

@@ -105,6 +105,7 @@
 							:class='{"event": cell.slot, "crew": cell.event?.crew }'
 							:title="cell.event?.name"
 						>
+							{{ cell.event?.notice ? "⚠️" : undefined }}
 							{{ cell.event?.name }}
 						</td>
 					</tr>

server/generate-demo-schedule.ts

@@ -43,6 +43,7 @@ let eventId = 1;
 const events = [
 	{
 		name: "Arcade",
+		notice: "No food or drinks allowed!\n\nClosed drinking containers are okay.",
 		description: "Play retro games!\n\nWe have anything from C64 to PS5.",
 		slots: [
 			"d1 12:00 4h clubhouse",
@@ -339,10 +340,11 @@ export function generateDemoSchedule(): ApiSchedule {
 		id: 111,
 		updatedAt: toIso(toDate(origin, "d-2", "10:01")),
 		events: events.map(
-			({ id, name, crew, description, slots }) => ({
+			({ id, name, crew, notice, description, slots }) => ({
 				id,
 				name,
 				crew,
+				notice,
 				description,
 				interested: eventCounts.get(id),
 				slots: slots.map(shorthand => toSlot(origin, shorthand, slotCounts, eventSlotIdToAssigned)),