Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-04 04:35:19 +02:00
Code Issues Releases Activity

feat: Enhance adventure marker popup with image carousel and visit details

Browse source
This commit is contained in:
Sean Morley 2025-01-23 17:51:56 -05:00
parent 37fca9ba1d
commit 6a5bfbda2d
1 changed files with 48 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -33,6 +33,8 @@
import ChecklistModal from '$lib/components/ChecklistModal.svelte'; import ChecklistModal from '$lib/components/ChecklistModal.svelte';
import AdventureModal from '$lib/components/AdventureModal.svelte'; import AdventureModal from '$lib/components/AdventureModal.svelte';
import TransportationModal from '$lib/components/TransportationModal.svelte'; import TransportationModal from '$lib/components/TransportationModal.svelte';
import CardCarousel from '$lib/components/CardCarousel.svelte';
import { goto } from '$app/navigation';
export let data: PageData; export let data: PageData;
console.log(data); console.log(data);
@ -840,16 +842,55 @@
> >
{#each adventures as adventure} {#each adventures as adventure}
{#if adventure.longitude && adventure.latitude} {#if adventure.longitude && adventure.latitude}
<Marker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}> <Marker
lngLat={[adventure.longitude, adventure.latitude]}
class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 {adventure.is_visited
? 'bg-red-300'
: 'bg-blue-300'} text-black focus:outline-6 focus:outline-black"
on:click={togglePopup}
>
<span class="text-xl"> <span class="text-xl">
{adventure.category?.icon} {adventure.category?.icon}
</span> </span>
<Popup openOn="click" offset={[0, -10]}> {#if isPopupOpen}
<Popup openOn="click" offset={[0, -10]} on:close={() => (isPopupOpen = false)}>
{#if adventure.images && adventure.images.length > 0}
<CardCarousel adventures={[adventure]} />
{/if}
<div class="text-lg text-black font-bold">{adventure.name}</div> <div class="text-lg text-black font-bold">{adventure.name}</div>
<p class="font-semibold text-black text-md">
{adventure.is_visited ? $t('adventures.visited') : $t('adventures.planned')}
</p>
<p class="font-semibold text-black text-md"> <p class="font-semibold text-black text-md">
{adventure.category?.display_name + ' ' + adventure.category?.icon} {adventure.category?.display_name + ' ' + adventure.category?.icon}
</p> </p>
{#if adventure.visits && adventure.visits.length > 0}
<p class="text-black text-sm">
{#each adventure.visits as visit}
{visit.start_date
? new Date(visit.start_date).toLocaleDateString(undefined, {
timeZone: 'UTC'
})
: ''}
{visit.end_date &&
visit.end_date !== '' &&
visit.end_date !== visit.start_date
? ' - ' +
new Date(visit.end_date).toLocaleDateString(undefined, {
timeZone: 'UTC'
})
: ''}
<br />
{/each}
</p>
{/if}
<button
class="btn btn-neutral btn-wide btn-sm mt-4"
on:click={() => goto(`/adventures/${adventure.id}`)}
>{$t('map.view_details')}</button
>
</Popup> </Popup>
{/if}
</Marker> </Marker>
{/if} {/if}
{/each} {/each}