Activities, Trails, Wanderer + Strava Integration, UI Refresh, Devops Improvments, and more (#785)
* Implement code changes to enhance functionality and improve performance * Update nl.json Fix Dutch translations. * feat(security): add Trivy security scans for Docker images and source code * feat(security): restructure Trivy scans for improved clarity and organization * fix(dependencies): update Django version to 5.2.2 * style(workflows): standardize quotes and fix typo in frontend-test.yml * feat(workflows): add job names for clarity in backend and frontend test workflows * refactor(workflows): remove path filters from pull_request and push triggers in backend and frontend workflows * feat(workflows): add paths to push and pull_request triggers for backend and frontend workflows * refactor(workflows): simplify trigger paths for backend and frontend workflows fix(dependencies): add overrides for esbuild in frontend package.json * fix(package): add missing pnpm overrides for esbuild in package.json * fix(workflows): add missing severity parameter for Trivy filesystem scan * fix(workflows): add missing severity parameter for Docker image scans in Trivy workflow * fix(workflows): remove MEDIUM severity from Trivy scans in security workflow * added-fix-image-deletion (#681) * added-fix-image-deletion * feat(commands): add image cleanup command to find and delete unused files * fix(models): ensure associated AdventureImages are deleted and files cleaned up on Adventure deletion * fix(models): ensure associated Attachment files are deleted and their filesystem cleaned up on Adventure deletion --------- Co-authored-by: ferdousahmed <taninme@gmail.com> Co-authored-by: Sean Morley * Rename Adventures to Locations (#696) * Refactor user_id to user in adventures and related models, views, and components - Updated all instances of user_id to user in the adventures app, including models, serializers, views, and frontend components. - Adjusted queries and filters to reflect the new user field naming convention. - Ensured consistency across the codebase for user identification in adventures, collections, notes, and transportation entities. - Modified frontend components to align with the updated data structure, ensuring proper access control and rendering based on user ownership. * Refactor adventure-related views and components to use "Location" terminology - Updated GlobalSearchView to replace AdventureSerializer with LocationSerializer. - Modified IcsCalendarGeneratorViewSet to use LocationSerializer instead of AdventureSerializer. - Created new LocationImageViewSet for managing location images, including primary image toggling and image deletion. - Introduced LocationViewSet for managing locations with enhanced filtering, sorting, and sharing capabilities. - Updated ReverseGeocodeViewSet to utilize LocationSerializer. - Added ActivityTypesView to retrieve distinct activity types from locations. - Refactored user views to replace AdventureSerializer with LocationSerializer. - Updated frontend components to reflect changes from "adventure" to "location", including AdventureCard, AdventureLink, AdventureModal, and others. - Adjusted API endpoints in frontend routes to align with new location-based structure. - Ensured all references to adventures are replaced with locations across the codebase. * refactor: rename adventures to locations across the application - Updated localization files to replace adventure-related terms with location-related terms. - Refactored TypeScript types and variables from Adventure to Location in various routes and components. - Adjusted UI elements and labels to reflect the change from adventures to locations. - Ensured all references to adventures in the codebase are consistent with the new location terminology. * Refactor code structure for improved readability and maintainability * feat: Implement location details page with server-side loading and deletion functionality - Added +page.server.ts to handle server-side loading of additional location info. - Created +page.svelte for displaying location details, including images, visits, and maps. - Integrated GPX file handling and rendering on the map. - Updated map route to link to locations instead of adventures. - Refactored profile and search routes to use LocationCard instead of AdventureCard. * docs: Update terminology from "Adventure" to "Location" and enhance project overview * docs: Clarify collection examples in usage documentation * feat: Enable credentials for GPX file fetch and add CORS_ALLOW_CREDENTIALS setting * Refactor adventure references to locations across the backend and frontend - Updated CategoryViewSet to reflect location context instead of adventures. - Modified ChecklistViewSet to include locations in retrieval logic. - Changed GlobalSearchView to search for locations instead of adventures. - Adjusted IcsCalendarGeneratorViewSet to handle locations instead of adventures. - Refactored LocationImageViewSet to remove unused import. - Updated LocationViewSet to clarify public access for locations. - Changed LodgingViewSet to reference locations instead of adventures. - Modified NoteViewSet to prevent listing all locations. - Updated RecommendationsViewSet to handle locations in parsing and response. - Adjusted ReverseGeocodeViewSet to search through user locations. - Updated StatsViewSet to count locations instead of adventures. - Changed TagsView to reflect activity types for locations. - Updated TransportationViewSet to reference locations instead of adventures. - Added new translations for search results related to locations in multiple languages. - Updated dashboard and profile pages to reflect location counts instead of adventure counts. - Adjusted search routes to handle locations instead of adventures. * Update banner image * style: Update stats component background and border for improved visibility * refactor: Rename AdventureCard and AdventureModal to LocationCard and LocationModal for consistency * Import and Export Functionality (#698) * feat(backup): add BackupViewSet for data export and import functionality * Fixed frontend returning corrupt binary data * feat(import): enhance import functionality with confirmation check and improved city/region/country handling * Potential fix for code scanning alert no. 29: Information exposure through an exception Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Refactor response handling to use arrayBuffer instead of bytes * Refactor image cleanup command to use LocationImage model and update import/export view to include backup and restore functionality * Update backup export versioning and improve data restore warning message * Enhance image navigation and localization support in modal components * Refactor location handling in Immich integration components for consistency * Enhance backup and restore functionality with improved localization and error handling * Improve accessibility by adding 'for' attribute to backup file input label --------- Co-authored-by: Christian Zäske <blitzdose@gmail.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * refactor(serializers): rename Location to Adventure and update related fields * refactor(serializers): rename Adventure to Location and update related fields * chore(requirements): update pillow version to 11.3.0 * Add PT-BR translations (#739) * Fixed frontend returning corrupt binary data * fix(adventure): enhance collection ownership validation in AdventureSerializer (#723) * Add PT-BR translations Add translation for Brazilian Portuguese to the project; Signed-off-by: Lucas Zampieri <lzampier@redhat.com> --------- Signed-off-by: Lucas Zampieri <lzampier@redhat.com> Co-authored-by: Sean Morley <98704938+seanmorley15@users.noreply.github.com> Co-authored-by: Christian Zäske <blitzdose@gmail.com> * fix: update date formatting for adventure items to include timezone * Image/attachment overhaul, activities, trails and integrations with Strava and Wanderer (#726) * refactor(models, views, serializers): rename LocationImage and Attachment to ContentImage and ContentAttachment, update related references * feat: Enhance collection sharing and location management features - Implemented unsharing functionality in CollectionViewSet, including removal of user-owned locations from collections. - Refactored ContentImageViewSet to support multiple content types and improved permission checks for image uploads. - Added user ownership checks in LocationViewSet for delete operations. - Enhanced collection management in the frontend to display both owned and shared collections separately. - Updated Immich integration to handle access control based on location visibility and user permissions. - Improved UI components to show creator information and manage collection links more effectively. - Added loading states and error handling in collection fetching logic. * feat: enhance transportation card and modal with image handling - Added CardCarousel component to TransportationCard for image display. - Implemented privacy indicator with Eye and EyeOff icons. - Introduced image upload functionality in TransportationModal, allowing users to upload multiple images. - Added image management features: remove image and set primary image. - Updated Transportation and Location types to include images as ContentImage array. - Enhanced UI for image upload and display in modal, including selected images preview and current images management. * feat: update CardCarousel component to handle images, name, and icon props across various cards * feat: add Discord link to AboutModal and update appVersion in config * feat: add LocationQuickStart and LocationVisits components for enhanced location selection and visit management - Implemented LocationQuickStart.svelte for searching and selecting locations on a map with reverse geocoding. - Created LocationVisits.svelte to manage visit dates and notes for locations, including timezone handling and validation. - Updated types to remove location property from Attachment type. - Modified locations page to integrate NewLocationModal for creating and editing locations, syncing updates with adventures. * feat: update button styles and add back and close functionality in location components * Collection invite system * feat: update CollectionSerializer to include 'shared_with' as a read-only field; update app version; add new background images and localization strings for invites * feat: add Strava integration with OAuth flow and activity management - Implemented IntegrationView for listing integrations including Immich, Google Maps, and Strava. - Created StravaIntegrationView for handling OAuth authorization and token exchange. - Added functionality to refresh Strava access tokens when needed. - Implemented endpoints to fetch user activities from Strava and extract essential information. - Added Strava logo asset and integrated it into the frontend settings page. - Updated settings page to display Strava integration status. - Enhanced location management to include trails with create, edit, and delete functionalities. - Updated types and localization files to support new features. * feat: enhance Strava integration with user-specific settings and management options; update localization strings * feat: update Strava integration settings and add Wanderer logo; enhance user experience with active section management * Add StravaActivity and Activity types to types.ts - Introduced StravaActivity type to represent detailed activity data from Strava. - Added Activity type to encapsulate user activities, including optional trail and GPX file information. - Updated Location type to include an array of activities associated with each visit. * feat: streamline location and activity management; enhance Strava import functionality and add activity handling in server actions * feat: add ActivityCard component and update LocationVisits to use it; modify Activity type to reference trail as string * feat: add geojson support to ActivitySerializer and ActivityCard; enhance location page with activity summaries and GPS tracks * feat: add trails property to recommendation object in collection page * feat: add Wanderer integration with authentication and management features * feat: implement Wanderer integration with trail management and UI components; enhance settings for reauthentication * feat: add measurement system field to CustomUser model and update related serializers, migrations, and UI components * feat: add measurement system support across ActivityCard, StravaActivityCard, NewLocationModal, LocationVisits, and related utility functions * feat: enhance Wanderer integration with trail data fetching and UI updates; add measurement system support * feat: add TrailCard component for displaying trail details with measurement system support * feat: add wanderer link support in TrailSerializer and TrailCard; update measurement system handling in location page * feat: integrate memcached for caching in Wanderer services; update Docker, settings, and supervisord configurations * feat: add activity statistics to user profile; include distance, moving time, elevation, and total activities * feat: enhance import/export functionality to include trails and activities; update UI components and localization * feat: integrate NewLocationModal across various components; update location handling and state management * Refactor Location and Visit types: Replace visits structure in Location with Visit type and add location, created_at, and updated_at fields to Visit * feat: enhance permissions and validation in activity, trail, and visit views; add unique constraint to CollectionInvite model * feat: sync visits when updating adventures in collection page * feat: add geojson support for attachments and refactor GPX handling in location page * chore: remove unused dependencies from pnpm-lock.yaml * feat: add Strava and Wanderer integration documentation and configuration options * Add support for Japanese and Arabic languages in localization * Add new localization strings for Russian, Swedish, and Chinese languages - Updated translations in ru.json, sv.json, and zh.json to include new phrases related to collections, activities, and integrations. - Added strings for leaving collections, loading collections, and quick start instructions. - Included new sections for invites and Strava integration with relevant messages. - Enhanced Google Maps integration descriptions for clarity. * Add localization support for activity-related features and update UI labels - Added new Russian, Swedish, and Chinese translations for activity statistics, achievements, and related terms. - Updated UI components to use localized strings for activity statistics, distance, moving time, and other relevant fields. - Enhanced user experience by ensuring all relevant buttons and labels are translated and accessible. * fix: update appVersion to reflect the latest development version * feat: add getActivityColor function and integrate activity color coding in map and location pages * feat: add support for showing activities and visited cities on the map * feat: update map page to display counts for visited cities and activities * fix: remove debug print statement from IsOwnerOrSharedWithFullAccess permission class * feat: add MapStyleSelector component and integrate basemap selection in map page * feat: enhance basemap functions with 3D terrain support and update XYZ style handling * feat: add management command to recalculate elevation data from GPX files and update activity view to handle elevation data extraction * feat: update MapStyleSelector component and enhance basemap options for improved user experience * feat: refactor activity model and admin to use sport_type, update serializers and components for improved activity handling * feat: update Activity model string representation to use sport_type instead of type * feat: update activity handling to use sport_type for color determination in map and location components * feat: Add attachments support to Transportation and Lodging types - Updated Transportation and Lodging types to include attachments array. - Enhanced localization files for multiple languages to include new strings related to attachments, lodging, and transportation. - Added error and success messages for attachment removal and upload information. - Included new prompts for creating and updating lodging and transportation details across various languages. * feat: Enhance activity statistics and breakdown by category in user profile * feat: Add SPORT_CATEGORIES for better organization of sports types and update StatsViewSet to use it * feat: Enhance CategoryDropdown for mobile responsiveness and add category creation functionality * feat: Update inspirational quote in adventure log * feat: Localize navigation labels in Navbar and add translation to en.json * feat: Update navigation elements to use anchor tags for better accessibility and add new fields to signup form * Translate login button text to support internationalization * feat: Refactor location visit status logic and add utility function for visited locations count * chore: Upgrade GitHub Actions and remove unused timezone import * fix: Update Docker image tags in GitHub Actions workflow for consistency * fix: Update Docker image build process to use BuildKit cache for improved performance * chore: Remove unused imports from stats_view.py for cleaner code * Increase background image opacity on login and signup pages for improved visibility * fix: Add postgresql-client to runtime dependencies in Dockerfile * fix: Update workflow files to include permissions for GitHub Actions * fix: Update esbuild version to ^0.25.9 in package.json and pnpm-lock.yaml for compatibility * chore: improve Chinese translation (#796) * fix: update adventure log quote and remove unused activity type field * fix: optimize import process by using get_or_create for visited cities and regions * fix: update README to reflect changes from adventures to locations and enhance feature descriptions * fix: update documentation to reflect changes from adventures to locations and enhance feature descriptions * Update google_maps_integration.md (#743) * Update google_maps_integration.md Explain APIs needed for AdventureLogs versions. Fixes #731 and #727 * Fix a typo google_maps_integration.md --------- Co-authored-by: Sean Morley <98704938+seanmorley15@users.noreply.github.com> * fix: update appVersion to reflect the main branch version * fix: update image source for satellite map in documentation * Update frontend/src/lib/components/NewLocationModal.svelte Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Add localization updates for multiple languages - Japanese (ja.json): Added new activity-related phrases and checklist terms. - Korean (ko.json): Included activity breakdown and checklist enhancements. - Dutch (nl.json): Updated activity descriptions and added checklist functionalities. - Norwegian (no.json): Enhanced activity and checklist terminology. - Polish (pl.json): Added new phrases for activities and checklist management. - Brazilian Portuguese (pt-br.json): Updated activity-related terms and checklist features. - Russian (ru.json): Included new phrases for activities and checklist management. - Swedish (sv.json): Enhanced activity descriptions and checklist functionalities. - Chinese (zh.json): Added new activity-related phrases and checklist terms. * fix: enhance image upload handling to support immich_id * Add "not_enabled" message for Strava integration in multiple languages - Updated Spanish, French, Italian, Japanese, Korean, Dutch, Norwegian, Polish, Brazilian Portuguese, Russian, Swedish, and Chinese locale files to include a new message indicating that Strava integration is not enabled in the current instance. --------- Signed-off-by: Lucas Zampieri <lzampier@redhat.com> Co-authored-by: Ycer0n <37674033+Ycer0n@users.noreply.github.com> Co-authored-by: taninme <5262715+taninme@users.noreply.github.com> Co-authored-by: ferdousahmed <taninme@gmail.com> Co-authored-by: Christian Zäske <blitzdose@gmail.com> Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Lucas Zampieri <lcasmz54@gmail.com> Co-authored-by: pplulee <pplulee@live.cn> Co-authored-by: Cathelijne Hornstra <github@hornstra.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Sean Morley
831
frontend/src/lib/components/locations/LocationDetails.svelte
Normal file
831
frontend/src/lib/components/locations/LocationDetails.svelte
Normal file
@@ -0,0 +1,831 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { MapLibre, Marker, MapEvents } from 'svelte-maplibre';
|
||||
import { number, t } from 'svelte-i18n';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
import CategoryDropdown from '../CategoryDropdown.svelte';
|
||||
import type { Collection, Location } from '$lib/types';
|
||||
|
||||
// Icons
|
||||
import SearchIcon from '~icons/mdi/magnify';
|
||||
import LocationIcon from '~icons/mdi/crosshairs-gps';
|
||||
import MapIcon from '~icons/mdi/map';
|
||||
import CheckIcon from '~icons/mdi/check';
|
||||
import ClearIcon from '~icons/mdi/close';
|
||||
import PinIcon from '~icons/mdi/map-marker';
|
||||
import InfoIcon from '~icons/mdi/information';
|
||||
import StarIcon from '~icons/mdi/star';
|
||||
import LinkIcon from '~icons/mdi/link';
|
||||
import TextIcon from '~icons/mdi/text';
|
||||
import CategoryIcon from '~icons/mdi/tag';
|
||||
import PublicIcon from '~icons/mdi/earth';
|
||||
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 TagComplete from '../TagComplete.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Location selection properties
|
||||
let searchQuery = '';
|
||||
let searchResults: any[] = [];
|
||||
let selectedLocation: any = null;
|
||||
let mapCenter: [number, number] = [-74.5, 40];
|
||||
let mapZoom = 2;
|
||||
let isSearching = false;
|
||||
let isReverseGeocoding = false;
|
||||
let searchTimeout: ReturnType<typeof setTimeout>;
|
||||
let mapComponent: any;
|
||||
let selectedMarker: { lng: number; lat: number } | null = null;
|
||||
|
||||
// Enhanced location data
|
||||
let locationData: {
|
||||
city?: { name: string; id: string; visited: boolean };
|
||||
region?: { name: string; id: string; visited: boolean };
|
||||
country?: { name: string; country_code: string; visited: boolean };
|
||||
display_name?: string;
|
||||
location_name?: string;
|
||||
} | null = null;
|
||||
|
||||
// Form data properties
|
||||
let location: {
|
||||
name: string;
|
||||
category: Category | null;
|
||||
rating: number;
|
||||
is_public: boolean;
|
||||
link: string;
|
||||
description: string;
|
||||
latitude: number | null;
|
||||
longitude: number | null;
|
||||
location: string;
|
||||
tags: string[];
|
||||
collections?: string[];
|
||||
} = {
|
||||
name: '',
|
||||
category: null,
|
||||
rating: NaN,
|
||||
is_public: false,
|
||||
link: '',
|
||||
description: '',
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
location: '',
|
||||
tags: [],
|
||||
collections: []
|
||||
};
|
||||
|
||||
let user: User | null = null;
|
||||
let locationToEdit: Location | null = null;
|
||||
let wikiError = '';
|
||||
let isGeneratingDesc = false;
|
||||
let ownerUser: User | null = null;
|
||||
|
||||
// Props (would be passed in from parent component)
|
||||
export let initialLocation: any = null;
|
||||
export let currentUser: any = null;
|
||||
export let editingLocation: any = null;
|
||||
export let collection: Collection | null = null;
|
||||
|
||||
$: user = currentUser;
|
||||
$: locationToEdit = editingLocation;
|
||||
|
||||
// Location selection functions
|
||||
async function searchLocations(query: string) {
|
||||
if (!query.trim() || query.length < 3) {
|
||||
searchResults = [];
|
||||
return;
|
||||
}
|
||||
|
||||
isSearching = true;
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/reverse-geocode/search/?query=${encodeURIComponent(query)}`
|
||||
);
|
||||
const results = await response.json();
|
||||
|
||||
searchResults = results.map((result: any) => ({
|
||||
id: result.name + result.lat + result.lon,
|
||||
name: result.name,
|
||||
lat: parseFloat(result.lat),
|
||||
lng: parseFloat(result.lon),
|
||||
type: result.type,
|
||||
category: result.category,
|
||||
location: result.display_name,
|
||||
importance: result.importance,
|
||||
powered_by: result.powered_by
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
searchResults = [];
|
||||
} finally {
|
||||
isSearching = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearchInput() {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchLocations(searchQuery);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function selectSearchResult(searchResult: any) {
|
||||
selectedLocation = searchResult;
|
||||
selectedMarker = { lng: searchResult.lng, lat: searchResult.lat };
|
||||
mapCenter = [searchResult.lng, searchResult.lat];
|
||||
mapZoom = 14;
|
||||
searchResults = [];
|
||||
searchQuery = searchResult.name;
|
||||
|
||||
// Update form data
|
||||
if (!location.name) location.name = searchResult.name;
|
||||
location.latitude = searchResult.lat;
|
||||
location.longitude = searchResult.lng;
|
||||
location.name = searchResult.name;
|
||||
|
||||
await performDetailedReverseGeocode(searchResult.lat, searchResult.lng);
|
||||
}
|
||||
|
||||
async function handleMapClick(e: { detail: { lngLat: { lng: number; lat: number } } }) {
|
||||
selectedMarker = {
|
||||
lng: e.detail.lngLat.lng,
|
||||
lat: e.detail.lngLat.lat
|
||||
};
|
||||
|
||||
await reverseGeocode(e.detail.lngLat.lng, e.detail.lngLat.lat);
|
||||
}
|
||||
|
||||
async function reverseGeocode(lng: number, lat: number) {
|
||||
isReverseGeocoding = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/reverse-geocode/search/?query=${lat},${lng}`);
|
||||
const results = await response.json();
|
||||
|
||||
if (results && results.length > 0) {
|
||||
const result = results[0];
|
||||
selectedLocation = {
|
||||
name: result.name,
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
location: result.display_name,
|
||||
type: result.type,
|
||||
category: result.category
|
||||
};
|
||||
searchQuery = result.name;
|
||||
if (!location.name) location.name = result.name;
|
||||
} else {
|
||||
selectedLocation = {
|
||||
name: `Location at ${lat.toFixed(4)}, ${lng.toFixed(4)}`,
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
location: `${lat.toFixed(4)}, ${lng.toFixed(4)}`
|
||||
};
|
||||
searchQuery = selectedLocation.name;
|
||||
if (!location.name) location.name = selectedLocation.name;
|
||||
}
|
||||
|
||||
location.latitude = lat;
|
||||
location.longitude = lng;
|
||||
location.location = selectedLocation.location;
|
||||
|
||||
await performDetailedReverseGeocode(lat, lng);
|
||||
} catch (error) {
|
||||
console.error('Reverse geocoding error:', error);
|
||||
selectedLocation = {
|
||||
name: `Location at ${lat.toFixed(4)}, ${lng.toFixed(4)}`,
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
location: `${lat.toFixed(4)}, ${lng.toFixed(4)}`
|
||||
};
|
||||
searchQuery = selectedLocation.name;
|
||||
if (!location.name) location.name = selectedLocation.name;
|
||||
location.latitude = lat;
|
||||
location.longitude = lng;
|
||||
location.location = selectedLocation.location;
|
||||
locationData = null;
|
||||
} finally {
|
||||
isReverseGeocoding = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function performDetailedReverseGeocode(lat: number, lng: number) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/reverse-geocode/reverse_geocode/?lat=${lat}&lon=${lng}&format=json`
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
locationData = {
|
||||
city: data.city
|
||||
? {
|
||||
name: data.city,
|
||||
id: data.city_id,
|
||||
visited: data.city_visited || false
|
||||
}
|
||||
: undefined,
|
||||
region: data.region
|
||||
? {
|
||||
name: data.region,
|
||||
id: data.region_id,
|
||||
visited: data.region_visited || false
|
||||
}
|
||||
: undefined,
|
||||
country: data.country
|
||||
? {
|
||||
name: data.country,
|
||||
country_code: data.country_id,
|
||||
visited: false
|
||||
}
|
||||
: undefined,
|
||||
display_name: data.display_name,
|
||||
location_name: data.location_name
|
||||
};
|
||||
location.location = data.display_name;
|
||||
} else {
|
||||
locationData = null;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Detailed reverse geocoding error:', error);
|
||||
locationData = null;
|
||||
}
|
||||
}
|
||||
|
||||
function useCurrentLocation() {
|
||||
if ('geolocation' in navigator) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
async (position) => {
|
||||
const lat = position.coords.latitude;
|
||||
const lng = position.coords.longitude;
|
||||
selectedMarker = { lng, lat };
|
||||
mapCenter = [lng, lat];
|
||||
mapZoom = 14;
|
||||
await reverseGeocode(lng, lat);
|
||||
},
|
||||
(error) => {
|
||||
console.error('Geolocation error:', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function clearLocationSelection() {
|
||||
selectedLocation = null;
|
||||
selectedMarker = null;
|
||||
locationData = null;
|
||||
searchQuery = '';
|
||||
searchResults = [];
|
||||
location.latitude = null;
|
||||
location.longitude = null;
|
||||
location.location = '';
|
||||
mapCenter = [-74.5, 40];
|
||||
mapZoom = 2;
|
||||
}
|
||||
|
||||
async function generateDesc() {
|
||||
if (!location.name) return;
|
||||
|
||||
isGeneratingDesc = true;
|
||||
wikiError = '';
|
||||
|
||||
try {
|
||||
// Mock Wikipedia API call - replace with actual implementation
|
||||
const response = await fetch(`/api/generate/desc/?name=${encodeURIComponent(location.name)}`);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
location.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 (!location.name || !location.category) {
|
||||
return;
|
||||
}
|
||||
|
||||
// round latitude and longitude to 6 decimal places
|
||||
if (location.latitude !== null && typeof location.latitude === 'number') {
|
||||
location.latitude = parseFloat(location.latitude.toFixed(6));
|
||||
}
|
||||
if (location.longitude !== null && typeof location.longitude === 'number') {
|
||||
location.longitude = parseFloat(location.longitude.toFixed(6));
|
||||
}
|
||||
if (collection && collection.id) {
|
||||
location.collections = [collection.id];
|
||||
}
|
||||
|
||||
// either a post or a patch depending on whether we're editing or creating
|
||||
if (locationToEdit && locationToEdit.id) {
|
||||
let res = await fetch(`/api/locations/${locationToEdit.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(location)
|
||||
});
|
||||
let updatedLocation = await res.json();
|
||||
location = updatedLocation;
|
||||
} else {
|
||||
let res = await fetch(`/api/locations`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(location)
|
||||
});
|
||||
let newLocation = await res.json();
|
||||
location = newLocation;
|
||||
}
|
||||
|
||||
dispatch('save', {
|
||||
...location
|
||||
});
|
||||
}
|
||||
|
||||
function handleBack() {
|
||||
dispatch('back');
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (initialLocation.latitude && initialLocation.longitude) {
|
||||
selectedMarker = {
|
||||
lng: initialLocation.longitude,
|
||||
lat: initialLocation.latitude
|
||||
};
|
||||
location.latitude = initialLocation.latitude;
|
||||
location.longitude = initialLocation.longitude;
|
||||
mapCenter = [initialLocation.longitude, initialLocation.latitude];
|
||||
mapZoom = 14;
|
||||
selectedLocation = {
|
||||
name: initialLocation.name || '',
|
||||
lat: initialLocation.latitude,
|
||||
lng: initialLocation.longitude,
|
||||
location: initialLocation.location || '',
|
||||
type: 'point',
|
||||
category: initialLocation.category || null
|
||||
};
|
||||
selectedMarker = {
|
||||
lng: Number(initialLocation.longitude),
|
||||
lat: Number(initialLocation.latitude)
|
||||
};
|
||||
// trigger reverse geocoding to populate location data
|
||||
await performDetailedReverseGeocode(initialLocation.latitude, initialLocation.longitude);
|
||||
}
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (initialLocation && typeof initialLocation === 'object') {
|
||||
// Only update location properties if they don't already have values
|
||||
// This prevents overwriting user selections
|
||||
if (!location.name) location.name = initialLocation.name || '';
|
||||
if (!location.link) location.link = initialLocation.link || '';
|
||||
if (!location.description) location.description = initialLocation.description || '';
|
||||
if (Number.isNaN(location.rating)) location.rating = initialLocation.rating || NaN;
|
||||
if (location.is_public === false) location.is_public = initialLocation.is_public || false;
|
||||
|
||||
// Only set category if location doesn't have one or if initialLocation has a valid category
|
||||
if (!location.category || !location.category.id) {
|
||||
if (initialLocation.category && initialLocation.category.id) {
|
||||
location.category = initialLocation.category;
|
||||
}
|
||||
}
|
||||
|
||||
if (initialLocation.tags && Array.isArray(initialLocation.tags)) {
|
||||
location.tags = initialLocation.tags;
|
||||
}
|
||||
|
||||
if (initialLocation.location) {
|
||||
location.location = initialLocation.location;
|
||||
}
|
||||
|
||||
if (initialLocation.user) {
|
||||
ownerUser = initialLocation.user;
|
||||
}
|
||||
}
|
||||
|
||||
searchQuery = initialLocation.name || '';
|
||||
return () => {
|
||||
clearTimeout(searchTimeout);
|
||||
};
|
||||
});
|
||||
</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">
|
||||
<!-- 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={location.name}
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
placeholder="Enter location name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Category Field -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="category">
|
||||
<span class="label-text font-medium">
|
||||
{$t('adventures.category')} <span class="text-error">*</span>
|
||||
</span>
|
||||
</label>
|
||||
{#if (user && ownerUser && user.uuid == ownerUser.uuid) || !ownerUser}
|
||||
<CategoryDropdown bind:selected_category={location.category} />
|
||||
{:else}
|
||||
<div
|
||||
class="flex items-center gap-3 p-3 bg-base-100/80 border border-base-300 rounded-lg"
|
||||
>
|
||||
{#if location.category?.icon}
|
||||
<span class="text-xl flex-shrink-0">{location.category.icon}</span>
|
||||
{/if}
|
||||
<span class="font-medium">
|
||||
{location.category?.display_name || location.category?.name}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</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(location.rating)}
|
||||
/>
|
||||
{#each [1, 2, 3, 4, 5] as star}
|
||||
<input
|
||||
type="radio"
|
||||
name="rating"
|
||||
class="mask mask-star-2 bg-warning"
|
||||
on:click={() => (location.rating = star)}
|
||||
checked={location.rating === star}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{#if !Number.isNaN(location.rating)}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error btn-outline gap-2"
|
||||
on:click={() => (location.rating = NaN)}
|
||||
>
|
||||
<ClearIcon class="w-4 h-4" />
|
||||
{$t('adventures.remove')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</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={location.link}
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Public Toggle -->
|
||||
{#if !locationToEdit || (locationToEdit.collections && locationToEdit.collections.length === 0)}
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer justify-start gap-4" for="is_public">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
id="is_public"
|
||||
bind:checked={location.is_public}
|
||||
/>
|
||||
<div>
|
||||
<span class="label-text font-medium">{$t('adventures.public_location')}</span>
|
||||
<p class="text-sm text-base-content/60">
|
||||
{$t('adventures.public_location_description')}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- 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={location.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={!location.name || isGeneratingDesc}
|
||||
>
|
||||
{#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>
|
||||
|
||||
<!-- Tags 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-warning/10 rounded-lg">
|
||||
<CategoryIcon class="w-5 h-5 text-warning" />
|
||||
</div>
|
||||
<h2 class="text-xl font-bold">{$t('adventures.tags')} ({location.tags?.length || 0})</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<!-- Hidden input for form submission (same as old version) -->
|
||||
<input
|
||||
type="text"
|
||||
id="tags"
|
||||
name="tags"
|
||||
hidden
|
||||
bind:value={location.tags}
|
||||
class="input input-bordered w-full"
|
||||
/>
|
||||
<!-- Use the same ActivityComplete component as the old version -->
|
||||
<TagComplete bind:tags={location.tags} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location Selection 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-secondary/10 rounded-lg">
|
||||
<MapIcon class="w-5 h-5 text-secondary" />
|
||||
</div>
|
||||
<h2 class="text-xl font-bold">{$t('adventures.location_map')}</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Search & Controls -->
|
||||
<div class="space-y-4">
|
||||
<!-- Location Display Name Input -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="location-display">
|
||||
<span class="label-text font-medium">{$t('adventures.location_display_name')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location-display"
|
||||
bind:value={location.location}
|
||||
class="input input-bordered bg-base-100/80 focus:bg-base-100"
|
||||
placeholder="Enter location display name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="search-location">
|
||||
<span class="label-text font-medium">{$t('adventures.search_location')}</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<SearchIcon class="w-4 h-4 text-base-content/40" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="search-location"
|
||||
bind:value={searchQuery}
|
||||
on:input={handleSearchInput}
|
||||
placeholder="Enter city, location, or landmark..."
|
||||
class="input input-bordered w-full pl-10 pr-4 bg-base-100/80 focus:bg-base-100"
|
||||
class:input-primary={selectedLocation}
|
||||
/>
|
||||
{#if searchQuery && !selectedLocation}
|
||||
<button
|
||||
class="absolute inset-y-0 right-0 pr-3 flex items-center"
|
||||
on:click={clearLocationSelection}
|
||||
>
|
||||
<ClearIcon class="w-4 h-4 text-base-content/40 hover:text-base-content" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results -->
|
||||
{#if isSearching}
|
||||
<div class="flex items-center justify-center py-4">
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
<span class="ml-2 text-sm text-base-content/60"
|
||||
>{$t('adventures.searching')}...</span
|
||||
>
|
||||
</div>
|
||||
{:else if searchResults.length > 0}
|
||||
<div class="space-y-2">
|
||||
<div class="label">
|
||||
<span class="label-text text-sm font-medium"
|
||||
>{$t('adventures.search_results')}</span
|
||||
>
|
||||
</div>
|
||||
<div class="max-h-48 overflow-y-auto space-y-1">
|
||||
{#each searchResults as result}
|
||||
<button
|
||||
class="w-full text-left p-3 rounded-lg border border-base-300 hover:bg-base-100 hover:border-primary/50 transition-colors"
|
||||
on:click={() => selectSearchResult(result)}
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<PinIcon class="w-4 h-4 text-primary mt-1 flex-shrink-0" />
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="font-medium text-sm truncate">{result.name}</div>
|
||||
<div class="text-xs text-base-content/60 truncate">{result.location}</div>
|
||||
{#if result.category}
|
||||
<div class="text-xs text-primary/70 capitalize">{result.category}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Current Location Button -->
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="divider divider-horizontal text-xs">{$t('adventures.or')}</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-outline gap-2 w-full" on:click={useCurrentLocation}>
|
||||
<LocationIcon class="w-4 h-4" />
|
||||
{$t('adventures.use_current_location')}
|
||||
</button>
|
||||
|
||||
<!-- Selected Location Display -->
|
||||
{#if selectedLocation && selectedMarker}
|
||||
<div class="card bg-success/10 border border-success/30">
|
||||
<div class="card-body p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="p-2 bg-success/20 rounded-lg">
|
||||
<CheckIcon class="w-4 h-4 text-success" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h4 class="font-semibold text-success mb-1">
|
||||
{$t('adventures.location_selected')}
|
||||
</h4>
|
||||
<p class="text-sm text-base-content/80 truncate">{selectedLocation.name}</p>
|
||||
<p class="text-xs text-base-content/60 mt-1">
|
||||
{selectedMarker.lat.toFixed(6)}, {selectedMarker.lng.toFixed(6)}
|
||||
</p>
|
||||
|
||||
<!-- Geographic Tags -->
|
||||
{#if locationData?.city || locationData?.region || locationData?.country}
|
||||
<div class="flex flex-wrap gap-2 mt-3">
|
||||
{#if locationData.city}
|
||||
<div class="badge badge-info badge-sm gap-1">
|
||||
🏙️ {locationData.city.name}
|
||||
</div>
|
||||
{/if}
|
||||
{#if locationData.region}
|
||||
<div class="badge badge-warning badge-sm gap-1">
|
||||
🗺️ {locationData.region.name}
|
||||
</div>
|
||||
{/if}
|
||||
{#if locationData.country}
|
||||
<div class="badge badge-success badge-sm gap-1">
|
||||
🌎 {locationData.country.name}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button class="btn btn-ghost btn-sm" on:click={clearLocationSelection}>
|
||||
<ClearIcon class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Map -->
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="label">
|
||||
<span class="label-text font-medium">{$t('worldtravel.interactive_map')}</span>
|
||||
</div>
|
||||
{#if isReverseGeocoding}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
<span class="text-sm text-base-content/60"
|
||||
>{$t('worldtravel.getting_location_details')}...</span
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<MapLibre
|
||||
bind:this={mapComponent}
|
||||
style={getBasemapUrl()}
|
||||
class="w-full h-80 rounded-lg border border-base-300"
|
||||
center={mapCenter}
|
||||
zoom={mapZoom}
|
||||
standardControls
|
||||
>
|
||||
<MapEvents on:click={handleMapClick} />
|
||||
|
||||
{#if selectedMarker}
|
||||
<Marker
|
||||
lngLat={[selectedMarker.lng, selectedMarker.lat]}
|
||||
class="grid h-8 w-8 place-items-center rounded-full border-2 border-white bg-primary shadow-lg cursor-pointer"
|
||||
>
|
||||
<PinIcon class="w-5 h-5 text-primary-content" />
|
||||
</Marker>
|
||||
{/if}
|
||||
</MapLibre>
|
||||
</div>
|
||||
|
||||
{#if !selectedMarker}
|
||||
<p class="text-sm text-base-content/60 text-center">
|
||||
{$t('adventures.click_on_map')}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-3 justify-end pt-4">
|
||||
<button class="btn btn-neutral-200 gap-2" on:click={handleBack}>
|
||||
<ArrowLeftIcon class="w-5 h-5" />
|
||||
{$t('adventures.back')}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary gap-2"
|
||||
disabled={!location.name || !location.category || 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>
|
||||
Reference in New Issue
Block a user