feat(#46): Add buttons to update catch records for entire boxes

src/routes/mydex/boxes/+page.svelte

@@ -82,6 +82,67 @@
 			}
 		}
 	}
+
+	async function updateCatchRecords(
+		boxNumber: number,
+		caught: boolean,
+		needsToEvolve: boolean,
+		inHome: boolean | null = null
+	) {
+		let catchRecordsToUpdate = combinedData
+			.filter(({ pokedexEntry }) => pokedexEntry[currentPlacement].box === boxNumber)
+			.map(({ catchRecord }) => {
+				// Create the base object with existing properties
+				let updatedRecord = { ...catchRecord };
+
+				if (inHome !== null) {
+					updatedRecord = {
+						...updatedRecord,
+						inHome
+					};
+				} else {
+					updatedRecord = {
+						...updatedRecord,
+						caught,
+						haveToEvolve: needsToEvolve
+					};
+				}
+
+				return updatedRecord;
+			});
+
+		await fetch('/api/catch-records', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify(catchRecordsToUpdate)
+		}).then(async () => {
+			// TODO - Notify the user that data is being updated
+			await getData(false);
+			// TODO - Remove the notification
+		});
+	}
+
+	async function markBoxAsNotCaught(boxNumber: number) {
+		await updateCatchRecords(boxNumber, false, false);
+	}
+
+	async function markBoxAsCaught(boxNumber: number) {
+		await updateCatchRecords(boxNumber, true, false);
+	}
+
+	async function markBoxAsNeedsToEvolve(boxNumber: number) {
+		await updateCatchRecords(boxNumber, false, true);
+	}
+
+	async function markBoxAsInHome(boxNumber: number) {
+		await updateCatchRecords(boxNumber, false, false, true);
+	}
+
+	async function markBoxAsNotInHome(boxNumber: number) {
+		await updateCatchRecords(boxNumber, false, false, false);
+	}
 </script>
 
 <svelte:head>
@@ -106,6 +167,17 @@
 			{#each boxNumbers as boxNumber}
 				<div class="mb-8 md:w-1/2 px-2">
 					<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
+					<button class="btn" on:click={markBoxAsNotCaught(boxNumber)}>
+						Mark box as not 'caught'
+					</button>
+					<button class="btn" on:click={markBoxAsCaught(boxNumber)}> Mark box as 'caught' </button>
+					<button class="btn" on:click={markBoxAsNeedsToEvolve(boxNumber)}
+						>Mark box as 'needs to evolve'</button
+					>
+					<button class="btn" on:click={markBoxAsInHome(boxNumber)}>Mark box as 'in Home'</button>
+					<button class="btn" on:click={markBoxAsNotInHome(boxNumber)}
+						>Mark box as not 'in Home'</button
+					>
 					<div class="grid grid-cols-6">
 						{#each combinedData as { pokedexEntry, catchRecord }}
 							{#if pokedexEntry[currentPlacement].box === boxNumber}