From 3e328f408a6177864d6a4323f808a8335df8c442 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 24 Jul 2024 18:45:49 -0400
Subject: [PATCH] feat: Add latitude and longitude to NewAdventure component

---
 .../src/lib/components/NewAdventure.svelte    | 30 ++++++++++++++++
 frontend/src/routes/map/+page.svelte          | 34 +++++++++++++++++++
 2 files changed, 64 insertions(+)

diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index 0875bb3..2656409 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -9,6 +9,9 @@
 
 	export let type: string = 'visited';
 
+	export let longitude: number | undefined = undefined;
+	export let latitude: number | undefined = undefined;
+
 	import Wikipedia from '~icons/mdi/wikipedia';
 	import ClipboardList from '~icons/mdi/clipboard-list';
 	import ActivityComplete from './ActivityComplete.svelte';
@@ -31,6 +34,11 @@
 		collection: null
 	};
 
+	if (longitude && latitude) {
+		newAdventure.latitude = latitude;
+		newAdventure.longitude = longitude;
+	}
+
 	let image: File;
 	let fileInput: HTMLInputElement;
 
@@ -164,6 +172,28 @@
 				on:submit={handleSubmit}
 				action="/adventures?/create"
 			>
+				<div class="join">
+					<input
+						class="join-item btn btn-neutral"
+						type="radio"
+						name="type"
+						id="visited"
+						value="visited"
+						aria-label="Visited"
+						checked
+						on:click={() => (type = 'visited')}
+					/>
+					<input
+						class="join-item btn btn-neutral"
+						type="radio"
+						name="type"
+						id="planned"
+						value="planned"
+						aria-label="Planned"
+						on:click={() => (type = 'planned')}
+					/>
+				</div>
+
 				<input
 					type="text"
 					name="type"
diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte
index 425e06e..c1a54c3 100644
--- a/frontend/src/routes/map/+page.svelte
+++ b/frontend/src/routes/map/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	// @ts-nocheck
 
+	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import {
 		DefaultMarker,
 		MapEvents,
@@ -16,6 +17,19 @@
 
 	let clickedName = '';
 
+	let newMarker = [];
+
+	let newLongitude = null;
+	let newLatitude = null;
+
+	function addMarker(e) {
+		newMarker = [];
+		newMarker = [...newMarker, { lngLat: e.detail.lngLat, name: 'Marker 1' }];
+		console.log(newMarker);
+		newLongitude = e.detail.lngLat.lng;
+		newLatitude = e.detail.lngLat.lat;
+	}
+
 	let markers = data.props.markers;
 
 	let visitedRegions = data.props.visitedRegions;
@@ -31,8 +45,24 @@
 
 	// mapped to the checkbox
 	let showGEO = true;
+
+	let createModalOpen = false;
 </script>
 
+{#if newMarker.length > 0}
+	<button type="button" class="btn btn-primary" on:click={() => (createModalOpen = true)}
+		>Add New Adventure at Marker</button
+	>
+{/if}
+
+{#if createModalOpen}
+	<NewAdventure
+		on:close={() => (createModalOpen = false)}
+		longitude={newLongitude}
+		latitude={newLatitude}
+	/>
+{/if}
+
 <label for="show-geo">Show Borders?</label>
 <input type="checkbox" id="shpw-gep" name="show-geo" class="checkbox" bind:checked={showGEO} />
 
@@ -109,6 +139,10 @@
 			/> -->
 		</GeoJSON>
 	{/if}
+	<MapEvents on:click={addMarker} />
+	{#each newMarker as marker}
+		<DefaultMarker lngLat={marker.lngLat} />
+	{/each}
 </MapLibre>
 
 <style>