Fix location saving

frontend/src/lib/components/EditAdventure.svelte

@@ -18,6 +18,7 @@
 	let image: File;
 
 	import MapMarker from '~icons/mdi/map-marker';
+	import Map from '~icons/mdi/map';
 	import Calendar from '~icons/mdi/calendar';
 	import Notebook from '~icons/mdi/notebook';
 	import ClipboardList from '~icons/mdi/clipboard-list';
@@ -110,10 +111,8 @@
 		isImageFetcherOpen = false;
 	}
 
-	function setLongLat(event: CustomEvent<[number, number]>) {
+	function setLongLat(event: CustomEvent<Adventure>) {
 		console.log(event.detail);
-		adventureToEdit.latitude = event.detail[1];
-		adventureToEdit.longitude = event.detail[0];
 		isPointModalOpen = false;
 	}
 </script>
@@ -121,8 +120,6 @@
 {#if isPointModalOpen}
 	<PointSelectionModal
 		bind:adventure={adventureToEdit}
-		longitude={adventureToEdit.longitude}
-		latitude={adventureToEdit.latitude}
 		on:close={() => (isPointModalOpen = false)}
 		on:submit={setLongLat}
 		query={adventureToEdit.name}
@@ -191,7 +188,10 @@
 							class="btn btn-secondary"
 							on:click={() => (isPointModalOpen = true)}
 						>
-							{adventureToEdit.latitude && adventureToEdit.longitude ? 'Change' : 'Select'}
+							<Map class="inline-block w-6 h-6" />{adventureToEdit.latitude &&
+							adventureToEdit.longitude
+								? 'Change'
+								: 'Select'}
 							Location</button
 						>
 					</div>

frontend/src/lib/components/NewAdventure.svelte

@@ -161,6 +161,7 @@
 
 	function setLongLat(event: CustomEvent<Adventure>) {
 		console.log(event.detail);
+		isPointModalOpen = false;
 	}
 </script>
 
@@ -170,8 +171,6 @@
 		on:close={() => (isPointModalOpen = false)}
 		on:submit={setLongLat}
 		bind:adventure={newAdventure}
-		latitude={newAdventure.latitude || null}
-		longitude={newAdventure.longitude || null}
 	/>
 {/if}
 

frontend/src/lib/components/PointSelectionModal.svelte

@@ -18,9 +18,6 @@
 		geocode();
 	}
 
-	export let longitude: number | null = null;
-	export let latitude: number | null = null;
-
 	function addMarker(e: CustomEvent<MouseEvent>) {
 		markers = [];
 		markers = [...markers, { lngLat: e.detail.lngLat, name: '' }];
@@ -32,10 +29,10 @@
 		if (modal) {
 			modal.showModal();
 		}
-		if (longitude && latitude) {
+		if (adventure.longitude && adventure.latitude) {
 			markers = [
 				{
-					lngLat: { lng: longitude, lat: latitude },
+					lngLat: { lng: adventure.longitude, lat: adventure.latitude },
 					name: adventure.name,
 					location: adventure.location
 				}
@@ -78,11 +75,10 @@
 			alert('Please select a point on the map');
 			return;
 		}
-		let coordArray: [number, number] = [markers[0].lngLat.lng, markers[0].lngLat.lat];
 
 		console.log(markers[0]);
-		adventure.longitude = coordArray[0];
+		adventure.longitude = markers[0].lngLat.lng;
-		adventure.latitude = coordArray[1];
+		adventure.latitude = markers[0].lngLat.lat;
 		if (!adventure.location) {
 			adventure.location = markers[0].location;
 		}

frontend/src/routes/map/+page.svelte

@@ -127,8 +127,8 @@
 					<circle cx="12" cy="12" r="10" stroke="red" stroke-width="2" fill="red" />
 				</svg>
 				<Popup openOn="click" offset={[0, -10]}>
-					<div class="text-lg font-bold">{name}</div>
+					<div class="text-lg text-black font-bold">{name}</div>
-					<p class="font-semibold text-md">Visited</p>
+					<p class="font-semibold text-black text-md">Visited</p>
 				</Popup>
 			</Marker>
 		{/if}
@@ -149,8 +149,8 @@
 					<circle cx="12" cy="12" r="10" stroke="blue" stroke-width="2" fill="blue" />
 				</svg>
 				<Popup openOn="click" offset={[0, -10]}>
-					<div class="text-lg font-bold">{name}</div>
+					<div class="text-lg text-black font-bold">{name}</div>
-					<p class="font-semibold text-md">Planned</p>
+					<p class="font-semibold text-black text-md">Planned</p>
 				</Popup>
 			</Marker>
 		{/if}