diff --git a/components/CardEvent.vue b/components/CardEvent.vue
index 4082abc..baca351 100644
--- a/components/CardEvent.vue
+++ b/components/CardEvent.vue
@@ -8,6 +8,14 @@
Host: {{ event.host }}
+
+
+ ⚠️
+
+
+ {{ event.notice }}
+
+
{{ event.description ?? "No description provided" }}
{{ 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;
}
diff --git a/components/CardEventSlot.vue b/components/CardEventSlot.vue
index baa2e3a..3544be2 100644
--- a/components/CardEventSlot.vue
+++ b/components/CardEventSlot.vue
@@ -13,6 +13,14 @@
Host: {{ event.host }}
+
+
+ ⚠️
+
+
+ {{ event.notice }}
+
+
{{ event?.description ?? "No description provided" }}
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;
}
diff --git a/components/TableScheduleEvents.vue b/components/TableScheduleEvents.vue
index 7555bf3..ab66e81 100644
--- a/components/TableScheduleEvents.vue
+++ b/components/TableScheduleEvents.vue
@@ -10,6 +10,7 @@
id |
name |
host |
+ notice |
description |
p |
s |
@@ -38,6 +39,13 @@
v-model="event.host"
>
+
+
+ |
|
+
+
+ |
|
{{ event.name }} |
{{ event.host }} |
+ {{ event.notice }} |
{{ event.description }} |
{{ event.crew ? "" : "Yes"}} |
{{ event.slots.size ? event.slots.size : "" }} |
@@ -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;
}
diff --git a/components/Timetable.vue b/components/Timetable.vue
index 07ce65d..403c77b 100644
--- a/components/Timetable.vue
+++ b/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 }}
diff --git a/server/generate-demo-schedule.ts b/server/generate-demo-schedule.ts
index dd32003..7029c06 100644
--- a/server/generate-demo-schedule.ts
+++ b/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)),