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

feat: Add search functionality for regions and cities in World Travel pages

Browse source
This commit is contained in:
Sean Morley 2025-03-17 14:31:22 -04:00
parent b82e4b6f0d
commit 3b6d437f29
2 changed files with 51 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/routes/worldtravel/[id]/+page.svelte
View file

@ -10,6 +10,21 @@
let regions: Region[] = data.props?.regions || [];
let visitedRegions: VisitedRegion[] = data.props?.visitedRegions || [];
let filteredRegions: Region[] = [];
let searchQuery: string = '';
$: {
if (searchQuery === '') {
filteredRegions = regions;
} else {
// always filter from the original regions list
filteredRegions = regions.filter((region) =>
region.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}
}
const country = data.props?.country || null;
console.log(data);
@ -88,8 +103,25 @@
</div>
</div>
<div class="flex items-center justify-center mb-4">
<input
type="text"
placeholder={$t('navbar.search')}
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 = '')}>
{$t('worldtravel.clear_search')}
</button>
</div>
{/if}
</div>
<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
{#each regions as region}
{#each filteredRegions as region}
<RegionCard
{region}
visited={visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)}

86
frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
View file

@ -20,7 +20,7 @@
filteredCities = allCities;
} else {
// otherwise, filter countries by name
filteredCities = filteredCities.filter((country) =>
filteredCities = allCities.filter((country) =>
country.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}
@ -97,74 +97,7 @@
</div>
</div>
<!-- <div class="flex items-center justify-center mb-4">
<div class="join">
<input
class="join-item btn"
type="radio"
name="filter"
aria-label={$t('worldtravel.all')}
checked
on:click={() => (filterOption = 'all')}
/>
<input
class="join-item btn"
type="radio"
name="filter"
aria-label={$t('worldtravel.partially_visited')}
on:click={() => (filterOption = 'partial')}
/>
<input
class="join-item btn"
type="radio"
name="filter"
aria-label={$t('worldtravel.completely_visited')}
on:click={() => (filterOption = 'complete')}
/>
<input
class="join-item btn"
type="radio"
name="filter"
aria-label={$t('worldtravel.not_visited')}
on:click={() => (filterOption = 'not')}
/>
</div>
<select class="select select-bordered w-full max-w-xs ml-4" bind:value={subRegionOption}>
<option value="">{$t('worldtravel.all_subregions')}</option>
{#each worldSubregions as subregion}
<option value={subregion}>{subregion}</option>
{/each}
</select>
<div class="flex items-center justify-center ml-4">
<input
type="checkbox"
class="checkbox checkbox-bordered"
bind:checked={showMap}
aria-label={$t('adventures.show_map')}
/>
<span class="ml-2">{$t('adventures.show_map')}</span>
</div>
</div> -->
{#if allCities.length > 0}
<div class="flex items-center justify-center mb-4">
<input
type="text"
placeholder={$t('navbar.search')}
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 = '')}>
{$t('worldtravel.clear_search')}
</button>
</div>
{/if}
</div>
<div class="mt-4 mb-4 flex justify-center">
<!-- checkbox to toggle marker -->
@ -198,6 +131,23 @@
</div>
{/if}
<div class="flex items-center justify-center mb-4">
<input
type="text"
placeholder={$t('navbar.search')}
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 = '')}>
{$t('worldtravel.clear_search')}
</button>
</div>
{/if}
</div>
<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
{#each filteredCities as city}
<CityCard