Merge pull request #145 from seanmorley15/development

Development

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,18 +111,15 @@
 		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>
 
 {#if isPointModalOpen}
 	<PointSelectionModal
-		longitude={adventureToEdit.longitude}
+		bind:adventure={adventureToEdit}
-		latitude={adventureToEdit.latitude}
 		on:close={() => (isPointModalOpen = false)}
 		on:submit={setLongLat}
 		query={adventureToEdit.name}
@@ -184,6 +182,19 @@
 						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)}
+						>
+							<Map class="inline-block w-6 h-6" />{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,10 +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,8 +170,7 @@
 		query={newAdventure.name}
 		on:close={() => (isPointModalOpen = false)}
 		on:submit={setLongLat}
-		latitude={newAdventure.latitude || null}
+		bind:adventure={newAdventure}
-		longitude={newAdventure.longitude || null}
 	/>
 {/if}
 
@@ -238,9 +242,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 +251,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 +371,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,17 +12,15 @@
 	let markers: Point[] = [];
 
 	export let query: string | null = null;
+	export let adventure: Adventure;
 
 	if (query) {
 		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: 'Marker 1' }];
+		markers = [...markers, { lngLat: e.detail.lngLat, name: '' }];
 		console.log(markers);
 	}
 
@@ -31,8 +29,14 @@
 		if (modal) {
 			modal.showModal();
 		}
-		if (longitude && latitude) {
+		if (adventure.longitude && adventure.latitude) {
-			markers = [{ lngLat: { lng: longitude, lat: latitude }, name: 'Marker 1' }];
+			markers = [
+				{
+					lngLat: { lng: adventure.longitude, lat: adventure.latitude },
+					name: adventure.name,
+					location: adventure.location
+				}
+			];
 		}
 	});
 
@@ -71,9 +75,19 @@
 			alert('Please select a point on the map');
 			return;
 		}
-		let coordArray: [number, number] = [markers[0].lngLat.lng, markers[0].lngLat.lat];
+
-		console.log(coordArray);
+		console.log(markers[0]);
-		dispatch('submit', coordArray);
+		adventure.longitude = markers[0].lngLat.lng;
+		adventure.latitude = markers[0].lngLat.lat;
+		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 +134,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
 										}
 									];
 								}}

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}