From 41528e8193edb0b7e9e774406bc56d11f3bd8d35 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Sun, 9 Mar 2025 18:35:38 +0100
Subject: [PATCH] Display time in timezone configured on the account

Use the timezone configured on the account, or the default timezone if
no timezone is confirude to display the timetable and events in local
time.
---
 components/EventCard.vue |  11 ++-
 components/Timetable.vue | 177 +++++++++++++++++++++++++--------------
 2 files changed, 121 insertions(+), 67 deletions(-)

diff --git a/components/EventCard.vue b/components/EventCard.vue
index 97c8c2b..03b6120 100644
--- a/components/EventCard.vue
+++ b/components/EventCard.vue
@@ -18,7 +18,7 @@
 		<h4>Timeslots</h4>
 		<ul>
 			<li v-for="slot in event.slots" :key="slot.id">
-				{{ slot.start }} - {{ slot.end }}
+				{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
 				<button
 					v-if="session && event.slots.length > 1"
 					class="interested"
@@ -37,14 +37,21 @@
 </template>
 
 <script lang="ts" setup>
+import { DateTime } from 'luxon';
 import type { ScheduleEvent } from '~/shared/types/schedule';
 
 defineProps<{
 	event: ScheduleEvent
 }>()
 
-const { data: session, refresh: refreshSession } = useAccountSession();
+const runtimeConfig = useRuntimeConfig();
+const { data: session, refresh: refreshSession } = await useAccountSession();
 const interestedIds = computed(() => new Set(session.value?.account.interestedIds ?? []));
+const timezone = computed(() => session.value?.account.timezone ?? runtimeConfig.public.defaultTimezone);
+
+function formatTime(time: string) {
+	return DateTime.fromISO(time, { zone: timezone.value }).toFormat("yyyy-LL-dd HH:mm");
+}
 
 async function toggle(id: string, slotIds?: string[]) {
 	let newIds = [...session.value!.account.interestedIds ?? []];
diff --git a/components/Timetable.vue b/components/Timetable.vue
index bb30b90..9b1af0b 100644
--- a/components/Timetable.vue
+++ b/components/Timetable.vue
@@ -2,27 +2,37 @@
 	<figure class="timetable">
 		<details>
 			<summary>Debug</summary>
-			<p><b>Junctions</b></p>
-			<div v-for="j in junctions" :key="j.ts">
-				{{ j.ts }}: {{ j.edges.map(e => `${e.type} ${e.slot.id}`).join(", ") }}
-			</div>
-			<p><b>Stretches</b></p>
-			<ol>
-				<li v-for="st in stretches" :key="st.start">
-					<p>Stretch from {{ st.start }} to {{ st.end }}.</p>
-					<p>Spans:</p>
-					<ul>
-						<li v-for="s in st.spans" :key="s.start.ts">
-							{{ s.start.ts }} - {{ s.end.ts }}:
-							<ul>
-								<li v-for="[id, slots] in s.locations" :key="id">
-									{{ id }}: {{ [...slots].map(s => s.id).join(", ") }}
-								</li>
-							</ul>
-						</li>
-					</ul>
-				</li>
-			</ol>
+			<details>
+				<summary><b>Junctions</b></summary>
+				<div v-for="j in junctions" :key="j.ts">
+					{{ j.ts }}: {{ j.edges.map(e => `${e.type} ${e.slot.id}`).join(", ") }}
+				</div>
+			</details>
+			<details>
+				<summary><b>Stretches</b></summary>
+				<ol>
+					<li v-for="st in stretches" :key="st.start">
+						<p>Stretch from {{ st.start }} to {{ st.end }}.</p>
+						<p>Spans:</p>
+						<ul>
+							<li v-for="s in st.spans" :key="s.start.ts">
+								{{ s.start.ts }} - {{ s.end.ts }}:
+								<ul>
+									<li v-for="[id, slots] in s.locations" :key="id">
+										{{ id }}: {{ [...slots].map(s => s.id).join(", ") }}
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</li>
+				</ol>
+			</details>
+			<p>
+				<label>
+					Timezone:
+					<input type="text" v-model="timezone">
+				</label>
+			</p>
 		</details>
 		<table>
 			<colgroup>
@@ -63,6 +73,7 @@
 </template>
 
 <script setup lang="ts">
+import { DateTime } from "luxon";
 import type { ScheduleEvent, ScheduleLocation, TimeSlot } from "~/shared/types/schedule";
 
 const oneDayMs = 24 * 60 * 60 * 1000;
@@ -204,27 +215,10 @@ function* spansFromJunctions(
 }
 
 function createStretch(spans: Span[]): Stretch {
-	let start = spans[0].start.ts - oneHourMs;
-	let end = spans[spans.length - 1].end.ts + oneHourMs;
-	// Extend stretch to nearest whole hours
-	start = Math.floor(start / oneHourMs) * oneHourMs;
-	end = Math.ceil(end / oneHourMs) * oneHourMs;
 	return {
-		spans: [
-			{
-				start: { ts: start, edges: [] },
-				end: spans[0].start,
-				locations: new Map(),
-			},
-			...spans,
-			{
-				start: spans[spans.length - 1].end,
-				end: { ts: end, edges: [] },
-				locations: new Map(),
-			},
-		],
-		start,
-		end,
+		spans,
+		start: spans[0].start.ts,
+		end: spans[spans.length - 1].end.ts,
 	}
 }
 
@@ -247,41 +241,76 @@ function* stretchesFromSpans(spans: Iterable<Span>, minSeparation: number): Gene
 }
 
 /** Cuts up a span by whole hours that crosses it */
-function* cutSpansByHours(span: Span): Generator<Span> {
-	const startHour = span.start.ts / oneHourMs;
-	const endHour = span.end.ts / oneHourMs;
+function* cutSpansByHours(span: Span, timezone: string): Generator<Span> {
+	const startHour = DateTime.fromMillis(span.start.ts, { zone: timezone })
+		.startOf("hour")
+	;
+	const end = span.end.ts;
+
 	let currentStart = startHour;
-	let currentEnd = Math.min(Math.floor(startHour + 1), endHour);
-	if (currentEnd === endHour) {
+	let currentEnd = startHour.plus({ hours: 1 });
+	if (!startHour.isValid || currentEnd.toMillis() >= end) {
 		yield span;
 		return;
 	}
 
 	yield {
 		start: span.start,
-		end: { ts: currentEnd * oneHourMs, edges: [] },
+		end: { ts: currentEnd.toMillis(), edges: [] },
 		locations: span.locations,
 	}
 
-	currentStart = currentEnd;
-	while (++currentEnd < endHour) {
+	while (true) {
+		currentStart = currentEnd;
+		currentEnd = currentEnd.plus({ hours: 1 });
+		if (currentEnd.toMillis() >= end) {
+			break;
+		}
 		yield {
-			start: { ts: currentStart * oneHourMs, edges: [] },
-			end: { ts: currentEnd * oneHourMs, edges: [] },
+			start: { ts: currentStart.toMillis(), edges: [] },
+			end: { ts: currentEnd.toMillis(), edges: [] },
 			locations: span.locations,
 		}
-		currentStart += 1;
 	}
 
 	yield {
-		start: { ts: currentStart * oneHourMs, edges: [] },
+		start: { ts: currentStart.toMillis(), edges: [] },
 		end: span.end,
 		locations: span.locations,
 	}
 }
 
+function padStretch(stretch: Stretch, timezone: string): Stretch {
+	// Pad by one hour and extend it to the nearest whole hour.
+	let start = DateTime.fromMillis(stretch.start, { zone: timezone })
+		.minus(oneHourMs)
+		.startOf("hour")
+	;
+	let end = DateTime.fromMillis(stretch.end, { zone: timezone })
+		.plus(2 * oneHourMs - 1)
+		.startOf("hour")
+	;
+	return {
+		spans: [
+			{
+				start: { ts: start.toMillis(), edges: [] },
+				end: stretch.spans[0].start,
+				locations: new Map(),
+			},
+			...stretch.spans,
+			{
+				start: stretch.spans[stretch.spans.length - 1].end,
+				end: { ts: end.toMillis(), edges: [] },
+				locations: new Map(),
+			},
+		],
+		start: start.toMillis(),
+		end: end.toMillis(),
+	}
+}
+
 function tableElementsFromStretches(
-	stretches: Iterable<Stretch>, locations: ScheduleLocation[]
+	stretches: Iterable<Stretch>, locations: ScheduleLocation[], timezone: string,
 ) {
 	type Col = { minutes?: number };
 	type DayHead = { span: number, content?: string }
@@ -315,18 +344,20 @@ function tableElementsFromStretches(
 	}
 
 	let first = true;
-	for (const stretch of stretches) {
+	for (let stretch of stretches) {
+		stretch = padStretch(stretch, timezone);
+		const startDate = DateTime.fromMillis(stretch.start, { zone: timezone });
 		if (first) {
 			first = false;
 			startColumnGroup();
-			startDay(isoStringFromTs(stretch.start).slice(0, 10));
-			startHour(isoStringFromTs(stretch.start).slice(11, 16));
+			startDay(startDate.toFormat("yyyy-LL-dd"));
+			startHour(startDate.toFormat("HH:mm"));
 			for(const location of locations) {
 				startLocation(location.id);
 			}
 		} else {
 			startColumnGroup("break");
-			const dayName = isoStringFromTs(stretch.start).slice(0, 10)
+			const dayName = startDate.toFormat("yyyy-LL-dd");
 			const lastDayHeader = dayHeaders[dayHeaders.length - 1]
 			const sameDay = dayName === lastDayHeader.content && lastDayHeader.span;
 			if (!sameDay)
@@ -340,14 +371,14 @@ function tableElementsFromStretches(
 			startColumnGroup();
 			if (!sameDay)
 				startDay(dayName);
-			startHour(isoStringFromTs(stretch.start).slice(11, 16));
+			startHour(startDate.toFormat("HH:mm"));
 			for(const location of locations) {
 				startLocation(location.id);
 			}
 		}
 
 		for (const span of stretch.spans) {
-			for (const cutSpan of cutSpansByHours(span)) {
+			for (const cutSpan of cutSpansByHours(span, timezone)) {
 				const end = cutSpan.end.ts;
 				const durationMs = end - cutSpan.start.ts;
 
@@ -361,11 +392,18 @@ function tableElementsFromStretches(
 				}
 
 				pushColumn(durationMs / oneMinMs);
-				if (end % oneDayMs === 0) {
-					startDay(isoStringFromTs(cutSpan.end.ts).slice(0, 10));
+				const endDate = DateTime.fromMillis(end, { zone: timezone });
+				if (end === endDate.startOf("day").toMillis()) {
+					startDay(
+						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone })
+							.toFormat("yyyy-LL-dd")
+					);
 				}
-				if (end % oneHourMs === 0) {
-					startHour(isoStringFromTs(cutSpan.end.ts).slice(11, 16));
+				if (end === endDate.startOf("hour").toMillis()) {
+					startHour(
+						DateTime.fromMillis(cutSpan.end.ts, { zone: timezone })
+							.toFormat("HH:mm")
+					);
 				}
 			}
 		}
@@ -384,7 +422,16 @@ const junctions = computed(() => junctionsFromEdges(edgesFromEvents(schedule.val
 const stretches = computed(() => [
 	...stretchesFromSpans(spansFromJunctions(junctions.value, schedule.value.locations), oneHourMs * 5)
 ])
-const elements = computed(() => tableElementsFromStretches(stretches.value, schedule.value.locations));
+
+const runtimeConfig = useRuntimeConfig();
+const { data: session } = await useAccountSession();
+const debugTimezone = ref<undefined | string>();
+const timezone = computed({
+	get: () => debugTimezone.value ?? session.value?.account.timezone ?? runtimeConfig.public.defaultTimezone,
+	set: (value: string) => { debugTimezone.value = value },
+});
+
+const elements = computed(() => tableElementsFromStretches(stretches.value, schedule.value.locations, timezone.value));
 const columnGroups = computed(() => elements.value.columnGroups);
 const dayHeaders = computed(() => elements.value.dayHeaders);
 const hourHeaders = computed(() => elements.value.hourHeaders);