Merge pull request #239 from seanmorley15/new_images

New images

frontend/src/routes/adventures/+page.server.ts

@@ -159,7 +159,7 @@ export const actions: Actions = {
 		}
 		formDataToSend.append('rating', rating ? rating.toString() : '');
 		formDataToSend.append('link', link || '');
-		formDataToSend.append('image', image);
+		// formDataToSend.append('image', image);
 
 		// log each key-value pair in the FormData
 		for (let pair of formDataToSend.entries()) {
@@ -233,6 +233,21 @@ export const actions: Actions = {
 		let image_url = new_id.image;
 		let link_url = new_id.link;
 
+		if (image && image.size > 0) {
+			let imageForm = new FormData();
+			imageForm.append('image', image);
+			imageForm.append('adventure', id);
+			let imageRes = await fetch(`${serverEndpoint}/api/images/`, {
+				method: 'POST',
+				headers: {
+					Cookie: `${event.cookies.get('auth')}`
+				},
+				body: imageForm
+			});
+			let data = await imageRes.json();
+			console.log(data);
+		}
+
 		return { id, user_id, image_url, link };
 	},
 	edit: async (event) => {
@@ -410,5 +425,17 @@ export const actions: Actions = {
 		let image_url = adventure.image;
 		let link_url = adventure.link;
 		return { image_url, link_url };
+	},
+	image: async (event) => {
+		let formData = await event.request.formData();
+		let res = await fetch(`${serverEndpoint}/api/images/`, {
+			method: 'POST',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			},
+			body: formData
+		});
+		let data = await res.json();
+		return data;
 	}
 };

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

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

@@ -26,11 +26,18 @@
 
 	let adventure: Adventure;
 
+	let currentSlide = 0;
+
+	function goToSlide(index: number) {
+		currentSlide = index;
+	}
+
 	let notFound: boolean = false;
 	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) {
@@ -69,10 +76,10 @@
 {/if}
 
 {#if isEditModalOpen}
-	<EditAdventure
+	<AdventureModal
 		adventureToEdit={adventure}
 		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:save={saveEdit}
 	/>
 {/if}
 
@@ -92,16 +99,31 @@
 		<main class="flex-1">
 			<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
 				<div class="grid gap-8">
-					{#if adventure.image}
-						<div>
-							<img
-								src={adventure.image}
-								alt={adventure.name}
-								width="1200"
-								height="600"
-								class="w-full h-auto object-cover rounded-lg"
-								style="aspect-ratio: 1200 / 600; object-fit: cover;"
-							/>
+					{#if adventure.images && adventure.images.length > 0}
+						<div class="carousel w-full">
+							{#each adventure.images as image, i}
+								<div
+									class="carousel-item w-full"
+									style="display: {i === currentSlide ? 'block' : 'none'}"
+								>
+									<img
+										src={image.image}
+										width="1200"
+										height="600"
+										class="w-full h-auto object-cover rounded-lg"
+										style="aspect-ratio: 1200 / 600; object-fit: cover;"
+										alt={adventure.name}
+									/>
+									<div class="flex justify-center w-full py-2 gap-2">
+										{#each adventure.images as _, i}
+											<button
+												on:click={() => goToSlide(i)}
+												class="btn btn-xs {i === currentSlide ? 'btn-active' : ''}">{i + 1}</button
+											>
+										{/each}
+									</div>
+								</div>
+							{/each}
 						</div>
 					{/if}
 					<div class="grid gap-4">
@@ -109,7 +131,6 @@
 							<div>
 								<h1 class="text-4xl mt-2 font-bold">{adventure.name}</h1>
 							</div>
-
 							<div class="flex items-center gap-1">
 								{#if adventure.rating !== undefined && adventure.rating !== null}
 									<div class="flex justify-center items-center">

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>) {
-		adventures = adventures.map((adventure) => {
-			if (adventure.id === event.detail.id) {
-				return event.detail;
-			}
-			return adventure;
-		});
-		isEditModalOpen = false;
+	function saveOrCreate(event: CustomEvent<Adventure>) {
+		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;
 	}
 </script>
 
@@ -180,13 +178,12 @@
 	/>
 {/if}
 
-{#if isEditModalOpen}
-	<EditAdventure
+{#if isAdventureModalOpen}
+	<AdventureModal
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
-		startDate={collection.start_date}
-		endDate={collection.end_date}
+		on:close={() => (isAdventureModalOpen = false)}
+		on:save={saveOrCreate}
+		collection_id={collection.id}
 	/>
 {/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;
-								newType = 'visited';
+								isAdventureModalOpen = true;
+								adventureToEdit = null;
 							}}
 						>
-							Visited Adventure</button
-						>
-						<button
-							class="btn btn-primary"
-							on:click={() => {
-								isShowingCreateModal = true;
-								newType = 'planned';
-							}}
-						>
-							Planned Adventure</button
+							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 Plus from '~icons/mdi/plus';
+	import type { Collection } from '$lib/types';
 
 	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 NewAdventure from '$lib/components/NewAdventure.svelte';
+	import AdventureModal from '$lib/components/AdventureModal.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}
-	<EditAdventure
+{#if isAdventureModalOpen}
+	<AdventureModal
 		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
+		on:close={() => (isAdventureModalOpen = false)}
+		on:save={filterByProperty}
 	/>
 {/if}