alex/voyage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove archived collections page and related components; enhance world travel pages with improved UI and filtering options

Browse Source
This commit is contained in:
Sean Morley
2025-06-13 21:41:10 -04:00
parent 14eb4ca802
commit a99553ba0d
9 changed files with 797 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

497
frontend/src/routes/worldtravel/[id]/+page.svelte
View File

@@ -5,30 +5,78 @@
import type { PageData } from './$types';
import { addToast } from '$lib/toasts';
import { t } from 'svelte-i18n';
// Icons
import MapMarker from '~icons/mdi/map-marker';
import Search from '~icons/mdi/magnify';
import Clear from '~icons/mdi/close';
import Filter from '~icons/mdi/filter-variant';
import Map from '~icons/mdi/map';
import Pin from '~icons/mdi/map-marker-outline';
import Check from '~icons/mdi/check-circle';
import Progress from '~icons/mdi/progress-check';
import Cancel from '~icons/mdi/cancel';
import Trophy from '~icons/mdi/trophy';
import Target from '~icons/mdi/target';
import Flag from '~icons/mdi/flag';
export let data: PageData;
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())
);
}
}
let showGeo: boolean = true;
let sidebarOpen = false;
let filterOption: string = 'all';
const country = data.props?.country || null;
console.log(data);
let showGeo: boolean = true;
// Statistics
let numRegions: number = country?.num_regions || 0;
let numVisitedRegions: number = country?.num_visits || 0;
$: visitedCount = visitedRegions.length;
$: notVisitedCount = regions.length - visitedCount;
$: completionPercentage =
regions.length > 0 ? Math.round((visitedCount / regions.length) * 100) : 0;
// Filter regions based on search and filter options
$: {
if (searchQuery === '') {
filteredRegions = regions;
} else {
filteredRegions = regions.filter((region) =>
region.name.toLowerCase().includes(searchQuery.toLowerCase())
);
}
if (filterOption === 'visited') {
filteredRegions = filteredRegions.filter((region) =>
visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)
);
} else if (filterOption === 'not-visited') {
filteredRegions = filteredRegions.filter(
(region) => !visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)
);
}
}
// Remove duplicates from visitedRegions
visitedRegions = visitedRegions.filter(
(visitedRegion, index, self) =>
index === self.findIndex((t) => t.region === visitedRegion.region)
);
function toggleSidebar() {
sidebarOpen = !sidebarOpen;
}
function clearFilters() {
searchQuery = '';
filterOption = 'all';
}
function togleVisited(region: Region) {
return () => {
@@ -64,6 +112,7 @@
);
}
}
async function removeVisit(region: Region) {
let res = await fetch(`/api/visitedregion/${region.id}`, {
headers: { 'Content-Type': 'application/json' },
@@ -78,114 +127,8 @@
addToast('info', `${$t('worldtravel.visit_to')} ${region.name} ${$t('worldtravel.removed')}`);
}
}
let numRegions: number = country?.num_regions || 0;
let numVisitedRegions: number = country?.num_visits || 0;
visitedRegions = visitedRegions.filter(
(visitedRegion, index, self) =>
index === self.findIndex((t) => t.region === visitedRegion.region)
);
</script>
<h1 class="text-center font-bold text-4xl mb-4">{$t('worldtravel.regions_in')} {country?.name}</h1>
<div class="flex items-center justify-center mb-4">
<div class="stats shadow bg-base-300">
<div class="stat">
<div class="stat-title">{$t('worldtravel.region_stats')}</div>
<div class="stat-value">{numVisitedRegions}/{numRegions} {$t('adventures.visited')}</div>
{#if numRegions === numVisitedRegions}
<div class="stat-desc">{$t('worldtravel.all_visited')} {country?.name} 🎉!</div>
{:else}
<div class="stat-desc">{$t('adventures.keep_exploring')}</div>
{/if}
</div>
</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 filteredRegions as region}
<RegionCard
{region}
visited={visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)}
on:visit={(e) => {
visitedRegions = [...visitedRegions, e.detail];
numVisitedRegions++;
}}
on:remove={() => {
visitedRegions = visitedRegions.filter(
(visitedRegion) => visitedRegion.region !== region.id
);
numVisitedRegions--;
}}
/>
{/each}
</div>
<div class="flex justify-center border-neutral p-4 rounded-lg border-4 max-w-lg m-auto mt-4">
<label for="show-geo">{$t('adventures.show_region_labels')}</label>
<input
type="checkbox"
id="show-geo"
name="show-geo"
class="checkbox ml-2"
bind:checked={showGeo}
on:click={() => (showGeo = !showGeo)}
/>
</div>
<div class="mt-4 mb-4 flex justify-center">
<!-- checkbox to toggle marker -->
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
standardControls
center={[regions[0]?.longitude || 0, regions[0]?.latitude || 0]}
zoom={2}
>
<!-- MapEvents gives you access to map events even from other components inside the map,
where you might not have access to the top-level `MapLibre` component. In this case
it would also work to just use on:click on the MapLibre component itself. -->
<!-- <MapEvents on:click={addMarker} /> -->
{#each regions as region}
{#if region.latitude && region.longitude && showGeo}
<Marker
lngLat={[region.longitude, region.latitude]}
class="grid px-2 py-1 place-items-center rounded-full border border-gray-200 {visitedRegions.some(
(visitedRegion) => visitedRegion.region === region.id
)
? 'bg-green-200'
: 'bg-red-200'} text-black focus:outline-6 focus:outline-black"
on:click={togleVisited(region)}
>
<span class="text-xs">
{region.name}
</span>
</Marker>
{/if}
{/each}
</MapLibre>
</div>
<svelte:head>
<title
>{data.props && data.props.country ? `Regions in ${data.props.country.name}` : 'Regions'}</title
@@ -195,3 +138,317 @@
content="View the regions in countries and mark them visited to track your world travel."
/>
</svelte:head>
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open">
<input id="regions-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content">
<!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<button class="btn btn-ghost btn-square lg:hidden" on:click={toggleSidebar}>
<Filter class="w-5 h-5" />
</button>
<div class="flex items-center gap-3">
<div class="p-2 bg-primary/10 rounded-xl">
<Flag class="w-8 h-8 text-primary" />
</div>
<div>
<h1
class="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
>
{$t('worldtravel.regions_in')}
{country?.name}
</h1>
<p class="text-sm text-base-content/60">
{filteredRegions.length} of {regions.length} regions
</p>
</div>
</div>
</div>
<!-- Completion Badge -->
<div class="hidden md:flex items-center gap-2">
{#if completionPercentage === 100}
<div class="badge badge-success gap-2 p-3">
<Trophy class="w-4 h-4" />
Complete!
</div>
{:else}
<div class="badge badge-primary gap-2 p-3">
<Target class="w-4 h-4" />
{completionPercentage}%
</div>
{/if}
</div>
</div>
<!-- Search and Filters -->
<div class="mt-4 flex items-center gap-4">
<div class="relative flex-1 max-w-md">
<Search
class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/40"
/>
<input
type="text"
placeholder={$t('navbar.search')}
class="input input-bordered w-full pl-10 pr-10 bg-base-100/80"
bind:value={searchQuery}
/>
{#if searchQuery.length > 0}
<button
class="absolute right-3 top-1/2 -translate-y-1/2 text-base-content/40 hover:text-base-content"
on:click={() => (searchQuery = '')}
>
<Clear class="w-4 h-4" />
</button>
{/if}
</div>
<!-- Map Toggle -->
<button
class="btn btn-outline gap-2 {showGeo ? 'btn-active' : ''}"
on:click={() => (showGeo = !showGeo)}
>
{#if showGeo}
<Map class="w-4 h-4" />
<span class="hidden sm:inline">Hide Labels</span>
{:else}
<Map class="w-4 h-4" />
<span class="hidden sm:inline">Show Labels</span>
{/if}
</button>
</div>
<!-- Filter Chips -->
<div class="mt-4 flex flex-wrap items-center gap-2">
<span class="text-sm font-medium text-base-content/60">Filter by:</span>
<div class="tabs tabs-boxed bg-base-200">
<button
class="tab tab-sm gap-2 {filterOption === 'all' ? 'tab-active' : ''}"
on:click={() => (filterOption = 'all')}
>
<MapMarker class="w-3 h-3" />
All
</button>
<button
class="tab tab-sm gap-2 {filterOption === 'visited' ? 'tab-active' : ''}"
on:click={() => (filterOption = 'visited')}
>
<Check class="w-3 h-3" />
Visited
</button>
<button
class="tab tab-sm gap-2 {filterOption === 'not-visited' ? 'tab-active' : ''}"
on:click={() => (filterOption = 'not-visited')}
>
<Cancel class="w-3 h-3" />
Not Visited
</button>
</div>
{#if searchQuery || filterOption !== 'all'}
<button class="btn btn-ghost btn-xs gap-1" on:click={clearFilters}>
<Clear class="w-3 h-3" />
Clear All
</button>
{/if}
</div>
</div>
</div>
<!-- Map Section -->
<div class="container mx-auto px-6 py-4">
<div class="card bg-base-100 shadow-xl">
<div class="card-body p-4">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<Map class="w-5 h-5 text-primary" />
<h2 class="text-lg font-semibold">Interactive Map</h2>
</div>
<div class="flex items-center gap-2 text-sm text-base-content/60">
<div class="flex items-center gap-1">
<div class="w-3 h-3 bg-green-200 rounded-full border"></div>
<span>Visited</span>
</div>
<div class="flex items-center gap-1">
<div class="w-3 h-3 bg-red-200 rounded-full border"></div>
<span>Not Visited</span>
</div>
</div>
</div>
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="aspect-[16/10] w-full rounded-lg"
standardControls
center={[regions[0]?.longitude || 0, regions[0]?.latitude || 0]}
zoom={6}
>
{#each regions as region}
{#if region.latitude && region.longitude && showGeo}
<Marker
lngLat={[region.longitude, region.latitude]}
class="grid px-2 py-1 place-items-center rounded-full border border-gray-200 {visitedRegions.some(
(visitedRegion) => visitedRegion.region === region.id
)
? 'bg-green-200'
: 'bg-red-200'} text-black focus:outline-6 focus:outline-black"
on:click={togleVisited(region)}
>
<span class="text-xs">
{region.name}
</span>
</Marker>
{/if}
{/each}
</MapLibre>
</div>
</div>
</div>
<!-- Main Content -->
<div class="container mx-auto px-6 py-8">
{#if filteredRegions.length === 0}
<div class="flex flex-col items-center justify-center py-16">
<div class="p-6 bg-base-200/50 rounded-2xl mb-6">
<MapMarker class="w-16 h-16 text-base-content/30" />
</div>
<h3 class="text-xl font-semibold text-base-content/70 mb-2">No regions found</h3>
<p class="text-base-content/50 text-center max-w-md mb-6">
Try adjusting your search terms or filters to find the regions you're looking for.
</p>
<button class="btn btn-primary gap-2" on:click={clearFilters}>
<Clear class="w-4 h-4" />
Clear Filters
</button>
</div>
{:else}
<!-- Regions Grid -->
<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6"
>
{#each filteredRegions as region}
<RegionCard
{region}
visited={visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)}
on:visit={(e) => {
visitedRegions = [...visitedRegions, e.detail];
numVisitedRegions++;
}}
on:remove={() => {
visitedRegions = visitedRegions.filter(
(visitedRegion) => visitedRegion.region !== region.id
);
numVisitedRegions--;
}}
/>
{/each}
</div>
{/if}
</div>
</div>
<!-- Sidebar -->
<div class="drawer-side z-50">
<label for="regions-drawer" class="drawer-overlay"></label>
<div class="w-80 min-h-full bg-base-100 shadow-2xl">
<div class="p-6">
<!-- Sidebar Header -->
<div class="flex items-center gap-3 mb-8">
<div class="p-2 bg-primary/10 rounded-lg">
<Filter class="w-6 h-6 text-primary" />
</div>
<h2 class="text-xl font-bold">Progress & Stats</h2>
</div>
<!-- Country Progress -->
<div class="card bg-base-200/50 p-4 mb-6">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<Flag class="w-5 h-5" />
{country?.name}
</h3>
<div class="space-y-4">
<div class="stat p-0">
<div class="stat-title text-sm">Total Regions</div>
<div class="stat-value text-2xl">{regions.length}</div>
<div class="stat-desc">Available to explore</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="stat p-0">
<div class="stat-title text-xs">Visited</div>
<div class="stat-value text-lg text-success">{visitedCount}</div>
</div>
<div class="stat p-0">
<div class="stat-title text-xs">Remaining</div>
<div class="stat-value text-lg text-error">{notVisitedCount}</div>
</div>
</div>
<!-- Progress Bar -->
<div class="space-y-2">
<div class="flex justify-between text-sm">
<span>Progress</span>
<span>{completionPercentage}%</span>
</div>
<progress
class="progress progress-primary w-full"
value={visitedCount}
max={regions.length}
></progress>
</div>
{#if completionPercentage === 100}
<div class="alert alert-success">
<Trophy class="w-4 h-4" />
<span class="text-sm">Country completed! 🎉</span>
</div>
{/if}
</div>
</div>
<!-- Map Controls
<div class="card bg-base-200/50 p-4 mb-6">
<h3 class="font-semibold text-lg mb-4 flex items-center gap-2">
<Map class="w-5 h-5" />
Map Settings
</h3>
<div class="space-y-3">
<label class="label cursor-pointer justify-start gap-3">
<input type="checkbox" class="checkbox checkbox-primary" bind:checked={showGeo} />
<span class="label-text">{$t('adventures.show_region_labels')}</span>
</label>
<div class="text-xs text-base-content/60">
Click markers on the map to toggle visited status
</div>
</div>
</div> -->
<!-- Quick Actions -->
<div class="space-y-3">
<button class="btn btn-outline w-full gap-2" on:click={() => (showGeo = !showGeo)}>
{#if showGeo}
<Map class="w-4 h-4" />
Hide Map Labels
{:else}
<Map class="w-4 h-4" />
Show Map Labels
{/if}
</button>
<!-- <button class="btn btn-ghost w-full gap-2" on:click={clearFilters}>
<Clear class="w-4 h-4" />
Clear All Filters
</button> -->
</div>
</div>
</div>
</div>
</div>
</div>