new adventure modal

frontend/src/lib/components/AdventureModal.svelte

@@ -8,6 +8,7 @@
 
 	export let longitude: number | null = null;
 	export let latitude: number | null = null;
+	export let collection_id: string | null = null;
 
 	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
 	let markers: Point[] = [];
@@ -24,38 +25,56 @@
 
 	let noPlaces: boolean = false;
 
-	export let adventureToEdit: Adventure;
+	export let adventureToEdit: Adventure | null = null;
+
+	let adventure: Adventure = {
+		id: adventureToEdit?.id || '',
+		name: adventureToEdit?.name || '',
+		type: adventureToEdit?.type || 'visited',
+		date: adventureToEdit?.date || null,
+		link: adventureToEdit?.link || null,
+		description: adventureToEdit?.description || null,
+		activity_types: adventureToEdit?.activity_types || [],
+		rating: adventureToEdit?.rating || NaN,
+		is_public: adventureToEdit?.is_public || false,
+		latitude: adventureToEdit?.latitude || NaN,
+		longitude: adventureToEdit?.longitude || NaN,
+		location: adventureToEdit?.location || null,
+		images: adventureToEdit?.images || [],
+		user_id: adventureToEdit?.user_id || null,
+		collection: adventureToEdit?.collection || collection_id || null
+	};
 
 	let url: string = '';
 	let imageError: string = '';
 	let wikiImageError: string = '';
 
-	images = adventureToEdit.images || [];
+	images = adventure.images || [];
 
