From 3f30819d25dac9de7d6bf5057c80c34460bb21f5 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 21 Jan 2025 19:40:56 -0500
Subject: [PATCH] feat: add GPX file support in AdventureModal and improve map
 marker handling

---
 .../src/lib/components/AdventureModal.svelte  |  2 +-
 .../src/routes/adventures/[id]/+page.svelte   | 84 ++++++++++---------
 2 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/frontend/src/lib/components/AdventureModal.svelte b/frontend/src/lib/components/AdventureModal.svelte
index e734744..cb5a920 100644
--- a/frontend/src/lib/components/AdventureModal.svelte
+++ b/frontend/src/lib/components/AdventureModal.svelte
@@ -990,7 +990,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
 										type="file"
 										id="fileInput"
 										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}
 									/>
 
diff --git a/frontend/src/routes/adventures/[id]/+page.svelte b/frontend/src/routes/adventures/[id]/+page.svelte
index 8d3ea0c..fb0528f 100644
--- a/frontend/src/routes/adventures/[id]/+page.svelte
+++ b/frontend/src/routes/adventures/[id]/+page.svelte
@@ -99,7 +99,7 @@
 		} else {
 			notFound = true;
 		}
-		getGpxFiles();
+		await getGpxFiles();
 	});
 
 	function saveEdit(event: CustomEvent<Adventure>) {
@@ -379,23 +379,25 @@
 									</div>
 								{/if}
 							</div>
-							{#if adventure.longitude && adventure.latitude}
-								<div class="grid md:grid-cols-2 gap-4">
-									<div>
-										<p class="text-sm text-muted-foreground">{$t('adventures.latitude')}</p>
-										<p class="text-base font-medium">{adventure.latitude}° N</p>
+							{#if (adventure.longitude && adventure.latitude) || geojson}
+								{#if adventure.longitude && adventure.latitude}
+									<div class="grid md:grid-cols-2 gap-4">
+										<div>
+											<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>
-										<p class="text-sm text-muted-foreground">{$t('adventures.longitude')}</p>
-										<p class="text-base font-medium">{adventure.longitude}° W</p>
-									</div>
-								</div>
+								{/if}
 								<MapLibre
 									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"
 									standardControls
-									center={{ lng: adventure.longitude, lat: adventure.latitude }}
-									zoom={12}
+									center={{ lng: adventure.longitude || 0, lat: adventure.latitude || 0 }}
+									zoom={adventure.longitude ? 12 : 1}
 								>
 									<!-- use the geojson to make a line -->
 									{#if geojson}
@@ -415,34 +417,36 @@
   it would also work to just use on:click on the MapLibre component itself. -->
 									<!-- <MapEvents on:click={addMarker} /> -->
 
-									<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
-										<Popup openOn="click" offset={[0, -10]}>
-											<div class="text-lg text-black font-bold">{adventure.name}</div>
-											<p class="font-semibold text-black text-md">
-												{adventure.category?.display_name + ' ' + adventure.category?.icon}
-											</p>
-											{#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}
+									{#if adventure.longitude && adventure.latitude}
+										<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
+											<Popup openOn="click" offset={[0, -10]}>
+												<div class="text-lg text-black font-bold">{adventure.name}</div>
+												<p class="font-semibold text-black text-md">
+													{adventure.category?.display_name + ' ' + adventure.category?.icon}
 												</p>
-											{/if}
-										</Popup>
-									</DefaultMarker>
+												{#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>
+												{/if}
+											</Popup>
+										</DefaultMarker>
+									{/if}
 								</MapLibre>
 							{/if}
 						</div>