feat(#46): Componentise the boxes view

src/lib/components/pokedex/PokedexSidebar.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	export let showForms = true;
+	export let showOrigins = true;
+	export let showShiny = false;
+	export let catchRegion = '';
+	export let catchGame = '';
+	export let toggleForms = () => {};
+	export let toggleOrigins = () => {};
+	export let toggleShiny = () => {};
+	export let getData = () => {};
+</script>
+
+<aside
+	class="menu bg-gray-800 text-white min-h-full w-64 p-4 lg:fixed xs:top-0 lg:left-0 h-full lg:h-5/6"
+>
+	<h2 class="text-2xl font-semibold mb-4">Filters</h2>
+	<ul>
+		<li class="mb-2">
+			<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleForms}>
+				Toggle Forms (Currently {showForms ? 'On' : 'Off'})
+			</button>
+		</li>
+		<li class="mb-2">
+			<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleOrigins}>
+				Toggle Origins (Currently {showOrigins ? 'On' : 'Off'})
+			</button>
+		</li>
+		<li class="mb-2">
+			<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleShiny}>
+				Toggle Shiny (Currently {showShiny ? 'On' : 'Off'})
+			</button>
+		</li>
+	</ul>
+	<div class="mb-4">
+		<label for="catchRegionSelect">Region to catch in:</label>
+		<select
+			id="catchRegionSelect"
+			class="select select-bordered w-full max-w-xs text-black"
+			bind:value={catchRegion}
+			on:change={getData}
+		>
+			<option value="">All</option>
+			<option value="Kanto">Kanto (Red, Blue, Yellow, LG: Pikachu, LG: Eevee)</option>
+			<option value="Johto">Johto (Gold, Silver, Crystal, HG, SS)</option>
+			<option value="Hoenn">Hoenn (Ruby, Sapphire, Emerald, OR, AS)</option>
+			<option value="Sinnoh">Sinnoh (Diamond, Pearl, Platinum, BD, SP)</option>
+			<option value="Unova">Unova (Black, White, Black2, White2, Dream Radar)</option>
+			<option value="Kalos">Kalos (X, Y)</option>
+			<option value="Alola">Alola (Sun, Moon, Moon Demo, US, UM)</option>
+			<option value="Galar">Galar (Sword, Shield)</option>
+			<option value="Hisui">Hisui (PLA)</option>
+			<option value="Paldea">Paldea (Scarlet, Violet)</option>
+			<option value="Unknown">Unknown (Home, Go)</option>
+		</select>
+	</div>
+
+	<div class="mb-4">
+		<label for="catchGameSelect">Game to catch in: {catchGame}</label>
+		<select
+			id="catchGameSelect"
+			class="select select-bordered w-full max-w-xs text-black"
+			bind:value={catchGame}
+			on:change={getData}
+		>
+			<option value="">All</option>
+			<option value="Red">Red (Kanto)</option>
+			<option value="Blue">Blue (Kanto)</option>
+			<option value="Yellow">Yellow (Kanto)</option>
+			<option value="LG: Pikachu">LG: Pikachu (Kanto)</option>
+			<option value="LG: Eevee">LG: Eevee (Kanto)</option>
+			<option value="Gold">Gold (Johto)</option>
+			<option value="Silver">Silver (Johto)</option>
+			<option value="Crystal">Crystal (Johto)</option>
+			<option value="HG">HG (Johto)</option>
+			<option value="SS">SS (Johto)</option>
+			<option value="Ruby">Ruby (Hoenn)</option>
+			<option value="Sapphire">Sapphire (Hoenn)</option>
+			<option value="Emerald">Emerald (Hoenn)</option>
+			<option value="OR">OR (Hoenn)</option>
+			<option value="AS">AS (Hoenn)</option>
+			<option value="Diamond">Diamond (Sinnoh)</option>
+			<option value="Pearl">Pearl (Sinnoh)</option>
+			<option value="Platinum">Platinum (Sinnoh)</option>
+			<option value="BD">BD (Sinnoh)</option>
+			<option value="SP">SP (Sinnoh)</option>
+			<option value="Black">Black (Unova)</option>
+			<option value="White">White (Unova)</option>
+			<option value="Black2">Black2 (Unova)</option>
+			<option value="White2">White2 (Unova)</option>
+			<option value="Dream Radar">Dream Radar (Unova)</option>
+			<option value="X">X (Kalos)</option>
+			<option value="Y">Y (Kalos)</option>
+			<option value="Sun">Sun (Alola)</option>
+			<option value="Moon">Moon (Alola)</option>
+			<option value="Moon Demo">Moon Demo (Alola)</option>
+			<option value="US">US (Alola)</option>
+			<option value="UM">UM (Alola)</option>
+			<option value="Sword">Sword (Galar)</option>
+			<option value="Shield">Shield (Galar)</option>
+			<option value="PLA">PLA (Hisui)</option>
+			<option value="Scarlet">Scarlet (Paldea)</option>
+			<option value="Violet">Violet (Paldea)</option>
+			<option value="Home">Home (Unknown)</option>
+			<option value="Go">Go (Unknown)</option>
+		</select>
+	</div>
+</aside>

