feat(schedule): timezone picker

1 files changed, 22 insertions, 1 deletions

diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 9868e308..6b07ea27 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -3,9 +3,16 @@
 	import type { SubsPlease, SubsPleaseEpisode } from '$lib/subsPlease';
 	import { onMount } from 'svelte';
 	import settings from '../../stores/settings';
+	import { parseOrDefault } from '$lib/Tools/tool';
+	import { browser } from '$app/environment';
 
 	let subsPleasePromise: Promise<SubsPlease>;
-	const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
+	let timeZone = parseOrDefault(
+		urlParameters,
+		'tz',
+		Intl.DateTimeFormat().resolvedOptions().timeZone
+	);
 
 	onMount(
 		async () => (subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json()))
@@ -43,6 +50,20 @@
 			{timeZone.split('/').reverse().join(', ').replace(/_/g, ' ')}
 		</blockquote>
 
+		<p>
+			<select
+				bind:value={timeZone}
+				on:change={() =>
+					(subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json()))}
+			>
+				{#each Intl.supportedValuesOf('timeZone') as zone}
+					<option value={zone}>
+						{zone.split('/').reverse().join(', ').replace(/_/g, ' ')}
+					</option>
+				{/each}
+			</select>
+		</p>
+
 		<div id="list-container">
 			{#each Object.entries(subsPlease.schedule) as [day, scheduleEntry]}
 				<details