mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-07-12 18:43:45 +00:00
feat(#46): Componentise the list view
This commit is contained in:
Josh Creek
@@ -8,6 +8,7 @@
|
|||||||
export let catchRecord: CatchRecord;
|
export let catchRecord: CatchRecord;
|
||||||
export let showOrigins: boolean;
|
export let showOrigins: boolean;
|
||||||
export let showForms: boolean;
|
export let showForms: boolean;
|
||||||
|
export let showShiny: boolean;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
@@ -26,6 +27,7 @@
|
|||||||
pokemonName={pokedexEntry.pokemon}
|
pokemonName={pokedexEntry.pokemon}
|
||||||
pokedexNumber={pokedexEntry.pokedexNumber}
|
pokedexNumber={pokedexEntry.pokedexNumber}
|
||||||
form={pokedexEntry.form}
|
form={pokedexEntry.form}
|
||||||
|
shiny={showShiny}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="pl-2">
|
<div class="pl-2">
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import PokedexEntryCatchRecord from './PokedexEntryCatchRecord.svelte';
|
||||||
|
import type { CombinedData } from '$lib/models/CombinedData';
|
||||||
|
|
||||||
|
export let showOrigins = true;
|
||||||
|
export let showForms = true;
|
||||||
|
export let showShiny = false;
|
||||||
|
export let combinedData: CombinedData[] | null;
|
||||||
|
export let creatingRecords = false;
|
||||||
|
export let totalRecordsCreated = 0;
|
||||||
|
export let failedToLoad = false;
|
||||||
|
export let updateACatch = (event: any) => {};
|
||||||
|
export let createCatchRecords = () => {};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main class="flex-1 p-4 w-full">
|
||||||
|
<div class="max-w-min mx-auto">
|
||||||
|
{#if combinedData && combinedData.length > 0}
|
||||||
|
{#each combinedData as { pokedexEntry, catchRecord }}
|
||||||
|
<PokedexEntryCatchRecord
|
||||||
|
{pokedexEntry}
|
||||||
|
{showOrigins}
|
||||||
|
{showForms}
|
||||||
|
{showShiny}
|
||||||
|
bind:catchRecord
|
||||||
|
on:updateCatch={updateACatch}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
{: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>
|
||||||
+34
-130
@@ -8,6 +8,8 @@
|
|||||||
import Pagination from '$lib/components/Pagination.svelte';
|
import Pagination from '$lib/components/Pagination.svelte';
|
||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
import type { PokedexEntry } from '$lib/models/PokedexEntry';
|
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 combinedData = null as CombinedData[] | null;
|
||||||
let currentPage = 1 as number;
|
let currentPage = 1 as number;
|
||||||
@@ -27,6 +29,7 @@
|
|||||||
|
|
||||||
let showOrigins = true;
|
let showOrigins = true;
|
||||||
let showForms = true;
|
let showForms = true;
|
||||||
|
let showShiny = false;
|
||||||
let drawerOpen = false;
|
let drawerOpen = false;
|
||||||
|
|
||||||
function toggleOrigins() {
|
function toggleOrigins() {
|
||||||
@@ -38,6 +41,15 @@
|
|||||||
await getData();
|
await getData();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function toggleShiny() {
|
||||||
|
showShiny = !showShiny;
|
||||||
|
if (showShiny) {
|
||||||
|
showForms = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
await getData();
|
||||||
|
}
|
||||||
|
|
||||||
async function getData() {
|
async function getData() {
|
||||||
combinedData = null;
|
combinedData = null;
|
||||||
|
|
||||||
@@ -162,139 +174,31 @@
|
|||||||
>
|
>
|
||||||
{drawerOpen ? 'Close Filters' : 'Open Filters'}
|
{drawerOpen ? 'Close Filters' : 'Open Filters'}
|
||||||
</label>
|
</label>
|
||||||
<main class="flex-1 p-4 w-full">
|
<PokedexViewList
|
||||||
<div class="max-w-min mx-auto">
|
bind:showOrigins
|
||||||
{#if combinedData && combinedData.length > 0}
|
bind:showForms
|
||||||
{#each combinedData as { pokedexEntry, catchRecord }}
|
bind:showShiny
|
||||||
<PokedexEntryCatchRecord
|
bind:combinedData
|
||||||
{pokedexEntry}
|
bind:creatingRecords
|
||||||
{showOrigins}
|
bind:totalRecordsCreated
|
||||||
{showForms}
|
bind:failedToLoad
|
||||||
bind:catchRecord
|
{updateACatch}
|
||||||
on:updateCatch={updateACatch}
|
{createCatchRecords}
|
||||||
/>
|
/>
|
||||||
{/each}
|
|
||||||
{: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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="drawer-side lg:relative">
|
<div class="drawer-side lg:relative">
|
||||||
<label for="my-drawer" class="drawer-overlay lg:hidden"></label>
|
<label for="my-drawer" class="drawer-overlay lg:hidden"></label>
|
||||||
<aside
|
<PokedexSidebar
|
||||||
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"
|
bind:showForms
|
||||||
>
|
bind:showOrigins
|
||||||
<h2 class="text-2xl font-semibold mb-4">Filters</h2>
|
bind:showShiny
|
||||||
<ul>
|
bind:catchRegion
|
||||||
<li class="mb-2">
|
bind:catchGame
|
||||||
<button class="block p-2 hover:bg-gray-700 rounded" on:click={() => toggleForms()}>
|
{getData}
|
||||||
Toggle Forms (Currently {showForms ? 'On' : 'Off'})
|
{toggleForms}
|
||||||
</button>
|
{toggleOrigins}
|
||||||
</li>
|
{toggleShiny}
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<h2 class="text-2xl font-semibold mb-4">Paging</h2>
|
|
||||||
<div>
|
|
||||||
<Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user