Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-21 13:59:36 +02:00
Code Issues Releases Activity

feat: add GPX file support in AdventureModal and improve map marker handling

Browse source
This commit is contained in:
Sean Morley 2025-01-21 19:40:56 -05:00
parent 6e28e5234e
commit 3f30819d25
2 changed files with 45 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/AdventureModal.svelte
View file

@ -990,7 +990,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
type="file" type="file"
id="fileInput" id="fileInput"
class="file-input file-input-bordered w-full max-w-xs" class="file-input file-input-bordered w-full max-w-xs"
accept="image/*,video/*,audio/*,application/pdf" accept="image/*,video/*,audio/*,application/pdf,.gpx"
bind:this={fileInput} bind:this={fileInput}
/> />

84
frontend/src/routes/adventures/[id]/+page.svelte
View file

@ -99,7 +99,7 @@
} else { } else {
notFound = true; notFound = true;
} }
getGpxFiles(); await getGpxFiles();
}); });
function saveEdit(event: CustomEvent<Adventure>) { function saveEdit(event: CustomEvent<Adventure>) {
@ -379,23 +379,25 @@
</div> </div>
{/if} {/if}
</div> </div>
{#if adventure.longitude && adventure.latitude} {#if (adventure.longitude && adventure.latitude) || geojson}
<div class="grid md:grid-cols-2 gap-4"> {#if adventure.longitude && adventure.latitude}
<div> <div class="grid md:grid-cols-2 gap-4">
<p class="text-sm text-muted-foreground">{$t('adventures.latitude')}</p> <div>
<p class="text-base font-medium">{adventure.latitude}° N</p> <p class="text-sm text-muted-foreground">{$t('adventures.latitude')}</p>
<p class="text-base font-medium">{adventure.latitude}° N</p>
</div>
<div>
<p class="text-sm text-muted-foreground">{$t('adventures.longitude')}</p>
<p class="text-base font-medium">{adventure.longitude}° W</p>
</div>
</div> </div>
<div> {/if}
<p class="text-sm text-muted-foreground">{$t('adventures.longitude')}</p>
<p class="text-base font-medium">{adventure.longitude}° W</p>
</div>
</div>
<MapLibre <MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json" style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="flex items-center self-center justify-center aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg" class="flex items-center self-center justify-center aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 rounded-lg"
standardControls standardControls
center={{ lng: adventure.longitude, lat: adventure.latitude }} center={{ lng: adventure.longitude || 0, lat: adventure.latitude || 0 }}
zoom={12} zoom={adventure.longitude ? 12 : 1}
> >
<!-- use the geojson to make a line --> <!-- use the geojson to make a line -->
{#if geojson} {#if geojson}
@ -415,34 +417,36 @@
it would also work to just use on:click on the MapLibre component itself. --> it would also work to just use on:click on the MapLibre component itself. -->
<!-- <MapEvents on:click={addMarker} /> --> <!-- <MapEvents on:click={addMarker} /> -->
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}> {#if adventure.longitude && adventure.latitude}
<Popup openOn="click" offset={[0, -10]}> <DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
<div class="text-lg text-black font-bold">{adventure.name}</div> <Popup openOn="click" offset={[0, -10]}>
<p class="font-semibold text-black text-md"> <div class="text-lg text-black font-bold">{adventure.name}</div>
{adventure.category?.display_name + ' ' + adventure.category?.icon} <p class="font-semibold text-black text-md">
</p> {adventure.category?.display_name + ' ' + adventure.category?.icon}
{#if 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> </p>
{/if} {#if adventure.visits.length > 0}
</Popup> <p class="text-black text-sm">
</DefaultMarker> {#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}
</Popup>
</DefaultMarker>
{/if}
</MapLibre> </MapLibre>
{/if} {/if}
</div> </div>