Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-21 05:49:37 +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}
/> />

10
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,6 +379,7 @@
</div> </div>
{/if} {/if}
</div> </div>
{#if (adventure.longitude && adventure.latitude) || geojson}
{#if adventure.longitude && adventure.latitude} {#if adventure.longitude && adventure.latitude}
<div class="grid md:grid-cols-2 gap-4"> <div class="grid md:grid-cols-2 gap-4">
<div> <div>
@ -390,12 +391,13 @@
<p class="text-base font-medium">{adventure.longitude}° W</p> <p class="text-base font-medium">{adventure.longitude}° W</p>
</div> </div>
</div> </div>
{/if}
<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,6 +417,7 @@
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} /> -->
{#if adventure.longitude && adventure.latitude}
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}> <DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
<Popup openOn="click" offset={[0, -10]}> <Popup openOn="click" offset={[0, -10]}>
<div class="text-lg text-black font-bold">{adventure.name}</div> <div class="text-lg text-black font-bold">{adventure.name}</div>
@ -443,6 +446,7 @@
{/if} {/if}
</Popup> </Popup>
</DefaultMarker> </DefaultMarker>
{/if}
</MapLibre> </MapLibre>
{/if} {/if}
</div> </div>