-	if (adventureToEdit.longitude && adventureToEdit.latitude) {
+	if (adventure.longitude && adventure.latitude) {
 		markers = [
 			{
-				lngLat: { lng: adventureToEdit.longitude, lat: adventureToEdit.latitude },
+				lngLat: { lng: adventure.longitude, lat: adventure.latitude },
-				location: adventureToEdit.location || '',
+				location: adventure.location || '',
-				name: adventureToEdit.name,
+				name: adventure.name,
 				activity_type: ''
 			}
 		];
 	}
 
 	if (longitude && latitude) {
-		adventureToEdit.latitude = latitude;
+		adventure.latitude = latitude;
-		adventureToEdit.longitude = longitude;
+		adventure.longitude = longitude;
 		reverseGeocode();
 	}
 
 	$: {
-		if (!adventureToEdit.rating) {
+		if (!adventure.rating) {
-			adventureToEdit.rating = NaN;
+			adventure.rating = NaN;
 		}
 	}
 
-	let imageSearch: string = adventureToEdit.name || '';
+	let imageSearch: string = adventure.name || '';
 
 	async function removeImage(id: string) {
 		let res = await fetch(`/api/images/${id}/image_delete`, {
@@ -63,7 +82,7 @@
 		});
 		if (res.status === 204) {
 			images = images.filter((image) => image.id !== id);
-			adventureToEdit.images = images;
+			adventure.images = images;
 			console.log(images);
 			addToast('success', 'Image removed');
 		} else {
@@ -74,18 +93,18 @@
 	let isDetails: boolean = true;
 
 	function saveAndClose() {
-		dispatch('saveEdit', adventureToEdit);
+		dispatch('save', adventure);
 		close();
 	}
 
 	$: if (markers.length > 0) {
-		adventureToEdit.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
+		adventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
-		adventureToEdit.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
+		adventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
-		if (!adventureToEdit.location) {
+		if (!adventure.location) {
-			adventureToEdit.location = markers[0].location;
+			adventure.location = markers[0].location;
 		}
-		if (!adventureToEdit.name) {
+		if (!adventure.name) {
-			adventureToEdit.name = markers[0].name;
+			adventure.name = markers[0].name;
 		}
 	}
 
@@ -99,7 +118,7 @@
 		let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
 		let formData = new FormData();
 		formData.append('image', file);
-		formData.append('adventure', adventureToEdit.id);
+		formData.append('adventure', adventure.id);
 		let res2 = await fetch(`/adventures?/image`, {
 			method: 'POST',
 			body: formData
@@ -108,7 +127,7 @@
 		console.log(data2);
 		if (data2.type === 'success') {
 			images = [...images, data2];
-			adventureToEdit.images = images;
+			adventure.images = images;
 			addToast('success', 'Image uploaded');
 		} else {
 			addToast('error', 'Failed to upload image');
@@ -129,7 +148,7 @@
 			let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
 			let formData = new FormData();
 			formData.append('image', file);
-			formData.append('adventure', adventureToEdit.id);
+			formData.append('adventure', adventure.id);
 			let res2 = await fetch(`/adventures?/image`, {
 				method: 'POST',
 				body: formData
@@ -140,7 +159,7 @@
 				let newImage = { id: newData.data.id, image: newData.data.image };
 				console.log(newImage);
 				images = [...images, newImage];
-				adventureToEdit.images = images;
+				adventure.images = images;
 				addToast('success', 'Image uploaded');
 			} else {
 				addToast('error', 'Failed to upload image');
@@ -173,7 +192,7 @@
 
 	async function reverseGeocode() {
 		let res = await fetch(
-			`https://nominatim.openstreetmap.org/search?q=${adventureToEdit.latitude},${adventureToEdit.longitude}&format=jsonv2`,
+			`https://nominatim.openstreetmap.org/search?q=${adventure.latitude},${adventure.longitude}&format=jsonv2`,
 			{
 				headers: {
 					'User-Agent': `AdventureLog / ${appVersion} `
@@ -182,9 +201,19 @@
 		);
 		let data = (await res.json()) as OpenStreetMapPlace[];
 		if (data.length > 0) {
-			adventureToEdit.name = data[0]?.name || '';
+			adventure.name = data[0]?.name || '';
-			adventureToEdit.activity_types?.push(data[0]?.type || '');
+			adventure.activity_types?.push(data[0]?.type || '');
-			adventureToEdit.location = data[0]?.display_name || '';
+			adventure.location = data[0]?.display_name || '';
+			if (longitude && latitude) {
+				markers = [
+					{
+						lngLat: { lng: longitude, lat: latitude },
+						location: data[0]?.display_name || '',
+						name: data[0]?.name || '',
+						activity_type: data[0]?.type || ''
+					}
+				];
+			}
 		}
 		console.log(data);
 	}
@@ -229,12 +258,12 @@
 		return async ({ result }: any) => {
 			if (result.type === 'success') {
 				if (result.data.id && result.data.image) {
-					adventureToEdit.images = [...adventureToEdit.images, result.data];
+					adventure.images = [...adventure.images, result.data];
 					images = [...images, result.data];
 					addToast('success', 'Image uploaded');
 
 					fileInput.value = '';
-					console.log(adventureToEdit);
+					console.log(adventure);
 				} else {
 					addToast('error', result.data.error || 'Failed to upload image');
 				}
@@ -244,21 +273,39 @@
 
 	async function handleSubmit(event: Event) {
 		event.preventDefault();
-		console.log(adventureToEdit);
+		console.log(adventure);
-		let res = await fetch(`/api/adventures/${adventureToEdit.id}`, {
+		if (adventure.id === '') {
-			method: 'PUT',
+			let res = await fetch('/api/adventures', {
-			headers: {
+				method: 'POST',
-				'Content-Type': 'application/json'
+				headers: {
-			},
+					'Content-Type': 'application/json'
-			body: JSON.stringify(adventureToEdit)
+				},
-		});
+				body: JSON.stringify(adventure)
-		let data = await res.json();
+			});
-		if (data.id) {
+			let data = await res.json();
-			adventureToEdit = data as Adventure;
+			if (data.id) {
-			isDetails = false;
+				adventure = data as Adventure;
-			addToast('success', 'Adventure updated');
+				isDetails = false;
+				addToast('success', 'Adventure created');
+			} else {
+				addToast('error', 'Failed to create adventure');
+			}
 		} else {
-			addToast('error', 'Failed to update adventure');
+			let res = await fetch(`/api/adventures/${adventure.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(adventure)
+			});
+			let data = await res.json();
+			if (data.id) {
+				adventure = data as Adventure;
+				isDetails = false;
+				addToast('success', 'Adventure updated');
+			} else {
+				addToast('error', 'Failed to update adventure');
+			}
 		}
 	}
 </script>
@@ -268,8 +315,8 @@
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
+		<h3 class="font-bold text-lg">Edit {adventure.type} Adventure</h3>
-		{#if adventureToEdit.id === '' || isDetails}
+		{#if adventure.id === '' || isDetails}
 			<div class="modal-action items-center">
 				<form method="post" style="width: 100%;" on:submit={handleSubmit}>
 					<!-- Grid layout for form fields -->
@@ -281,7 +328,7 @@
 							type="text"
 							id="name"
 							name="name"
-							bind:value={adventureToEdit.name}
+							bind:value={adventure.name}
 							class="input input-bordered w-full"
 							required
 						/>
@@ -294,8 +341,8 @@
 									type="radio"
 									name="radio-10"
 									class="radio checked:bg-red-500"
-									on:click={() => (adventureToEdit.type = 'visited')}
+									on:click={() => (adventure.type = 'visited')}
-									checked={adventureToEdit.type == 'visited'}
+									checked={adventure.type == 'visited'}
 								/>
 							</label>
 						</div>
@@ -306,8 +353,8 @@
 									type="radio"
 									name="radio-10"
 									class="radio checked:bg-blue-500"
-									on:click={() => (adventureToEdit.type = 'planned')}
+									on:click={() => (adventure.type = 'planned')}
-									checked={adventureToEdit.type == 'planned'}
+									checked={adventure.type == 'planned'}
 								/>
 							</label>
 						</div>
@@ -321,7 +368,7 @@
 							name="date"
 							min={startDate || ''}
 							max={endDate || ''}
-							bind:value={adventureToEdit.date}
+							bind:value={adventure.date}
 							class="input input-bordered w-full"
 						/>
 					</div>
@@ -333,7 +380,7 @@
 								type="text"
 								id="link"
 								name="link"
-								bind:value={adventureToEdit.link}
+								bind:value={adventure.link}
 								class="input input-bordered w-full"
 							/>
 						</div>
@@ -343,7 +390,7 @@
 						<textarea
 							id="description"
 							name="description"
-							bind:value={adventureToEdit.description}
+							bind:value={adventure.description}
 							class="textarea textarea-bordered w-full h-32"
 						></textarea>
 					</div>
@@ -354,10 +401,10 @@
 							id="activity_types"
 							name="activity_types"
 							hidden
-							bind:value={adventureToEdit.activity_types}
+							bind:value={adventure.activity_types}
 							class="input input-bordered w-full"
 						/>
-						<ActivityComplete bind:activities={adventureToEdit.activity_types} />
+						<ActivityComplete bind:activities={adventure.activity_types} />
 					</div>
 					<div>
 						<label for="rating"
@@ -368,7 +415,7 @@
 							min="0"
 							max="5"
 							hidden
-							bind:value={adventureToEdit.rating}
+							bind:value={adventure.rating}
 							id="rating"
 							name="rating"
 							class="input input-bordered w-full max-w-xs mt-1"
@@ -378,48 +425,48 @@
 								type="radio"
 								name="rating-2"
 								class="rating-hidden"
-								checked={Number.isNaN(adventureToEdit.rating)}
+								checked={Number.isNaN(adventure.rating)}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 1)}
+								on:click={() => (adventure.rating = 1)}
-								checked={adventureToEdit.rating === 1}
+								checked={adventure.rating === 1}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 2)}
+								on:click={() => (adventure.rating = 2)}
-								checked={adventureToEdit.rating === 2}
+								checked={adventure.rating === 2}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 3)}
+								on:click={() => (adventure.rating = 3)}
-								checked={adventureToEdit.rating === 3}
+								checked={adventure.rating === 3}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 4)}
+								on:click={() => (adventure.rating = 4)}
-								checked={adventureToEdit.rating === 4}
+								checked={adventure.rating === 4}
 							/>
 							<input
 								type="radio"
 								name="rating-2"
 								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (adventureToEdit.rating = 5)}
+								on:click={() => (adventure.rating = 5)}
-								checked={adventureToEdit.rating === 5}
+								checked={adventure.rating === 5}
 							/>
-							{#if adventureToEdit.rating}
+							{#if adventure.rating}
 								<button
 									type="button"
 									class="btn btn-sm btn-error ml-2"
-									on:click={() => (adventureToEdit.rating = NaN)}
+									on:click={() => (adventure.rating = NaN)}
 								>
 									Remove
 								</button>
@@ -436,7 +483,7 @@
 										class="toggle toggle-primary"
 										id="is_public"
 										name="is_public"
-										bind:checked={adventureToEdit.is_public}
+										bind:checked={adventure.is_public}
 									/>
 								</div>
 							</div>
@@ -451,7 +498,7 @@
 							type="text"
 							id="location"
 							name="location"
-							bind:value={adventureToEdit.location}
+							bind:value={adventure.location}
 							class="input input-bordered w-full"
 						/>
 					</div>
@@ -518,18 +565,18 @@ it would also work to just use on:click on the MapLibre component itself. -->
 						<button type="submit" class="btn btn-primary">Save & Next</button>
 						<button type="button" class="btn" on:click={close}>Close</button>
 					</div>
-					{#if adventureToEdit.is_public}
+					{#if adventure.is_public}
 						<div class="bg-neutral p-4 mt-2 rounded-md shadow-sm">
 							<p class=" font-semibold">Share this Adventure!</p>
 							<div class="flex items-center justify-between">
 								<p class="text-card-foreground font-mono">
-									{window.location.origin}/adventures/{adventureToEdit.id}
+									{window.location.origin}/adventures/{adventure.id}
 								</p>
 								<button
 									type="button"
 									on:click={() => {
 										navigator.clipboard.writeText(
-											`${window.location.origin}/adventures/${adventureToEdit.id}`
+											`${window.location.origin}/adventures/${adventure.id}`
 										);
 									}}
 									class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
@@ -549,7 +596,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
 				<div class="flex">
 					<form
 						method="POST"
-						action="adventures?/image"
+						action="/adventures?/image"
 						use:enhance={imageSubmit}
 						enctype="multipart/form-data"
 					>
@@ -561,7 +608,7 @@ it would also work to just use on:click on the MapLibre component itself. -->
 							accept="image/*"
 							id="image"
 						/>
-						<input type="hidden" name="adventure" value={adventureToEdit.id} id="adventure" />
+						<input type="hidden" name="adventure" value={adventure.id} id="adventure" />
 						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
 					</form>
 				</div>

frontend/src/lib/components/NewAdventure.svelte

@@ -1,610 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import type { Adventure, OpenStreetMapPlace, Point } from '$lib/types';
-	import { onMount } from 'svelte';
-	import { deserialize, enhance } from '$app/forms';
-	import { addToast } from '$lib/toasts';
-
-	export let type: string = 'visited';
-
-	export let longitude: number | null = null;
-	export let latitude: number | null = null;
-	export let collection_id: string | null = null;
-
-	import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
-	let markers: Point[] = [];
-	let query: string = '';
-	let places: OpenStreetMapPlace[] = [];
-	let images: { id: string; image: string }[] = [];
-
-	import Earth from '~icons/mdi/earth';
-	import ActivityComplete from './ActivityComplete.svelte';
-	import { appVersion } from '$lib/config';
-
-	export let startDate: string | null = null;
-	export let endDate: string | null = null;
-
-	let noPlaces: boolean = false;
-	let wikiError: string = '';
-	let wikiImageError: string = '';
-
-	let newAdventure: Adventure = {
-		id: '',
-		type: type,
-		name: '',
-		location: null,
-		date: null,
-		description: '',
-		activity_types: [],
-		rating: NaN,
-		link: '',
-		images: [],
-		user_id: NaN,
-		latitude: null,
-		longitude: null,
-		is_public: false,
-		collection: collection_id || ''
-	};
-
-	if (longitude && latitude) {
-		newAdventure.latitude = latitude;
-		newAdventure.longitude = longitude;
-		reverseGeocode();
-	}
-
-	function saveAndClose() {
-		dispatch('create', newAdventure);
-		close();
-	}
-
-	$: if (markers.length > 0) {
-		newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
-		newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
-		// if (!newAdventure.location) {
-		newAdventure.location = markers[0].location;
-		// }
-
-		newAdventure.name = markers[0].name;
-	}
-
-	let url: string = '';
-	let imageSearch: string = '';
-	let imageError: string = '';
-
-	async function geocode(e: Event | null) {
-		if (e) {
-			e.preventDefault();
-		}
-		if (!query) {
-			alert('Please enter a location');
-			return;
-		}
-		let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
-			headers: {
-				'User-Agent': `AdventureLog / ${appVersion} `
-			}
-		});
-		console.log(res);
-		let data = (await res.json()) as OpenStreetMapPlace[];
-		places = data;
-
-		if (data.length === 0) {
-			noPlaces = true;
-		} else {
-			noPlaces = false;
-		}
-	}
-
-	async function fetchImage() {
-		let res = await fetch(url);
-		let data = await res.blob();
-		if (!data) {
-			imageError = 'No image found at that URL.';
-			return;
-		}
-		let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
-		let formData = new FormData();
-		formData.append('image', file);
-		formData.append('adventure', newAdventure.id);
-		let res2 = await fetch(`/adventures?/image`, {
-			method: 'POST',
-			body: formData
-		});
-		let data2 = await res2.json();
-		console.log(data2);
-		if (data2.type === 'success') {
-			images = [...images, data2];
-			newAdventure.images = images;
-			addToast('success', 'Image uploaded');
-		} else {
-			addToast('error', 'Failed to upload image');
-		}
-	}
-
-	async function fetchWikiImage() {
-		let res = await fetch(`/api/generate/img/?name=${imageSearch}`);
-		let data = await res.json();
-		if (!res.ok) {
-			wikiImageError = 'Failed to fetch image';
-			return;
-		}
-		if (data.source) {
-			let imageUrl = data.source;
-			let res = await fetch(imageUrl);
-
-			let blob = await res.blob();
-			let file = new File([blob], `${imageSearch}.jpg`, { type: 'image/jpeg' });
-			let formData = new FormData();
-			formData.append('image', file);
-			formData.append('adventure', newAdventure.id);
-			let res2 = await fetch(`/adventures?/image`, {
-				method: 'POST',
-				body: formData
-			});
-			if (res2.ok) {
-				let newData = deserialize(await res2.text()) as { data: { id: string; image: string } };
-				console.log(newData);
-				let newImage = { id: newData.data.id, image: newData.data.image };
-				console.log(newImage);
-				images = [...images, newImage];
-				newAdventure.images = images;
-				addToast('success', 'Image uploaded');
-			} else {
-				addToast('error', 'Failed to upload image');
-				wikiImageError = 'Failed to upload image';
-			}
-		}
-	}
-
-	async function removeImage(id: string) {
-		let res = await fetch(`/api/images/${id}/image_delete`, {
-			method: 'POST'
-		});
-		if (res.status === 204) {
-			images = images.filter((image) => image.id !== id);
-			newAdventure.images = images;
-			console.log(images);
-			addToast('success', 'Image removed');
-		} else {
-			addToast('error', 'Failed to remove image');
-		}
-	}
-
-	async function reverseGeocode() {
-		let res = await fetch(
-			`https://nominatim.openstreetmap.org/search?q=${newAdventure.latitude},${newAdventure.longitude}&format=jsonv2`,
-			{
-				headers: {
-					'User-Agent': `AdventureLog / ${appVersion} `
-				}
-			}
-		);
-		let data = (await res.json()) as OpenStreetMapPlace[];
-		if (data.length > 0) {
-			newAdventure.name = data[0]?.name || '';
-			newAdventure.activity_types?.push(data[0]?.type || '');
-			newAdventure.location = data[0]?.display_name || '';
-		}
-		console.log(data);
-	}
-
-	let fileInput: HTMLInputElement;
-
-	const dispatch = createEventDispatcher();
-	let modal: HTMLDialogElement;
-
-	onMount(async () => {
-		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
-		if (modal) {
-			modal.showModal();
-		}
-	});
-
-	function close() {
-		dispatch('close');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			close();
-		}
-	}
-
-	async function generateDesc() {
-		let res = await fetch(`/api/generate/desc/?name=${newAdventure.name}`);
-		let data = await res.json();
-		if (data.extract && data.extract.length > 0) {
-			newAdventure.description = data.extract;
-			wikiError = '';
-		} else {
-			wikiError = 'No description found';
-		}
-	}
-
-	function addMarker(e: CustomEvent<any>) {
-		markers = [];
-		markers = [...markers, { lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
-		console.log(markers);
-	}
-
-	function imageSubmit() {
-		return async ({ result }: any) => {
-			if (result.type === 'success') {
-				if (result.data.id && result.data.image) {
-					newAdventure.images = [...newAdventure.images, result.data];
-					images = [...images, result.data];
-					addToast('success', 'Image uploaded');
-
-					fileInput.value = '';
-					console.log(newAdventure);
-				} else {
-					addToast('error', result.data.error || 'Failed to upload image');
-				}
-			}
-		};
-	}
-
-	async function handleSubmit(event: Event) {
-		event.preventDefault();
-		console.log(newAdventure);
-		let res = await fetch('/api/adventures/', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify(newAdventure)
-		});
-		let data = await res.json();
-		if (data.id) {
-			newAdventure = data as Adventure;
-			imageSearch = newAdventure.name;
-		} else {
-			addToast('error', 'Failed to create adventure');
-		}
-	}
-</script>
-
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<dialog id="my_modal_1" class="modal">
-	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">New {newAdventure.type} Adventure</h3>
-		{#if newAdventure.id === ''}
-			<div class="modal-action items-center">
-				<form
-					method="post"
-					style="width: 100%;"
-					on:submit={handleSubmit}
-					action="/adventures/create"
-				>
-					<!-- Grid layout for form fields -->
-					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
-					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
-					<div>
-						<label for="name">Name</label><br />
-						<input
-							type="text"
-							id="name"
-							name="name"
-							bind:value={newAdventure.name}
-							class="input input-bordered w-full"
-							required
-						/>
-					</div>
-					<div>
-						<div class="form-control">
-							<label class="label cursor-pointer">
-								<span class="label-text">Visited</span>
-								<input
-									type="radio"
-									name="radio-10"
-									class="radio checked:bg-red-500"
-									on:click={() => (newAdventure.type = 'visited')}
-									checked={newAdventure.type == 'visited'}
-								/>
-							</label>
-						</div>
-						<div class="form-control">
-							<label class="label cursor-pointer">
-								<span class="label-text">Planned</span>
-								<input
-									type="radio"
-									name="radio-10"
-									class="radio checked:bg-blue-500"
-									on:click={() => (newAdventure.type = 'planned')}
-									checked={newAdventure.type == 'planned'}
-								/>
-							</label>
-						</div>
-					</div>
-
-					<div>
-						<label for="date">Date</label><br />
-						<input
-							type="date"
-							id="date"
-							name="date"
-							min={startDate || ''}
-							max={endDate || ''}
-							bind:value={newAdventure.date}
-							class="input input-bordered w-full"
-						/>
-					</div>
-					<div>
-						<label for="description">Description</label><br />
-						<textarea
-							id="description"
-							name="description"
-							bind:value={newAdventure.description}
-							class="textarea textarea-bordered w-full h-32"
-						></textarea>
-						<button class="btn btn-neutral" type="button" on:click={generateDesc}
-							>Search Wikipedia</button
-						>
-						<p class="text-red-500">{wikiError}</p>
-					</div>
-					<div>
-						<label for="activity_types">Activity Types</label><br />
-						<input
-							type="text"
-							id="activity_types"
-							name="activity_types"
-							hidden
-							bind:value={newAdventure.activity_types}
-							class="input input-bordered w-full"
-						/>
-						<ActivityComplete bind:activities={newAdventure.activity_types} />
-					</div>
-					<div>
-						<label for="rating"
-							>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
-						><br />
-						<input
-							type="number"
-							min="0"
-							max="5"
-							hidden
-							bind:value={newAdventure.rating}
-							id="rating"
-							name="rating"
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<div class="rating -ml-3 mt-1">
-							<input
-								type="radio"
-								name="rating-2"
-								class="rating-hidden"
-								checked={Number.isNaN(newAdventure.rating)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 1)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 2)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 3)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 4)}
-							/>
-							<input
-								type="radio"
-								name="rating-2"
-								class="mask mask-star-2 bg-orange-400"
-								on:click={() => (newAdventure.rating = 5)}
-							/>
-							{#if newAdventure.rating}
-								<button
-									type="button"
-									class="btn btn-sm btn-error ml-2"
-									on:click={() => (newAdventure.rating = NaN)}
-								>
-									Remove
-								</button>
-							{/if}
-						</div>
-					</div>
-					<div>
-						<!-- link -->
-						<div>
-							<label for="link">Link</label><br />
-							<input
-								type="text"
-								id="link"
-								name="link"
-								bind:value={newAdventure.link}
-								class="input input-bordered w-full"
-							/>
-						</div>
-					</div>
-					<div>
-						<div>
-							<div class="mt-2">
-								<label for="is_public"
-									>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-								><br />
-								<input
-									type="checkbox"
-									class="toggle toggle-primary"
-									id="is_public"
-									name="is_public"
-									bind:checked={newAdventure.is_public}
-								/>
-							</div>
-							{#if newAdventure.is_public}
-								<p>
-									The link to this adventure will be copied to your clipboard once it is created!
-								</p>
-							{/if}
-						</div>
-						<!-- </div> -->
-					</div>
-					<div class="divider"></div>
-					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
-					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
-					<div>
-						<label for="latitude">Location</label><br />
-						<input
-							type="text"
-							id="location"
-							name="location"
-							bind:value={newAdventure.location}
-							class="input input-bordered w-full"
-						/>
-					</div>
-					<div>
-						<form on:submit={geocode} class="mt-2">
-							<input
-								type="text"
-								placeholder="Seach for a location"
-								class="input input-bordered w-full max-w-xs mb-2"
-								id="search"
-								name="search"
-								bind:value={query}
-							/>
-							<button class="btn btn-neutral -mt-1" type="submit">Search</button>
-						</form>
-					</div>
-					{#if places.length > 0}
-						<div class="mt-4 max-w-full">
-							<h3 class="font-bold text-lg mb-4">Search Results</h3>
-
-							<div class="flex flex-wrap">
-								{#each places as place}
-									<button
-										type="button"
-										class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
-										on:click={() => {
-											markers = [
-												{
-													lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-													location: place.display_name,
-													name: place.name,
-													activity_type: place.type
-												}
-											];
-										}}
-									>
-										{place.display_name}
-									</button>
-								{/each}
-							</div>
-						</div>
-					{:else if noPlaces}
-						<p class="text-error text-lg">No results found</p>
-					{/if}
-					<div>
-						<MapLibre
-							style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-							class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
-							standardControls
-						>
-							<!-- MapEvents gives you access to map events even from other components inside the map,
-where you might not have access to the top-level `MapLibre` component. In this case
-it would also work to just use on:click on the MapLibre component itself. -->
-							<MapEvents on:click={addMarker} />
-
-							{#each markers as marker}
-								<DefaultMarker lngLat={marker.lngLat} />
-							{/each}
-						</MapLibre>
-					</div>
-
-					<div class="mt-4">
-						<button type="submit" class="btn btn-primary">Create</button>
-						<button type="button" class="btn" on:click={close}>Close</button>
-					</div>
-				</form>
-			</div>
-		{:else}
-			<p>Upload images here</p>
-			<!-- <p>{newAdventure.id}</p> -->
-			<div class="mb-2">
-				<label for="image">Image </label><br />
-				<div class="flex">
-					<form
-						method="POST"
-						action="adventures?/image"
-						use:enhance={imageSubmit}
-						enctype="multipart/form-data"
-					>
-						<input
-							type="file"
-							name="image"
-							class="file-input file-input-bordered w-full max-w-xs"
-							bind:this={fileInput}
-							accept="image/*"
-							id="image"
-						/>
-						<input type="hidden" name="adventure" value={newAdventure.id} id="adventure" />
-						<button class="btn btn-neutral mt-2 mb-2" type="submit">Upload Image</button>
-					</form>
-				</div>
-				<div class="mt-2">
-					<label for="url">URL</label><br />
-					<input
-						type="text"
-						id="url"
-						name="url"
-						bind:value={url}
-						class="input input-bordered w-full"
-					/>
-					<button class="btn btn-neutral mt-2" type="button" on:click={fetchImage}
-						>Fetch Image</button
-					>
-				</div>
-				<div class="mt-2">
-					<label for="name">Wikipedia</label><br />
-					<input
-						type="text"
-						id="name"
-						name="name"
-						bind:value={imageSearch}
-						class="input input-bordered w-full"
-					/>
-					<button class="btn btn-neutral mt-2" type="button" on:click={fetchWikiImage}
-						>Fetch Image</button
-					>
-					<p class="text-red-500">{wikiImageError}</p>
-				</div>
-				<div class="divider"></div>
-				{#if images.length > 0}
-					<h1 class="font-semibold text-xl">My Images</h1>
-				{:else}
-					<h1 class="font-semibold text-xl">No Images</h1>
-				{/if}
-				<div class="flex flex-wrap gap-2 mt-2">
-					{#each images as image}
-						<div class="relative h-32 w-32">
-							<button
-								type="button"
-								class="absolute top-0 left-0 btn btn-error btn-sm z-10"
-								on:click={() => removeImage(image.id)}
-							>
-								X
-							</button>
-							<img src={image.image} alt={image.id} class="w-full h-full object-cover" />
-						</div>
-					{/each}
-				</div>
-			</div>
-			<div class="mt-4">
-				<button type="button" class="btn btn-primary" on:click={saveAndClose}>Close</button>
-			</div>
-		{/if}
-	</div>
-</dialog>

frontend/src/lib/types.ts

@@ -11,7 +11,7 @@ export type User = {
 
 export type Adventure = {
 	id: string;
-	user_id: number;
+	user_id: number | null;
 	type: string;
 	name: string;
 	location?: string | null;

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

@@ -3,8 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
 	import type { Adventure } from '$lib/types';
 
@@ -95,31 +94,31 @@
 		}
 	}
 
-	let adventureToEdit: Adventure;
+	let adventureToEdit: Adventure | null = null;
-	let isEditModalOpen: boolean = false;
+	let isAdventureModalOpen: boolean = false;
 
 	function deleteAdventure(event: CustomEvent<string>) {
 		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
 	}
 
-	function createAdventure(event: CustomEvent<Adventure>) {
+	// function that save changes to an existing adventure or creates a new one if it doesn't exist
-		adventures = [event.detail, ...adventures];
+	function saveOrCreate(event: CustomEvent<Adventure>) {
-		isShowingCreateModal = false;
+		if (adventures.find((adventure) => adventure.id === event.detail.id)) {
+			adventures = adventures.map((adventure) => {
+				if (adventure.id === event.detail.id) {
+					return event.detail;
+				}
+				return adventure;
+			});
+		} else {
+			adventures = [event.detail, ...adventures];
+		}
+		isAdventureModalOpen = false;
 	}
 
 	function editAdventure(event: CustomEvent<Adventure>) {
 		adventureToEdit = event.detail;
-		isEditModalOpen = true;
+		isAdventureModalOpen = true;
-	}
-
-	function saveEdit(event: CustomEvent<Adventure>) {
-		adventures = adventures.map((adventure) => {
-			if (adventure.id === event.detail.id) {
-				return event.detail;
-			}
-			return adventure;
-		});
-		isEditModalOpen = false;
 	}
 
 	let sidebarOpen = false;
@@ -129,19 +128,11 @@
 	}
 </script>
 
-{#if isShowingCreateModal}
+{#if isAdventureModalOpen}
-	<NewAdventure
+	<AdventureModal
-		type={newType}
-		on:create={createAdventure}
-		on:close={() => (isShowingCreateModal = false)}
-	/>
-{/if}
-
-{#if isEditModalOpen}
-	<EditAdventure
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
+		on:close={() => (isAdventureModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:save={saveOrCreate}
 	/>
 {/if}
 
@@ -160,21 +151,14 @@
 				<button
 					class="btn btn-primary"
 					on:click={() => {
-						isShowingCreateModal = true;
+						isAdventureModalOpen = true;
 						newType = 'visited';
+						adventureToEdit = null;
 					}}
 				>
-					Visited Adventure</button
+					Adventure</button
-				>
-				<button
-					class="btn btn-primary"
-					on:click={() => {
-						isShowingCreateModal = true;
-						newType = 'planned';
-					}}
-				>
-					Planned Adventure</button
 				>
+
 				<!-- <button
 			class="btn btn-primary"
 			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button

frontend/src/routes/adventures/[id]/+page.svelte

@@ -36,7 +36,8 @@
 	let isEditModalOpen: boolean = false;
 
 	import ClipboardList from '~icons/mdi/clipboard-list';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import EditAdventure from '$lib/components/AdventureModal.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 
 	onMount(() => {
 		if (data.props.adventure) {
@@ -75,10 +76,10 @@
 {/if}
 
 {#if isEditModalOpen}
-	<EditAdventure
+	<AdventureModal
 		adventureToEdit={adventure}
 		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:save={saveEdit}
 	/>
 {/if}
 

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

@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { enhance, deserialize } from '$app/forms';
+	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
-	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import CollectionCard from '$lib/components/CollectionCard.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import EditCollection from '$lib/components/EditCollection.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import NewCollection from '$lib/components/NewCollection.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
-	import type { Adventure, Collection } from '$lib/types';
+	import type { Collection } from '$lib/types';
 
 	import Plus from '~icons/mdi/plus';
 

frontend/src/routes/collections/[id]/+page.svelte

@@ -8,9 +8,7 @@
 	import Plus from '~icons/mdi/plus';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import AdventureLink from '$lib/components/AdventureLink.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
 	import TransportationCard from '$lib/components/TransportationCard.svelte';
 	import EditTransportation from '$lib/components/EditTransportation.svelte';
@@ -26,6 +24,7 @@
 	} from '$lib';
 	import ChecklistCard from '$lib/components/ChecklistCard.svelte';
 	import ChecklistModal from '$lib/components/ChecklistModal.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 
 	export let data: PageData;
 	console.log(data);
@@ -83,11 +82,6 @@
 		adventures = adventures.filter((a) => a.id !== event.detail);
 	}
 
-	function createAdventure(event: CustomEvent<Adventure>) {
-		adventures = [event.detail, ...adventures];
-		isShowingCreateModal = false;
-	}
-
 	async function addAdventure(event: CustomEvent<Adventure>) {
 		console.log(event.detail);
 		if (adventures.find((a) => a.id === event.detail.id)) {
@@ -124,9 +118,9 @@
 		});
 	}
 
-	let adventureToEdit: Adventure;
+	let adventureToEdit: Adventure | null = null;
 	let transportationToEdit: Transportation;
-	let isEditModalOpen: boolean = false;
+	let isAdventureModalOpen: boolean = false;
 	let isTransportationEditModalOpen: boolean = false;
 	let isNoteModalOpen: boolean = false;
 	let noteToEdit: Note | null;
@@ -136,7 +130,7 @@
 
 	function editAdventure(event: CustomEvent<Adventure>) {
 		adventureToEdit = event.detail;
-		isEditModalOpen = true;
+		isAdventureModalOpen = true;
 	}
 
 	function saveNewTransportation(event: CustomEvent<Transportation>) {
@@ -149,14 +143,18 @@
 		isTransportationEditModalOpen = false;
 	}
 
-	function saveEdit(event: CustomEvent<Adventure>) {
+	function saveOrCreate(event: CustomEvent<Adventure>) {
-		adventures = adventures.map((adventure) => {
+		if (adventures.find((adventure) => adventure.id === event.detail.id)) {
-			if (adventure.id === event.detail.id) {
+			adventures = adventures.map((adventure) => {
-				return event.detail;
+				if (adventure.id === event.detail.id) {
-			}
+					return event.detail;
-			return adventure;
+				}
-		});
+				return adventure;
-		isEditModalOpen = false;
+			});
+		} else {
+			adventures = [event.detail, ...adventures];
+		}
+		isAdventureModalOpen = false;
 	}
 </script>
 
@@ -180,13 +178,12 @@
 	/>
 {/if}
 
-{#if isEditModalOpen}
+{#if isAdventureModalOpen}
-	<EditAdventure
+	<AdventureModal
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
+		on:close={() => (isAdventureModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:save={saveOrCreate}
-		startDate={collection.start_date}
+		collection_id={collection.id}
-		endDate={collection.end_date}
 	/>
 {/if}
 
@@ -235,17 +232,6 @@
 	/>
 {/if}
 
-{#if isShowingCreateModal}
-	<NewAdventure
-		type={newType}
-		collection_id={collection.id}
-		on:create={createAdventure}
-		on:close={() => (isShowingCreateModal = false)}
-		startDate={collection.start_date}
-		endDate={collection.end_date}
-	/>
-{/if}
-
 {#if isShowingTransportationModal}
 	<NewTransportation
 		on:close={() => (isShowingTransportationModal = false)}
@@ -312,21 +298,13 @@
 						<button
 							class="btn btn-primary"
 							on:click={() => {
-								isShowingCreateModal = true;
+								isAdventureModalOpen = true;
-								newType = 'visited';
+								adventureToEdit = null;
 							}}
 						>
-							Visited Adventure</button
+							Adventure</button
-						>
-						<button
-							class="btn btn-primary"
-							on:click={() => {
-								isShowingCreateModal = true;
-								newType = 'planned';
-							}}
-						>
-							Planned Adventure</button
 						>
+
 						<button
 							class="btn btn-primary"
 							on:click={() => {

frontend/src/routes/collections/archived/+page.svelte

@@ -1,22 +1,14 @@
 <script lang="ts">
-	import { enhance, deserialize } from '$app/forms';
-	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import CollectionCard from '$lib/components/CollectionCard.svelte';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
-	import EditCollection from '$lib/components/EditCollection.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
-	import NewCollection from '$lib/components/NewCollection.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
-	import type { Adventure, Collection } from '$lib/types';
+	import type { Collection } from '$lib/types';
-
-	import Plus from '~icons/mdi/plus';
 
 	export let data: any;
 	console.log(data);
 
 	let collections: Collection[] = data.props.adventures || [];
 
-	function deleteCollection(event: CustomEvent<number>) {
+	function deleteCollection(event: CustomEvent<string>) {
 		collections = collections.filter((collection) => collection.id !== event.detail);
 	}
 </script>

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

@@ -1,7 +1,6 @@
 <script>
 	// @ts-nocheck
-
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import {
 		DefaultMarker,
 		MapEvents,
@@ -142,11 +141,11 @@
 </div>
 
 {#if createModalOpen}
-	<NewAdventure
+	<AdventureModal
 		on:close={() => (createModalOpen = false)}
-		longitude={newLongitude}
+		on:save={createNewAdventure}
 		latitude={newLatitude}
-		on:create={createNewAdventure}
+		longitude={newLongitude}
 	/>
 {/if}
 

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

@@ -4,9 +4,10 @@
 	import type { Adventure, OpenStreetMapPlace } from '$lib/types';
 	import { onMount } from 'svelte';
 	import type { PageData } from './$types';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import EditAdventure from '$lib/components/AdventureModal.svelte';
 	import { appVersion } from '$lib/config';
 	import { goto } from '$app/navigation';
+	import AdventureModal from '$lib/components/AdventureModal.svelte';
 
 	export let data: PageData;
 
@@ -59,29 +60,31 @@
 	}
 
 	let adventureToEdit: Adventure;
-	let isEditModalOpen: boolean = false;
+	let isAdventureModalOpen: boolean = false;
 
 	function editAdventure(event: CustomEvent<Adventure>) {
 		adventureToEdit = event.detail;
-		isEditModalOpen = true;
+		isAdventureModalOpen = true;
 	}
 
 	function saveEdit(event: CustomEvent<Adventure>) {
+		console.log(event.detail);
 		myAdventures = myAdventures.map((adventure) => {
 			if (adventure.id === event.detail.id) {
 				return event.detail;
 			}
 			return adventure;
 		});
-		isEditModalOpen = false;
+		isAdventureModalOpen = false;
+		console.log(myAdventures);
 	}
 </script>
 
-{#if isEditModalOpen}
+{#if isAdventureModalOpen}
-	<EditAdventure
+	<AdventureModal
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
+		on:close={() => (isAdventureModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:save={filterByProperty}
 	/>
 {/if}