mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-24 07:19:36 +02:00
Filter countries by visit status
This commit is contained in:
parent
3a66a433ca
commit
8175daf773
2 changed files with 61 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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} />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue