From 4d9d5e74d7a3827818505278e9621d6776471655 Mon Sep 17 00:00:00 2001 From: Josh Creek <8179928+jcreek@users.noreply.github.com> Date: Wed, 17 Jul 2024 21:11:58 +0100 Subject: [PATCH] feat(#46): Componentise the boxes view --- .../components/pokedex/PokedexSidebar.svelte | 107 +++++++++++ .../pokedex/PokedexViewBoxes.svelte | 143 ++++++++++++++ .../repositories/CombinedDataRepository.ts | 22 ++- src/routes/api/combined-data/all/+server.ts | 4 +- src/routes/mydex/boxes/+page.svelte | 176 ++++++------------ 5 files changed, 332 insertions(+), 120 deletions(-) create mode 100644 src/lib/components/pokedex/PokedexSidebar.svelte create mode 100644 src/lib/components/pokedex/PokedexViewBoxes.svelte diff --git a/src/lib/components/pokedex/PokedexSidebar.svelte b/src/lib/components/pokedex/PokedexSidebar.svelte new file mode 100644 index 0000000..e822789 --- /dev/null +++ b/src/lib/components/pokedex/PokedexSidebar.svelte @@ -0,0 +1,107 @@ + + + diff --git a/src/lib/components/pokedex/PokedexViewBoxes.svelte b/src/lib/components/pokedex/PokedexViewBoxes.svelte new file mode 100644 index 0000000..00adb1d --- /dev/null +++ b/src/lib/components/pokedex/PokedexViewBoxes.svelte @@ -0,0 +1,143 @@ + + +
+
+ {#if combinedData && combinedData.length > 0} +
+
+ {#each boxNumbers as boxNumber} +
+

Box {boxNumber}

+ + + + + +
+ {#each combinedData as { pokedexEntry, catchRecord }} + {#if pokedexEntry[currentPlacement].box === boxNumber} +
+ +
+ {#if catchRecord.inHome} + ✓ + {/if} + + ⓘ +
+
+
+ {pokedexEntry.pokemon} + {pokedexEntry.form ? `(${pokedexEntry.form})` : ''} +
+
{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}
+
+ Caught: {catchRecord.caught ? 'Yes' : 'No'}
+ Needs to Evolve: {catchRecord.haveToEvolve ? 'Yes' : 'No'}
+ In Home: {catchRecord.inHome ? 'Yes' : 'No'} +
+
+ +
+ {/if} + {/each} +
+
+ {/each} +
+
+ {:else if failedToLoad} + {#if creatingRecords && totalRecordsCreated > 0} +

Processed {totalRecordsCreated} Pokédex entries so far...

+

Please be patient, this may take some time.

+ {:else if creatingRecords} +

Processing...

+

Please be patient, this may take some time.

+ {:else} +

Failed to load

+

+ If you're seeing this, you probably haven't created your Pokédex data yet. Please do so by + clicking this button. +

+ + {/if} + {:else} +
+

Loading Pokédex

+ +
+ {/if} +
+
+ + diff --git a/src/lib/repositories/CombinedDataRepository.ts b/src/lib/repositories/CombinedDataRepository.ts index 38dedeb..e4781cd 100644 --- a/src/lib/repositories/CombinedDataRepository.ts +++ b/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 { + async findAllCombinedData( + enableForms: boolean = true, + region: string = '', + game: string = '' + ): Promise { 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 diff --git a/src/routes/api/combined-data/all/+server.ts b/src/routes/api/combined-data/all/+server.ts index a34cab1..7802018 100644 --- a/src/routes/api/combined-data/all/+server.ts +++ b/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 }); diff --git a/src/routes/mydex/boxes/+page.svelte b/src/routes/mydex/boxes/+page.svelte index 3f50c8d..2d42c68 100644 --- a/src/routes/mydex/boxes/+page.svelte +++ b/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; + 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; + 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}®ion=${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 @@ -
- {#if !localUser} -

Please sign in

- {:else if combinedData && combinedData.length > 0} - - - - -
- {#each boxNumbers as boxNumber} -
-

Box {boxNumber}

- - - - - -
- {#each combinedData as { pokedexEntry, catchRecord }} - {#if pokedexEntry[currentPlacement].box === boxNumber} -
- -
- {#if catchRecord.inHome} - ✓ - {/if} - - ⓘ -
-
-
- {pokedexEntry.pokemon} - {pokedexEntry.form ? `(${pokedexEntry.form})` : ''} -
-
{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}
-
- Caught: {catchRecord.caught ? 'Yes' : 'No'}
- Needs to Evolve: {catchRecord.haveToEvolve ? 'Yes' : 'No'}
- In Home: {catchRecord.inHome ? 'Yes' : 'No'} -
-
- -
- {/if} - {/each} -
-
- {/each} +{#if !localUser} +

Please sign in

+{:else} +
+ +
+ +
- {:else if failedToLoad} -

Failed to load

-

- If you're seeing this, you probably haven't created your Pokédex data yet. Please do so by - visiting the My Dex page. -

- {:else} -
-

Loading Pokédex

- +
+ +
- {/if} -
- - +
+{/if}