feat(#46): Add boxes page

src/lib/repositories/CombinedDataRepository.ts

@@ -3,6 +3,50 @@ import CatchRecordModel, { type CatchRecord } from '$lib/models/CatchRecord';
 import { CombinedData } from '$lib/models/CombinedData';
 
 class CombinedDataRepository {
+	async findAllCombinedData(enableForms: boolean = true): Promise<CombinedData[]> {
+		const pipeline: any[] = [
+			{
+				$lookup: {
+					from: 'catchrecords',
+					localField: '_id',
+					foreignField: 'pokedexEntryId',
+					as: 'catchRecord'
+				}
+			},
+			{
+				$unwind: {
+					path: '$catchRecord',
+					preserveNullAndEmptyArrays: true
+				}
+			},
+			{
+				$sort: {
+					'boxPlacementForms.box': 1,
+					'boxPlacementForms.row': 1,
+					'boxPlacementForms.column': 1
+				}
+			}
+		];
+
+		if (!enableForms) {
+			pipeline.unshift({
+				$match: {
+					'boxPlacement.box': { $ne: null }
+				}
+			});
+		}
+
+		const combinedData: CombinedData[] = await PokedexEntryModel.aggregate(pipeline).exec();
+
+		// Filter out entries with no catch records
+		const filteredData = combinedData.filter((data) => data.catchRecord);
+
+		return filteredData.map((data) => ({
+			pokedexEntry: data as PokedexEntry,
+			catchRecord: data.catchRecord as CatchRecord
+		}));
+	}
+
 	async findCombinedData(
 		page: number = 1,
 		limit: number = 20,

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>

tailwind.config.js

@@ -1,6 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/routes/**/*.{svelte,js,ts}', './src/lib/components/**/*.{svelte,js,ts}'],
+	content: [
+		'./src/routes/**/*.{svelte,js,ts}',
+		'./src/routes/**/**/*.{svelte,js,ts}',
+		'./src/lib/components/**/*.{svelte,js,ts}'
+	],
 	theme: {
 		extend: {}
 	},