auto point selection

frontend/src/lib/components/EditAdventure.svelte

@@ -120,6 +120,7 @@
 
 {#if isPointModalOpen}
 	<PointSelectionModal
+		bind:adventure={adventureToEdit}
 		longitude={adventureToEdit.longitude}
 		latitude={adventureToEdit.latitude}
 		on:close={() => (isPointModalOpen = false)}
@@ -184,6 +185,16 @@
 						bind:value={adventureToEdit.location}
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<div class="mb-2 mt-2">
+						<button
+							type="button"
+							class="btn btn-secondary"
+							on:click={() => (isPointModalOpen = true)}
+						>
+							{adventureToEdit.latitude && adventureToEdit.longitude ? 'Change' : 'Select'}
+							Location</button
+						>
+					</div>
 				</div>
 				<div class="mb-2">
 					<label for="date">Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br />
@@ -283,16 +294,6 @@
 					bind:value={adventureToEdit.longitude}
 					class="input input-bordered w-full max-w-xs mt-1"
 				/>
-				<div class="mb-2">
-					<button
-						type="button"
-						class="btn btn-secondary"
-						on:click={() => (isPointModalOpen = true)}
-					>
-						{adventureToEdit.latitude && adventureToEdit.longitude ? 'Change' : 'Select'}
-						Location</button
-					>
-				</div>
 				{#if adventureToEdit.collection === null}
 					<div class="mb-2">
 						<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label

frontend/src/lib/components/NewAdventure.svelte

@@ -12,8 +12,15 @@
 	export let longitude: number | null = null;
 	export let latitude: number | null = null;
 
-	import Wikipedia from '~icons/mdi/wikipedia';
+	import MapMarker from '~icons/mdi/map-marker';
+	import Calendar from '~icons/mdi/calendar';
+	import Notebook from '~icons/mdi/notebook';
 	import ClipboardList from '~icons/mdi/clipboard-list';
+	import Star from '~icons/mdi/star';
+	import Attachment from '~icons/mdi/attachment';
+	import Map from '~icons/mdi/map';
+	import Earth from '~icons/mdi/earth';
+	import Wikipedia from '~icons/mdi/wikipedia';
 	import ActivityComplete from './ActivityComplete.svelte';
 	import { appVersion } from '$lib/config';
 
@@ -152,11 +159,8 @@
 		isImageFetcherOpen = false;
 	}
 
-	function setLongLat(event: CustomEvent<[number, number]>) {
+	function setLongLat(event: CustomEvent<Adventure>) {
 		console.log(event.detail);
-		newAdventure.latitude = event.detail[1];
-		newAdventure.longitude = event.detail[0];
-		isPointModalOpen = false;
 	}
 </script>
 
@@ -165,6 +169,7 @@
 		query={newAdventure.name}
 		on:close={() => (isPointModalOpen = false)}
 		on:submit={setLongLat}
+		bind:adventure={newAdventure}
 		latitude={newAdventure.latitude || null}
 		longitude={newAdventure.longitude || null}
 	/>
@@ -238,9 +243,7 @@
 					/>
 				</div>
 				<div class="mb-2">
-					<label for="location"
+					<label for="location">Location<MapMarker class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-						>Location<iconify-icon icon="mdi:map-marker" class="text-lg ml-0.5 -mb-0.5"
-						></iconify-icon></label
 					><br />
 					<input
 						type="text"
@@ -249,6 +252,16 @@
 						bind:value={newAdventure.location}
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<div class="mb-2 mt-2">
+						<button
+							type="button"
+							class="btn btn-secondary"
+							on:click={() => (isPointModalOpen = true)}
+							><Map class="inline-block w-6 h-6" />{newAdventure.latitude && newAdventure.longitude
+								? 'Change'
+								: 'Select'} Location</button
+						>
+					</div>
 				</div>
 				<div class="mb-2">
 					<label for="date"
@@ -359,14 +372,7 @@
 						bind:value={newAdventure.longitude}
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
-					<div class="mb-2">
+
-						<button
-							type="button"
-							class="btn btn-secondary"
-							on:click={() => (isPointModalOpen = true)}
-							>{newAdventure.latitude && newAdventure.longitude ? 'Change' : 'Select'} Location</button
-						>
-					</div>
 					<button type="submit" class="btn btn-primary mr-4 mt-4">Create</button>
 					<button type="button" class="btn mt-4" on:click={close}>Close</button>
 				</div>

frontend/src/lib/components/PointSelectionModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// @ts-nocheck
-	import type { OpenStreetMapPlace, Point } from '$lib/types';
+	import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
@@ -12,6 +12,7 @@
 	let markers: Point[] = [];
 
 	export let query: string | null = null;
+	export let adventure: Adventure;
 
 	if (query) {
 		geocode();
@@ -22,7 +23,7 @@
 
 	function addMarker(e: CustomEvent<MouseEvent>) {
 		markers = [];
-		markers = [...markers, { lngLat: e.detail.lngLat, name: 'Marker 1' }];
+		markers = [...markers, { lngLat: e.detail.lngLat, name: '' }];
 		console.log(markers);
 	}
 
@@ -32,7 +33,13 @@
 			modal.showModal();
 		}
 		if (longitude && latitude) {
-			markers = [{ lngLat: { lng: longitude, lat: latitude }, name: 'Marker 1' }];
+			markers = [
+				{
+					lngLat: { lng: longitude, lat: latitude },
+					name: adventure.name,
+					location: adventure.location
+				}
+			];
 		}
 	});
 
@@ -72,8 +79,19 @@
 			return;
 		}
 		let coordArray: [number, number] = [markers[0].lngLat.lng, markers[0].lngLat.lat];
-		console.log(coordArray);
+
-		dispatch('submit', coordArray);
+		console.log(markers[0]);
+		adventure.longitude = coordArray[0];
+		adventure.latitude = coordArray[1];
+		if (!adventure.location) {
+			adventure.location = markers[0].location;
+		}
+		if (!adventure.name) {
+			adventure.name = markers[0].name;
+		}
+		adventure.activity_types = [...adventure.activity_types, markers[0].activity_type];
+		dispatch('submit', adventure);
+		close();
 	}
 </script>
 
@@ -120,7 +138,9 @@
 									markers = [
 										{
 											lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-											name: place.display_name
+											location: place.display_name,
+											name: place.name,
+											activity_type: place.type
 										}
 									];
 								}}