Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 07:19:36 +02:00
Code Issues Releases Activity

Filter countries by visit status

Browse source
This commit is contained in:
Sean Morley 2024-10-16 22:23:59 -04:00
parent 3a66a433ca
commit 8175daf773
2 changed files with 61 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/CountryCard.svelte
View file

@ -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>

68
frontend/src/routes/worldtravel/+page.svelte
View file

@ -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} />