public/owltide
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Add crew designator to events

Browse source 
Distinguish between events for attendees to see and events that are
meant only for the crew.
This commit is contained in:
Hornwitser 2025-03-10 14:40:02 +01:00
parent 40c25f8990
commit db8393c3a9
3 changed files with 96 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

38
components/Timetable.vue
View file

@ -62,9 +62,10 @@
v-for="row, index in locationRows.get(location.id)"
:key="index"
:colSpan="row.span"
:class='{"event": row.slots.size }'
:class='{"event": row.slots.size, "crew": row.crew }'
:title="row.title"
>
{{ [...row.slots].map(slot => eventBySlotId.get(slot.id)!.name).join(", ") }}
{{ row.title }}
</td>
</tr>
</tbody>
@ -310,16 +311,20 @@ function padStretch(stretch: Stretch, timezone: string): Stretch {
}
function tableElementsFromStretches(
stretches: Iterable<Stretch>, locations: ScheduleLocation[], timezone: string,
stretches: Iterable<Stretch>,
events: ScheduleEvent[],
locations: ScheduleLocation[],
timezone: string,
) {
type Col = { minutes?: number };
type DayHead = { span: number, content?: string }
type HourHead = { span: number, content?: string }
type LocationCell = { span: number, slots: Set<TimeSlot> }
type LocationCell = { span: number, slots: Set<TimeSlot>, title: string, crew?: boolean }
const columnGroups: { className?: string, cols: Col[] }[] = [];
const dayHeaders: DayHead[] = [];
const hourHeaders: HourHead[]= [];
const locationRows = new Map<string, LocationCell[]>(locations.map(location => [location.id, []]));
const eventBySlotId = new Map(events.flatMap(event => event.slots.map(slot => [slot.id, event])));
function startColumnGroup(className?: string) {
columnGroups.push({ className, cols: []})
@ -331,7 +336,13 @@ function tableElementsFromStretches(
hourHeaders.push({ span: 0, content })
}
function startLocation(id: string, slots = new Set<TimeSlot>()) {
locationRows.get(id)!.push({ span: 0, slots });
const rows = locationRows.get(id)!;
if (rows.length) {
const row = rows[rows.length - 1];
row.title = [...row.slots].map(slot => eventBySlotId.get(slot.id)!.name).join(", ");
row.crew = [...row.slots].every(slot => eventBySlotId.get(slot.id)!.crew);
}
rows.push({ span: 0, slots, title: "" });
}
function pushColumn(minutes?: number) {
columnGroups[columnGroups.length - 1].cols.push({ minutes })
@ -414,6 +425,7 @@ function tableElementsFromStretches(
dayHeaders: dayHeaders.filter(day => day.span),
hourHeaders: hourHeaders.filter(hour => hour.span),
locationRows: new Map([...locationRows].map(([id, cells]) => [id, cells.filter(cell => cell.span)])),
eventBySlotId,
};
}
@ -431,16 +443,14 @@ const timezone = computed({
set: (value: string) => { debugTimezone.value = value },
});
const elements = computed(() => tableElementsFromStretches(stretches.value, schedule.value.locations, timezone.value));
const elements = computed(() => tableElementsFromStretches(
stretches.value, schedule.value.events, schedule.value.locations, timezone.value
));
const columnGroups = computed(() => elements.value.columnGroups);
const dayHeaders = computed(() => elements.value.dayHeaders);
const hourHeaders = computed(() => elements.value.hourHeaders);
const locationRows = computed(() => elements.value.locationRows);
const eventBySlotId = computed(() => new Map(
schedule.value.events.flatMap(
event => event.slots.map(slot => [slot.id, event])
)
));
const eventBySlotId = computed(() => elements.value.eventBySlotId);
</script>
<style scoped>
@ -472,6 +482,9 @@ const eventBySlotId = computed(() => new Map(
}
.timetable :is(td, th) {
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
padding: 0.1rem;
border-top: 1px solid var(--foreground);
border-right: 1px solid var(--foreground);
@ -490,4 +503,7 @@ const eventBySlotId = computed(() => new Map(
.event {
background-color: color-mix(in oklab, var(--background), rgb(255, 125, 50) 60%);
}
.event.crew {
background-color: color-mix(in oklab, var(--background), rgb(127, 127, 127) 60%);
}
</style>