feat(#46): Add boxes page

src/routes/+layout.svelte

@@ -151,6 +151,9 @@
 								<li>
 									<a href="/mydex"> My Dex </a>
 								</li>
+								<li>
+									<a href="/mydex/boxes"> My Boxes </a>
+								</li>
 								<li>
 									<a href="/profile"> Profile </a>
 								</li>

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

@@ -0,0 +1,23 @@
+import { json } from '@sveltejs/kit';
+import { dbConnect, dbDisconnect } from '$lib/utils/db';
+import CombinedDataRepository from '$lib/repositories/CombinedDataRepository';
+
+export const GET = async ({ url }) => {
+	const enableForms = url.searchParams.get('enableForms') === 'true';
+
+	try {
+		await dbConnect();
+		const repo = new CombinedDataRepository();
+		const combinedData = await repo.findAllCombinedData(enableForms);
+
+		if (combinedData.length === 0) {
+			return json({ error: 'No combined data found' }, { status: 404 });
+		}
+		return json(combinedData);
+	} catch (error) {
+		console.error(error);
+		return json({ error: 'Internal Server Error' }, { status: 500 });
+	} finally {
+		dbDisconnect();
+	}
+};

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { user } from '$lib/stores/user.js';
+	import { type User } from '@supabase/auth-js';
+	import { type CatchRecord } from '$lib/models/CatchRecord';
+	import { type CombinedData } from '$lib/models/CombinedData';
+	import PokedexEntryCatchRecord from '$lib/components/pokedex/PokedexEntryCatchRecord.svelte';
+	import Pagination from '$lib/components/Pagination.svelte';
+	import { browser } from '$app/environment';
+	import type { PokedexEntry } from '$lib/models/PokedexEntry';
+
+	let combinedData = null as CombinedData[] | null;
+	let failedToLoad = false;
+
+	let localUser: User | null;
+	const unsubscribe = user.subscribe((value) => {
+		localUser = value;
+	});
+	onDestroy(unsubscribe);
+
+	let showForms = true;
+	let currentPlacement = 'boxPlacementForms';
+	let boxNumbers = [];
+
+	async function toggleForms() {
+		showForms = !showForms;
+		await getData();
+	}
+
+	async function getData() {
+		combinedData = null;
+
+		const response = await fetch(`/api/combined-data/all?enableForms=${showForms}`);
+		const data = await response.json();
+
+		if (data.error) {
+			failedToLoad = true;
+			return;
+		}
+
+		combinedData = data;
+		boxNumbers = [
+			...new Set(combinedData.map(({ pokedexEntry }) => pokedexEntry[currentPlacement].box))
+		].filter(Boolean);
+	}
+
+	onMount(async () => {
+		await getData();
+	});
+
+	$: currentPlacement = showForms ? 'boxPlacementForms' : 'boxPlacement';
+</script>
+
+<svelte:head>
+	<title>Living Dex Tracker - My Boxes</title>
+</svelte:head>
+
+<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>
+
+		<div class="">
+			{#each boxNumbers as boxNumber}
+				<div class="mb-8">
+					<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
+					<div class="grid grid-cols-6">
+						{#each combinedData as { pokedexEntry, catchRecord }}
+							{#if pokedexEntry[currentPlacement].box === boxNumber}
+								<div
+									class="border p-2"
+									style="grid-column-start: {pokedexEntry[currentPlacement]
+										.column}; grid-row-start: {pokedexEntry[currentPlacement].row}"
+								>
+									<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>
+							{/if}
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</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>
+	{/if}
+</div>