feat(schedule): anime schedule

2 files changed, 87 insertions, 1 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 47253acc..af1ce9ed 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,6 +30,7 @@
 	{#if $settings.displayHoverNavigation}
 		<div id="hover-header">
 			「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
+			<a href="/schedule">Anime Schedule</a> •
 			<a href="/updates">Manga & WN Updates</a> •
 			<a href="/tools">Tools</a> • {#if data.user}
 				<a href={`/user/${currentUserIdentity.name}`}>Profile</a> •
@@ -62,6 +63,7 @@
 
 			<p id="desktop-navigation-bar">
 				「 <a href="/">Home</a> • <a href="/completed">Completed</a> •
+				<a href="/schedule">Anime Schedule</a> •
 				<a href="/updates">Manga & WN Updates</a> •
 				<a href="/tools">Tools</a> • {#if data.user}
 					<a href={`/user/${currentUserIdentity.name}`}>Profile</a> •
@@ -75,7 +77,8 @@
 				{/if}
 				<br />
 				<a href="/settings">Settings</a>
-				<a href="/updates">Manga & LN Updates</a>
+				<a href="/updates">Manga & LN Updates</a> •
+				<a href="/schedule">Anime Schedule</a>
 
 				<p />
 			</div>
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
new file mode 100644
index 00000000..470ed607
--- /dev/null
+++ b/src/routes/schedule/+page.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import Error from '$lib/Error.svelte';
+	import type { SubsPlease } from '$lib/subsPlease';
+	import { onMount } from 'svelte';
+	import settings from '../../stores/settings';
+
+	let subsPleasePromise: Promise<SubsPlease>;
+	const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+	onMount(async () => {
+		subsPleasePromise = fetch(`/api/subsplease?tz=${timeZone}`).then((r) => r.json());
+	});
+</script>
+
+{#await subsPleasePromise}
+	Loading ...
+{:then subsPlease}
+	{#if subsPlease}
+		<blockquote>
+			{timeZone.split('/').reverse().join(', ').replace(/_/g, ' ')}
+		</blockquote>
+
+		<div id="list-container">
+			{#each Object.entries(subsPlease.schedule) as [day, scheduleEntry]}
+				<details
+					open
+					class="list"
+					class:today={day === new Date().toLocaleString('en-us', { weekday: 'long' })}
+				>
+					<summary>{day}</summary>
+
+					<ul>
+						{#each Object.values(scheduleEntry) as entry}
+							<li class="entry">
+								<a href={`https://anilist.co/search?search=${entry.title}`} target="_blank">
+									{entry.title}
+								</a>
+								{#if !$settings.displayCountdownRightAligned}
+									<span style="opacity: 50%;">|</span>
+								{/if}
+								<span class:countdown={$settings.displayCountdownRightAligned}>
+									{entry.time}
+								</span>
+							</li>
+						{/each}
+					</ul>
+				</details>
+			{/each}
+		</div>
+	{:else}
+		Loading ...
+	{/if}
+{:catch}
+	<Error type="Schedule" loginSessionError={false} />
+{/await}
+
+<style>
+	#list-container {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.list {
+		overflow-y: auto;
+		min-width: min-content;
+		flex: 1 1;
+	}
+
+	.entry::after {
+		content: '';
+		display: table;
+		clear: both;
+	}
+
+	.countdown {
+		white-space: nowrap;
+		float: right;
+	}
+
+	.today {
+		font-weight: bold;
+	}
+</style>