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

[v0.12.0 pre] Planning & Itinerary Overhaul, Recommendation Engine, OIDC Enhancements, and More (#931)

Browse Source 
* Fixes [REQUEST] Email-based auto-linking for OIDC
Fixes #921

* Add ClusterMap integration for regions and cities with fit-to-bounds functionality

* Update COUNTRY_REGION_JSON_VERSION to v3.0 and modify state ID generation to use ISO2 code

* fix: handle email verification required case during signup

Updated the signup action to return a specific message when the backend responds with a 401 status, indicating that the signup succeeded but email verification is required. This allows the frontend to display the appropriate message using an i18n key.

* feat: add Advanced Configuration documentation with optional environment variables

* Fixes #511

* fix: update appVersion to v0.11.0-main-121425 and enhance socialProviders handling in settings page

* feat: implement social signup controls and update documentation for new environment variables

* fix: update LocationCard props and enhance restore data functionality

- Changed the user prop to null in LocationCard component on the dashboard page.
- Added isRestoring state to manage loading state during data restoration in settings.
- Updated the restore button to show a loading spinner when a restore operation is in progress.

* fix: update appVersion to v0.12.0-pre-dev-121625

* feat: implement itinerary planning feature with CollectionItineraryPlanner component and related updates

* feat: add overnight lodging indicator and functionality to CollectionItineraryPlanner

* feat: add compact display option to LocationCard and enhance lodging filtering in CollectionItineraryPlanner

* feat(itinerary): add itinerary management features and link modal

- Introduced ItineraryViewSet for managing itinerary items with create and reorder functionalities.
- Added itinerary linking capabilities in CollectionModal and CollectionItineraryPlanner components.
- Implemented new ItineraryLinkModal for linking existing items to specific dates.
- Enhanced the frontend with new modals for creating locations, lodging, transportation, notes, and checklists.
- Updated the backend to handle itinerary item creation and reordering with appropriate permissions.
- Improved data handling for unscheduled items and their association with the itinerary.
- Added new dependencies to the frontend for enhanced functionality.

* feat(itinerary): implement auto-generate functionality for itinerary items based on dated records

* feat(collection): enhance collection sharing logic and improve data handling on invite acceptance

* fix: update appVersion to correct pre-dev version

* feat(wikipedia): implement image selection from Wikipedia with enhanced results display

* Refactor code structure for improved readability and maintainability

* feat: add CollectionRecommendationView component for displaying location recommendations

- Implemented CollectionRecommendationView.svelte to handle location recommendations based on user input and selected categories.
- Added Recommendation and RecommendationResponse types to types.ts for better type safety and structure.
- Updated collections/[id]/+page.svelte to include a new view for recommendations, allowing users to switch between different views seamlessly.

* fix: update appVersion and improve button accessibility in collection views

* feat: add canModify prop to collection components for user permission handling

* feat: add itinerary removal functionality to various cards and update UI components

- Implemented `removeFromItinerary` function in `LodgingCard`, `NoteCard`, and `TransportationCard` to allow users to remove items from their itinerary.
- Replaced the trash icon with a calendar remove icon in `LocationCard`, `LodgingCard`, `NoteCard`, and `TransportationCard` for better visual representation.
- Updated the dropdown menus in `LodgingCard`, `NoteCard`, and `TransportationCard` to include the new remove from itinerary option.
- Enhanced `CollectionItineraryPlanner` to pass itinerary items to the respective cards.
- Removed `PointSelectionModal.svelte` as it is no longer needed.
- Refactored `LocationMedia.svelte` to integrate `ImageManagement` component and clean up unused code related to image handling.

* feat: enhance itinerary management with deduplication and initial visit date handling

* feat: add FullMap component for enhanced map functionality with clustering support

- Introduced FullMap.svelte to handle map rendering, clustering, and marker management.
- Updated map page to utilize FullMap component, replacing direct MapLibre usage.
- Implemented clustering options and marker properties handling in FullMap.
- Added utility functions for resolving theme colors and managing marker states.
- Enhanced user experience with hover popups and improved loading states for location details.
- Updated app version to v0.12.0-pre-dev-122225.

* feat: enhance map interaction for touch devices with custom popup handling

* feat: add progress tracker for folder views to display visited and planned locations

* feat: add map center and zoom state management with URL synchronization

* feat: add status and days until start fields to collections with filtering options

* Component folder structure changes

* feat: add LodgingMedia and LodgingModal components for managing lodging details and media attachments

feat: implement LocationSearchMap component for interactive location searching and mapping functionality

* fix: update contentType in ImageManagement component to 'lodging' for correct media handling

* feat: enhance lodging management with date validation and update messages

* feat: implement lodging detail page with server-side loading and image modal functionality

- Added a new server-side load function to fetch lodging details by ID.
- Created a new Svelte component for the lodging detail page, including image carousel and map integration.
- Implemented a modal for displaying images with navigation.
- Enhanced URL handling in the locations page to only read parameters.

* feat: add Transportation modal component and related routes

- Implemented TransportationModal component for creating and editing transportation entries.
- Added server-side loading for transportation details in the new route [id]/+page.server.ts.
- Created a new Svelte page for displaying transportation details with image and attachment handling.
- Integrated modal for editing transportation in the transportation details page.
- Updated lodging routes to include a modal for editing lodging entries.
- Removed unused delete action from lodging server-side logic.

* feat: add start_code and end_code fields to Transportation model and update related components

* feat: implement date validation for itinerary items and add day picker modal for scheduling

* Reorder town and county checks in geocoding.py

Fix detection if only town exists for a location but county is no city name

* Use address keys only if city is found

* Make sure reverse geocoding uses correct key for cities (#938)

* Reorder town and county checks in geocoding.py

Fix detection if only town exists for a location but county is no city name

* Use address keys only if city is found

* Refactor code structure for improved readability and maintainability

* Enhance collection management with modal updates and item handling

* feat: integrate CollectionMap component in collections page and update map titles in lodging and transportation pages

- Replaced inline map implementation with CollectionMap component in collections/[id]/+page.svelte for better modularity.
- Updated the map title in lodging/[id]/+page.svelte to reflect lodging context.
- Updated the map title in transportations/[id]/+page.svelte to reflect transportation context.
- Added functionality to collect and render GeoJSON data from transportation attachments in transportations/[id]/+page.svelte.

* chore: update copyright year to 2026 in various files

* feat: enhance backup export functionality with itinerary items and export IDs

* fix: improve dropdown close behavior by handling multiple event types

* fix: remove unnecessary cache decorator from globespin function

* feat: add initial visit date support in ChecklistModal and NoteModal, with UI suggestions for prefilled dates

* feat: add details view for checklist and note cards with edit functionality

* feat: add travel duration and GPX distance calculation to Transportation model and UI

* feat: add primary image support to Collection model, serializers, and UI components

* Refactor calendar components and enhance event detail handling

- Replaced direct calendar implementation with a reusable CalendarComponent in the calendar route.
- Introduced EventDetailsModal for displaying event details, improving modularity and readability.
- Added functionality to fetch event details asynchronously when an event is clicked.
- Implemented ICS calendar download functionality with loading state management.
- Enhanced collections page to support calendar view, integrating event handling and timezone management.
- Improved lodging and transportation pages to display local time for stays and trips, including timezone badges.
- Cleaned up unused code and comments for better maintainability.

* feat: enhance hero image handling in collection view by prioritizing primary image

* chore: update .env.example to include account email verification configuration

* feat: enhance LodgingCard and TransportationCard components with expandable details and improved layout

* feat: add price and currency fields to locations, lodging, and transportation components

- Introduced price and price_currency fields in LocationModal, LodgingDetails, LodgingModal, TransportationDetails, and TransportationModal components.
- Implemented MoneyInput and CurrencyDropdown components for handling monetary values and currency selection.
- Updated data structures and types to accommodate new price and currency fields across various models.
- Enhanced cost summary calculations in collections and routes to display total costs by currency.
- Added user preference for default currency in settings, affecting new item forms.
- Updated UI to display price information in relevant components, ensuring consistent formatting and user experience.

* feat: add Development Timeline link to overview and create timeline documentation

* feat: enhance map functionality with search and zoom features

- Updated availableViews in collection page to include map view based on lodging and transportation locations.
- Added search functionality to the map page, allowing users to filter pins by name and category.
- Implemented auto-zoom feature to adjust the map view based on filtered search results.
- Introduced a search bar with a clear button for better user experience.

* feat: enhance ISO code extraction and region matching logic in extractIsoCode function

* feat: enhance extractIsoCode function with normalization for locality matching

* feat: update extractIsoCode function to include additional ISO3166 levels for improved region matching

* feat: enhance extractIsoCode function to handle cases without city information and update CollectionMap to bind user data

* feat: add cron job for syncing visited regions and cities, enhance Docker and supervisord configurations

* feat: add CollectionItineraryDay model and related functionality for itinerary day metadata management

* feat: implement cleanup of out-of-range itinerary items and notify users of potential impacts on itinerary when dates change

* Refactor collection page for improved localization and code clarity

- Removed unused imports and consolidated cost category labels to be reactive.
- Updated cost summary function to accept localized labels.
- Enhanced localization for various UI elements, including buttons, headings, and statistics.
- Improved user feedback messages for better clarity and consistency.
- Ensured all relevant text is translatable using the i18n library.

* feat: add collaborator serialization and display in collections

- Implemented `_build_profile_pic_url` and `_serialize_collaborator` functions for user profile picture URLs and serialization.
- Updated `CollectionSerializer` and `UltraSlimCollectionSerializer` to include collaborators in the serialized output.
- Enhanced `CollectionViewSet` to prefetch shared_with users for optimized queries.
- Modified frontend components to display collaborators in collection details, including profile pictures and initials.
- Added new localization strings for collaborators.
- Refactored map and location components to improve usability and functionality.
- Updated app version to reflect new changes.

* feat: add dynamic lodging icons based on type in CollectionMap component

* feat: add CollectionStats component for detailed trip statistics

- Implemented CollectionStats.svelte to display various statistics related to the collection, including distances, activities, and locations visited.
- Enhanced CollectionMap.svelte to filter activities based on date range using new getActivityDate function.
- Updated LocationSearchMap.svelte to handle airport mode for start and end locations.
- Modified types.ts to include is_global property in CollectionItineraryItem for trip-wide items.
- Updated +page.svelte to integrate the new stats view and manage view state accordingly.

* feat: enhance itinerary management by removing old items on date change for notes and checklists; normalize date handling in CollectionMap

* feat: add functionality to change day and move items to trip-wide itinerary

- Implemented changeDay function in ChecklistCard, LocationCard, LodgingCard, NoteCard, and TransportationCard components to allow users to change the scheduled day of items.
- Added a button to move items to the global (trip-wide) itinerary in the aforementioned components, with appropriate dispatch events.
- Enhanced CollectionItineraryPlanner to handle moving items to the global itinerary and added UI elements for unscheduled items.
- Updated ItineraryDayPickModal to support the deletion of source visits when moving locations.
- Added new translations for "Change Day" and "Move Trip Wide" in the English locale.

* fix: specify full path for python3 in cron job and add shell and path variables

* fix: update appVersion to v0.12.0-pre-dev-010726

* feat: enhance CollectionItineraryPlanner and CollectionStats with dynamic links and transport type normalization

* Add Dev Container + WSL install docs and link in install guide (#944) (#951)

* feat: enhance internationalization support in CollectionMap and CollectionStats components

- Added translation support for various labels and messages in CollectionMap.svelte and CollectionStats.svelte using svelte-i18n.
- Updated English and Chinese locale files to include new translation keys for improved user experience.
- Simplified the rendering of recommendation views in the collections page.

* Refactor itinerary management and UI components

- Updated ItineraryViewSet to handle visit updates and creations more efficiently, preserving visit IDs when moving between days.
- Enhanced ChecklistCard, LodgingCard, TransportationCard, and NoteCard to include a new "Change Day" option in the actions menu.
- Improved user experience in CollectionItineraryPlanner by tracking specific itinerary items being moved and ensuring only the relevant entries are deleted.
- Added new location sharing options in LodgingCard and TransportationCard for Apple Maps, Google Maps, and OpenStreetMap.
- Updated translations in en.json for consistency and clarity.
- Minor UI adjustments for better accessibility and usability across various components.

* feat: implement action menus and close event handling in card components

* feat: refactor Dockerfile and supervisord configuration to remove cron and add periodic sync script

* feat: enhance LocationSearchMap and TransportationDetails components with initialization handling and airport mode logic

* feat: add airport and location search mode labels to localization file

* feat: enhance periodic sync logging and improve airport mode handling in LocationSearchMap

* feat: enhance unscheduled items display with improved card interactions and accessibility

* Add dev compose for hot reload and update WSL dev container docs (#958)

* feat: enhance localization for itinerary linking and transportation components

* Localization: update localization files with new keys and values

* fix: improve error messages for Overpass API responses

* chore: update dependencies in frontend package.json and pnpm-lock.yaml

- Updated @sveltejs/adapter-node from ^5.2.12 to ^5.4.0
- Updated @sveltejs/adapter-vercel from ^5.7.0 to ^6.3.0
- Updated tailwindcss from ^3.4.17 to ^3.4.19
- Updated typescript from ^5.8.3 to ^5.9.3
- Updated vite from ^5.4.19 to ^5.4.21

* chore: update dependencies in pnpm-lock.yaml to latest versions

* Refactor code structure for improved readability and maintainability

* Refactor code structure for improved readability and maintainability

* fix: update package dependencies to resolve compatibility issues

* Add "worldtravel" translations to multiple locale files

- Added "worldtravel" key with translations for Spanish, French, Hungarian, Italian, Japanese, Korean, Dutch, Norwegian, Polish, Brazilian Portuguese, Russian, Slovak, Swedish, Turkish, Ukrainian, and Chinese.
- Updated the navigation section in each locale file to include the new "worldtravel" entry.

* Add new screenshots and update email verification message in locale file

* feat: Implement data restoration functionality with file import

- Added a new action `restoreData` in `+page.server.ts` to handle file uploads for restoring collections.
- Enhanced the UI in `+page.svelte` to include an import button and a modal for import progress.
- Integrated file input handling to trigger form submission upon file selection.
- Removed unused GSAP animations from the login, profile, and signup pages for cleaner code.

* feat: Add modals for creating locations and lodging from recommendations, enhance image import functionality

* fix: Adjust styles to prevent horizontal scroll and enhance floating action button visibility

* feat: Enhance error handling and messaging for Google Maps and OpenStreetMap geocoding functions

* fix: Enhance error messaging for Google Maps access forbidden response

* feat: Add User-Agent header to Google Maps API requests and refine error messaging for access forbidden response

* fix: Update User-Agent header in Google Maps API requests for improved compatibility

* fix: Disable proxy settings in Google Maps API request to prevent connection issues

* fix: Update Trivy security scan configuration and add .trivyignore for known false positives

* fix: Refactor update method to handle is_public cascading for related items

* feat: Integrate django-invitations for user invitation management and update settings

* feat: Add Tailwind CSS and DaisyUI plugin for styling

* feat: Add Tailwind CSS and DaisyUI plugin for styling

* feat: Add "Invite a User" guide and update navigation links

* docs: Update "Invite a User" guide to include email configuration tip

* feat: Update email invitation template for improved styling and clarity

* fix: Remove trailing backslash from installation note in Unraid documentation

* feat: Add export/import messages and user email verification prompts in multiple languages

* Squashed commit of the following:

commit a993a15b93ebb7521ae2e5cc31596b98b29fcd6c
Author: Alex <div@alexe.at>
Date:   Mon Jan 12 20:44:47 2026 +0100

    Translated using Weblate (German)

    Currently translated at 100.0% (1048 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/

commit fdc455d9424fbb0f6b72179d9eb1340411700773
Author: Ettore Atalan <atalanttore@googlemail.com>
Date:   Sat Jan 10 23:24:23 2026 +0100

    Translated using Weblate (German)

    Currently translated at 100.0% (1048 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/

commit 5942129c55e89dd999a13d4df9c40e6e3189355c
Author: Orhun <orhunavcu@gmail.com>
Date:   Sun Jan 11 13:05:31 2026 +0100

    Translated using Weblate (Turkish)

    Currently translated at 100.0% (1048 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/tr/

commit 8712e43d8ba4a7e7fe163fb454d6577187f9a375
Author: Henrique Fonseca Veloso <henriquefv@tutamail.com>
Date:   Fri Jan 9 22:53:11 2026 +0100

    Translated using Weblate (Portuguese (Brazil))

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/pt_BR/

commit 18ee56653470413afe8d71ecd2b5028f6e4cf118
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:57 2026 +0100

    Translated using Weblate (Dutch)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/nl/

commit 57783c544e583c035c8b57b5c10ca320f25f399e
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:14 2026 +0100

    Translated using Weblate (Arabic)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ar/

commit fb09edfd85bc85234b1c1ba7dd499f2915093fff
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:26 2026 +0100

    Translated using Weblate (Spanish)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/es/

commit 554a207d8e454a1f7ae826e2a40d389b94be5512
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:21 2026 +0100

    Translated using Weblate (German)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/de/

commit b70b9db27fb8607beefeb288185601c8f5eae28d
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:53:02 2026 +0100

    Translated using Weblate (Norwegian Bokmål)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/nb_NO/

commit 3b467caa9007c553e4ae7de97f53b6e462161ea3
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:53:07 2026 +0100

    Translated using Weblate (Polish)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/pl/

commit 30fbbfba3572c8f78ec7c7e1a231e363aca1ef10
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:53:17 2026 +0100

    Translated using Weblate (Russian)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ru/

commit 8cecb492cfcac0a1f93ee8919f7b41d978d331ee
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:42 2026 +0100

    Translated using Weblate (Italian)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/it/

commit f0d3d41029c89bfa83d5891ee7af70241f27b7be
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:38 2026 +0100

    Translated using Weblate (Hungarian)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/hu/

commit 102e0f1912d010d38755a1713abb2a7f7564aafb
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:53:21 2026 +0100

    Translated using Weblate (Slovak)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/sk/

commit 428b8f18cf6195a96b55109e0221413d82415a2f
Author: Максим Горпиніч <gorpinicmaksim0@gmail.com>
Date:   Sat Jan 10 08:55:28 2026 +0100

    Translated using Weblate (Ukrainian)

    Currently translated at 100.0% (1048 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/uk/

commit 1a71aaf279ecab26c0c1fede05025732e6dcfa5e
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:53:27 2026 +0100

    Translated using Weblate (Swedish)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/sv/

commit 36ec3701f3a1a904e7c42ac4ffbe6a050dc6d1ed
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:53:43 2026 +0100

    Translated using Weblate (Chinese (Simplified Han script))

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/zh_Hans/

commit 65d8b74b340c877cad2028b7142c783a1b568d49
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:48 2026 +0100

    Translated using Weblate (Japanese)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ja/

commit 4d11d1d31022583657e93aee70301a8ffcde1340
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:52 2026 +0100

    Translated using Weblate (Korean)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/ko/

commit bd1135bcb965ad73cf493771b15081cc97cf513a
Author: Orhun <orhunavcu@gmail.com>
Date:   Fri Jan 9 22:53:33 2026 +0100

    Translated using Weblate (Turkish)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/tr/

commit 2c3d814119f4cf2dabd20933699f5b991f20f3e6
Author: Anonymous <noreply@weblate.org>
Date:   Fri Jan 9 22:52:32 2026 +0100

    Translated using Weblate (French)

    Currently translated at 99.9% (1047 of 1048 strings)

    Translation: AdventureLog/Web App
    Translate-URL: https://hosted.weblate.org/projects/adventurelog/web-app/fr/

* Refactor code structure and remove redundant code blocks for improved readability and maintainability

* fix: Correct appVersion to match the latest pre-release version

* fix: Add missing vulnerability reference for jaraco.context in .trivyignore

---------

Co-authored-by: Lars Lehmann <33843261+larsl-net@users.noreply.github.com>
Co-authored-by: Lars Lehmann <lars@lmail.eu>
Co-authored-by: Nick Petrushin <n.a.petrushin@gmail.com>
This commit is contained in:
Sean Morley
2026-01-14 10:22:14 -05:00
committed by GitHub
parent d954ac057d
commit c39ff2449e
206 changed files with 33830 additions and 14254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

829
frontend/src/routes/map/+page.svelte
View File

@@ -1,18 +1,12 @@
<script lang="ts">
import {
DefaultMarker,
MapEvents,
MapLibre,
Popup,
Marker,
GeoJSON,
LineLayer
} from 'svelte-maplibre';
import { DefaultMarker, Popup, Marker, GeoJSON, LineLayer } from 'svelte-maplibre';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import type { Activity, Location, VisitedCity, VisitedRegion, Pin } from '$lib/types.js';
import CardCarousel from '$lib/components/CardCarousel.svelte';
import type { ClusterOptions } from 'svelte-maplibre';
import { goto } from '$app/navigation';
import { basemapOptions, getActivityColor, getBasemapLabel, getBasemapUrl } from '$lib';
import { getActivityColor } from '$lib';
import { page } from '$app/stores';
// Icons
import MapIcon from '~icons/mdi/map';
@@ -23,9 +17,10 @@
import PinIcon from '~icons/mdi/map-marker';
import Calendar from '~icons/mdi/calendar';
import LocationIcon from '~icons/mdi/crosshairs-gps';
import NewLocationModal from '$lib/components/NewLocationModal.svelte';
import NewLocationModal from '$lib/components/locations/LocationModal.svelte';
import ActivityIcon from '~icons/mdi/run-fast';
import MapStyleSelector from '$lib/components/MapStyleSelector.svelte';
import SearchIcon from '~icons/mdi/magnify';
import FullMap from '$lib/components/map/FullMap.svelte';
export let data;
@@ -37,6 +32,11 @@
let basemapType: string = 'default';
// Map state from URL params
let mapZoom: number = 2;
let mapCenter: [number, number] = [0, 0];
let updateUrlTimeout: NodeJS.Timeout | null = null;
export let initialLatLng: { lat: number; lng: number } | null = null;
let visitedRegions: VisitedRegion[] = data.props.visitedRegions;
@@ -48,6 +48,7 @@
let showVisited: boolean = true;
let showPlanned: boolean = true;
let searchQuery: string = '';
let newMarker: { lngLat: any } | null = null;
let newLongitude: number | null = null;
@@ -56,9 +57,103 @@
// Cache for full location data
let locationCache: Map<string, Location> = new Map();
let loadingLocations: Set<string> = new Set();
let locationRequests: Map<string, Promise<Location | null>> = new Map();
// Hover/focus popup state
let hoveredPinId: string | null = null;
let hoveredLocation: Location | null = null;
let hoveredLocationLoading: boolean = false;
let hoveredLocationError: string | null = null;
let hoverRequestSeq = 0;
// Touch/coarse-pointer devices: tap should open preview instead of navigating.
let isTouchLike: boolean = false;
let locationBeingUpdated: Location | undefined = undefined;
// Clustering configuration
const PIN_SOURCE_ID = 'map-pins';
const pinClusterOptions: ClusterOptions = { radius: 300, maxZoom: 8, minPoints: 2 };
type VisitStatus = 'visited' | 'planned';
type PinFeatureProperties = {
id: string;
name: string;
visitStatus: VisitStatus;
categoryIcon?: string;
};
type PinFeature = {
type: 'Feature';
geometry: {
type: 'Point';
coordinates: [number, number];
};
properties: PinFeatureProperties;
};
type PinFeatureCollection = {
type: 'FeatureCollection';
features: PinFeature[];
};
function parseCoordinate(value: number | string | null | undefined): number | null {
if (value === null || value === undefined) return null;
const numeric = typeof value === 'number' ? value : Number(value);
return Number.isFinite(numeric) ? numeric : null;
}
function pinToFeature(pin: Pin): PinFeature | null {
const lat = parseCoordinate(pin.latitude);
const lon = parseCoordinate(pin.longitude);
if (lat === null || lon === null) return null;
return {
type: 'Feature',
geometry: { type: 'Point', coordinates: [lon, lat] },
properties: {
id: pin.id,
name: pin.name,
visitStatus: pin.is_visited ? 'visited' : 'planned',
categoryIcon: pin.category?.icon || '📍'
}
};
}
function pinToFeatureUnknown(item: unknown) {
return pinToFeature(item as Pin);
}
function getMarkerProps(feature: any): PinFeatureProperties | null {
return feature && feature.properties ? feature.properties : null;
}
function getVisitStatusClass(status: VisitStatus): string {
switch (status) {
case 'visited':
return 'bg-gradient-to-br from-emerald-400 to-emerald-600';
case 'planned':
return 'bg-gradient-to-br from-blue-400 to-blue-600';
default:
return 'bg-gray-200';
}
}
function markerClassResolver(props: { visitStatus?: string } | null): string {
if (!props?.visitStatus) return '';
return getVisitStatusClass(props.visitStatus as VisitStatus);
}
function markerLabelResolver(props: { categoryIcon?: string } | null): string {
if (!props) return '📍';
return props.categoryIcon || '📍';
}
async function handleViewDetails(pinId: string) {
goto(`/locations/${pinId}`);
}
// Statistics
$: totalAdventures = pins.length;
$: visitedAdventures = pins.filter((pin) => pin.is_visited).length;
@@ -68,11 +163,27 @@
// Get unique categories for filtering
$: categories = [...new Set(pins.map((pin) => pin.category?.display_name).filter(Boolean))];
// Updates the filtered pins based on the checkboxes
// Updates the filtered pins based on the checkboxes and search query
$: {
filteredPins = pins.filter(
(pin) => (showVisited && pin.is_visited === true) || (showPlanned && pin.is_visited !== true)
);
const query = searchQuery.toLowerCase().trim();
filteredPins = pins.filter((pin) => {
// Filter by visited/planned status
const statusMatch =
(showVisited && pin.is_visited === true) || (showPlanned && pin.is_visited !== true);
if (!statusMatch) return false;
// Filter by search query
if (!query) return true;
return (
pin.name?.toLowerCase().includes(query) ||
pin.category?.display_name?.toLowerCase().includes(query)
);
});
// Auto-zoom to search results when search query changes
if (query && filteredPins.length > 0 && typeof window !== 'undefined') {
zoomToFilteredPins();
}
}
// Reset the longitude and latitude when the newMarker is set to null
@@ -140,37 +251,92 @@
visitedCities = await response.json();
}
function formatDateForPopup(value: string | null | undefined): string {
if (!value) return '';
// Most API date strings here are ISO-ish; for a popup, a short date is enough.
return value.split('T')[0] ?? value;
}
function truncateForPopup(value: string | null | undefined, max = 140): string {
if (!value) return '';
const normalized = value.replace(/\s+/g, ' ').trim();
if (normalized.length <= max) return normalized;
return `${normalized.slice(0, max).trim()}…`;
}
async function fetchLocationDetails(locationId: string): Promise<Location | null> {
// Check cache first
if (locationCache.has(locationId)) {
return locationCache.get(locationId)!;
}
// Prevent duplicate requests
if (loadingLocations.has(locationId)) {
return null;
}
// Reuse in-flight requests so hover doesn't trigger duplicate fetches
const existing = locationRequests.get(locationId);
if (existing) return existing;
try {
loadingLocations.add(locationId);
const response = await fetch(`/api/locations/${locationId}`);
const request = (async () => {
try {
loadingLocations.add(locationId);
const response = await fetch(`/api/locations/${locationId}`);
if (!response.ok) {
throw new Error(`Failed to fetch location: ${response.statusText}`);
if (!response.ok) {
throw new Error(`Failed to fetch location: ${response.statusText}`);
}
const location: Location = await response.json();
locationCache.set(locationId, location);
return location;
} catch (error) {
console.error('Error fetching location details:', error);
return null;
} finally {
loadingLocations.delete(locationId);
locationRequests.delete(locationId);
}
})();
const location: Location = await response.json();
locationCache.set(locationId, location);
return location;
} catch (error) {
console.error('Error fetching location details:', error);
return null;
} finally {
loadingLocations.delete(locationId);
}
locationRequests.set(locationId, request);
return request;
}
function addMarker(e: { detail: { lngLat: { lng: any; lat: any } } }) {
async function prefetchLocationDetailsForPopup(locationId: string) {
hoveredPinId = locationId;
hoveredLocationError = null;
const cached = locationCache.get(locationId) ?? null;
hoveredLocation = cached;
// If we already have full data, no need to show a loading state.
if (cached) {
hoveredLocationLoading = false;
return;
}
const seq = ++hoverRequestSeq;
hoveredLocationLoading = true;
const location = await fetchLocationDetails(locationId);
if (seq !== hoverRequestSeq || hoveredPinId !== locationId) return;
hoveredLocationLoading = false;
if (!location) {
hoveredLocationError = $t('errors.generic_error') ?? 'Failed to load details';
hoveredLocation = cached;
return;
}
hoveredLocation = location;
}
function clearHoverPopupIfActive(locationId: string) {
if (hoveredPinId !== locationId) return;
hoveredPinId = null;
hoveredLocation = null;
hoveredLocationLoading = false;
hoveredLocationError = null;
}
function addMarker(e: CustomEvent<{ lngLat: { lng: any; lat: any } }>) {
newMarker = null;
newMarker = { lngLat: e.detail.lngLat };
newLongitude = e.detail.lngLat.lng;
@@ -208,18 +374,105 @@
newMarker = null;
}
// Function to handle popup opening - only fetch when actually needed
let openPopups = new Set<string>();
function zoomToFilteredPins() {
if (filteredPins.length === 0) return;
function handlePopupOpen(pinId: string) {
openPopups.add(pinId);
openPopups = openPopups; // Trigger reactivity
const lngs = filteredPins
.map((pin) => parseCoordinate(pin.longitude))
.filter((lng): lng is number => lng !== null);
const lats = filteredPins
.map((pin) => parseCoordinate(pin.latitude))
.filter((lat): lat is number => lat !== null);
if (lngs.length === 0 || lats.length === 0) return;
const minLng = Math.min(...lngs);
const maxLng = Math.max(...lngs);
const minLat = Math.min(...lats);
const maxLat = Math.max(...lats);
if (filteredPins.length === 1) {
// Single pin - center on it with a nice zoom level
mapCenter = [lngs[0], lats[0]];
mapZoom = 12;
} else {
// Multiple pins - fit bounds with padding
const centerLng = (minLng + maxLng) / 2;
const centerLat = (minLat + maxLat) / 2;
mapCenter = [centerLng, centerLat];
// Calculate appropriate zoom level based on bounds
const lngDiff = maxLng - minLng;
const latDiff = maxLat - minLat;
const maxDiff = Math.max(lngDiff, latDiff);
if (maxDiff > 50) mapZoom = 3;
else if (maxDiff > 20) mapZoom = 4;
else if (maxDiff > 10) mapZoom = 5;
else if (maxDiff > 5) mapZoom = 6;
else if (maxDiff > 2) mapZoom = 7;
else if (maxDiff > 1) mapZoom = 8;
else if (maxDiff > 0.5) mapZoom = 9;
else mapZoom = 10;
}
}
function handlePopupClose(pinId: string) {
openPopups.delete(pinId);
openPopups = openPopups; // Trigger reactivity
function updateUrlParams(lat: number, lng: number, zoom: number) {
if (updateUrlTimeout) clearTimeout(updateUrlTimeout);
updateUrlTimeout = setTimeout(() => {
const params = new URLSearchParams($page.url.searchParams);
params.set('lat', lat.toFixed(6));
params.set('lng', lng.toFixed(6));
params.set('zoom', zoom.toFixed(2));
goto(`?${params.toString()}`, { replaceState: true, noScroll: true, keepFocus: true });
}, 500);
}
function handleMapMove(e: CustomEvent<{ center: { lng: number; lat: number }; zoom: number }>) {
const { center, zoom } = e.detail;
updateUrlParams(center.lat, center.lng, zoom);
}
onMount(() => {
// Initialize from URL params
const params = $page.url.searchParams;
const lat = params.get('lat');
const lng = params.get('lng');
const zoom = params.get('zoom');
if (lat && lng && zoom) {
const parsedLat = parseFloat(lat);
const parsedLng = parseFloat(lng);
const parsedZoom = parseFloat(zoom);
if (Number.isFinite(parsedLat) && Number.isFinite(parsedLng) && Number.isFinite(parsedZoom)) {
mapCenter = [parsedLng, parsedLat];
mapZoom = parsedZoom;
}
}
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
const mql = window.matchMedia('(hover: none), (pointer: coarse)');
const update = () => {
isTouchLike = mql.matches;
};
update();
if (typeof mql.addEventListener === 'function') {
mql.addEventListener('change', update);
return () => {
mql.removeEventListener('change', update);
if (updateUrlTimeout) clearTimeout(updateUrlTimeout);
};
}
// Safari < 14
(mql as any).addListener?.(update);
return () => {
(mql as any).removeListener?.(update);
if (updateUrlTimeout) clearTimeout(updateUrlTimeout);
};
});
// FullMap handles cluster theme styling + cluster expansion on click.
</script>
<svelte:head>
@@ -278,6 +531,27 @@
<!-- Controls -->
<div class="mt-4 flex flex-wrap items-center gap-4">
<!-- Search Bar -->
<label class="input input-bordered input-sm flex items-center gap-2 flex-1 max-w-md">
<SearchIcon class="h-4 w-4 opacity-70" />
<input
type="text"
class="grow"
placeholder={$t('map.search_locations')}
bind:value={searchQuery}
/>
{#if searchQuery}
<button
type="button"
class="btn btn-ghost btn-xs btn-circle"
on:click={() => (searchQuery = '')}
aria-label="Clear search"
>
✕
</button>
{/if}
</label>
<!-- Action Buttons -->
<div class="flex items-center gap-2">
{#if newMarker}
@@ -307,220 +581,300 @@
<!-- Map Section -->
<div class="container mx-auto px-6 py-4 flex-1">
<div class="card bg-base-100 shadow-xl h-full relative">
<!-- Integrated Map Type Selector -->
<div
class="absolute top-4 right-4 z-10 bg-base-200 backdrop-blur-sm rounded-lg shadow-lg"
>
<div class="p-2">
<MapStyleSelector bind:basemapType />
</div>
</div>
<div class="card-body p-0 h-full">
<MapLibre
style={getBasemapUrl(basemapType)}
class="w-full h-full min-h-[70vh] rounded-lg"
<FullMap
bind:basemapType
sourceId={PIN_SOURCE_ID}
items={filteredPins}
toFeature={pinToFeatureUnknown}
clusterEnabled={true}
clusterOptions={pinClusterOptions}
{getMarkerProps}
mapClass="w-full h-full min-h-[70vh] rounded-lg"
standardControls
zoom={mapZoom}
center={mapCenter}
on:mapClick={addMarker}
on:mapMove={handleMapMove}
>
{#each filteredPins as pin}
{#if pin.latitude && pin.longitude}
<Marker
lngLat={[parseFloat(pin.longitude), parseFloat(pin.latitude)]}
class="grid h-8 w-8 place-items-center rounded-full border-2 border-white shadow-lg cursor-pointer hover:scale-110 transition-all duration-200 {pin.is_visited
? 'bg-gradient-to-br from-emerald-400 to-emerald-600 hover:from-emerald-500 hover:to-emerald-700'
: 'bg-gradient-to-br from-blue-400 to-blue-600 hover:from-blue-500 hover:to-blue-700'} text-white focus:outline-4 focus:outline-primary/50"
>
<span class="text-xl">
{pin.category?.icon || '📍'}
</span>
<Popup
openOn="click"
offset={[0, -10]}
on:open={() => handlePopupOpen(pin.id)}
on:close={() => handlePopupClose(pin.id)}
<svelte:fragment
slot="marker"
let:markerProps
let:markerLngLat
let:isActive
let:setActive
>
{#if markerProps && markerLngLat}
<Marker lngLat={markerLngLat} class={isActive ? 'map-pin-active' : 'map-pin'}>
<div
class="relative group z-[1000] group-hover:z-[10000] focus-within:z-[10000]"
>
<div class="min-w-64 max-w-sm">
{#if openPopups.has(pin.id)}
{#await fetchLocationDetails(pin.id)}
<div class="flex items-center justify-center p-4">
<span class="loading loading-spinner loading-sm"></span>
<span class="ml-2 text-sm">Loading details...</span>
</div>
{:then location}
{#if location}
{#if location.images && location.images.length > 0}
<div class="mb-3">
<CardCarousel
images={location.images}
name={location.name}
icon={location?.category?.icon}
/>
</div>
{/if}
<div class="space-y-2">
<div class="text-lg text-black font-bold">{location.name}</div>
<div class="flex items-center gap-2">
<span
class="badge {location.is_visited
<!-- Marker Pin -->
<div
class="map-pin-hit grid place-items-center w-8 h-8 rounded-full border-2 border-white shadow-lg text-base cursor-pointer group-hover:scale-110 transition-all duration-200 {markerClassResolver(
markerProps
)}"
class:scale-110={isActive}
role="button"
tabindex="0"
aria-label={markerProps.name}
title=""
on:mouseenter={() => {
setActive(true);
prefetchLocationDetailsForPopup(markerProps.id);
}}
on:mouseleave={() => {
if (isTouchLike) return;
setActive(false);
clearHoverPopupIfActive(markerProps.id);
}}
on:focus={() => {
setActive(true);
prefetchLocationDetailsForPopup(markerProps.id);
}}
on:blur={() => {
if (isTouchLike) return;
setActive(false);
clearHoverPopupIfActive(markerProps.id);
}}
on:click={(e) => {
e.stopPropagation();
if (isTouchLike) {
// On touch devices: first tap shows popup, second tap navigates
if (isActive && hoveredPinId === markerProps.id && hoveredLocation) {
// Already active with details loaded - navigate
handleViewDetails(markerProps.id);
return;
}
// First tap or details not loaded - show popup
setActive(true);
prefetchLocationDetailsForPopup(markerProps.id);
return;
}
// Desktop: click navigates directly
handleViewDetails(markerProps.id);
}}
on:keydown={(e) => {
if (e.key !== 'Enter') return;
e.stopPropagation();
handleViewDetails(markerProps.id);
}}
>
{markerLabelResolver(markerProps)}
</div>
<!-- View Details button moved here -->
<!-- Custom DaisyUI Popup -->
<div
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:pointer-events-auto transition-all duration-200 z-[9999]"
class:opacity-100={isActive}
class:pointer-events-auto={isActive}
>
<div
class="card card-compact bg-base-100 shadow-xl border border-base-300 min-w-56 max-w-80"
>
<div class="card-body gap-3">
<!-- Always-visible (fast) content -->
<div class="space-y-2">
<div class="min-w-0">
<h3 class="card-title text-sm leading-tight truncate">
{markerProps.name}
</h3>
<div class="mt-1 flex items-center gap-2">
<div
class="badge badge-sm {markerProps.visitStatus === 'visited'
? 'badge-success'
: 'badge-info'} badge-sm"
: 'badge-info'}"
>
{location.is_visited
{markerProps.visitStatus === 'visited'
? $t('adventures.visited')
: $t('adventures.planned')}
</span>
{#if location.category}
<span class="badge badge-outline badge-sm">
{location.category.display_name}
{location.category.icon}
</span>
</div>
{#if markerProps.categoryIcon}
<div class="badge badge-ghost badge-sm">
{markerProps.categoryIcon}
</div>
{/if}
</div>
{#if location.visits && location.visits.length > 0}
<div class="text-black text-sm space-y-1">
{#each location.visits as visit}
<div class="flex items-center gap-1">
<Calendar class="w-3 h-3" />
<span>
{visit.start_date
? new Date(visit.start_date).toLocaleDateString(
undefined,
{
timeZone: 'UTC'
}
)
: ''}
{visit.end_date &&
visit.end_date !== '' &&
visit.end_date !== visit.start_date
? ' - ' +
new Date(visit.end_date).toLocaleDateString(
undefined,
{
timeZone: 'UTC'
}
)
: ''}
</span>
</div>
{/each}
</div>
</div>
{#if isActive}
<!-- Progressive (fetched) content -->
{#if hoveredPinId !== markerProps.id}
<div class="space-y-2">
<div class="flex items-center gap-2">
<span class="loading loading-spinner loading-xs"></span>
<span class="text-xs text-base-content/60">Loading more…</span>
</div>
<div class="skeleton h-3 w-3/4"></div>
<div class="skeleton h-3 w-full"></div>
<div class="skeleton h-3 w-2/3"></div>
<div class="grid grid-cols-2 gap-2">
<div class="skeleton h-6 w-full"></div>
<div class="skeleton h-6 w-full"></div>
</div>
</div>
{:else if hoveredLocationError}
<div role="alert" class="alert alert-error alert-soft">
<span class="text-sm">{hoveredLocationError}</span>
</div>
{:else if hoveredLocationLoading && !hoveredLocation}
<div class="space-y-2">
<div class="flex items-center gap-2">
<span class="loading loading-spinner loading-xs"></span>
<span class="text-xs text-base-content/60">Loading more…</span>
</div>
<div class="skeleton h-3 w-3/4"></div>
<div class="skeleton h-3 w-full"></div>
<div class="skeleton h-3 w-2/3"></div>
<div class="grid grid-cols-2 gap-2">
<div class="skeleton h-6 w-full"></div>
<div class="skeleton h-6 w-full"></div>
</div>
</div>
{:else if hoveredLocation}
{#if hoveredLocation.category?.display_name}
<div class="badge badge-outline badge-sm">
{hoveredLocation.category.display_name}
</div>
{/if}
<div class="flex flex-col gap-2 pt-2">
{#if location.longitude && location.latitude}
<a
class="btn btn-outline btn-sm gap-2"
href={`https://maps.apple.com/?q=${location.latitude},${location.longitude}`}
target="_blank"
rel="noopener noreferrer"
>
<LocationIcon class="w-4 h-4" />
{$t('adventures.open_in_maps')}
</a>
{#if hoveredLocation.location}
<div class="text-xs text-base-content/70">
{truncateForPopup(hoveredLocation.location, 90)}
</div>
{/if}
<div class="flex flex-wrap items-center gap-2">
{#if hoveredLocation.rating !== null && hoveredLocation.rating !== undefined}
<div class="badge badge-neutral badge-sm">
★ {hoveredLocation.rating}
</div>
{/if}
<button
class="btn btn-primary btn-sm gap-2"
on:click={() => goto(`/locations/${location.id}`)}
>
<Eye class="w-4 h-4" />
{$t('map.view_details')}
</button>
<div class="badge badge-ghost badge-sm">
Visits: {hoveredLocation.visits?.length ?? 0}
</div>
<div class="badge badge-ghost badge-sm">
Media: {hoveredLocation.images?.length ?? 0}
</div>
<div class="badge badge-ghost badge-sm">
Files: {hoveredLocation.attachments?.length ?? 0}
</div>
<div class="badge badge-ghost badge-sm">
Trails: {hoveredLocation.trails?.length ?? 0}
</div>
</div>
</div>
{:else}
<div class="p-4 text-center">
<div class="text-lg text-black font-bold">{pin.name}</div>
<div class="text-sm text-gray-600">Failed to load details</div>
<button
class="btn btn-primary btn-sm gap-2 mt-2"
on:click={() => goto(`/locations/${pin.id}`)}
>
<Eye class="w-4 h-4" />
{$t('map.view_details')}
</button>
</div>
{#if hoveredLocation.visits && hoveredLocation.visits.length > 0}
<div class="text-xs text-base-content/70">
Last visit: {formatDateForPopup(
hoveredLocation.visits[0]?.start_date
)}
</div>
{/if}
{#if hoveredLocation.description}
<p class="text-xs leading-snug text-base-content/80">
{truncateForPopup(hoveredLocation.description, 160)}
</p>
{/if}
{#if hoveredLocation.tags && hoveredLocation.tags.length > 0}
<div class="flex flex-wrap gap-1">
{#each hoveredLocation.tags.slice(0, 6) as tag}
<span class="badge badge-ghost badge-sm">{tag}</span>
{/each}
{#if hoveredLocation.tags.length > 6}
<span class="badge badge-ghost badge-sm"
>+{hoveredLocation.tags.length - 6}</span
>
{/if}
</div>
{/if}
{/if}
{/if}
{:catch error}
<div class="p-4 text-center">
<div class="text-lg text-black font-bold">{pin.name}</div>
<div class="text-sm text-red-600">Error loading details</div>
<div class="card-actions justify-end">
<button
class="btn btn-primary btn-sm gap-2 mt-2"
on:click={() => goto(`/locations/${pin.id}`)}
type="button"
class="btn btn-primary btn-sm"
on:click={(e) => {
e.stopPropagation();
handleViewDetails(markerProps.id);
}}
>
<Eye class="w-4 h-4" />
{$t('map.view_details')}
</button>
</div>
{/await}
{:else}
<div class="p-4 text-center">
<div class="text-lg text-black font-bold">{pin.name}</div>
<div class="text-sm text-gray-600">Click to load details...</div>
</div>
{/if}
</div>
<!-- Arrow pointer -->
<div
class="absolute top-full left-1/2 -translate-x-1/2 -mt-px w-3 h-3 rotate-45 bg-base-100 border-r border-b border-base-300"
></div>
</div>
</Popup>
</div>
</Marker>
{/if}
{/each}
</svelte:fragment>
<MapEvents on:click={addMarker} />
{#if newMarker}
<DefaultMarker lngLat={newMarker.lngLat} />
{/if}
{#each visitedRegions as region}
{#if showRegions}
<Marker
lngLat={[region.longitude, region.latitude]}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-green-300 hover:bg-green-400 text-black shadow-lg cursor-pointer transition-transform hover:scale-110"
>
<LocationIcon class="w-5 h-5 text-green-700" />
<Popup openOn="click" offset={[0, -10]}>
<div class="space-y-2">
<div class="text-lg text-black font-bold">{region.name}</div>
<div class="badge badge-success badge-sm">{region.region}</div>
</div>
</Popup>
</Marker>
<svelte:fragment slot="overlays">
{#if newMarker}
<DefaultMarker lngLat={newMarker.lngLat} />
{/if}
{/each}
{#if showCities}
{#each visitedCities as city}
<Marker
lngLat={[city.longitude, city.latitude]}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-blue-300 hover:bg-blue-400 text-black shadow-lg cursor-pointer transition-transform hover:scale-110"
>
<LocationIcon class="w-5 h-5 text-blue-700" />
<Popup openOn="click" offset={[0, -10]}>
<div class="space-y-2">
<div class="text-lg text-black font-bold">{city.name}</div>
<div class="badge badge-success badge-sm">{city.id}</div>
</div>
</Popup>
</Marker>
{/each}
{/if}
{#if showActivities}
{#each activities as activity}
{#if activity.geojson}
<GeoJSON data={activity.geojson}>
<LineLayer
paint={{
'line-color': getActivityColor(activity.sport_type),
'line-width': 3,
'line-opacity': 0.8
}}
/>
</GeoJSON>
{#each visitedRegions as region}
{#if showRegions}
<Marker
lngLat={[region.longitude, region.latitude]}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-green-300 hover:bg-green-400 text-black shadow-lg cursor-pointer transition-transform hover:scale-110"
>
<LocationIcon class="w-5 h-5 text-green-700" />
<Popup openOn="click" offset={[0, -10]}>
<div class="space-y-2">
<div class="text-lg text-black font-bold">{region.name}</div>
<div class="badge badge-success badge-sm">{region.region}</div>
</div>
</Popup>
</Marker>
{/if}
{/each}
{/if}
</MapLibre>
{#if showCities}
{#each visitedCities as city}
<Marker
lngLat={[city.longitude, city.latitude]}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-blue-300 hover:bg-blue-400 text-black shadow-lg cursor-pointer transition-transform hover:scale-110"
>
<LocationIcon class="w-5 h-5 text-blue-700" />
<Popup openOn="click" offset={[0, -10]}>
<div class="space-y-2">
<div class="text-lg text-black font-bold">{city.name}</div>
<div class="badge badge-success badge-sm">{city.id}</div>
</div>
</Popup>
</Marker>
{/each}
{/if}
{#if showActivities}
{#each activities as activity}
{#if activity.geojson}
<GeoJSON data={activity.geojson}>
<LineLayer
paint={{
'line-color': getActivityColor(activity.sport_type),
'line-width': 3,
'line-opacity': 0.8
}}
/>
</GeoJSON>
{/if}
{/each}
{/if}
</svelte:fragment>
</FullMap>
</div>
</div>
</div>
@@ -711,7 +1065,20 @@
{/if}
<style>
:global(.map) {
height: 500px;
/* Ensure only the explicit hit area handles pointer events to avoid unintended edge hover/tap popups */
:global(.maplibregl-marker.map-pin),
:global(.mapboxgl-marker.map-pin) {
pointer-events: none;
}
:global(.maplibregl-marker.map-pin .map-pin-hit),
:global(.mapboxgl-marker.map-pin .map-pin-hit) {
pointer-events: auto;
}
/* Suppress any default map popups so only the custom rich popup shows */
:global(.maplibregl-popup),
:global(.mapboxgl-popup) {
display: none !important;
}
</style>