From 02a2160f08287514e3bc8cff4450a8dda7e99b63 Mon Sep 17 00:00:00 2001 From: Josh Creek <8179928+jcreek@users.noreply.github.com> Date: Wed, 17 Jul 2024 21:24:06 +0100 Subject: [PATCH] feat(#46): Componentise the list view --- .../pokedex/PokedexEntryCatchRecord.svelte | 2 + .../components/pokedex/PokedexViewList.svelte | 51 ++++++ src/routes/mydex/+page.svelte | 164 ++++-------------- 3 files changed, 87 insertions(+), 130 deletions(-) create mode 100644 src/lib/components/pokedex/PokedexViewList.svelte diff --git a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte index 9982b2f..1c40628 100644 --- a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte +++ b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte @@ -8,6 +8,7 @@ export let catchRecord: CatchRecord; export let showOrigins: boolean; export let showForms: boolean; + export let showShiny: boolean; const dispatch = createEventDispatcher(); @@ -26,6 +27,7 @@ pokemonName={pokedexEntry.pokemon} pokedexNumber={pokedexEntry.pokedexNumber} form={pokedexEntry.form} + shiny={showShiny} />
diff --git a/src/lib/components/pokedex/PokedexViewList.svelte b/src/lib/components/pokedex/PokedexViewList.svelte new file mode 100644 index 0000000..d855029 --- /dev/null +++ b/src/lib/components/pokedex/PokedexViewList.svelte @@ -0,0 +1,51 @@ + + +
+
+ {#if combinedData && combinedData.length > 0} + {#each combinedData as { pokedexEntry, catchRecord }} + + {/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/routes/mydex/+page.svelte b/src/routes/mydex/+page.svelte index 4f927bd..8701fa7 100644 --- a/src/routes/mydex/+page.svelte +++ b/src/routes/mydex/+page.svelte @@ -8,6 +8,8 @@ import Pagination from '$lib/components/Pagination.svelte'; import { browser } from '$app/environment'; import type { PokedexEntry } from '$lib/models/PokedexEntry'; + import PokedexSidebar from '$lib/components/pokedex/PokedexSidebar.svelte'; + import PokedexViewList from '$lib/components/pokedex/PokedexViewList.svelte'; let combinedData = null as CombinedData[] | null; let currentPage = 1 as number; @@ -27,6 +29,7 @@ let showOrigins = true; let showForms = true; + let showShiny = false; let drawerOpen = false; function toggleOrigins() { @@ -38,6 +41,15 @@ await getData(); } + async function toggleShiny() { + showShiny = !showShiny; + if (showShiny) { + showForms = false; + } + + await getData(); + } + async function getData() { combinedData = null; @@ -162,139 +174,31 @@ > {drawerOpen ? 'Close Filters' : 'Open Filters'} -
-
- {#if combinedData && combinedData.length > 0} - {#each combinedData as { pokedexEntry, catchRecord }} - - {/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} -
-
+
- +
{/if}