From 72254fb4794e8784773c413daa99b8bc0c711111 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Fri, 12 Jul 2024 14:35:25 +0100
Subject: [PATCH] feat(*): Add ability to toggle origins and forms

---
 .../pokedex/PokedexEntryCatchRecord.svelte    | 42 +++++++++++--------
 src/routes/mydex/+page.svelte                 | 17 +++++++-
 2 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
index 6d021c9..b2eced9 100644
--- a/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
+++ b/src/lib/components/pokedex/PokedexEntryCatchRecord.svelte
@@ -6,6 +6,8 @@
 
 	export let pokedexEntry: PokedexEntry;
 	export let catchRecord: CatchRecord;
+	export let showOrigins: boolean;
+	export let showForms: boolean;
 
 	const dispatch = createEventDispatcher();
 
@@ -34,15 +36,19 @@
 			</div>
 		</div>
 
-		<div class="bg-white text-black rounded-lg p-4 mb-2">
-			<p><strong>Form:</strong> {pokedexEntry.form ? pokedexEntry.form : '-'}</p>
-		</div>
+		{#if showForms}
+			<div class="bg-white text-black rounded-lg p-4 mb-2">
+				<p><strong>Form:</strong> {pokedexEntry.form ? pokedexEntry.form : '-'}</p>
+			</div>
+		{/if}
 
 		<div class="bg-white text-black rounded-lg p-4">
 			<p><strong>Box:</strong> {pokedexEntry.boxPlacement.box}</p>
 			<p><strong>Row:</strong> {pokedexEntry.boxPlacement.row}</p>
 			<p><strong>Column:</strong> {pokedexEntry.boxPlacement.column}</p>
-			<p><strong>Can Gigantamax:</strong> {pokedexEntry.canGigantamax ? 'Yes' : 'No'}</p>
+			{#if showForms}
+				<p><strong>Can Gigantamax:</strong> {pokedexEntry.canGigantamax ? 'Yes' : 'No'}</p>
+			{/if}
 			<p><strong>Notes:</strong> {pokedexEntry.notes}</p>
 		</div>
 	</div>
@@ -77,7 +83,7 @@
 				class="form-checkbox"
 			/>
 		</div>
-		{#if pokedexEntry.canGigantamax}
+		{#if pokedexEntry.canGigantamax && showForms}
 			<div class="flex items-center">
 				<label class="block font-bold mr-2" for={`hasGigantamaxedInput-${catchRecord._id}`}
 					>Has Gigantamaxed:</label
@@ -103,18 +109,20 @@
 	</div>
 
 	<div class="dex-column additional-details-container">
-		<div class="bg-white text-black rounded-lg p-4 mb-2">
-			<p><strong>Region to Catch In:</strong> {pokedexEntry.regionToCatchIn}</p>
-			<p><strong>Games to catch in:</strong></p>
-			<ul class="list-disc list-inside">
-				{#each pokedexEntry.gamesToCatchIn as game}
-					<li>{game}</li>
-				{/each}
-			</ul>
-			{#if pokedexEntry.regionToEvolveIn}
-				<p><strong>Region to Evolve In:</strong> {pokedexEntry.regionToEvolveIn}</p>
-			{/if}
-		</div>
+		{#if showOrigins}
+			<div class="bg-white text-black rounded-lg p-4 mb-2">
+				<p><strong>Region to Catch In:</strong> {pokedexEntry.regionToCatchIn}</p>
+				<p><strong>Games to catch in:</strong></p>
+				<ul class="list-disc list-inside">
+					{#each pokedexEntry.gamesToCatchIn as game}
+						<li>{game}</li>
+					{/each}
+				</ul>
+				{#if pokedexEntry.regionToEvolveIn}
+					<p><strong>Region to Evolve In:</strong> {pokedexEntry.regionToEvolveIn}</p>
+				{/if}
+			</div>
+		{/if}
 		<div class="bg-white text-black rounded-lg p-4">
 			<button on:click={save}>Save</button>
 		</div>
diff --git a/src/routes/mydex/+page.svelte b/src/routes/mydex/+page.svelte
index f67ef7f..ace0aa5 100644
--- a/src/routes/mydex/+page.svelte
+++ b/src/routes/mydex/+page.svelte
@@ -21,6 +21,17 @@
 	let creatingRecords = false;
 	let totalRecordsCreated = 0;
 
+	let showOrigins = true;
+	let showForms = true;
+
+	function toggleOrigins() {
+		showOrigins = !showOrigins;
+	}
+
+	function toggleForms() {
+		showForms = !showForms;
+	}
+
 	async function fetchPokeDexEntries() {
 		console.log('Fetching updated Pokedex entry data');
 		const response = await fetch('/api/pokedexentries');
@@ -164,8 +175,8 @@
 <div class="container mx-auto">
 	{#if combinedData}
 		<div>
-			<button>Toggle Forms</button>
-			<button>Toggle Origins</button>
+			<button on:click={() => toggleForms()}>Toggle Forms</button>
+			<button on:click={() => toggleOrigins()}>Toggle Origins</button>
 		</div>
 
 		<!-- <p>
@@ -175,6 +186,8 @@
 			<div>
 				<PokedexEntryCatchRecord
 					{pokedexEntry}
+					{showOrigins}
+					{showForms}
 					bind:catchRecord
 					on:updateCatch={() => updateACatch(catchRecord)}
 				/>