feat: remove recommendations surface and backend
This commit is contained in:
@@ -1,800 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Collection, User, ContentImage } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
|
||||
import { getBasemapUrl } from '$lib';
|
||||
import MagnifyIcon from '~icons/mdi/magnify';
|
||||
import MapMarker from '~icons/mdi/map-marker';
|
||||
import Star from '~icons/mdi/star';
|
||||
import StarHalfFull from '~icons/mdi/star-half-full';
|
||||
import StarOutline from '~icons/mdi/star-outline';
|
||||
import AccountMultiple from '~icons/mdi/account-multiple';
|
||||
import Phone from '~icons/mdi/phone';
|
||||
import Web from '~icons/mdi/web';
|
||||
import OpenInNew from '~icons/mdi/open-in-new';
|
||||
import ClockOutline from '~icons/mdi/clock-outline';
|
||||
import CurrencyUsd from '~icons/mdi/currency-usd';
|
||||
import TuneVariant from '~icons/mdi/tune-variant';
|
||||
import CloseCircle from '~icons/mdi/close-circle';
|
||||
import Compass from '~icons/mdi/compass';
|
||||
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
|
||||
import LocationModal from '$lib/components/locations/LocationModal.svelte';
|
||||
import LodgingModal from '$lib/components/lodging/LodgingModal.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Location, Lodging } from '$lib/types';
|
||||
|
||||
export let collection: Collection;
|
||||
export let user: User | null;
|
||||
// Whether the current user can modify this collection (owner or shared user)
|
||||
|
||||
type RecommendationResult = {
|
||||
name: string;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
distance_km: number;
|
||||
source: 'google' | 'osm';
|
||||
type: string;
|
||||
tags?: Record<string, string>;
|
||||
rating?: number;
|
||||
review_count?: number;
|
||||
address?: string;
|
||||
business_status?: string;
|
||||
opening_hours?: string[];
|
||||
is_open_now?: boolean;
|
||||
photos?: string[];
|
||||
phone_number?: string;
|
||||
website?: string;
|
||||
google_maps_uri?: string;
|
||||
price_level?: string;
|
||||
description?: string;
|
||||
quality_score?: number;
|
||||
};
|
||||
|
||||
let searchQuery = '';
|
||||
let selectedCategory: 'tourism' | 'lodging' | 'food' = 'tourism';
|
||||
let radiusValue = 5000; // Default 5km
|
||||
let loading = false;
|
||||
let results: RecommendationResult[] = [];
|
||||
let error: string | null = null;
|
||||
let selectedLocationId: string | null = null;
|
||||
let showFilters = false;
|
||||
let mapCenter: { lng: number; lat: number } = { lng: 0, lat: 0 };
|
||||
let mapZoom = 12;
|
||||
|
||||
// Filters
|
||||
let minRating = 0;
|
||||
let minReviews = 0;
|
||||
let showOpenOnly = false;
|
||||
|
||||
// Photo modal
|
||||
let photoModalOpen = false;
|
||||
let selectedPhotos: ContentImage[] = [];
|
||||
let selectedPhotoIndex = 0;
|
||||
let selectedPlaceName = '';
|
||||
let selectedPlaceAddress = '';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Modals for creating autofilled items
|
||||
let showLocationModal = false;
|
||||
let showLodgingModal = false;
|
||||
let modalLocationToEdit: Location | null = null;
|
||||
let modalLodgingToEdit: Lodging | null = null;
|
||||
|
||||
function mapPhotosToContentImages(photos: string[]): ContentImage[] {
|
||||
return photos.map((url, i) => ({
|
||||
id: `rec-${i}-${Date.now()}`,
|
||||
image: url,
|
||||
is_primary: i === 0,
|
||||
immich_id: null
|
||||
}));
|
||||
}
|
||||
|
||||
function openCreateLocationFromResult(result: RecommendationResult) {
|
||||
modalLocationToEdit = {
|
||||
id: '',
|
||||
name: result.name || '',
|
||||
location: result.address || result.description || '',
|
||||
tags: [],
|
||||
description: result.description || null,
|
||||
rating: result.rating ?? NaN,
|
||||
price: null,
|
||||
price_currency: null,
|
||||
link: result.website || null,
|
||||
images: mapPhotosToContentImages(result.photos || []),
|
||||
visits: [],
|
||||
collections: [collection.id],
|
||||
latitude: result.latitude ?? null,
|
||||
longitude: result.longitude ?? null,
|
||||
is_public: false,
|
||||
user: user ?? null,
|
||||
category: null,
|
||||
attachments: [],
|
||||
trails: []
|
||||
} as Location;
|
||||
|
||||
showLocationModal = true;
|
||||
}
|
||||
|
||||
function openCreateLodgingFromResult(result: RecommendationResult) {
|
||||
modalLodgingToEdit = {
|
||||
id: '',
|
||||
user: user ? user.uuid : '',
|
||||
name: result.name || '',
|
||||
type: '',
|
||||
description: result.description || null,
|
||||
rating: result.rating ?? null,
|
||||
link: result.website || null,
|
||||
check_in: null,
|
||||
check_out: null,
|
||||
timezone: null,
|
||||
reservation_number: null,
|
||||
price: null,
|
||||
price_currency: null,
|
||||
latitude: result.latitude ?? null,
|
||||
longitude: result.longitude ?? null,
|
||||
location: result.address || result.description || null,
|
||||
is_public: false,
|
||||
collection: collection.id,
|
||||
created_at: '',
|
||||
updated_at: '',
|
||||
images: mapPhotosToContentImages(result.photos || []),
|
||||
attachments: []
|
||||
} as Lodging;
|
||||
|
||||
showLodgingModal = true;
|
||||
}
|
||||
|
||||
function handleLocationCreate(e: CustomEvent) {
|
||||
const created: Location = e.detail;
|
||||
showLocationModal = false;
|
||||
modalLocationToEdit = null;
|
||||
collection.locations = [...collection.locations, created];
|
||||
}
|
||||
|
||||
function handleLodgingCreate(e: CustomEvent) {
|
||||
const created: Lodging = e.detail;
|
||||
showLodgingModal = false;
|
||||
modalLodgingToEdit = null;
|
||||
collection.lodging = [...(collection.lodging ?? []), created];
|
||||
}
|
||||
|
||||
function closeLocationModal() {
|
||||
showLocationModal = false;
|
||||
modalLocationToEdit = null;
|
||||
}
|
||||
|
||||
function closeLodgingModal() {
|
||||
showLodgingModal = false;
|
||||
modalLodgingToEdit = null;
|
||||
}
|
||||
|
||||
$: isMetric = user?.measurement_system === 'metric';
|
||||
$: radiusDisplay = isMetric
|
||||
? `${(radiusValue / 1000).toFixed(1)} km`
|
||||
: `${(radiusValue / 1609.34).toFixed(1)} mi`;
|
||||
|
||||
$: radiusOptions = isMetric
|
||||
? [
|
||||
{ value: 1000, label: '1 km' },
|
||||
{ value: 2000, label: '2 km' },
|
||||
{ value: 5000, label: '5 km' },
|
||||
{ value: 10000, label: '10 km' },
|
||||
{ value: 20000, label: '20 km' },
|
||||
{ value: 50000, label: '50 km' }
|
||||
]
|
||||
: [
|
||||
{ value: 1609, label: '1 mi' },
|
||||
{ value: 3219, label: '2 mi' },
|
||||
{ value: 8047, label: '5 mi' },
|
||||
{ value: 16093, label: '10 mi' },
|
||||
{ value: 32187, label: '20 mi' },
|
||||
{ value: 80467, label: '50 mi' }
|
||||
];
|
||||
|
||||
// Get locations with coordinates for dropdown
|
||||
$: locationsWithCoords = collection.locations.filter((l) => l.latitude && l.longitude);
|
||||
|
||||
// Set default selected location and map center
|
||||
onMount(() => {
|
||||
if (locationsWithCoords.length > 0) {
|
||||
selectedLocationId = locationsWithCoords[0].id;
|
||||
mapCenter = {
|
||||
lng: locationsWithCoords[0].longitude!,
|
||||
lat: locationsWithCoords[0].latitude!
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Update map center when selected location changes
|
||||
$: if (selectedLocationId) {
|
||||
const location = locationsWithCoords.find((l) => l.id === selectedLocationId);
|
||||
if (location && location.latitude && location.longitude) {
|
||||
mapCenter = { lng: location.longitude, lat: location.latitude };
|
||||
}
|
||||
}
|
||||
|
||||
// Filter results
|
||||
$: filteredResults = results.filter((r) => {
|
||||
if (minRating > 0 && (r.rating === undefined || r.rating < minRating)) return false;
|
||||
if (minReviews > 0 && (r.review_count === undefined || r.review_count < minReviews))
|
||||
return false;
|
||||
if (showOpenOnly && !r.is_open_now) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
async function searchRecommendations() {
|
||||
if (!searchQuery.trim() && !selectedLocationId) {
|
||||
error = 'Please select a location or enter a search query';
|
||||
return;
|
||||
}
|
||||
|
||||
loading = true;
|
||||
error = null;
|
||||
results = [];
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (selectedLocationId) {
|
||||
const location = locationsWithCoords.find((l) => l.id === selectedLocationId);
|
||||
if (location && location.latitude && location.longitude) {
|
||||
params.append('lat', location.latitude.toString());
|
||||
params.append('lon', location.longitude.toString());
|
||||
}
|
||||
} else if (searchQuery.trim()) {
|
||||
params.append('location', searchQuery);
|
||||
}
|
||||
|
||||
params.append('radius', radiusValue.toString());
|
||||
params.append('category', selectedCategory);
|
||||
|
||||
const response = await fetch(`/api/recommendations/query?${params.toString()}`);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || 'Failed to fetch recommendations');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
|
||||
results = data.results || [];
|
||||
|
||||
// Update map if we have results
|
||||
if (results.length > 0) {
|
||||
// Calculate bounds for all results
|
||||
const lats = results.map((r) => r.latitude);
|
||||
const lngs = results.map((r) => r.longitude);
|
||||
const avgLat = lats.reduce((a, b) => a + b, 0) / lats.length;
|
||||
const avgLng = lngs.reduce((a, b) => a + b, 0) / lngs.length;
|
||||
mapCenter = { lng: avgLng, lat: avgLat };
|
||||
}
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'An error occurred';
|
||||
console.error('Error fetching recommendations:', err);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openPhotoModal(
|
||||
photos: string[],
|
||||
placeName: string,
|
||||
placeAddress: string = '',
|
||||
startIndex: number = 0
|
||||
) {
|
||||
// Convert photo URLs to ContentImage format
|
||||
selectedPhotos = photos.map((url, index) => ({
|
||||
id: `photo-${index}`,
|
||||
image: url,
|
||||
is_primary: index === 0,
|
||||
immich_id: null
|
||||
}));
|
||||
selectedPlaceName = placeName;
|
||||
selectedPlaceAddress = placeAddress;
|
||||
selectedPhotoIndex = startIndex;
|
||||
photoModalOpen = true;
|
||||
}
|
||||
|
||||
function closePhotoModal() {
|
||||
photoModalOpen = false;
|
||||
selectedPhotos = [];
|
||||
selectedPhotoIndex = 0;
|
||||
selectedPlaceName = '';
|
||||
selectedPlaceAddress = '';
|
||||
}
|
||||
|
||||
function renderStars(rating: number | undefined) {
|
||||
if (!rating) return [];
|
||||
|
||||
const stars = [];
|
||||
const fullStars = Math.floor(rating);
|
||||
const hasHalfStar = rating % 1 >= 0.5;
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (i < fullStars) {
|
||||
stars.push({ type: 'full', key: i });
|
||||
} else if (i === fullStars && hasHalfStar) {
|
||||
stars.push({ type: 'half', key: i });
|
||||
} else {
|
||||
stars.push({ type: 'empty', key: i });
|
||||
}
|
||||
}
|
||||
|
||||
return stars;
|
||||
}
|
||||
|
||||
function getPriceLevelDisplay(priceLevel: string | undefined) {
|
||||
if (!priceLevel) return '';
|
||||
const levels: Record<string, string> = {
|
||||
FREE: 'Free',
|
||||
INEXPENSIVE: '$',
|
||||
MODERATE: '$$',
|
||||
EXPENSIVE: '$$$',
|
||||
VERY_EXPENSIVE: '$$$$'
|
||||
};
|
||||
return levels[priceLevel] || '';
|
||||
}
|
||||
|
||||
function formatDistance(km: number) {
|
||||
if (isMetric) {
|
||||
return km < 1 ? `${Math.round(km * 1000)} m` : `${km.toFixed(1)} km`;
|
||||
} else {
|
||||
const miles = km / 1.60934;
|
||||
const feet = miles * 5280;
|
||||
return miles < 0.1 ? `${Math.round(feet)} ft` : `${miles.toFixed(1)} mi`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Photo Modal -->
|
||||
{#if photoModalOpen}
|
||||
<ImageDisplayModal
|
||||
images={selectedPhotos}
|
||||
initialIndex={selectedPhotoIndex}
|
||||
name={selectedPlaceName}
|
||||
location={selectedPlaceAddress}
|
||||
on:close={closePhotoModal}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showLocationModal}
|
||||
<LocationModal
|
||||
{user}
|
||||
{collection}
|
||||
locationToEdit={modalLocationToEdit}
|
||||
on:create={handleLocationCreate}
|
||||
on:save={handleLocationCreate}
|
||||
on:close={closeLocationModal}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showLodgingModal}
|
||||
<LodgingModal
|
||||
{user}
|
||||
{collection}
|
||||
lodgingToEdit={modalLodgingToEdit}
|
||||
on:create={handleLodgingCreate}
|
||||
on:close={closeLodgingModal}
|
||||
on:save={handleLodgingCreate}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Search & Filter Card -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-4">
|
||||
<Compass class="w-8 h-8" />
|
||||
{$t('recomendations.discover_places')}
|
||||
</h2>
|
||||
|
||||
<!-- Search Options -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Location Selector -->
|
||||
{#if locationsWithCoords.length > 0}
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold"
|
||||
>{$t('recomendations.search_around_location')}</span
|
||||
>
|
||||
</label>
|
||||
<select class="select w-full" bind:value={selectedLocationId}>
|
||||
<option value={null}>{$t('recomendations.use_search_instead')}...</option>
|
||||
{#each locationsWithCoords as location}
|
||||
<option value={location.id}>{location.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">{$t('recomendations.search_by_address')}</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={$t('adventures.search_placeholder')}
|
||||
class="input w-full"
|
||||
bind:value={searchQuery}
|
||||
disabled={selectedLocationId !== null}
|
||||
on:keydown={(e) => e.key === 'Enter' && searchRecommendations()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Category Selector -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold">{$t('adventures.category')}</span>
|
||||
</label>
|
||||
<select class="select w-full" bind:value={selectedCategory}>
|
||||
<option value="tourism">🏛️ {$t('recomendations.tourism')}</option>
|
||||
<option value="lodging">🏨 {$t('recomendations.lodging')}</option>
|
||||
<option value="food">🍴 {$t('recomendations.food')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Radius Selector -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text font-semibold"
|
||||
>{$t('recomendations.search_radius_label')} {radiusDisplay}</span
|
||||
>
|
||||
</label>
|
||||
<select class="select w-full" bind:value={radiusValue}>
|
||||
{#each radiusOptions as option}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Toggle -->
|
||||
<div class="flex gap-2 mt-4">
|
||||
<button class="btn btn-primary flex-1" on:click={searchRecommendations} disabled={loading}>
|
||||
{#if loading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{$t('recomendations.searching')}
|
||||
{:else}
|
||||
<MagnifyIcon class="w-5 h-5" />
|
||||
{$t('navbar.search')}
|
||||
{/if}
|
||||
</button>
|
||||
<button class="btn btn-ghost" on:click={() => (showFilters = !showFilters)}>
|
||||
<TuneVariant class="w-5 h-5" />
|
||||
{$t('adventures.filter')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Filters -->
|
||||
{#if showFilters}
|
||||
<div class="divider">{$t('adventures.filter')}</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{$t('recomendations.minimum_rating')}</span>
|
||||
</label>
|
||||
<select class="select select-sm" bind:value={minRating}>
|
||||
<option value={0}>{$t('recomendations.any')}</option>
|
||||
<option value={3}>3+ ⭐</option>
|
||||
<option value={3.5}>3.5+ ⭐</option>
|
||||
<option value={4}>4+ ⭐</option>
|
||||
<option value={4.5}>4.5+ ⭐</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label class="label">
|
||||
<span class="label-text">{$t('recomendations.minimum_reviews')}</span>
|
||||
</label>
|
||||
<select class="select select-sm" bind:value={minReviews}>
|
||||
<option value={0}>{$t('recomendations.any')}</option>
|
||||
<option value={10}>10+</option>
|
||||
<option value={50}>50+</option>
|
||||
<option value={100}>100+</option>
|
||||
<option value={500}>500+</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label cursor-pointer">
|
||||
<span class="label-text">{$t('recomendations.open_now_only')}</span>
|
||||
<input type="checkbox" class="toggle toggle-primary" bind:checked={showOpenOnly} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Error Message -->
|
||||
{#if error}
|
||||
<div class="alert alert-error mt-4">
|
||||
<CloseCircle class="w-6 h-6" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
{#if loading}
|
||||
<div class="flex justify-center py-12">
|
||||
<span class="loading loading-spinner loading-lg text-primary"></span>
|
||||
</div>
|
||||
{:else if filteredResults.length > 0}
|
||||
<!-- Results Stats -->
|
||||
<div class="stats shadow w-full">
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('recomendations.total_results')}</div>
|
||||
<div class="stat-value text-primary">{filteredResults.length}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('recomendations.average_rating')}</div>
|
||||
<div class="stat-value text-secondary">
|
||||
{(
|
||||
filteredResults.filter((r) => r.rating).reduce((sum, r) => sum + (r.rating || 0), 0) /
|
||||
filteredResults.filter((r) => r.rating).length
|
||||
).toFixed(1)}
|
||||
⭐
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">{$t('recomendations.search_radius_label')}</div>
|
||||
<div class="stat-value text-accent">{radiusDisplay}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map View -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-xl mb-4">📍 {$t('recomendations.map_view')}</h3>
|
||||
<div class="rounded-lg overflow-hidden shadow-lg">
|
||||
<MapLibre
|
||||
style={getBasemapUrl()}
|
||||
class="w-full h-[500px]"
|
||||
standardControls
|
||||
center={mapCenter}
|
||||
zoom={mapZoom}
|
||||
>
|
||||
<!-- Collection Locations -->
|
||||
{#each collection.locations as location}
|
||||
{#if location.latitude && location.longitude}
|
||||
<DefaultMarker lngLat={{ lng: location.longitude, lat: location.latitude }}>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="p-2">
|
||||
<a
|
||||
href={`/adventures/${location.id}`}
|
||||
class="text-lg font-bold text-black hover:underline mb-1 block"
|
||||
>
|
||||
{location.name}
|
||||
</a>
|
||||
<p class="text-xs text-black opacity-70">
|
||||
{$t('recomendations.your_location')}
|
||||
</p>
|
||||
</div>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<!-- Recommendation Results -->
|
||||
{#each filteredResults as result}
|
||||
<DefaultMarker lngLat={{ lng: result.longitude, lat: result.latitude }}>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="p-3 max-w-xs">
|
||||
<h4 class="text-base font-bold text-black mb-2">{result.name}</h4>
|
||||
{#if result.rating}
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="flex text-yellow-500">
|
||||
{#each renderStars(result.rating) as star}
|
||||
{#if star.type === 'full'}
|
||||
<Star class="w-4 h-4" />
|
||||
{:else if star.type === 'half'}
|
||||
<StarHalfFull class="w-4 h-4" />
|
||||
{:else}
|
||||
<StarOutline class="w-4 h-4" />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<span class="text-sm text-black">{result.rating.toFixed(1)}</span>
|
||||
{#if result.review_count}
|
||||
<span class="text-xs text-black opacity-70">
|
||||
({result.review_count})
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if result.address}
|
||||
<p class="text-xs text-black opacity-70 mb-2">📍 {result.address}</p>
|
||||
{/if}
|
||||
<p class="text-xs text-black font-semibold">
|
||||
🚶 {formatDistance(result.distance_km)}
|
||||
{$t('recomendations.away')}
|
||||
</p>
|
||||
</div>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
{/each}
|
||||
</MapLibre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{#each filteredResults as result}
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<!-- Photo Carousel -->
|
||||
{#if result.photos && result.photos.length > 0}
|
||||
<figure class="relative h-48 cursor-pointer">
|
||||
<button
|
||||
class="w-full h-full"
|
||||
on:click={() =>
|
||||
openPhotoModal(result.photos || [], result.name, result.address || '')}
|
||||
>
|
||||
<img src={result.photos[0]} alt={result.name} class="w-full h-full object-cover" />
|
||||
</button>
|
||||
{#if result.photos.length > 1}
|
||||
<div
|
||||
class="badge badge-neutral badge-sm absolute bottom-2 right-2 bg-black/70 text-white border-none"
|
||||
>
|
||||
📷 {result.photos.length}
|
||||
</div>
|
||||
{/if}
|
||||
</figure>
|
||||
{:else}
|
||||
<div
|
||||
class="bg-gradient-to-br from-primary/20 to-secondary/20 h-48 flex items-center justify-center"
|
||||
>
|
||||
<MapMarker class="w-16 h-16 opacity-30" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="card-body p-4">
|
||||
<!-- Title & Type -->
|
||||
<h3 class="card-title text-lg">
|
||||
{result.name}
|
||||
{#if result.is_open_now}
|
||||
<span class="badge badge-success badge-sm">{$t('recomendations.open')}</span>
|
||||
{/if}
|
||||
</h3>
|
||||
|
||||
<!-- Rating -->
|
||||
{#if result.rating}
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<div class="flex text-yellow-500">
|
||||
{#each renderStars(result.rating) as star}
|
||||
{#if star.type === 'full'}
|
||||
<Star class="w-4 h-4" />
|
||||
{:else if star.type === 'half'}
|
||||
<StarHalfFull class="w-4 h-4" />
|
||||
{:else}
|
||||
<StarOutline class="w-4 h-4" />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
<span class="text-sm font-semibold">{result.rating.toFixed(1)}</span>
|
||||
{#if result.review_count}
|
||||
<span class="text-xs opacity-70">
|
||||
<AccountMultiple class="w-3 h-3 inline" />
|
||||
{result.review_count}
|
||||
</span>
|
||||
{/if}
|
||||
{#if result.quality_score}
|
||||
<div class="badge badge-primary badge-sm ml-auto">
|
||||
Score: {result.quality_score}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Address -->
|
||||
{#if result.address}
|
||||
<p class="text-sm opacity-70 line-clamp-2">
|
||||
<MapMarker class="w-4 h-4 inline" />
|
||||
{result.address}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<!-- Distance & Price -->
|
||||
<div class="flex gap-2 flex-wrap mt-2">
|
||||
<div class="badge badge-outline badge-sm">
|
||||
🚶 {formatDistance(result.distance_km)}
|
||||
</div>
|
||||
{#if result.price_level}
|
||||
<div class="badge badge-outline badge-sm">
|
||||
<CurrencyUsd class="w-3 h-3" />
|
||||
{getPriceLevelDisplay(result.price_level)}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="badge badge-ghost badge-sm">
|
||||
{result.source === 'google' ? '🔍 Google' : '🗺️ OSM'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
{#if result.description}
|
||||
<p class="text-sm mt-2 line-clamp-2 opacity-80">
|
||||
{result.description}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<!-- Opening Hours -->
|
||||
{#if result.opening_hours && result.opening_hours.length > 0}
|
||||
<div class="collapse collapse-arrow bg-base-200 mt-2">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title text-sm font-medium">
|
||||
<ClockOutline class="w-4 h-4 inline" />
|
||||
{$t('recomendations.hours')}
|
||||
</div>
|
||||
<div class="collapse-content text-xs">
|
||||
{#each result.opening_hours as hours}
|
||||
<p>{hours}</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="card-actions justify-end mt-4">
|
||||
{#if result.phone_number}
|
||||
<a href={`tel:${result.phone_number}`} class="btn btn-sm btn-neutral-100">
|
||||
<Phone class="w-4 h-4" />
|
||||
</a>
|
||||
{/if}
|
||||
{#if result.website}
|
||||
<a
|
||||
href={result.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-sm btn-neutral-100"
|
||||
>
|
||||
<Web class="w-4 h-4" />
|
||||
</a>
|
||||
{/if}
|
||||
{#if result.google_maps_uri}
|
||||
<a
|
||||
href={result.google_maps_uri}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-sm btn-primary"
|
||||
>
|
||||
View on Maps
|
||||
<OpenInNew class="w-4 h-4" />
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<!-- Create from recommendation -->
|
||||
<button
|
||||
class="btn btn-sm btn-outline"
|
||||
on:click={() => openCreateLocationFromResult(result)}
|
||||
>
|
||||
{$t('recomendations.add_location')}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-ghost"
|
||||
on:click={() => openCreateLodgingFromResult(result)}
|
||||
>
|
||||
{$t('recomendations.add_lodging')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if !loading && results.length === 0 && !error}
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body text-center py-12">
|
||||
<MagnifyIcon class="w-24 h-24 mx-auto opacity-30 mb-4" />
|
||||
<h3 class="text-2xl font-bold mb-2">{$t('recomendations.no_results_yet')}</h3>
|
||||
<p class="opacity-70">{$t('recomendations.select_location_or_query')}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -526,46 +526,6 @@ export type Pin = {
|
||||
category: Category | null;
|
||||
};
|
||||
|
||||
export type Recommendation = {
|
||||
id: string;
|
||||
external_id: string;
|
||||
source: 'google' | 'osm';
|
||||
name: string;
|
||||
description: string | null;
|
||||
latitude: number;
|
||||
longitude: number;
|
||||
address: string | null;
|
||||
distance_km: number;
|
||||
rating: number | null;
|
||||
review_count: number | null;
|
||||
price_level: string | null;
|
||||
types: string[];
|
||||
primary_type: string | null;
|
||||
business_status: string | null;
|
||||
is_open_now: boolean | null;
|
||||
opening_hours: string[] | null;
|
||||
phone_number: string | null;
|
||||
website: string | null;
|
||||
google_maps_url: string | null;
|
||||
photos: string[];
|
||||
is_verified: boolean;
|
||||
quality_score: number;
|
||||
// OSM-specific fields
|
||||
osm_type?: string;
|
||||
wikipedia?: string;
|
||||
stars?: string;
|
||||
};
|
||||
|
||||
export type RecommendationResponse = {
|
||||
count: number;
|
||||
results: Recommendation[];
|
||||
sources_used: {
|
||||
google: number;
|
||||
osm: number;
|
||||
total_before_dedup: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type ChatProviderCatalogEntry = {
|
||||
id: string;
|
||||
label: string;
|
||||
|
||||
@@ -753,7 +753,6 @@
|
||||
},
|
||||
"recomendations": {
|
||||
"food": "طعام",
|
||||
"recommendations": "التوصيات",
|
||||
"tourism": "السياحة",
|
||||
"any": "أي",
|
||||
"average_rating": "متوسط التقييم",
|
||||
|
||||
@@ -988,7 +988,6 @@
|
||||
"try_different_date": "Versuchen Sie ein anderes Datum"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Empfehlungen",
|
||||
"food": "Essen",
|
||||
"tourism": "Tourismus",
|
||||
"any": "Beliebig",
|
||||
|
||||
@@ -1085,7 +1085,6 @@
|
||||
"google_maps_integration_desc_no_staff": "This integration must first be enabled by the admin on this server."
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Recommendations",
|
||||
"food": "Food",
|
||||
"tourism": "Tourism",
|
||||
"discover_places": "Discover Places",
|
||||
|
||||
@@ -956,7 +956,6 @@
|
||||
"try_different_date": "Prueba una fecha diferente"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Recomendaciones",
|
||||
"food": "Comida",
|
||||
"tourism": "Turismo",
|
||||
"any": "Cualquier",
|
||||
|
||||
@@ -956,7 +956,6 @@
|
||||
"try_different_date": "Essayez une date différente"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Recommandations",
|
||||
"food": "Nourriture",
|
||||
"tourism": "Tourisme",
|
||||
"any": "N'importe lequel",
|
||||
|
||||
@@ -983,7 +983,6 @@
|
||||
"google_maps_integration_desc_no_staff": "Ezt az integrációt először a szerver adminisztrátorának kell engedélyeznie."
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Ajánlások",
|
||||
"food": "Étel",
|
||||
"tourism": "Turizmus",
|
||||
"any": "Bármilyen",
|
||||
|
||||
@@ -956,7 +956,6 @@
|
||||
"try_different_date": "Prova una data diversa"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Raccomandazioni",
|
||||
"food": "Cibo",
|
||||
"tourism": "Turismo",
|
||||
"any": "Qualunque",
|
||||
|
||||
@@ -753,7 +753,6 @@
|
||||
},
|
||||
"recomendations": {
|
||||
"food": "食べ物",
|
||||
"recommendations": "推奨事項",
|
||||
"tourism": "観光",
|
||||
"any": "どれでも",
|
||||
"average_rating": "平均評価",
|
||||
|
||||
@@ -692,7 +692,6 @@
|
||||
"public_location_experiences": "공개 위치 경험"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "권장 사항",
|
||||
"food": "음식",
|
||||
"tourism": "관광 여행",
|
||||
"any": "어느",
|
||||
|
||||
@@ -956,7 +956,6 @@
|
||||
"try_different_date": "Probeer een andere datum"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Aanbevelingen",
|
||||
"food": "Voedsel",
|
||||
"tourism": "Toerisme",
|
||||
"any": "Elk",
|
||||
|
||||
@@ -979,7 +979,6 @@
|
||||
"try_different_date": "Prøv en annen dato"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Anbefalinger",
|
||||
"food": "Mat",
|
||||
"tourism": "Turisme",
|
||||
"any": "Noen",
|
||||
|
||||
@@ -956,7 +956,6 @@
|
||||
"try_different_date": "Wypróbuj inną datę"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Zalecenia",
|
||||
"food": "Żywność",
|
||||
"tourism": "Turystyka",
|
||||
"any": "Każdy",
|
||||
|
||||
@@ -753,7 +753,6 @@
|
||||
},
|
||||
"recomendations": {
|
||||
"food": "Comida",
|
||||
"recommendations": "Recomendações",
|
||||
"tourism": "Turismo",
|
||||
"any": "Qualquer",
|
||||
"average_rating": "Avaliação média",
|
||||
|
||||
@@ -845,7 +845,6 @@
|
||||
"no_results_yet": "Încă nu există rezultate",
|
||||
"open": "Deschide",
|
||||
"open_now_only": "Deschide numai acum",
|
||||
"recommendations": "Recomandări",
|
||||
"search_around_location": "Căutați în jurul locației",
|
||||
"search_by_address": "Căutați după adresă",
|
||||
"search_radius_label": "Raza de căutare:",
|
||||
|
||||
@@ -983,7 +983,6 @@
|
||||
"google_maps_integration_desc_no_staff": "Эта интеграция должна сначала быть включена администратором на этом сервере."
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Рекомендации",
|
||||
"food": "Еда",
|
||||
"tourism": "Туризм",
|
||||
"any": "Любой",
|
||||
|
||||
@@ -983,7 +983,6 @@
|
||||
"google_maps_integration_desc_no_staff": "Túto integráciu musí najprv povoliť administrátor na tomto serveri."
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Odporúčania",
|
||||
"food": "Jedlo",
|
||||
"tourism": "Turizmus",
|
||||
"any": "Akékoľvek",
|
||||
|
||||
@@ -956,7 +956,6 @@
|
||||
"try_different_date": "Prova ett annat datum"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Rekommendationer",
|
||||
"food": "Mat",
|
||||
"tourism": "Turism",
|
||||
"any": "Några",
|
||||
|
||||
@@ -986,7 +986,6 @@
|
||||
"google_maps_integration_desc_no_staff": "Bu entegrasyon öncelikle bu sunucudaki yönetici tarafından etkinleştirilmelidir."
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "Önerilenler",
|
||||
"food": "Yemek",
|
||||
"tourism": "Turizm",
|
||||
"any": "Herhangi",
|
||||
|
||||
@@ -753,7 +753,6 @@
|
||||
},
|
||||
"recomendations": {
|
||||
"food": "харчування",
|
||||
"recommendations": "Рекомендації",
|
||||
"tourism": "Туризм",
|
||||
"any": "Будь-який",
|
||||
"average_rating": "Середній рейтинг",
|
||||
|
||||
@@ -956,7 +956,6 @@
|
||||
"try_different_date": "尝试其他日期"
|
||||
},
|
||||
"recomendations": {
|
||||
"recommendations": "建议",
|
||||
"food": "食物",
|
||||
"tourism": "旅游",
|
||||
"average_rating": "平均评分",
|
||||
|
||||
@@ -1,12 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type {
|
||||
Collection,
|
||||
ContentImage,
|
||||
Location,
|
||||
Collaborator,
|
||||
Lodging,
|
||||
CollectionItineraryItem
|
||||
} from '$lib/types';
|
||||
import type { Collection, ContentImage, Location, Collaborator, Lodging } from '$lib/types';
|
||||
import { onMount } from 'svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { goto } from '$app/navigation';
|
||||
@@ -25,8 +18,6 @@
|
||||
import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
|
||||
import CollectionAllItems from '$lib/components/collections/CollectionAllItems.svelte';
|
||||
import CollectionItineraryPlanner from '$lib/components/collections/CollectionItineraryPlanner.svelte';
|
||||
import CollectionRecommendationView from '$lib/components/CollectionRecommendationView.svelte';
|
||||
import AITravelChat from '$lib/components/AITravelChat.svelte';
|
||||
import CollectionMap from '$lib/components/collections/CollectionMap.svelte';
|
||||
import CollectionStats from '$lib/components/collections/CollectionStats.svelte';
|
||||
import LocationLink from '$lib/components/LocationLink.svelte';
|
||||
@@ -36,7 +27,6 @@
|
||||
import FormatListBulleted from '~icons/mdi/format-list-bulleted';
|
||||
import Timeline from '~icons/mdi/timeline';
|
||||
import MapIcon from '~icons/mdi/map';
|
||||
import Lightbulb from '~icons/mdi/lightbulb';
|
||||
import ChartBar from '~icons/mdi/chart-bar';
|
||||
import Plus from '~icons/mdi/plus';
|
||||
import { addToast } from '$lib/toasts';
|
||||
@@ -97,115 +87,8 @@
|
||||
collection = { ...collection }; // trigger reactivity so cost summary & UI refresh immediately
|
||||
}
|
||||
|
||||
type AssistantItemAddedDetail = {
|
||||
location: Location;
|
||||
itineraryItem: CollectionItineraryItem;
|
||||
date: string;
|
||||
};
|
||||
|
||||
function handleAssistantItemAdded(event: CustomEvent<AssistantItemAddedDetail>) {
|
||||
const { location, itineraryItem } = event.detail;
|
||||
|
||||
upsertCollectionItem('locations', location);
|
||||
|
||||
if (!itineraryItem || itineraryItem.id === undefined || itineraryItem.id === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const items = collection.itinerary || [];
|
||||
const exists = items.some((entry) => String(entry.id) === String(itineraryItem.id));
|
||||
collection = {
|
||||
...collection,
|
||||
itinerary: exists
|
||||
? items.map((entry) =>
|
||||
String(entry.id) === String(itineraryItem.id) ? itineraryItem : entry
|
||||
)
|
||||
: [...items, itineraryItem]
|
||||
};
|
||||
}
|
||||
|
||||
// Helper to upload prefilled images (temp ids starting with 'rec-') sequentially
|
||||
async function importPrefilledImagesForItem(
|
||||
item: any,
|
||||
contentType: string,
|
||||
collectionKey: 'locations' | 'lodging'
|
||||
) {
|
||||
if (!item || !item.images || item.images.length === 0) return;
|
||||
const prefilled = item.images.filter((img: any) => img.id && String(img.id).startsWith('rec-'));
|
||||
if (prefilled.length === 0) return;
|
||||
|
||||
// If we don't have a server id yet, retry a few times because the modal flow may set it asynchronously.
|
||||
let attempts = 0;
|
||||
const maxAttempts = 6;
|
||||
const attemptDelayMs = 2000;
|
||||
|
||||
while ((!item.id || String(item.id).trim() === '') && attempts < maxAttempts) {
|
||||
attempts += 1;
|
||||
console.debug(`Waiting for server id for item (attempt ${attempts}/${maxAttempts})`);
|
||||
// Try to find an updated item in the collection by matching name and collection membership
|
||||
const candidates = (collection as any)[collectionKey] || [];
|
||||
const match = candidates.find(
|
||||
(c: any) =>
|
||||
c.name === item.name &&
|
||||
(c.collections || c.collection) &&
|
||||
String(c.collections || c.collection || '') === String(collection.id)
|
||||
);
|
||||
if (match && match.id) {
|
||||
item.id = match.id;
|
||||
break;
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, attemptDelayMs));
|
||||
}
|
||||
|
||||
if (!item.id || String(item.id).trim() === '') {
|
||||
console.warn('Unable to obtain server id for item; skipping image import for', item);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const img of prefilled) {
|
||||
try {
|
||||
const res = await fetch(img.image);
|
||||
if (!res.ok) throw new Error('Failed to fetch image');
|
||||
const blob = await res.blob();
|
||||
const file = new File([blob], 'image.jpg', { type: blob.type || 'image/jpeg' });
|
||||
const form = new FormData();
|
||||
form.append('image', file);
|
||||
form.append('object_id', item.id);
|
||||
form.append('content_type', contentType || 'location');
|
||||
|
||||
const upload = await fetch('/locations?/image', {
|
||||
method: 'POST',
|
||||
body: form,
|
||||
credentials: 'same-origin'
|
||||
});
|
||||
if (!upload.ok) throw new Error('Upload failed');
|
||||
const newData = await upload.json();
|
||||
const newImage = newData && newData.data ? newData.data : newData;
|
||||
|
||||
// Replace temporary image in the item and in the collection
|
||||
item.images = item.images.map((i: any) =>
|
||||
String(i.id) === String(img.id)
|
||||
? {
|
||||
id: newImage.id,
|
||||
image: newImage.image,
|
||||
is_primary: newImage.is_primary || false,
|
||||
immich_id: newImage.immich_id || null
|
||||
}
|
||||
: i
|
||||
);
|
||||
|
||||
// Upsert the updated item back into the collection to refresh UI bindings
|
||||
upsertCollectionItem(collectionKey, item);
|
||||
addToast('success', $t('adventures.image_upload_success'));
|
||||
} catch (err) {
|
||||
console.error('Error importing prefilled image for item:', err);
|
||||
addToast('error', $t('adventures.image_upload_error'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// View state from URL params
|
||||
type ViewType = 'all' | 'itinerary' | 'map' | 'calendar' | 'recommendations' | 'stats';
|
||||
type ViewType = 'all' | 'itinerary' | 'map' | 'calendar' | 'stats';
|
||||
let currentView: ViewType = 'itinerary';
|
||||
|
||||
// Determine if this is a folder view (no dates) or itinerary view (has dates)
|
||||
@@ -240,7 +123,6 @@
|
||||
) ||
|
||||
false,
|
||||
calendar: !isFolderView,
|
||||
recommendations: true, // may be overridden by permission check below
|
||||
stats: true
|
||||
};
|
||||
|
||||
@@ -253,7 +135,7 @@
|
||||
const view = $page.url.searchParams.get('view') as ViewType;
|
||||
if (
|
||||
view &&
|
||||
['all', 'itinerary', 'map', 'calendar', 'recommendations', 'stats'].includes(view) &&
|
||||
['all', 'itinerary', 'map', 'calendar', 'stats'].includes(view) &&
|
||||
availableViews[view]
|
||||
) {
|
||||
currentView = view;
|
||||
@@ -287,55 +169,6 @@
|
||||
return false;
|
||||
})();
|
||||
|
||||
// Enforce recommendations visibility only for owner/shared users
|
||||
$: availableViews.recommendations = !!canModifyCollection;
|
||||
|
||||
function deriveCollectionDestination(current: Collection | null): string | undefined {
|
||||
if (!current?.locations?.length) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const maxStops = 4;
|
||||
const stops: string[] = [];
|
||||
const seen = new Set<string>();
|
||||
|
||||
for (const loc of current.locations) {
|
||||
const cityName = loc.city?.name?.trim();
|
||||
const countryName = loc.country?.name?.trim();
|
||||
|
||||
if (cityName || countryName) {
|
||||
const label =
|
||||
cityName && countryName ? `${cityName}, ${countryName}` : cityName || countryName;
|
||||
if (!label) continue;
|
||||
const key = `geo:${(cityName || '').toLowerCase()}|${(countryName || '').toLowerCase()}`;
|
||||
if (seen.has(key)) continue;
|
||||
seen.add(key);
|
||||
stops.push(label);
|
||||
continue;
|
||||
}
|
||||
|
||||
const fallbackName = (loc.location || loc.name || '').trim();
|
||||
if (!fallbackName) continue;
|
||||
const key = `name:${fallbackName.toLowerCase()}`;
|
||||
if (seen.has(key)) continue;
|
||||
seen.add(key);
|
||||
stops.push(fallbackName);
|
||||
}
|
||||
|
||||
if (stops.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const summarizedStops = stops.slice(0, maxStops).join('; ');
|
||||
if (stops.length > maxStops) {
|
||||
return `${summarizedStops}; +${stops.length - maxStops} more`;
|
||||
}
|
||||
|
||||
return summarizedStops;
|
||||
}
|
||||
|
||||
$: collectionDestination = deriveCollectionDestination(collection);
|
||||
|
||||
// Build calendar events from collection visits
|
||||
type TimezoneMode = 'event' | 'local';
|
||||
|
||||
@@ -763,6 +596,14 @@
|
||||
isImageModalOpen = true;
|
||||
}
|
||||
|
||||
function createImageKeydownHandler(index: number) {
|
||||
return (event: KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
openImageModal(index);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function formatDate(dateString: string | null) {
|
||||
if (!dateString) return '';
|
||||
return DateTime.fromISO(dateString).toLocaleString(DateTime.DATE_MED, { locale: 'en-GB' });
|
||||
@@ -1209,16 +1050,6 @@
|
||||
<span class="hidden sm:inline">{$t('navbar.calendar')}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if availableViews.recommendations}
|
||||
<button
|
||||
class="btn join-item"
|
||||
class:btn-active={currentView === 'recommendations'}
|
||||
on:click={() => switchView('recommendations')}
|
||||
>
|
||||
<Lightbulb class="w-5 h-5 sm:mr-2" aria-hidden="true" />
|
||||
<span class="hidden sm:inline">{$t('recomendations.recommendations')}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if availableViews.stats}
|
||||
<button
|
||||
class="btn join-item"
|
||||
@@ -1337,22 +1168,6 @@
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Recommendations View -->
|
||||
{#if currentView === 'recommendations'}
|
||||
<div class="space-y-8">
|
||||
<AITravelChat
|
||||
embedded={true}
|
||||
collectionId={collection.id}
|
||||
collectionName={collection.name}
|
||||
startDate={collection.start_date || undefined}
|
||||
endDate={collection.end_date || undefined}
|
||||
destination={collectionDestination}
|
||||
on:itemAdded={handleAssistantItemAdded}
|
||||
/>
|
||||
<CollectionRecommendationView bind:collection user={data.user} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right Column - Sidebar -->
|
||||
@@ -1591,7 +1406,7 @@
|
||||
class="aspect-square bg-cover bg-center rounded-lg cursor-pointer transition-transform duration-200 group-hover:scale-105"
|
||||
style="background-image: url({image.image})"
|
||||
on:click={() => openImageModal(index)}
|
||||
on:keydown={(e) => e.key === 'Enter' && openImageModal(index)}
|
||||
on:keydown={createImageKeydownHandler(index)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
></div>
|
||||
|
||||
Reference in New Issue
Block a user