[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
769
frontend/src/lib/components/lodging/LodgingDetails.svelte
Normal file
769
frontend/src/lib/components/lodging/LodgingDetails.svelte
Normal file
@@ -0,0 +1,769 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { updateLocalDate, updateUTCDate, validateDateRange } from '$lib/dateUtils';
|
||||
import type { Collection, Lodging, MoneyValue } from '$lib/types';
|
||||
import LocationSearchMap from '../shared/LocationSearchMap.svelte';
|
||||
|
||||
// Icons
|
||||
import MapIcon from '~icons/mdi/map';
|
||||
import ClearIcon from '~icons/mdi/close';
|
||||
import InfoIcon from '~icons/mdi/information';
|
||||
import GenerateIcon from '~icons/mdi/lightning-bolt';
|
||||
import ArrowLeftIcon from '~icons/mdi/arrow-left';
|
||||
import SaveIcon from '~icons/mdi/content-save';
|
||||
import type { Category, User } from '$lib/types';
|
||||
import MarkdownEditor from '../MarkdownEditor.svelte';
|
||||
import TimezoneSelector from '../TimezoneSelector.svelte';
|
||||
import MoneyInput from '../shared/MoneyInput.svelte';
|
||||
import { DEFAULT_CURRENCY, normalizeMoneyPayload, toMoneyValue } from '$lib/money';
|
||||
// @ts-ignore
|
||||
import { DateTime } from 'luxon';
|
||||
import { isAllDay } from '$lib';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let isReverseGeocoding = false;
|
||||
|
||||
let initialSelection: {
|
||||
name: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
location: string;
|
||||
category?: any;
|
||||
} | null = null;
|
||||
|
||||
// Props (would be passed in from parent component)
|
||||
export let initialLodging: any = null;
|
||||
export let currentUser: any = null;
|
||||
export let editingLodging: any = null;
|
||||
export let collection: Collection | null = null;
|
||||
export let initialVisitDate: string | null = null; // Used to pre-fill visit date when adding from itinerary planner
|
||||
|
||||
// Form data properties
|
||||
let lodging: {
|
||||
name: string;
|
||||
type: string;
|
||||
description: string;
|
||||
rating: number;
|
||||
link: string;
|
||||
check_in: string | null;
|
||||
check_out: string | null;
|
||||
timezone: string | null;
|
||||
reservation_number: string | null;
|
||||
price: number | null;
|
||||
price_currency: string | null;
|
||||
latitude: number | null;
|
||||
longitude: number | null;
|
||||
location: string;
|
||||
category?: Category | null;
|
||||
collection?: string;
|
||||
is_public?: boolean;
|
||||
} = {
|
||||
name: '',
|
||||
type: '',
|
||||
description: '',
|
||||
rating: NaN,
|
||||
link: '',
|
||||
check_in: null,
|
||||
check_out: null,
|
||||
timezone: null,
|
||||
reservation_number: null,
|
||||
price: null,
|
||||
price_currency: DEFAULT_CURRENCY,
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
location: '',
|
||||
category: null,
|
||||
collection: collection?.id,
|
||||
is_public: true
|
||||
};
|
||||
|
||||
let selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
let localStartDate: string = '';
|
||||
let localEndDate: string = '';
|
||||
let allDay: boolean = true;
|
||||
let constrainDates: boolean = true;
|
||||
let fullStartDate: string = '';
|
||||
let fullEndDate: string = '';
|
||||
|
||||
let user: User | null = null;
|
||||
let lodgingToEdit: Lodging | null = null;
|
||||
let wikiError = '';
|
||||
let isGeneratingDesc = false;
|
||||
let ownerUser: User | null = null;
|
||||
let dateError = '';
|
||||
let moneyValue: MoneyValue = { amount: null, currency: DEFAULT_CURRENCY };
|
||||
let preferredCurrency: string = DEFAULT_CURRENCY;
|
||||
|
||||
$: user = currentUser;
|
||||
$: lodgingToEdit = editingLodging;
|
||||
// Only assign a timezone when this is a timed stay. Keep timezone null for all-day entries.
|
||||
$: lodging.timezone = allDay ? null : selectedTimezone;
|
||||
$: preferredCurrency = user?.default_currency || DEFAULT_CURRENCY;
|
||||
$: {
|
||||
const isNewLodging = !(initialLodging && initialLodging.id);
|
||||
const isEditing = Boolean(editingLodging && editingLodging.id);
|
||||
if (isNewLodging && !isEditing && lodging.price_currency === DEFAULT_CURRENCY) {
|
||||
lodging.price_currency = preferredCurrency;
|
||||
}
|
||||
}
|
||||
$: moneyValue =
|
||||
lodging.price === null
|
||||
? { amount: null, currency: lodging.price_currency || null }
|
||||
: toMoneyValue(lodging.price, lodging.price_currency, preferredCurrency);
|
||||
$: initialSelection =
|
||||
initialLodging && initialLodging.latitude && initialLodging.longitude
|
||||
? {
|
||||
name: initialLodging.name || '',
|
||||
lat: Number(initialLodging.latitude),
|
||||
lng: Number(initialLodging.longitude),
|
||||
location: initialLodging.location || ''
|
||||
}
|
||||
: null;
|
||||
|
||||
// Set the full date range for constraining purposes
|
||||
$: if (collection && collection.start_date && collection.end_date) {
|
||||
fullStartDate = `${collection.start_date}T00:00`;
|
||||
fullEndDate = `${collection.end_date}T23:59`;
|
||||
}
|
||||
|
||||
// Reactive constraints
|
||||
$: constraintStartDate = allDay
|
||||
? fullStartDate && fullStartDate.includes('T')
|
||||
? fullStartDate.split('T')[0]
|
||||
: ''
|
||||
: fullStartDate || '';
|
||||
$: constraintEndDate = allDay
|
||||
? fullEndDate && fullEndDate.includes('T')
|
||||
? fullEndDate.split('T')[0]
|
||||
: ''
|
||||
: fullEndDate || '';
|
||||
|
||||
function handleLocationUpdate(
|
||||
event: CustomEvent<{ name?: string; lat: number; lng: number; location: string }>
|
||||
) {
|
||||
const { name, lat, lng, location } = event.detail;
|
||||
if (!lodging.name && name) lodging.name = name;
|
||||
lodging.latitude = lat;
|
||||
lodging.longitude = lng;
|
||||
lodging.location = location;
|
||||
}
|
||||
|
||||
function handleLocationClear() {
|
||||
lodging.latitude = null;
|
||||
lodging.longitude = null;
|
||||
lodging.location = '';
|
||||
}
|
||||
|
||||
function handleAllDayToggle() {
|
||||
if (allDay) {
|
||||
localStartDate = localStartDate ? localStartDate.split('T')[0] : '';
|
||||
localEndDate = localEndDate ? localEndDate.split('T')[0] : '';
|
||||
// Clear timezone for all-day stays
|
||||
lodging.timezone = null;
|
||||
} else {
|
||||
localStartDate = localStartDate ? `${localStartDate}T00:00` : '';
|
||||
localEndDate = localEndDate ? `${localEndDate}T23:59` : '';
|
||||
// Restore selected timezone when switching back to timed
|
||||
lodging.timezone = selectedTimezone;
|
||||
}
|
||||
|
||||
syncAndValidateDates(false);
|
||||
}
|
||||
|
||||
function handleLocalDateChange() {
|
||||
syncAndValidateDates(false);
|
||||
}
|
||||
|
||||
function syncAndValidateDates(autoFillEnd: boolean): boolean {
|
||||
dateError = '';
|
||||
|
||||
if (localEndDate && !localStartDate) {
|
||||
dateError = 'Start date is required when end date is provided';
|
||||
localEndDate = '';
|
||||
lodging.check_out = null;
|
||||
}
|
||||
|
||||
lodging.check_in = localStartDate
|
||||
? updateUTCDate({ localDate: localStartDate, timezone: selectedTimezone, allDay }).utcDate
|
||||
: null;
|
||||
lodging.check_out = localEndDate
|
||||
? updateUTCDate({ localDate: localEndDate, timezone: selectedTimezone, allDay }).utcDate
|
||||
: null;
|
||||
|
||||
if (!localEndDate && localStartDate && autoFillEnd) {
|
||||
const start = allDay
|
||||
? DateTime.fromISO(localStartDate, { zone: 'UTC' })
|
||||
: DateTime.fromISO(localStartDate, { zone: selectedTimezone });
|
||||
if (start.isValid) {
|
||||
if (allDay) {
|
||||
const defaultEnd = start.plus({ days: 1 }).toISODate();
|
||||
if (defaultEnd) {
|
||||
localEndDate = defaultEnd;
|
||||
lodging.check_out = updateUTCDate({
|
||||
localDate: defaultEnd,
|
||||
timezone: selectedTimezone,
|
||||
allDay
|
||||
}).utcDate;
|
||||
}
|
||||
} else {
|
||||
const defaultEnd = start
|
||||
.plus({ days: 1 })
|
||||
.set({ hour: 9, minute: 0, second: 0, millisecond: 0 });
|
||||
const defaultEndLocal = defaultEnd.toISO({
|
||||
suppressSeconds: true,
|
||||
suppressMilliseconds: true,
|
||||
includeOffset: false
|
||||
});
|
||||
if (defaultEndLocal) {
|
||||
localEndDate = defaultEndLocal.slice(0, 16);
|
||||
lodging.check_out = updateUTCDate({
|
||||
localDate: localEndDate,
|
||||
timezone: selectedTimezone,
|
||||
allDay
|
||||
}).utcDate;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (lodging.check_in || lodging.check_out) {
|
||||
const validation = validateDateRange(lodging.check_in || '', lodging.check_out || '');
|
||||
if (!validation.valid) {
|
||||
dateError = validation.error || 'Invalid date range';
|
||||
lodging.check_out = null;
|
||||
localEndDate = '';
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
async function generateDesc() {
|
||||
if (!lodging.name) return;
|
||||
|
||||
isGeneratingDesc = true;
|
||||
wikiError = '';
|
||||
|
||||
try {
|
||||
// Mock Wikipedia API call - replace with actual implementation
|
||||
const response = await fetch(`/api/generate/desc/?name=${encodeURIComponent(lodging.name)}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
lodging.description = data.extract || '';
|
||||
} else {
|
||||
wikiError = `${$t('adventures.wikipedia_error') || 'Error fetching description from Wikipedia'}`;
|
||||
}
|
||||
} catch (error) {
|
||||
wikiError = `${$t('adventures.wikipedia_error') || ''}`;
|
||||
} finally {
|
||||
isGeneratingDesc = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!lodging.name || !lodging.type) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Ensure timezone is only persisted for timed stays
|
||||
lodging.timezone = allDay ? null : selectedTimezone;
|
||||
|
||||
if (!syncAndValidateDates(true)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// round latitude and longitude to 6 decimal places
|
||||
if (lodging.latitude !== null && typeof lodging.latitude === 'number') {
|
||||
lodging.latitude = parseFloat(lodging.latitude.toFixed(6));
|
||||
}
|
||||
if (lodging.longitude !== null && typeof lodging.longitude === 'number') {
|
||||
lodging.longitude = parseFloat(lodging.longitude.toFixed(6));
|
||||
}
|
||||
if (collection && collection.id) {
|
||||
lodging.collection = collection.id;
|
||||
}
|
||||
|
||||
// Build payload and avoid sending an empty `collection` array when editing
|
||||
let payload: any = { ...lodging };
|
||||
|
||||
// Normalize price and currency consistently, but send explicit nulls when cleared
|
||||
if (lodging.price === null) {
|
||||
payload.price = null;
|
||||
payload.price_currency = null;
|
||||
} else {
|
||||
payload = normalizeMoneyPayload(payload, 'price', 'price_currency', preferredCurrency);
|
||||
}
|
||||
|
||||
// Remove empty link to avoid URL validation errors
|
||||
if (!payload.link || payload.link.trim() === '') {
|
||||
delete payload.link;
|
||||
}
|
||||
|
||||
// If we're editing and the original location had collection, but the form's collection
|
||||
// is empty (i.e. user didn't modify collection), omit collection from payload so the
|
||||
// server doesn't clear them unintentionally.
|
||||
if (lodgingToEdit && lodgingToEdit.id) {
|
||||
if (
|
||||
(!payload.collection || payload.collection.length === 0) &&
|
||||
lodgingToEdit.collection &&
|
||||
lodgingToEdit.collection.length > 0
|
||||
) {
|
||||
delete payload.collection;
|
||||
}
|
||||
|
||||
let res = await fetch(`/api/lodging/${lodgingToEdit.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
let updatedLocation = await res.json();
|
||||
lodging = updatedLocation;
|
||||
} else {
|
||||
let res = await fetch(`/api/lodging`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
let newLodging = await res.json();
|
||||
lodging = newLodging;
|
||||
}
|
||||
|
||||
dispatch('save', {
|
||||
...lodging
|
||||
});
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
dispatch('back');
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (initialLodging && initialLodging.latitude && initialLodging.longitude) {
|
||||
lodging.latitude = initialLodging.latitude;
|
||||
lodging.longitude = initialLodging.longitude;
|
||||
if (!lodging.name) lodging.name = initialLodging.name || '';
|
||||
if (initialLodging.location) lodging.location = initialLodging.location;
|
||||
}
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
// Prefer lodging timezone if present, otherwise keep current selection
|
||||
if (initialLodging?.timezone) {
|
||||
selectedTimezone = initialLodging.timezone;
|
||||
}
|
||||
|
||||
// Determine if existing dates are all-day using shared helper
|
||||
if (initialLodging?.check_in) {
|
||||
allDay = isAllDay(initialLodging.check_in);
|
||||
}
|
||||
|
||||
// Keep lodging.timezone null for all-day entries, otherwise use selectedTimezone
|
||||
lodging.timezone = allDay ? null : selectedTimezone;
|
||||
|
||||
// Convert UTC dates to local display, respecting all-day formatting
|
||||
if (initialLodging?.check_in) {
|
||||
if (allDay) {
|
||||
localStartDate = initialLodging.check_in.split('T')[0];
|
||||
} else {
|
||||
const result = updateLocalDate({
|
||||
utcDate: initialLodging.check_in,
|
||||
timezone: selectedTimezone
|
||||
});
|
||||
localStartDate = result.localDate;
|
||||
}
|
||||
}
|
||||
if (initialLodging?.check_out) {
|
||||
if (allDay) {
|
||||
localEndDate = initialLodging.check_out.split('T')[0];
|
||||
} else {
|
||||
const result = updateLocalDate({
|
||||
utcDate: initialLodging.check_out,
|
||||
timezone: selectedTimezone
|
||||
});
|
||||
localEndDate = result.localDate;
|
||||
}
|
||||
}
|
||||
|
||||
if (initialLodging && typeof initialLodging === 'object') {
|
||||
// Populate all fields from initialLodging
|
||||
lodging.name = initialLodging.name || '';
|
||||
lodging.type = initialLodging.type || '';
|
||||
lodging.link = initialLodging.link || '';
|
||||
lodging.description = initialLodging.description || '';
|
||||
lodging.rating = initialLodging.rating ?? NaN;
|
||||
lodging.is_public = initialLodging.is_public ?? true;
|
||||
lodging.reservation_number = initialLodging.reservation_number || null;
|
||||
const money = toMoneyValue(
|
||||
initialLodging.price,
|
||||
initialLodging.price_currency,
|
||||
preferredCurrency
|
||||
);
|
||||
lodging.price = money.amount;
|
||||
lodging.price_currency = money.currency || preferredCurrency;
|
||||
|
||||
if (initialLodging.location) {
|
||||
lodging.location = initialLodging.location;
|
||||
}
|
||||
|
||||
if (initialLodging.user) {
|
||||
ownerUser = initialLodging.user;
|
||||
}
|
||||
}
|
||||
|
||||
// If adding from itinerary, pre-fill all-day stay with next-day checkout
|
||||
if (!initialLodging?.check_in && initialVisitDate && !localStartDate) {
|
||||
const start = DateTime.fromISO(initialVisitDate, { zone: 'UTC' });
|
||||
if (start.isValid) {
|
||||
allDay = true;
|
||||
localStartDate = start.toISODate() || '';
|
||||
const nextDay = start.plus({ days: 1 }).toISODate();
|
||||
localEndDate = nextDay || '';
|
||||
|
||||
syncAndValidateDates(false);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
// no-op
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-gradient-to-br from-base-200/30 via-base-100 to-primary/5 p-6">
|
||||
<div class="max-w-full mx-auto space-y-6">
|
||||
<!-- Location Search & Map Section - FIRST! -->
|
||||
<div class="card bg-base-100 border border-base-300 shadow-lg">
|
||||
<div class="card-body p-6">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="p-2 bg-secondary/10 rounded-lg">
|
||||
<MapIcon class="w-5 h-5 text-secondary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold">{$t('adventures.location_map')}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<LocationSearchMap
|
||||
{initialSelection}
|
||||
bind:isReverseGeocoding
|
||||
bind:displayName={lodging.location}
|
||||
displayNamePosition="after"
|
||||
on:update={handleLocationUpdate}
|
||||
on:clear={handleLocationClear}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Basic Information Section -->
|
||||
<div class="card bg-base-100 border border-base-300 shadow-lg">
|
||||
<div class="card-body p-6">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="p-2 bg-primary/10 rounded-lg">
|
||||
<InfoIcon class="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<h2 class="text-xl font-bold">{$t('adventures.basic_information')}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Left Column -->
|
||||
<div class="space-y-4">
|
||||
<!-- Name Field -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="name">
|
||||
<span class="label-text font-medium">
|
||||
{$t('adventures.name')} <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
bind:value={lodging.name}
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
placeholder={$t('lodging.enter_lodging_name')}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Type Field -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="type">
|
||||
<span class="label-text font-medium"
|
||||
>{$t('transportation.type')} <span class="text-error">*</span></span
|
||||
>
|
||||
</label>
|
||||
<select
|
||||
class="select select-bordered w-full bg-base-100/80 focus:bg-base-100"
|
||||
name="type"
|
||||
id="type"
|
||||
required
|
||||
bind:value={lodging.type}
|
||||
>
|
||||
<option disabled value="">{$t('transportation.select_type')}</option>
|
||||
<option value="hotel">{$t('lodging.hotel')}</option>
|
||||
<option value="hostel">{$t('lodging.hostel')}</option>
|
||||
<option value="resort">{$t('lodging.resort')}</option>
|
||||
<option value="bnb">{$t('lodging.bnb')}</option>
|
||||
<option value="campground">{$t('lodging.campground')}</option>
|
||||
<option value="cabin">{$t('lodging.cabin')}</option>
|
||||
<option value="apartment">{$t('lodging.apartment')}</option>
|
||||
<option value="house">{$t('lodging.house')}</option>
|
||||
<option value="villa">{$t('lodging.villa')}</option>
|
||||
<option value="motel">{$t('lodging.motel')}</option>
|
||||
<option value="other">{$t('lodging.other')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Rating Field -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="rating">
|
||||
<span class="label-text font-medium">{$t('adventures.rating')}</span>
|
||||
</label>
|
||||
<div
|
||||
class="flex items-center gap-4 p-3 bg-base-100/80 border border-base-300 rounded-lg"
|
||||
>
|
||||
<div class="rating">
|
||||
<input
|
||||
type="radio"
|
||||
name="rating"
|
||||
id="rating"
|
||||
class="rating-hidden"
|
||||
checked={Number.isNaN(lodging.rating)}
|
||||
/>
|
||||
{#each [1, 2, 3, 4, 5] as star}
|
||||
<input
|
||||
type="radio"
|
||||
name="rating"
|
||||
class="mask mask-star-2 bg-warning"
|
||||
on:click={() => (lodging.rating = star)}
|
||||
checked={lodging.rating === star}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{#if !Number.isNaN(lodging.rating)}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error btn-outline gap-2"
|
||||
on:click={() => (lodging.rating = NaN)}
|
||||
>
|
||||
<ClearIcon class="w-4 h-4" />
|
||||
{$t('adventures.remove')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reservation Number -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="reservation">
|
||||
<span class="label-text font-medium">{$t('lodging.reservation_number')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="reservation"
|
||||
bind:value={lodging.reservation_number}
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
placeholder={$t('lodging.enter_reservation_number')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="space-y-4">
|
||||
<!-- Link Field -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="link">
|
||||
<span class="label-text font-medium">{$t('adventures.link')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
id="link"
|
||||
bind:value={lodging.link}
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
placeholder={$t('transportation.enter_link')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MoneyInput
|
||||
label={$t('adventures.price')}
|
||||
value={moneyValue}
|
||||
on:change={(event) => {
|
||||
lodging.price = event.detail.amount;
|
||||
lodging.price_currency =
|
||||
event.detail.amount === null ? null : event.detail.currency || preferredCurrency;
|
||||
}}
|
||||
/>
|
||||
|
||||
<!-- Description Field -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="description">
|
||||
<span class="label-text font-medium">{$t('adventures.description')}</span>
|
||||
</label>
|
||||
<MarkdownEditor bind:text={lodging.description} editor_height="h-32" />
|
||||
|
||||
<div class="flex items-center gap-4 mt-3">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-neutral btn-sm gap-2"
|
||||
on:click={generateDesc}
|
||||
disabled={!lodging.name || isGeneratingDesc || !lodging.type}
|
||||
>
|
||||
{#if isGeneratingDesc}
|
||||
<span class="loading loading-spinner loading-xs"></span>
|
||||
{:else}
|
||||
<GenerateIcon class="w-4 h-4" />
|
||||
{/if}
|
||||
{$t('adventures.generate_desc')}
|
||||
</button>
|
||||
{#if wikiError}
|
||||
<div class="alert alert-error alert-sm">
|
||||
<InfoIcon class="w-4 h-4" />
|
||||
<span class="text-sm">{wikiError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Check-in/Check-out Dates & Timezone Section -->
|
||||
<div class="card bg-base-100 border border-base-300 shadow-lg">
|
||||
<div class="card-body p-6">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="p-2 bg-info/10 rounded-lg">
|
||||
<svg class="w-5 h-5 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold">{$t('adventures.dates')}</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- All Day and Constrain Dates Toggles -->
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
bind:checked={allDay}
|
||||
on:change={handleAllDayToggle}
|
||||
/>
|
||||
<span class="label-text">{$t('adventures.all_day')}</span>
|
||||
</label>
|
||||
|
||||
{#if collection}
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-secondary"
|
||||
bind:checked={constrainDates}
|
||||
/>
|
||||
<span class="label-text">{$t('adventures.date_constrain')}</span>
|
||||
</label>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if dateError}
|
||||
<div class="alert alert-error bg-error/10 border border-error/30 text-error">
|
||||
<InfoIcon class="w-4 h-4" />
|
||||
<span class="text-sm">{dateError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<!-- Check-in Date -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="check-in">
|
||||
<span class="label-text font-medium">{$t('adventures.check_in')}</span>
|
||||
</label>
|
||||
{#if allDay}
|
||||
<input
|
||||
id="check-in"
|
||||
type="date"
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
bind:value={localStartDate}
|
||||
on:change={handleLocalDateChange}
|
||||
min={constrainDates ? constraintStartDate : undefined}
|
||||
max={constrainDates ? constraintEndDate : undefined}
|
||||
/>
|
||||
{:else}
|
||||
<input
|
||||
id="check-in"
|
||||
type="datetime-local"
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
bind:value={localStartDate}
|
||||
on:change={handleLocalDateChange}
|
||||
min={constrainDates ? constraintStartDate : undefined}
|
||||
max={constrainDates ? constraintEndDate : undefined}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Check-out Date -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="check-out">
|
||||
<span class="label-text font-medium">{$t('adventures.check_out')}</span>
|
||||
</label>
|
||||
{#if allDay}
|
||||
<input
|
||||
id="check-out"
|
||||
type="date"
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
bind:value={localEndDate}
|
||||
on:change={handleLocalDateChange}
|
||||
min={constrainDates ? constraintStartDate : undefined}
|
||||
max={constrainDates ? constraintEndDate : undefined}
|
||||
/>
|
||||
{:else}
|
||||
<input
|
||||
id="check-out"
|
||||
type="datetime-local"
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
bind:value={localEndDate}
|
||||
on:change={handleLocalDateChange}
|
||||
min={constrainDates ? constraintStartDate : undefined}
|
||||
max={constrainDates ? constraintEndDate : undefined}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Timezone Selector (only for timed stays) -->
|
||||
{#if !allDay}
|
||||
<TimezoneSelector bind:selectedTimezone />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-3 justify-end pt-4">
|
||||
<button
|
||||
class="btn btn-primary gap-2"
|
||||
disabled={!lodging.name || !lodging.type || isReverseGeocoding}
|
||||
on:click={handleSave}
|
||||
>
|
||||
{#if isReverseGeocoding}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{$t('adventures.processing')}...
|
||||
{:else}
|
||||
<SaveIcon class="w-5 h-5" />
|
||||
{$t('adventures.continue')}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
308
frontend/src/lib/components/lodging/LodgingModal.svelte
Normal file
308
frontend/src/lib/components/lodging/LodgingModal.svelte
Normal file
@@ -0,0 +1,308 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import type { Collection, Lodging, User } from '$lib/types';
|
||||
import { addToast } from '$lib/toasts';
|
||||
import { t } from 'svelte-i18n';
|
||||
import Bed from '~icons/mdi/bed';
|
||||
import LodgingDetails from './LodgingDetails.svelte';
|
||||
import MediaStep from '../shared/MediaStep.svelte';
|
||||
|
||||
export let user: User | null = null;
|
||||
export let collection: Collection | null = null;
|
||||
export let initialVisitDate: string | null = null; // Used to pre-fill visit date when adding from itinerary planner
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Store the initial visit date internally so it persists even if parent clears it
|
||||
let storedInitialVisitDate: string | null = initialVisitDate;
|
||||
|
||||
let modal: HTMLDialogElement;
|
||||
|
||||
// Whether a save/create occurred during this modal session
|
||||
let didSave = false;
|
||||
|
||||
let steps = [
|
||||
{
|
||||
name: $t('adventures.details'),
|
||||
selected: true,
|
||||
requires_id: false
|
||||
},
|
||||
{
|
||||
name: $t('settings.media'),
|
||||
selected: false,
|
||||
requires_id: true
|
||||
}
|
||||
];
|
||||
|
||||
function createEmptyLodging(): Lodging {
|
||||
return {
|
||||
id: '',
|
||||
user: '',
|
||||
name: '',
|
||||
type: '',
|
||||
description: null,
|
||||
rating: null,
|
||||
link: null,
|
||||
check_in: null,
|
||||
check_out: null,
|
||||
timezone: null,
|
||||
reservation_number: null,
|
||||
price: null,
|
||||
price_currency: 'USD',
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
location: null,
|
||||
is_public: false,
|
||||
collection: null,
|
||||
created_at: '',
|
||||
updated_at: '',
|
||||
images: [],
|
||||
attachments: []
|
||||
};
|
||||
}
|
||||
|
||||
export let lodging: Lodging = createEmptyLodging();
|
||||
|
||||
export let lodgingToEdit: Lodging | null = null;
|
||||
|
||||
// Track which lodging we're currently editing to prevent unnecessary overwrites
|
||||
let previousLodgingId: string | null = null;
|
||||
|
||||
// Reactively update internal state when switching between edit/new.
|
||||
// This prevents stale values when the parent reuses `bind:lodging`.
|
||||
// Only runs when actually switching to a different lodging, not on every reactive update.
|
||||
$: {
|
||||
const currentLodgingId = lodgingToEdit?.id ?? null;
|
||||
|
||||
if (currentLodgingId !== previousLodgingId) {
|
||||
previousLodgingId = currentLodgingId;
|
||||
|
||||
if (lodgingToEdit) {
|
||||
lodging = {
|
||||
id: lodgingToEdit.id || '',
|
||||
user: lodgingToEdit.user || '',
|
||||
name: lodgingToEdit.name || '',
|
||||
type: lodgingToEdit.type || '',
|
||||
description: lodgingToEdit.description || null,
|
||||
rating: lodgingToEdit.rating || null,
|
||||
link: lodgingToEdit.link || null,
|
||||
check_in: lodgingToEdit.check_in || null,
|
||||
check_out: lodgingToEdit.check_out || null,
|
||||
timezone: lodgingToEdit.timezone || null,
|
||||
reservation_number: lodgingToEdit.reservation_number || null,
|
||||
price: lodgingToEdit.price || null,
|
||||
price_currency: lodgingToEdit.price_currency || 'USD',
|
||||
latitude: lodgingToEdit.latitude || null,
|
||||
longitude: lodgingToEdit.longitude || null,
|
||||
location: lodgingToEdit.location || null,
|
||||
is_public: lodgingToEdit.is_public || false,
|
||||
collection: lodgingToEdit.collection || null,
|
||||
created_at: lodgingToEdit.created_at || '',
|
||||
updated_at: lodgingToEdit.updated_at || '',
|
||||
images: lodgingToEdit.images || [],
|
||||
attachments: lodgingToEdit.attachments || []
|
||||
};
|
||||
} else if (!lodging?.id) {
|
||||
// Only reset to empty if we don't already have a saved lodging with an ID
|
||||
lodging = createEmptyLodging();
|
||||
storedInitialVisitDate = initialVisitDate;
|
||||
// Reset steps to details when creating a new lodging
|
||||
steps = [
|
||||
{ name: $t('adventures.details'), selected: true, requires_id: false },
|
||||
{ name: $t('settings.media'), selected: false, requires_id: true }
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
||||
modal.showModal();
|
||||
});
|
||||
|
||||
function close() {
|
||||
// If a save occurred, notify the parent with appropriate event
|
||||
if (didSave) {
|
||||
if (lodgingToEdit) {
|
||||
dispatch('save', lodging);
|
||||
} else {
|
||||
dispatch('create', lodging);
|
||||
}
|
||||
}
|
||||
|
||||
dispatch('close');
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') {
|
||||
close();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<dialog id="my_modal_1" class="modal backdrop-blur-sm">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div
|
||||
class="modal-box w-11/12 max-w-6xl bg-gradient-to-br from-base-100 via-base-100 to-base-200 border border-base-300 shadow-2xl"
|
||||
role="dialog"
|
||||
on:keydown={handleKeydown}
|
||||
tabindex="0"
|
||||
>
|
||||
<!-- Header Section - Following adventurelog pattern -->
|
||||
<div
|
||||
class="top-0 z-10 bg-base-100/90 backdrop-blur-lg border-b border-base-300 -mx-6 -mt-6 px-6 py-4 mb-6"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary/10 rounded-xl">
|
||||
<Bed class="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary bg-clip-text">
|
||||
{lodgingToEdit ? $t('lodging.edit_lodging') : $t('lodging.new_lodging')}
|
||||
</h1>
|
||||
<p class="text-sm text-base-content/60">
|
||||
{lodgingToEdit
|
||||
? $t('lodging.update_lodging_details')
|
||||
: $t('lodging.create_new_lodging')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
class="timeline timeline-vertical timeline-compact sm:timeline-horizontal sm:timeline-normal"
|
||||
>
|
||||
{#each steps as step, index}
|
||||
<li>
|
||||
{#if index > 0}
|
||||
<hr class="bg-base-300" />
|
||||
{/if}
|
||||
<div class="timeline-middle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 sm:h-5 sm:w-5 {step.selected
|
||||
? 'text-primary'
|
||||
: 'text-base-content/40'}"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-0.089l4-5-5z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<button
|
||||
class="timeline-end timeline-box text-xs sm:text-sm px-2 py-1 sm:px-3 sm:py-2 {step.selected
|
||||
? 'bg-primary text-primary-content'
|
||||
: 'bg-base-200'} {step.requires_id && !lodging?.id
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'hover:bg-primary/80 cursor-pointer'} transition-colors"
|
||||
on:click={() => {
|
||||
// Reset all steps
|
||||
steps.forEach((s) => (s.selected = false));
|
||||
// Select clicked step
|
||||
steps[index].selected = true;
|
||||
}}
|
||||
disabled={step.requires_id && !lodging?.id}
|
||||
>
|
||||
<span class="hidden sm:inline">{step.name}</span>
|
||||
<span class="sm:hidden"
|
||||
>{step.name.substring(0, 8)}{step.name.length > 8 ? '...' : ''}</span
|
||||
>
|
||||
</button>
|
||||
{#if index < steps.length - 1}
|
||||
<hr class="bg-base-300" />
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<!-- Close Button -->
|
||||
<button class="btn btn-ghost btn-square" on:click={close}>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if steps[0].selected}
|
||||
<LodgingDetails
|
||||
currentUser={user}
|
||||
initialLodging={lodging}
|
||||
{collection}
|
||||
bind:editingLodging={lodging}
|
||||
on:back={() => {
|
||||
steps[1].selected = false;
|
||||
steps[0].selected = true;
|
||||
}}
|
||||
on:save={(e) => {
|
||||
// Update the entire lodging object with all saved data
|
||||
const detail = e.detail || {};
|
||||
const previousImages = lodging.images || [];
|
||||
const previousAttachments = lodging.attachments || [];
|
||||
lodging = { ...lodging, ...detail };
|
||||
// Preserve any prefilled 'rec-' images or attachments if the server returned an empty array
|
||||
if (Array.isArray(detail.images)) {
|
||||
if (
|
||||
detail.images.length === 0 &&
|
||||
previousImages.some((i) => String(i.id).startsWith('rec-'))
|
||||
) {
|
||||
lodging.images = previousImages;
|
||||
}
|
||||
} else {
|
||||
lodging.images = previousImages;
|
||||
}
|
||||
if (Array.isArray(detail.attachments)) {
|
||||
if (
|
||||
detail.attachments.length === 0 &&
|
||||
previousAttachments.some((a) => String(a.id).startsWith('rec-'))
|
||||
) {
|
||||
lodging.attachments = previousAttachments;
|
||||
}
|
||||
} else {
|
||||
lodging.attachments = previousAttachments;
|
||||
}
|
||||
|
||||
// Mark that a save occurred so close() will notify parent
|
||||
didSave = true;
|
||||
|
||||
// Only allow moving to Media once we have a persisted id.
|
||||
if (!lodging?.id) {
|
||||
addToast('error', $t('adventures.lodging_save_error'));
|
||||
steps[1].selected = false;
|
||||
steps[0].selected = true;
|
||||
return;
|
||||
}
|
||||
|
||||
steps[0].selected = false;
|
||||
steps[1].selected = true;
|
||||
}}
|
||||
initialVisitDate={storedInitialVisitDate}
|
||||
/>
|
||||
{/if}
|
||||
{#if steps[1].selected}
|
||||
<MediaStep
|
||||
bind:images={lodging.images}
|
||||
bind:attachments={lodging.attachments}
|
||||
itemName={lodging.name}
|
||||
on:back={() => {
|
||||
steps[1].selected = false;
|
||||
steps[0].selected = true;
|
||||
}}
|
||||
on:close={() => close()}
|
||||
itemId={lodging.id}
|
||||
contentType="lodging"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</dialog>
|
||||
Reference in New Issue
Block a user