refactor(SequelSpy): move prequel list to component

2 files changed, 97 insertions, 0 deletions

diff --git a/src/lib/Tools/SequelSpy/Prequels.svelte b/src/lib/Tools/SequelSpy/Prequels.svelte
new file mode 100644
index 00000000..ab1c4ac5
--- /dev/null
+++ b/src/lib/Tools/SequelSpy/Prequels.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { MediaPrequel } from '$lib/Data/AniList/prequels';
+	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
+	import { airingTime } from '$lib/Media/Anime/Airing/time';
+	import LinkedTooltip from '$lib/Tooltip/LinkedTooltip.svelte';
+	import settings from '$stores/settings';
+	import type { Media } from '$lib/Data/AniList/media';
+
+	export let currentPrequels: MediaPrequel[];
+
+	const prequelAiringTime = (prequel: MediaPrequel) =>
+		airingTime(prequel as unknown as Media, null, false, true);
+</script>
+
+<ul>
+	{#each currentPrequels.sort((a, b) => new Date(a.startDate.year, a.startDate.month - 1, a.startDate.day).getTime() - new Date(b.startDate.year, b.startDate.month - 1, b.startDate.day).getTime()) as prequel}
+		<li id={`${prequel.id}`}>
+			<LinkedTooltip
+				content={`<img src="${
+					$settings.displayDataSaver ? prequel.coverImage.medium : prequel.coverImage.extraLarge
+				}" style="width: 250px; object-fit: cover; border-radius: 8px;" />`}
+				pin={`${prequel.id}`}
+				pinPosition="top"
+				disable={!$settings.displayHoverCover}
+			>
+				<a href={`https://anilist.co/anime/${prequel.id}`} target="_blank">
+					<MediaTitleDisplay title={prequel.title} />
+				</a>
+				<span class="opaque">|</span>
+				{prequel.seen}<span class="opaque">/{prequel.episodes}</span>
+				{@html prequelAiringTime(prequel)}
+			</LinkedTooltip>
+		</li>
+	{/each}
+</ul>
diff --git a/src/lib/Tools/SequelSpy/Tool.svelte b/src/lib/Tools/SequelSpy/Tool.svelte
new file mode 100644
index 00000000..8956e00a
--- /dev/null
+++ b/src/lib/Tools/SequelSpy/Tool.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { AniListAuthorisation } from '$lib/Data/AniList/identity';
+	import { prequels, type MediaPrequel } from '$lib/Data/AniList/prequels';
+	import { onMount } from 'svelte';
+	import { clearAllParameters, parseOrDefault } from '../../Utility/parameters';
+	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
+	import { season as getSeason } from '$lib/Media/Anime/season';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import identity from '$stores/identity';
+	import LogInRestricted from '$lib/Error/LogInRestricted.svelte';
+	import Prequels from './Prequels.svelte';
+
+	export let user: AniListAuthorisation;
+
+	let currentPrequels: Promise<MediaPrequel[]> = Promise.resolve([]) as Promise<MediaPrequel[]>;
+	const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
+	let year = parseOrDefault(urlParameters, 'year', new Date().getFullYear());
+	let season = parseOrDefault(urlParameters, 'season', getSeason());
+
+	$: {
+		if (year.toString().length === 4 && $identity.id !== -2 && user)
+			currentPrequels = prequels(user, year, season);
+	}
+	$: {
+		if (browser) {
+			$page.url.searchParams.set('year', year.toString());
+			$page.url.searchParams.set('season', season.toString());
+			clearAllParameters(['year', 'season']);
+			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
+		}
+	}
+
+	onMount(() => clearAllParameters(['year', 'season']));
+</script>
+
+{#if user === undefined || $identity.id === -2}
+	<LogInRestricted />
+{:else}
+	<div class="card">
+		<p>
+			<select bind:value={season}>
+				<option value="WINTER">Winter</option>
+				<option value="SPRING">Spring</option>
+				<option value="SUMMER">Summer</option>
+				<option value="FALL">Fall</option>
+			</select>
+			<input type="number" bind:value={year} />
+		</p>
+
+		{#await currentPrequels}
+			<Skeleton card={false} count={5} height="0.9rem" list />
+		{:then currentPrequels}
+			<Prequels {currentPrequels} />
+		{/await}
+
+		<p />
+
+		The count ratio is the number of episodes you've seen of any direct prequels, and the total
+		number of episodes of all direct prequels.
+	</div>
+{/if}