jcreek/LivingDexTracker
1
0
Fork 0
mirror of https://github.com/jcreek/LivingDexTracker.git synced 2026-07-12 18:43:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(*): Make mydex use combined data

Browse Source
This commit is contained in:
Josh Creek
2024-07-14 12:07:15 +01:00
parent 955a8c869e
commit e9c483045a
3 changed files with 117 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Pagination.svelte
+15 -10
View File
@@ -16,14 +16,19 @@
} }
</script> </script>
<div> <div class="join mb-4">
<button on:click={previousPage} disabled={currentPage === 1}>Previous</button> <button class="join-item btn" on:click={previousPage} disabled={currentPage === 1}>«</button>
<button on:click={nextPage} disabled={currentPage === totalPages}>Next</button> <button class="join-item btn">Page {currentPage} of {totalPages}</button>
<button class="join-item btn" on:click={nextPage} disabled={currentPage === totalPages}>»</button>
<label for="itemsPerPage">Items per page:</label>
<select id="itemsPerPage" on:change={setItemsPerPage}>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div> </div>
<label for="itemsPerPage">Items per page:</label>
<select
id="itemsPerPage"
class="select select-bordered w-full max-w-xs text-black"
on:change={setItemsPerPage}
>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
+42 -43
View File
@@ -17,7 +17,7 @@
</script> </script>
<div <div
class="container bg-red-500 text-white rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-4" class="dex-entry bg-primary/90 text-primary-content rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-4 mb-4"
> >
<div class="dex-column pokedex-entry-container"> <div class="dex-column pokedex-entry-container">
<div class="flex mb-2"> <div class="flex mb-2">
@@ -31,7 +31,7 @@
/> --> /> -->
</div> </div>
<div class="pl-2"> <div class="pl-2">
<h3 class="text-xl font-bold pt-1">{pokedexEntry.pokemon}</h3> <h3 class="text-xl font-bold pt-1 text-secondary">{pokedexEntry.pokemon}</h3>
<sub class="text-gray-200">#{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</sub> <sub class="text-gray-200">#{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</sub>
</div> </div>
</div> </div>
@@ -57,45 +57,53 @@
<div class="dex-column catch-record-container bg-white text-black rounded-lg p-4 mb-4 md:mb-0"> <div class="dex-column catch-record-container bg-white text-black rounded-lg p-4 mb-4 md:mb-0">
<div class="flex items-center"> <div class="flex items-center">
<label class="block font-bold mr-2" for={`caughtInput-${catchRecord._id}`}>Caught:</label> <div class="form-control">
<input <label class="cursor-pointer label">
type="checkbox" <span class="block font-bold mr-2">Caught:</span>
id={`caughtInput-${catchRecord._id}`} <input
bind:checked={catchRecord.caught} type="checkbox"
class="form-checkbox" bind:checked={catchRecord.caught}
/> class="checkbox checkbox-primary border-black"
/>
</label>
</div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<label class="block font-bold mr-2" for={`haveToEvolveInput-${catchRecord._id}`} <div class="form-control">
>Needs to evolve:</label <label class="cursor-pointer label">
> <span class="block font-bold mr-2">Needs to evolve:</span>
<input <input
type="checkbox" type="checkbox"
id={`haveToEvolveInput-${catchRecord._id}`} bind:checked={catchRecord.haveToEvolve}
bind:checked={catchRecord.haveToEvolve} class="checkbox checkbox-primary border-black"
class="form-checkbox" />
/> </label>
</div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<label class="block font-bold mr-2" for={`inHomeInput-${catchRecord._id}`}>In home:</label> <div class="form-control">
<input <label class="cursor-pointer label">
type="checkbox" <span class="block font-bold mr-2">In home:</span>
id={`inHomeInput-${catchRecord._id}`} <input
bind:checked={catchRecord.inHome} type="checkbox"
class="form-checkbox" bind:checked={catchRecord.inHome}
/> class="checkbox checkbox-primary border-black"
/>
</label>
</div>
</div> </div>
{#if pokedexEntry.canGigantamax && showForms} {#if pokedexEntry.canGigantamax && showForms}
<div class="flex items-center"> <div class="flex items-center">
<label class="block font-bold mr-2" for={`hasGigantamaxedInput-${catchRecord._id}`} <div class="form-control">
>Has Gigantamaxed:</label <label class="cursor-pointer label">
> <span class="block font-bold mr-2">Has Gigantamaxed:</span>
<input <input
type="checkbox" type="checkbox"
id={`hasGigantamaxedInput-${catchRecord._id}`} bind:checked={catchRecord.hasGigantamaxed}
bind:checked={catchRecord.hasGigantamaxed} class="checkbox checkbox-primary border-black"
class="form-checkbox" />
/> </label>
</div>
</div> </div>
{/if} {/if}
<p> <p>
@@ -132,19 +140,10 @@
</div> </div>
<style> <style>
.container {
max-width: 1000px;
margin: 10px;
}
.dex-column { .dex-column {
width: 300px; width: 300px;
} }
.pokedex-entry-container h3 {
color: #ffd700; /* Gold color */
}
.sprite-container { .sprite-container {
width: 68px; width: 68px;
height: 68px; height: 68px;
src/routes/mydex/+page.svelte
+60 -45
View File
@@ -31,6 +31,7 @@
} }
async function getData() { async function getData() {
combinedData = null;
const response = await fetch(`/api/combined-data?page=${currentPage}&limit=${itemsPerPage}`); const response = await fetch(`/api/combined-data?page=${currentPage}&limit=${itemsPerPage}`);
const data = await response.json(); const data = await response.json();
@@ -49,58 +50,72 @@
} }
async function updateACatch(catchRecord: CatchRecord) { async function updateACatch(catchRecord: CatchRecord) {
alert('here'); if (!localUser?.id) {
// if (!localUser?.id) { alert('User not signed in');
// alert('User not signed in'); return;
// return; }
// }
// const requestOptions = { const requestOptions = {
// method: 'PUT', method: 'PUT',
// headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify(catchRecord) body: JSON.stringify(catchRecord)
// }; };
// try { try {
// const response = await fetch('/api/catch-records', requestOptions); const response = await fetch('/api/catch-records', requestOptions);
// if (!response.ok) { if (!response.ok) {
// throw new Error('Failed to update catch record'); throw new Error('Failed to update catch record');
// } }
// const updatedRecord = await response.json(); const updatedRecord = await response.json();
// console.log('Updated catch record:', updatedRecord); console.log('Updated catch record:', updatedRecord);
// } catch (error) { } catch (error) {
// console.error('Error updating catch record:', error); console.error('Error updating catch record:', error);
// } }
} }
</script> </script>
<div class="container mx-auto"> <svelte:head>
{#if combinedData} <title>Living Dex Tracker - My Dex</title>
<div> </svelte:head>
<button on:click={() => toggleForms()}>Toggle Forms</button>
<button on:click={() => toggleOrigins()}>Toggle Origins</button> <div class="flex">
<aside class="w-64 bg-gray-800 text-white p-4 fixed h-5/6">
<h2 class="text-2xl font-semibold mb-4">Filters</h2>
<!-- <ul>
<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Dashboard</a></li>
<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Profile</a></li>
<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Settings</a></li>
<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Logout</a></li>
</ul> -->
<div class="mb-4">
<button class="btn btn-sm" on:click={() => toggleForms()}>Toggle Forms</button>
<button class="btn btn-sm" on:click={() => toggleOrigins()}>Toggle Origins</button>
</div> </div>
<Pagination bind:currentPage bind:itemsPerPage bind:totalPages /> <div>
{currentPage} <Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
</div>
</aside>
{#each combinedData as { pokedexEntry, catchRecord }} <main class="flex-1 p-4">
<div> <div class="max-w-min mx-auto">
<PokedexEntryCatchRecord {#if combinedData}
{pokedexEntry} {#each combinedData as { pokedexEntry, catchRecord }}
{showOrigins} <PokedexEntryCatchRecord
{showForms} {pokedexEntry}
bind:catchRecord {showOrigins}
on:updateCatch={() => updateACatch(catchRecord)} {showForms}
/> bind:catchRecord
</div> on:updateCatch={() => updateACatch(catchRecord)}
{/each} />
{/each}
<Pagination bind:currentPage bind:itemsPerPage bind:totalPages /> {:else}
{currentPage} <div class="min-w-max mx-auto">
{:else} <h1>Loading Pokédex</h1>
<h1>Loading Pokédex</h1> <span class="loading loading-spinner loading-xl"></span>
<span class="loading loading-spinner loading-xl"></span> </div>
{/if} {/if}
</div>
</main>
</div> </div>