From 8175daf77384ebfeee1ec0544c201712dffb121d Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 16 Oct 2024 22:23:59 -0400
Subject: [PATCH] Filter countries by visit status

---
 .../src/lib/components/CountryCard.svelte     |  2 +-
 frontend/src/routes/worldtravel/+page.svelte  | 68 ++++++++++++++++---
 2 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/CountryCard.svelte b/frontend/src/lib/components/CountryCard.svelte
index 78304ec..a2574cc 100644
--- a/frontend/src/lib/components/CountryCard.svelte
+++ b/frontend/src/lib/components/CountryCard.svelte
@@ -34,7 +34,7 @@
 			{/if}
 			{#if country.num_visits > 0 && country.num_visits != country.num_regions}
 				<div class="badge badge-accent">
-					Visited {country.num_visits} time{country.num_visits > 1 ? 's' : ''}
+					Visited {country.num_visits} Region{country.num_visits > 1 ? 's' : ''}
 				</div>
 			{:else if country.num_visits > 0 && country.num_visits === country.num_regions}
 				<div class="badge badge-success">Completed</div>
diff --git a/frontend/src/routes/worldtravel/+page.svelte b/frontend/src/routes/worldtravel/+page.svelte
index 48a1b54..874991d 100644
--- a/frontend/src/routes/worldtravel/+page.svelte
+++ b/frontend/src/routes/worldtravel/+page.svelte
@@ -3,25 +3,38 @@
 	import type { Country } from '$lib/types';
 	import type { PageData } from './$types';
 
-	let searchQuery: string = '';
-
-	let filteredCountries: Country[] = [];
-
 	export let data: PageData;
 	console.log(data);
 
-	const countries: Country[] = data.props?.countries || [];
+	let searchQuery: string = '';
+
+	let filteredCountries: Country[] = [];
+	const allCountries: Country[] = data.props?.countries || [];
+
+	let filterOption: string = 'all';
 
 	$: {
-		// if query is empty, show all countries
 		if (searchQuery === '') {
-			filteredCountries = countries;
+			filteredCountries = allCountries;
 		} else {
 			// otherwise, filter countries by name
-			filteredCountries = countries.filter((country) =>
+			filteredCountries = allCountries.filter((country) =>
 				country.name.toLowerCase().includes(searchQuery.toLowerCase())
 			);
 		}
+		if (filterOption === 'partial') {
+			filteredCountries = filteredCountries.filter(
+				(country) => country.num_visits > 0 && country.num_visits < country.num_regions
+			);
+		} else if (filterOption === 'complete') {
+			filteredCountries = filteredCountries.filter(
+				(country) => country.num_visits === country.num_regions
+			);
+		} else if (filterOption === 'not') {
+			filteredCountries = filteredCountries.filter((country) => country.num_visits === 0);
+		} else {
+			filteredCountries = filteredCountries;
+		}
 	}
 </script>
 
@@ -31,6 +44,38 @@
 	{filteredCountries.length} countries found
 </p>
 
+<div class="join flex items-center justify-center mb-4">
+	<input
+		class="join-item btn"
+		type="radio"
+		name="filter"
+		aria-label="All"
+		checked
+		on:click={() => (filterOption = 'all')}
+	/>
+	<input
+		class="join-item btn"
+		type="radio"
+		name="filter"
+		aria-label="Partially Visited"
+		on:click={() => (filterOption = 'partial')}
+	/>
+	<input
+		class="join-item btn"
+		type="radio"
+		name="filter"
+		aria-label="Completely Visited"
+		on:click={() => (filterOption = 'complete')}
+	/>
+	<input
+		class="join-item btn"
+		type="radio"
+		name="filter"
+		aria-label="Not Visited"
+		on:click={() => (filterOption = 'not')}
+	/>
+</div>
+
 <div class="flex items-center justify-center mb-4">
 	<input
 		type="text"
@@ -38,7 +83,14 @@
 		class="input input-bordered w-full max-w-xs"
 		bind:value={searchQuery}
 	/>
+	{#if searchQuery.length > 0}
+		<!-- clear button -->
+		<div class="flex items-center justify-center ml-4">
+			<button class="btn btn-neutral" on:click={() => (searchQuery = '')}> Clear Search </button>
+		</div>
+	{/if}
 </div>
+
 <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 	{#each filteredCountries as country}
 		<CountryCard {country} />