feat(schedule): anime schedule

3 files changed, 94 insertions, 5 deletions

diff --git a/src/lib/Error.svelte b/src/lib/Error.svelte
index 617cabfb..f00239dd 100644
--- a/src/lib/Error.svelte
+++ b/src/lib/Error.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	export let type = 'Media';
+	export let loginSessionError = true;
 </script>
 
 <ul>
@@ -8,10 +9,12 @@
 			{type} could not be loaded. You might have been
 			<a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">rate limited</a>.
 		</p>
-		<p>
-			Your login session may have expired. Try logging out and logging back in, or try again in a
-			few minutes.
-		</p>
+		{#if loginSessionError}
+			<p>
+				Your login session may have expired. Try logging out and logging back in, or try again in a
+				few minutes.
+			</p>
+		{/if}
 		<p>
 			If the problem persists, please contact
 			<a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList.
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>