src/lib/components/pokedex/PokedexViewBoxes.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { CatchRecord } from '$lib/models/CatchRecord';
+	import type { CombinedData } from '$lib/models/CombinedData';
+	import type { PokedexEntry } from '$lib/models/PokedexEntry';
+	import PokemonSprite from '$lib/components/PokemonSprite.svelte';
+	import Tooltip from '$lib/components/Tooltip.svelte';
+
+	export let showShiny = false;
+	export let combinedData: CombinedData[] | null;
+	export let boxNumbers = Array<number>;
+	export let currentPlacement = 'boxPlacementForms';
+	export let creatingRecords = false;
+	export let totalRecordsCreated = 0;
+	export let failedToLoad = false;
+	export let markBoxAsNotCaught = (boxNumber: number) => {};
+	export let markBoxAsCaught = (boxNumber: number) => {};
+	export let markBoxAsNeedsToEvolve = (boxNumber: number) => {};
+	export let markBoxAsInHome = (boxNumber: number) => {};
+	export let markBoxAsNotInHome = (boxNumber: number) => {};
+	export let createCatchRecords = () => {};
+
+	function cellBackgroundColourClass(catchRecord: CatchRecord) {
+		if (catchRecord.caught) {
+			return 'bg-green-100/50';
+		} else if (catchRecord.haveToEvolve) {
+			return 'bg-yellow-100/50';
+		} else {
+			return '';
+		}
+	}
+
+	function cellBackgroundColourStyle(pokedexEntry: PokedexEntry, catchRecord: CatchRecord) {
+		if (catchRecord.caught || catchRecord.haveToEvolve) {
+			return '';
+		} else {
+			if (pokedexEntry.boxPlacementForms.column % 2 === 0) {
+				return 'background-color: #ffffff';
+			} else {
+				return 'background-color: #f9f9f9;';
+			}
+		}
+	}
+</script>
+
+<main class="flex-1 p-4 w-full">
+	<div class="max-w-fit mx-auto">
+		{#if combinedData && combinedData.length > 0}
+			<div class="container mx-auto">
+				<div class="flex flex-wrap -mx-2">
+					{#each boxNumbers as boxNumber}
+						<div class="mb-8 md:w-1/2 px-2">
+							<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
+							<button class="btn" on:click={markBoxAsNotCaught(boxNumber)}>
+								Mark box as not 'caught'
+							</button>
+							<button class="btn" on:click={markBoxAsCaught(boxNumber)}>
+								Mark box as 'caught'
+							</button>
+							<button class="btn" on:click={markBoxAsNeedsToEvolve(boxNumber)}
+								>Mark box as 'needs to evolve'</button
+							>
+							<button class="btn" on:click={markBoxAsInHome(boxNumber)}
+								>Mark box as 'in Home'</button
+							>
+							<button class="btn" on:click={markBoxAsNotInHome(boxNumber)}
+								>Mark box as not 'in Home'</button
+							>
+							<div class="grid grid-cols-6">
+								{#each combinedData as { pokedexEntry, catchRecord }}
+									{#if pokedexEntry[currentPlacement].box === boxNumber}
+										<div
+											class="pokemon-box {cellBackgroundColourClass(catchRecord)}"
+											style="grid-column-start: {pokedexEntry[currentPlacement]
+												.column}; grid-row-start: {pokedexEntry[currentPlacement].row};
+                                        {cellBackgroundColourStyle(pokedexEntry, catchRecord)}"
+										>
+											<Tooltip>
+												<div slot="hover-target">
+													{#if catchRecord.inHome}
+														<span
+															class="absolute -top-5 -right-4 z-2 p-1 text-secondary text-lg font-extrabold"
+															>&#10003;</span
+														>
+													{/if}
+													<PokemonSprite
+														pokemonName={pokedexEntry.pokemon}
+														pokedexNumber={pokedexEntry.pokedexNumber}
+														form={pokedexEntry.form}
+														shiny={showShiny}
+													/>
+													<span class="md:hidden">&#9432;</span>
+												</div>
+												<div slot="tooltip">
+													<div class="font-bold">
+														{pokedexEntry.pokemon}
+														{pokedexEntry.form ? `(${pokedexEntry.form})` : ''}
+													</div>
+													<div>{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</div>
+													<div>
+														Caught: {catchRecord.caught ? 'Yes' : 'No'} <br />
+														Needs to Evolve: {catchRecord.haveToEvolve ? 'Yes' : 'No'} <br />
+														In Home: {catchRecord.inHome ? 'Yes' : 'No'}
+													</div>
+												</div>
+											</Tooltip>
+										</div>
+									{/if}
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{:else if failedToLoad}
+			{#if creatingRecords && totalRecordsCreated > 0}
+				<p>Processed {totalRecordsCreated} Pokédex entries so far...</p>
+				<p>Please be patient, this may take some time.</p>
+			{:else if creatingRecords}
+				<p>Processing...</p>
+				<p>Please be patient, this may take some time.</p>
+			{:else}
+				<h1>Failed to load</h1>
+				<p>
+					If you're seeing this, you probably haven't created your Pokédex data yet. Please do so by
+					clicking this button.
+				</p>
+				<button class="btn" on:click={createCatchRecords}>Create Pokédex data</button>
+			{/if}
+		{:else}
+			<div class="min-w-max mx-auto">
+				<h1>Loading Pokédex</h1>
+				<span class="loading loading-spinner loading-xl"></span>
+			</div>
+		{/if}
+	</div>
+</main>
+
+<style>
+	.pokemon-box {
+		border: 1px solid #ddd;
+		padding: 1rem;
+	}
+</style>

src/lib/repositories/CombinedDataRepository.ts

@@ -3,7 +3,11 @@ import CatchRecordModel, { type CatchRecord } from '$lib/models/CatchRecord';
 import { CombinedData } from '$lib/models/CombinedData';
 
 class CombinedDataRepository {
-	async findAllCombinedData(enableForms: boolean = true): Promise<CombinedData[]> {
+	async findAllCombinedData(
+		enableForms: boolean = true,
+		region: string = '',
+		game: string = ''
+	): Promise<CombinedData[]> {
 		const pipeline: any[] = [
 			{
 				$lookup: {
@@ -36,6 +40,22 @@ class CombinedDataRepository {
 			});
 		}
 
+		if (region.length > 0) {
+			pipeline.unshift({
+				$match: {
+					regionToCatchIn: region
+				}
+			});
+		}
+
+		if (game.length > 0) {
+			pipeline.unshift({
+				$match: {
+					gamesToCatchIn: { $in: [game] }
+				}
+			});
+		}
+
 		const combinedData: CombinedData[] = await PokedexEntryModel.aggregate(pipeline).exec();
 
 		// Filter out entries with no catch records

src/routes/api/combined-data/all/+server.ts

@@ -4,11 +4,13 @@ import CombinedDataRepository from '$lib/repositories/CombinedDataRepository';
 
 export const GET = async ({ url }) => {
 	const enableForms = url.searchParams.get('enableForms') === 'true';
+	const region = url.searchParams.get('region');
+	const game = url.searchParams.get('game');
 
 	try {
 		await dbConnect();
 		const repo = new CombinedDataRepository();
-		const combinedData = await repo.findAllCombinedData(enableForms);
+		const combinedData = await repo.findAllCombinedData(enableForms, region, game);
 
 		if (combinedData.length === 0) {
 			return json({ error: 'No combined data found' }, { status: 404 });

src/routes/mydex/boxes/+page.svelte

@@ -5,8 +5,8 @@
 	import { type CatchRecord } from '$lib/models/CatchRecord';
 	import { type CombinedData } from '$lib/models/CombinedData';
 	import type { PokedexEntry } from '$lib/models/PokedexEntry';
-	import PokemonSprite from '$lib/components/PokemonSprite.svelte';
-	import Tooltip from '$lib/components/Tooltip.svelte';
+	import PokedexSidebar from '$lib/components/pokedex/PokedexSidebar.svelte';
+	import PokedexViewBoxes from '$lib/components/pokedex/PokedexViewBoxes.svelte';
 
 	let combinedData = null as CombinedData[] | null;
 	let failedToLoad = false;
@@ -17,16 +17,26 @@
 	});
 	onDestroy(unsubscribe);
 
+	let showOrigins = true;
 	let showForms = true;
-	let showShiny = false;
-	let currentPlacement = 'boxPlacementForms';
-	let boxNumbers = Array<any>;
+	let drawerOpen = false;
+	let catchRegion = '';
+	let catchGame = '';
+	let creatingRecords = false;
+
+	function toggleOrigins() {
+		showOrigins = !showOrigins;
+	}
 
 	async function toggleForms() {
 		showForms = !showForms;
 		await getData();
 	}
 
+	let showShiny = false;
+	let currentPlacement = 'boxPlacementForms';
+	let boxNumbers = Array<any>;
+
 	async function toggleShiny() {
 		showShiny = !showShiny;
 		if (showShiny) {
@@ -41,7 +51,9 @@
 			combinedData = null;
 		}
 
-		const response = await fetch(`/api/combined-data/all?enableForms=${showForms}`);
+		const response = await fetch(
+			`/api/combined-data/all?enableForms=${showForms}&region=${catchRegion}&game=${catchGame}`
+		);
 		const data = await response.json();
 
 		if (data.error) {
@@ -61,28 +73,6 @@
 
 	$: currentPlacement = showForms ? 'boxPlacementForms' : 'boxPlacement';
 
-	function cellBackgroundColourClass(catchRecord: CatchRecord) {
-		if (catchRecord.caught) {
-			return 'bg-green-100/50';
-		} else if (catchRecord.haveToEvolve) {
-			return 'bg-yellow-100/50';
-		} else {
-			return '';
-		}
-	}
-
-	function cellBackgroundColourStyle(pokedexEntry: PokedexEntry, catchRecord: CatchRecord) {
-		if (catchRecord.caught || catchRecord.haveToEvolve) {
-			return '';
-		} else {
-			if (pokedexEntry.boxPlacementForms.column % 2 === 0) {
-				return 'background-color: #ffffff';
-			} else {
-				return 'background-color: #f9f9f9;';
-			}
-		}
-	}
-
 	async function updateCatchRecords(
 		boxNumber: number,
 		caught: boolean,
@@ -151,95 +141,45 @@
 
 <!-- <PokemonSprite pokemonName={'Raichu'} pokedexNumber={26} form={'Alolan'} /> -->
 
-<div class="container mx-auto">
-	{#if !localUser}
-		<p>Please <a href="/signin" class="underline text-primary hover:text-secondary">sign in</a></p>
-	{:else if combinedData && combinedData.length > 0}
-		<button class="btn" on:click={toggleForms}>
-			{showForms ? 'Hide Forms' : 'Show Forms'}
-		</button>
-
-		<button class="btn" on:click={toggleShiny}>
-			{showShiny ? 'Hide Shiny' : 'Show Shiny'}
-		</button>
-
-		<div class="flex flex-wrap -mx-2">
-			{#each boxNumbers as boxNumber}
-				<div class="mb-8 md:w-1/2 px-2">
-					<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
-					<button class="btn" on:click={markBoxAsNotCaught(boxNumber)}>
-						Mark box as not 'caught'
-					</button>
-					<button class="btn" on:click={markBoxAsCaught(boxNumber)}> Mark box as 'caught' </button>
-					<button class="btn" on:click={markBoxAsNeedsToEvolve(boxNumber)}
-						>Mark box as 'needs to evolve'</button
-					>
-					<button class="btn" on:click={markBoxAsInHome(boxNumber)}>Mark box as 'in Home'</button>
-					<button class="btn" on:click={markBoxAsNotInHome(boxNumber)}
-						>Mark box as not 'in Home'</button
-					>
-					<div class="grid grid-cols-6">
-						{#each combinedData as { pokedexEntry, catchRecord }}
-							{#if pokedexEntry[currentPlacement].box === boxNumber}
-								<div
-									class="pokemon-box {cellBackgroundColourClass(catchRecord)}"
-									style="grid-column-start: {pokedexEntry[currentPlacement]
-										.column}; grid-row-start: {pokedexEntry[currentPlacement].row};
-                                        {cellBackgroundColourStyle(pokedexEntry, catchRecord)}"
-								>
-									<Tooltip>
-										<div slot="hover-target">
-											{#if catchRecord.inHome}
-												<span
-													class="absolute -top-5 -right-4 z-2 p-1 text-secondary text-lg font-extrabold"
-													>&#10003;</span
-												>
-											{/if}
-											<PokemonSprite
-												pokemonName={pokedexEntry.pokemon}
-												pokedexNumber={pokedexEntry.pokedexNumber}
-												form={pokedexEntry.form}
-												shiny={showShiny}
-											/>
-											<span class="md:hidden">&#9432;</span>
-										</div>
-										<div slot="tooltip">
-											<div class="font-bold">
-												{pokedexEntry.pokemon}
-												{pokedexEntry.form ? `(${pokedexEntry.form})` : ''}
-											</div>
-											<div>{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</div>
-											<div>
-												Caught: {catchRecord.caught ? 'Yes' : 'No'} <br />
-												Needs to Evolve: {catchRecord.haveToEvolve ? 'Yes' : 'No'} <br />
-												In Home: {catchRecord.inHome ? 'Yes' : 'No'}
-											</div>
-										</div>
-									</Tooltip>
-								</div>
-							{/if}
-						{/each}
-					</div>
-				</div>
-			{/each}
+{#if !localUser}
+	<p>Please <a href="/signin" class="underline text-primary hover:text-secondary">sign in</a></p>
+{:else}
+	<div class="drawer lg:drawer-open">
+		<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={drawerOpen} />
+		<div class="drawer-content flex flex-col items-center justify-center md:ml-64">
+			<label
+				for="my-drawer"
+				class="btn btn-secondary drawer-button lg:hidden fixed -left-10 top-1/2 -rotate-90"
+			>
+				{drawerOpen ? 'Close Filters' : 'Open Filters'}
+			</label>
+			<PokedexViewBoxes
+				bind:showShiny
+				bind:combinedData
+				bind:boxNumbers
+				bind:currentPlacement
+				bind:creatingRecords
+				bind:failedToLoad
+				{markBoxAsNotCaught}
+				{markBoxAsCaught}
+				{markBoxAsNeedsToEvolve}
+				{markBoxAsInHome}
+				{markBoxAsNotInHome}
+			/>
 		</div>
-	{:else if failedToLoad}
-		<h1>Failed to load</h1>
-		<p>
-			If you're seeing this, you probably haven't created your Pokédex data yet. Please do so by
-			visiting the <a href="/mydex" class="underline text-primary hover:text-secondary">My Dex</a> page.
-		</p>
-	{:else}
-		<div class="min-w-max mx-auto">
-			<h1>Loading Pokédex</h1>
-			<span class="loading loading-spinner loading-xl"></span>
+		<div class="drawer-side lg:relative">
+			<label for="my-drawer" class="drawer-overlay lg:hidden"></label>
+			<PokedexSidebar
+				bind:showForms
+				bind:showOrigins
+				bind:showShiny
+				bind:catchRegion
+				bind:catchGame
+				{getData}
+				{toggleForms}
+				{toggleOrigins}
+				{toggleShiny}
+			/>
 		</div>
-	{/if}
-</div>
-
-<style>
-	.pokemon-box {
-		border: 1px solid #ddd;
-		padding: 1rem;
-	}
-</style>
+	</div>
+{/if}