[v0.12.0 pre] Planning & Itinerary Overhaul, Recommendation Engine, OIDC Enhancements, and More (#931)
* 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
948
frontend/src/routes/transportations/[id]/+page.svelte
Normal file
948
frontend/src/routes/transportations/[id]/+page.svelte
Normal file
@@ -0,0 +1,948 @@
|
||||
<script lang="ts">
|
||||
import type { Transportation } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { goto } from '$app/navigation';
|
||||
import Lost from '$lib/assets/undraw_lost.svg';
|
||||
import { DefaultMarker, MapLibre, Popup, GeoJSON, LineLayer } from 'svelte-maplibre';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
// @ts-ignore
|
||||
import { DateTime } from 'luxon';
|
||||
|
||||
import ClipboardList from '~icons/mdi/clipboard-list';
|
||||
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
|
||||
import AttachmentCard from '$lib/components/cards/AttachmentCard.svelte';
|
||||
import { getBasemapUrl, isAllDay, TRANSPORTATION_TYPES_ICONS } from '$lib';
|
||||
import Star from '~icons/mdi/star';
|
||||
import StarOutline from '~icons/mdi/star-outline';
|
||||
import MapMarker from '~icons/mdi/map-marker';
|
||||
import CalendarRange from '~icons/mdi/calendar-range';
|
||||
import OpenInNew from '~icons/mdi/open-in-new';
|
||||
import MapMarkerDistanceIcon from '~icons/mdi/map-marker-distance';
|
||||
import CardAccountDetails from '~icons/mdi/card-account-details';
|
||||
import { formatDateInTimezone, formatAllDayDate } from '$lib/dateUtils';
|
||||
import TransportationModal from '$lib/components/transportation/TransportationModal.svelte';
|
||||
import CashMultiple from '~icons/mdi/cash-multiple';
|
||||
import { DEFAULT_CURRENCY, formatMoney, toMoneyValue } from '$lib/money';
|
||||
|
||||
const renderMarkdown = (markdown: string) => {
|
||||
return marked(markdown) as string;
|
||||
};
|
||||
|
||||
export let data: PageData;
|
||||
console.log(data);
|
||||
|
||||
let transportation: Transportation;
|
||||
let currentSlide = 0;
|
||||
|
||||
function goToSlide(index: number) {
|
||||
currentSlide = index;
|
||||
}
|
||||
|
||||
let notFound: boolean = false;
|
||||
let mapCenter: [number, number] | null = null;
|
||||
let attachmentGeojson: any = null;
|
||||
let modalInitialIndex: number = 0;
|
||||
let isImageModalOpen: boolean = false;
|
||||
let isEditModalOpen: boolean = false;
|
||||
let localTravelWindow: string | null = null;
|
||||
let showLocalTripTime: boolean = false;
|
||||
|
||||
$: transportationPriceLabel = transportation
|
||||
? formatMoney(
|
||||
toMoneyValue(
|
||||
transportation.price,
|
||||
transportation.price_currency,
|
||||
data.user?.default_currency || DEFAULT_CURRENCY
|
||||
)
|
||||
)
|
||||
: null;
|
||||
|
||||
function getTransportationIcon(type: string) {
|
||||
if (type in TRANSPORTATION_TYPES_ICONS) {
|
||||
return TRANSPORTATION_TYPES_ICONS[type as keyof typeof TRANSPORTATION_TYPES_ICONS];
|
||||
}
|
||||
return '🚗';
|
||||
}
|
||||
|
||||
function renderStars(rating: number) {
|
||||
const stars = [];
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
stars.push(i <= rating);
|
||||
}
|
||||
return stars;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (data.props.transportation) {
|
||||
transportation = data.props.transportation;
|
||||
transportation.images.sort((a, b) => {
|
||||
if (a.is_primary && !b.is_primary) {
|
||||
return -1;
|
||||
} else if (!a.is_primary && b.is_primary) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
notFound = true;
|
||||
}
|
||||
});
|
||||
|
||||
$: mapCenter = transportation ? getMapCenter(transportation) : null;
|
||||
$: attachmentGeojson = transportation ? collectAttachmentGeojson(transportation) : null;
|
||||
|
||||
function closeImageModal() {
|
||||
isImageModalOpen = false;
|
||||
}
|
||||
|
||||
function openImageModal(imageIndex: number) {
|
||||
modalInitialIndex = imageIndex;
|
||||
isImageModalOpen = true;
|
||||
}
|
||||
|
||||
function getRouteLabel() {
|
||||
if (!transportation) return '';
|
||||
if (transportation.from_location && transportation.to_location) {
|
||||
return `${transportation.from_location} → ${transportation.to_location}`;
|
||||
}
|
||||
return transportation.from_location ?? transportation.to_location ?? '';
|
||||
}
|
||||
|
||||
function formatTravelWindow(
|
||||
start: string | null,
|
||||
end: string | null,
|
||||
startTimezone: string | null,
|
||||
endTimezone: string | null
|
||||
) {
|
||||
if (!start && !end) return null;
|
||||
|
||||
const formatDate = (date: string | null, timezone: string | null) => {
|
||||
if (!date) return '';
|
||||
if (isAllDay(date)) {
|
||||
return formatAllDayDate(date);
|
||||
}
|
||||
return formatDateInTimezone(date, timezone);
|
||||
};
|
||||
|
||||
if (start && end) {
|
||||
return `${formatDate(start, startTimezone)} → ${formatDate(end, endTimezone ?? startTimezone)}`;
|
||||
} else if (start) {
|
||||
return `${$t('adventures.start') ?? 'Start'}: ${formatDate(start, startTimezone)}`;
|
||||
} else if (end) {
|
||||
return `${$t('adventures.end') ?? 'End'}: ${formatDate(end, endTimezone)}`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function calculateDuration(
|
||||
start: string | null,
|
||||
end: string | null,
|
||||
startTimezone: string | null,
|
||||
endTimezone: string | null
|
||||
): string | null {
|
||||
if (!start || !end) return null;
|
||||
|
||||
const startDT = DateTime.fromISO(start, { zone: startTimezone ?? 'UTC' });
|
||||
const endDT = DateTime.fromISO(end, { zone: endTimezone ?? startTimezone ?? 'UTC' });
|
||||
|
||||
if (!startDT.isValid || !endDT.isValid) return null;
|
||||
|
||||
const totalMinutes = Math.round(endDT.diff(startDT, 'minutes').minutes ?? 0);
|
||||
if (totalMinutes <= 0) return null;
|
||||
|
||||
const days = Math.floor(totalMinutes / (60 * 24));
|
||||
const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
|
||||
const minutes = totalMinutes % 60;
|
||||
|
||||
const parts: string[] = [];
|
||||
if (days) parts.push(`${days}d`);
|
||||
if (hours) parts.push(`${hours}h`);
|
||||
if (minutes) parts.push(`${minutes}m`);
|
||||
|
||||
return parts.join(' ');
|
||||
}
|
||||
|
||||
function hasOriginCoordinates(item: Transportation) {
|
||||
return item.origin_latitude !== null && item.origin_longitude !== null;
|
||||
}
|
||||
|
||||
function hasDestinationCoordinates(item: Transportation) {
|
||||
return item.destination_latitude !== null && item.destination_longitude !== null;
|
||||
}
|
||||
|
||||
function getMapCenter(item: Transportation): [number, number] | null {
|
||||
if (hasOriginCoordinates(item)) {
|
||||
return [item.origin_longitude as number, item.origin_latitude as number];
|
||||
}
|
||||
if (hasDestinationCoordinates(item)) {
|
||||
return [item.destination_longitude as number, item.destination_latitude as number];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getRouteCodes(item: Transportation): string | null {
|
||||
if (item.start_code && item.end_code) return `${item.start_code} → ${item.end_code}`;
|
||||
if (item.start_code) return item.start_code;
|
||||
if (item.end_code) return item.end_code;
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a distance given in kilometers according to the current user's
|
||||
* measurement system (metric or imperial). For metric show meters for <1km,
|
||||
* otherwise km; for imperial show feet for very small distances, otherwise miles.
|
||||
*/
|
||||
function formatDistance(distanceKm: number | null): string | null {
|
||||
if (distanceKm === null || distanceKm === undefined) return null;
|
||||
const ms = data.user?.measurement_system ?? 'metric';
|
||||
|
||||
if (ms === 'imperial') {
|
||||
const miles = distanceKm * 0.621371;
|
||||
// show miles if at least 0.1 mi, otherwise show feet
|
||||
if (miles >= 0.1) {
|
||||
return `${miles.toFixed(1)} mi`;
|
||||
}
|
||||
const feet = Math.round(miles * 5280);
|
||||
return `${feet} ft`;
|
||||
} else {
|
||||
// metric
|
||||
if (distanceKm >= 1) {
|
||||
return `${distanceKm.toFixed(1)} km`;
|
||||
}
|
||||
const meters = Math.round(distanceKm * 1000);
|
||||
return `${meters} m`;
|
||||
}
|
||||
}
|
||||
|
||||
function collectAttachmentGeojson(item: Transportation) {
|
||||
if (!item.attachments || item.attachments.length === 0) return null;
|
||||
const features: any[] = [];
|
||||
for (const a of item.attachments) {
|
||||
if (a && a.geojson && a.geojson.features) {
|
||||
// If it's a FeatureCollection
|
||||
if (a.geojson.type === 'FeatureCollection' && Array.isArray(a.geojson.features)) {
|
||||
features.push(...a.geojson.features);
|
||||
} else if (a.geojson.type === 'Feature') {
|
||||
features.push(a.geojson);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (features.length === 0) return null;
|
||||
return {
|
||||
type: 'FeatureCollection',
|
||||
features
|
||||
};
|
||||
}
|
||||
|
||||
const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC';
|
||||
const getTimezoneLabel = (zone?: string | null) => zone ?? localTimeZone;
|
||||
const getTimezoneTip = (zone?: string | null) => {
|
||||
const label = getTimezoneLabel(zone);
|
||||
return label === localTimeZone
|
||||
? null
|
||||
: `${$t('adventures.trip_timezone') ?? 'Trip TZ'}: ${label}. ${
|
||||
$t('adventures.your_time') ?? 'Your time'
|
||||
}: ${localTimeZone}.`;
|
||||
};
|
||||
const shouldShowTzBadge = (zone?: string | null) =>
|
||||
!!zone && getTimezoneLabel(zone) !== localTimeZone;
|
||||
|
||||
function formatLocalTravelWindow(
|
||||
start: string | null,
|
||||
end: string | null,
|
||||
startTimezone: string | null,
|
||||
endTimezone: string | null
|
||||
): string | null {
|
||||
if (!start && !end) return null;
|
||||
|
||||
const formatLocal = (dateStr: string | null, zone: string | null) => {
|
||||
if (!dateStr || isAllDay(dateStr)) return null;
|
||||
const dt = DateTime.fromISO(dateStr, { zone: zone ?? 'UTC' });
|
||||
if (!dt.isValid) return null;
|
||||
return dt.setZone(localTimeZone).toLocaleString(DateTime.DATETIME_MED);
|
||||
};
|
||||
|
||||
const startLocal = formatLocal(start, startTimezone);
|
||||
const endLocal = formatLocal(end, endTimezone ?? startTimezone);
|
||||
|
||||
if (!startLocal && !endLocal) return null;
|
||||
if (startLocal && endLocal) return `${startLocal} → ${endLocal}`;
|
||||
return startLocal ?? endLocal ?? null;
|
||||
}
|
||||
|
||||
const primaryTripTimezone = (startTimezone: string | null, endTimezone: string | null) =>
|
||||
startTimezone ?? endTimezone ?? null;
|
||||
|
||||
function shouldShowTripTimezone(startTimezone: string | null, endTimezone: string | null) {
|
||||
const tz = primaryTripTimezone(startTimezone, endTimezone);
|
||||
if (!tz) return false;
|
||||
return tz !== localTimeZone;
|
||||
}
|
||||
|
||||
$: localTravelWindow = transportation
|
||||
? formatLocalTravelWindow(
|
||||
transportation.date,
|
||||
transportation.end_date,
|
||||
transportation.start_timezone,
|
||||
transportation.end_timezone
|
||||
)
|
||||
: null;
|
||||
|
||||
$: showLocalTripTime = Boolean(
|
||||
localTravelWindow &&
|
||||
primaryTripTimezone(
|
||||
transportation?.start_timezone ?? null,
|
||||
transportation?.end_timezone ?? null
|
||||
) !== localTimeZone
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if notFound}
|
||||
<div class="hero min-h-screen bg-gradient-to-br from-base-200 to-base-300 overflow-x-hidden">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-md">
|
||||
<img src={Lost} alt="Lost" class="w-64 mx-auto mb-8 opacity-80" />
|
||||
<h1 class="text-5xl font-bold text-primary mb-4">Transportation not found</h1>
|
||||
<p class="text-lg opacity-70 mb-8">{$t('adventures.location_not_found_desc')}</p>
|
||||
<button class="btn btn-primary btn-lg" on:click={() => goto('/')}>
|
||||
{$t('adventures.homepage')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isEditModalOpen}
|
||||
<TransportationModal
|
||||
on:close={() => (isEditModalOpen = false)}
|
||||
user={data.user}
|
||||
transportationToEdit={transportation}
|
||||
bind:transportation
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if isImageModalOpen}
|
||||
<ImageDisplayModal
|
||||
images={transportation.images}
|
||||
initialIndex={modalInitialIndex}
|
||||
location={getRouteLabel()}
|
||||
on:close={closeImageModal}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if !transportation && !notFound}
|
||||
<div class="hero min-h-screen overflow-x-hidden">
|
||||
<div class="hero-content">
|
||||
<span class="loading loading-spinner w-24 h-24 text-primary"></span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if transportation}
|
||||
{#if data.user?.uuid && transportation.user && data.user.uuid === transportation.user}
|
||||
<div class="fixed bottom-6 right-6 z-50">
|
||||
<button
|
||||
class="btn btn-primary btn-circle w-16 h-16 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-110"
|
||||
on:click={() => (isEditModalOpen = true)}
|
||||
>
|
||||
<ClipboardList class="w-8 h-8" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Hero Section -->
|
||||
<div class="relative">
|
||||
<div
|
||||
class="hero min-h-[60vh] relative overflow-hidden"
|
||||
class:min-h-[30vh]={!transportation.images || transportation.images.length === 0}
|
||||
>
|
||||
<!-- Background: Images or Gradient -->
|
||||
{#if transportation.images && transportation.images.length > 0}
|
||||
<div class="hero-overlay bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
|
||||
{#each transportation.images as image, i}
|
||||
<div
|
||||
class="absolute inset-0 transition-opacity duration-500"
|
||||
class:opacity-100={i === currentSlide}
|
||||
class:opacity-0={i !== currentSlide}
|
||||
>
|
||||
<button
|
||||
class="w-full h-full p-0 bg-transparent border-0"
|
||||
on:click={() => openImageModal(i)}
|
||||
aria-label={`View full image of ${transportation.name}`}
|
||||
>
|
||||
<img src={image.image} class="w-full h-full object-cover" alt={transportation.name} />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20"></div>
|
||||
{/if}
|
||||
|
||||
<!-- Content -->
|
||||
<div
|
||||
class="hero-content relative z-10 text-center"
|
||||
class:text-white={transportation.images?.length > 0}
|
||||
>
|
||||
<div class="max-w-4xl">
|
||||
<div class="flex justify-center items-center gap-3 mb-4">
|
||||
<span class="text-5xl">{getTransportationIcon(transportation.type)}</span>
|
||||
<h1 class="text-6xl font-bold drop-shadow-lg">{transportation.name}</h1>
|
||||
</div>
|
||||
|
||||
<!-- Rating -->
|
||||
{#if transportation.rating !== undefined && transportation.rating !== null}
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="rating rating-lg">
|
||||
{#each Array.from({ length: 5 }, (_, i) => i + 1) as star}
|
||||
<input
|
||||
type="radio"
|
||||
name="rating-hero"
|
||||
class="mask mask-star-2 bg-warning"
|
||||
checked={star <= transportation.rating}
|
||||
disabled
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Quick Info Badges -->
|
||||
<div class="flex flex-wrap justify-center gap-4 mb-6">
|
||||
{#if transportation.type}
|
||||
<div class="badge badge-lg badge-primary font-semibold px-4 py-3">
|
||||
{$t(`transportation.modes.${transportation.type}`)}
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.from_location}
|
||||
<div class="badge badge-lg badge-secondary font-semibold px-4 py-3">
|
||||
🚩 {transportation.from_location}
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.to_location}
|
||||
<div class="badge badge-lg badge-secondary font-semibold px-4 py-3">
|
||||
🏁 {transportation.to_location}
|
||||
</div>
|
||||
{/if}
|
||||
{#if getRouteCodes(transportation)}
|
||||
<div class="badge badge-lg badge-outline font-semibold px-4 py-3 gap-2">
|
||||
✈️ {getRouteCodes(transportation)}
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.is_public}
|
||||
<div class="badge badge-lg badge-accent font-semibold px-4 py-3">
|
||||
👁️ {$t('adventures.public')}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="badge badge-lg badge-ghost font-semibold px-4 py-3">
|
||||
🔒 {$t('adventures.private')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Image Navigation (only shown when multiple images exist) -->
|
||||
{#if transportation.images && transportation.images.length > 1}
|
||||
<div class="w-full max-w-md mx-auto">
|
||||
<!-- Navigation arrows and current position -->
|
||||
<div class="flex items-center justify-center gap-4 mb-3">
|
||||
<button
|
||||
on:click={() =>
|
||||
goToSlide(
|
||||
currentSlide > 0 ? currentSlide - 1 : transportation.images.length - 1
|
||||
)}
|
||||
class="btn btn-circle btn-sm btn-primary"
|
||||
aria-label={$t('adventures.previous_image')}
|
||||
>
|
||||
❮
|
||||
</button>
|
||||
|
||||
<div class="text-sm font-medium bg-black/50 px-3 py-1 rounded-full">
|
||||
{currentSlide + 1} / {transportation.images.length}
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click={() =>
|
||||
goToSlide(
|
||||
currentSlide < transportation.images.length - 1 ? currentSlide + 1 : 0
|
||||
)}
|
||||
class="btn btn-circle btn-sm btn-primary"
|
||||
aria-label={$t('adventures.next_image')}
|
||||
>
|
||||
❯
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dot navigation -->
|
||||
{#if transportation.images.length <= 12}
|
||||
<div class="flex justify-center gap-2 flex-wrap">
|
||||
{#each transportation.images as _, i}
|
||||
<button
|
||||
on:click={() => goToSlide(i)}
|
||||
class="btn btn-circle btn-xs transition-all duration-200"
|
||||
class:btn-primary={i === currentSlide}
|
||||
class:btn-outline={i !== currentSlide}
|
||||
class:opacity-50={i !== currentSlide}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute left-0 top-0 bottom-2 w-4 bg-gradient-to-r from-black/30 to-transparent pointer-events-none"
|
||||
></div>
|
||||
<div
|
||||
class="absolute right-0 top-0 bottom-2 w-4 bg-gradient-to-l from-black/30 to-transparent pointer-events-none"
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto px-2 sm:px-4 py-6 sm:py-8 max-w-7xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-8">
|
||||
<!-- Left Column - Main Content -->
|
||||
<div class="lg:col-span-2 space-y-6 sm:space-y-8">
|
||||
<!-- Description Card -->
|
||||
{#if transportation.description}
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-4">📝 {$t('adventures.description')}</h2>
|
||||
<article class="prose max-w-none">
|
||||
{@html DOMPurify.sanitize(renderMarkdown(transportation.description))}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Map Section -->
|
||||
{#if mapCenter}
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-4">🗺️ {$t('adventures.transportation')}</h2>
|
||||
<div class="rounded-lg overflow-hidden shadow-lg">
|
||||
<MapLibre
|
||||
style={getBasemapUrl()}
|
||||
class="w-full h-96"
|
||||
standardControls
|
||||
center={mapCenter}
|
||||
zoom={13}
|
||||
>
|
||||
{#if hasOriginCoordinates(transportation)}
|
||||
<DefaultMarker
|
||||
lngLat={[
|
||||
Number(transportation.origin_longitude),
|
||||
Number(transportation.origin_latitude)
|
||||
]}
|
||||
>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="p-2">
|
||||
<div class="text-lg font-bold text-black mb-1">{transportation.name}</div>
|
||||
<p class="font-semibold text-black text-sm mb-2">
|
||||
{$t('transportation.from_location')}
|
||||
{getTransportationIcon(transportation.type)}
|
||||
</p>
|
||||
{#if transportation.rating}
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
{#each renderStars(transportation.rating) as filled}
|
||||
{#if filled}
|
||||
<Star class="w-4 h-4 text-warning fill-current" />
|
||||
{:else}
|
||||
<StarOutline class="w-4 h-4 text-gray-400" />
|
||||
{/if}
|
||||
{/each}
|
||||
<span class="text-xs text-black ml-1">
|
||||
({transportation.rating}/5)
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.from_location}
|
||||
<div class="text-xs text-black">
|
||||
📍 {transportation.from_location}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
{/if}
|
||||
|
||||
{#if hasDestinationCoordinates(transportation)}
|
||||
<DefaultMarker
|
||||
lngLat={[
|
||||
Number(transportation.destination_longitude),
|
||||
Number(transportation.destination_latitude)
|
||||
]}
|
||||
>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="p-2">
|
||||
<div class="text-lg font-bold text-black mb-1">{transportation.name}</div>
|
||||
<p class="font-semibold text-black text-sm mb-2">
|
||||
{$t('transportation.to_location')}
|
||||
{getTransportationIcon(transportation.type)}
|
||||
</p>
|
||||
{#if transportation.rating}
|
||||
<div class="flex items-center gap-1 mb-2">
|
||||
{#each renderStars(transportation.rating) as filled}
|
||||
{#if filled}
|
||||
<Star class="w-4 h-4 text-warning fill-current" />
|
||||
{:else}
|
||||
<StarOutline class="w-4 h-4 text-gray-400" />
|
||||
{/if}
|
||||
{/each}
|
||||
<span class="text-xs text-black ml-1">
|
||||
({transportation.rating}/5)
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if transportation.to_location}
|
||||
<div class="text-xs text-black">
|
||||
📍 {transportation.to_location}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
{/if}
|
||||
|
||||
{#if attachmentGeojson}
|
||||
<!-- Render attachment GeoJSON (e.g., GPX converted to GeoJSON) -->
|
||||
<GeoJSON data={attachmentGeojson}>
|
||||
<LineLayer
|
||||
id="transportation-route"
|
||||
paint={{ 'line-color': '#60a5fa', 'line-width': 4, 'line-opacity': 0.9 }}
|
||||
/>
|
||||
</GeoJSON>
|
||||
{/if}
|
||||
</MapLibre>
|
||||
</div>
|
||||
{#if transportation.from_location || transportation.to_location}
|
||||
<p class="mt-4 text-base-content/70 flex items-center gap-2">
|
||||
<MapMarker class="w-5 h-5" />
|
||||
{getRouteLabel()}
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3">
|
||||
{#if transportation.from_location}
|
||||
<div class="rounded-lg p-3 bg-gradient-to-br from-primary/10 to-secondary/10">
|
||||
<p class="flex items-center gap-2 text-sm mb-2">
|
||||
<MapMarker class="w-4 h-4" />
|
||||
{transportation.from_location}
|
||||
</p>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<a
|
||||
class="btn btn-sm btn-outline hover:btn-neutral"
|
||||
href={`https://maps.apple.com/?q=${encodeURIComponent(transportation.from_location)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
🍎 Apple
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm btn-outline hover:btn-accent"
|
||||
href={`https://maps.google.com/?q=${encodeURIComponent(transportation.from_location)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
🌍 Google
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm btn-outline hover:btn-primary"
|
||||
href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(transportation.from_location)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
🗺️ OSM
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if transportation.to_location}
|
||||
<div class="rounded-lg p-3 bg-gradient-to-br from-primary/10 to-secondary/10">
|
||||
<p class="flex items-center gap-2 text-sm mb-2">
|
||||
<MapMarker class="w-4 h-4" />
|
||||
{transportation.to_location}
|
||||
</p>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<a
|
||||
class="btn btn-sm btn-outline hover:btn-neutral"
|
||||
href={`https://maps.apple.com/?q=${encodeURIComponent(transportation.to_location)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
🍎 Apple
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm btn-outline hover:btn-accent"
|
||||
href={`https://maps.google.com/?q=${encodeURIComponent(transportation.to_location)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
🌍 Google
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm btn-outline hover:btn-primary"
|
||||
href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(transportation.to_location)}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
🗺️ OSM
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Sidebar -->
|
||||
<div class="space-y-4 sm:space-y-6">
|
||||
<!-- Quick Info Card -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-xl mb-4">ℹ️ {$t('adventures.details')}</h2>
|
||||
<div class="space-y-4">
|
||||
<!-- Departure/Arrival -->
|
||||
{#if transportation.date || transportation.end_date}
|
||||
<div class="flex items-start gap-3">
|
||||
<CalendarRange class="w-5 h-5 text-primary mt-1 flex-shrink-0" />
|
||||
<div class="w-full space-y-2">
|
||||
<p class="font-semibold text-sm opacity-70">{$t('adventures.dates')}</p>
|
||||
<div class="space-y-2">
|
||||
{#if transportation.date}
|
||||
<div class="flex items-start justify-between gap-3 text-sm">
|
||||
<div class="space-y-1">
|
||||
<p class="text-xs uppercase tracking-wide opacity-60">
|
||||
{$t('adventures.start') ?? 'Start'}
|
||||
</p>
|
||||
<p class="text-base font-semibold">
|
||||
{#if isAllDay(transportation.date)}
|
||||
{formatAllDayDate(transportation.date)}
|
||||
{:else}
|
||||
{formatDateInTimezone(
|
||||
transportation.date,
|
||||
transportation.start_timezone
|
||||
)}
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{#if transportation.date && !isAllDay(transportation.date)}
|
||||
<span
|
||||
class="badge badge-ghost badge-xs"
|
||||
class:tooltip={Boolean(getTimezoneTip(transportation.start_timezone))}
|
||||
data-tip={getTimezoneTip(transportation.start_timezone) ?? undefined}
|
||||
>
|
||||
{#if shouldShowTzBadge(transportation.start_timezone)}
|
||||
{getTimezoneLabel(transportation.start_timezone)}
|
||||
{:else}
|
||||
{$t('adventures.local') ?? 'Local'}
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if transportation.end_date}
|
||||
<div class="flex items-start justify-between gap-3 text-sm">
|
||||
<div class="space-y-1">
|
||||
<p class="text-xs uppercase tracking-wide opacity-60">
|
||||
{$t('adventures.end') ?? 'End'}
|
||||
</p>
|
||||
<p class="text-base font-semibold">
|
||||
{#if isAllDay(transportation.end_date)}
|
||||
{formatAllDayDate(transportation.end_date)}
|
||||
{:else}
|
||||
{formatDateInTimezone(
|
||||
transportation.end_date,
|
||||
transportation.end_timezone ?? transportation.start_timezone
|
||||
)}
|
||||
{/if}
|
||||
</p>
|
||||
</div>
|
||||
{#if transportation.end_date && !isAllDay(transportation.end_date)}
|
||||
<span
|
||||
class="badge badge-ghost badge-xs"
|
||||
class:tooltip={Boolean(
|
||||
getTimezoneTip(
|
||||
transportation.end_timezone ?? transportation.start_timezone
|
||||
)
|
||||
)}
|
||||
data-tip={getTimezoneTip(
|
||||
transportation.end_timezone ?? transportation.start_timezone
|
||||
) ?? undefined}
|
||||
>
|
||||
{#if shouldShowTzBadge(transportation.end_timezone ?? transportation.start_timezone)}
|
||||
{getTimezoneLabel(
|
||||
transportation.end_timezone ?? transportation.start_timezone
|
||||
)}
|
||||
{:else}
|
||||
{$t('adventures.local') ?? 'Local'}
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showLocalTripTime}
|
||||
<p class="text-sm text-base-content/70">
|
||||
{$t('adventures.local_time') ?? 'Local time'}: {localTravelWindow}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if calculateDuration(transportation.date, transportation.end_date, transportation.start_timezone, transportation.end_timezone)}
|
||||
<p class="text-sm opacity-70">
|
||||
{calculateDuration(
|
||||
transportation.date,
|
||||
transportation.end_date,
|
||||
transportation.start_timezone,
|
||||
transportation.end_timezone
|
||||
)}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Type -->
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-xl mt-1 flex-shrink-0"
|
||||
>{getTransportationIcon(transportation.type)}</span
|
||||
>
|
||||
<div>
|
||||
<p class="font-semibold text-sm opacity-70">{$t('transportation.type')}</p>
|
||||
<p class="text-base">{$t(`transportation.modes.${transportation.type}`)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flight Number -->
|
||||
{#if transportation.flight_number}
|
||||
<div class="flex items-start gap-3">
|
||||
<CardAccountDetails class="w-5 h-5 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<p class="font-semibold text-sm opacity-70">
|
||||
{$t('transportation.flight_number')}
|
||||
</p>
|
||||
<p class="text-base font-mono">{transportation.flight_number}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Route Codes -->
|
||||
{#if getRouteCodes(transportation)}
|
||||
<div class="flex items-start gap-3">
|
||||
<MapMarker class="w-5 h-5 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<p class="font-semibold text-sm opacity-70">
|
||||
{$t('transportation.codes') ?? 'Codes'}
|
||||
</p>
|
||||
<p class="text-base font-mono">{getRouteCodes(transportation)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Distance -->
|
||||
{#if transportation.distance}
|
||||
<div class="flex items-start gap-3">
|
||||
<MapMarkerDistanceIcon class="w-5 h-5 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<p class="font-semibold text-sm opacity-70">
|
||||
{$t('adventures.distance') ?? 'Distance'}
|
||||
</p>
|
||||
<p class="text-base">{formatDistance(transportation.distance)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Price -->
|
||||
{#if transportationPriceLabel}
|
||||
<div class="flex items-start gap-3">
|
||||
<CashMultiple class="w-5 h-5 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<p class="font-semibold text-sm opacity-70">{$t('adventures.price')}</p>
|
||||
<p class="text-base font-semibold">{transportationPriceLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Link -->
|
||||
{#if transportation.link}
|
||||
<div class="flex items-start gap-3">
|
||||
<OpenInNew class="w-5 h-5 text-primary mt-1 flex-shrink-0" />
|
||||
<div class="flex-1">
|
||||
<p class="font-semibold text-sm opacity-70 mb-1">{$t('adventures.link')}</p>
|
||||
<a
|
||||
href={transportation.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link link-primary text-base break-all"
|
||||
>
|
||||
{transportation.link}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Additional Images -->
|
||||
{#if transportation.images && transportation.images.length > 0}
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-xl mb-4">🖼️ {$t('adventures.images')}</h2>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
{#each transportation.images as image, i}
|
||||
<button
|
||||
class="aspect-square rounded-lg overflow-hidden hover:opacity-80 transition-opacity"
|
||||
on:click={() => openImageModal(i)}
|
||||
>
|
||||
<img
|
||||
src={image.image}
|
||||
alt={`${transportation.name} - ${i + 1}`}
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Attachments -->
|
||||
{#if transportation.attachments && transportation.attachments.length > 0}
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-xl mb-4">📎 {$t('adventures.attachments')}</h2>
|
||||
<div class="space-y-2">
|
||||
{#each transportation.attachments as attachment}
|
||||
<AttachmentCard {attachment} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{data.props.transportation && data.props.transportation.name
|
||||
? `${data.props.transportation.name}`
|
||||
: 'Transportation'}
|
||||
</title>
|
||||
<meta name="description" content="View transportation details" />
|
||||
</svelte:head>
|
||||
Reference in New Issue
Block a user