collections v1

frontend/src/lib/components/AdventureCard.svelte

@@ -100,12 +100,6 @@
 					><TrashCan class="w-6 h-6" /></button
 				>
 			{/if}
-			{#if type == 'featured'}
-				<!-- TODO: option to add to visited or featured -->
-				<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
-					><Launch class="w-6 h-6" /></button
-				>
-			{/if}
 		</div>
 	</div>
 </div>

frontend/src/lib/components/CollectionCard.svelte

@@ -7,12 +7,12 @@
 	import TrashCanOutline from '~icons/mdi/trash-can-outline';
 
 	import { goto } from '$app/navigation';
-	import type { Trip } from '$lib/types';
+	import type { Collection } from '$lib/types';
 	const dispatch = createEventDispatcher();
 
 	//   export let type: String;
 
-	export let trip: Trip;
+	export let collection: Collection;
 
 	// function remove() {
 	//   dispatch("remove", trip.id);
@@ -33,23 +33,11 @@
 	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
 	<div class="card-body">
-		<h2 class="card-title overflow-ellipsis">{trip.name}</h2>
-		{#if trip.date && trip.date !== ''}
-			<div class="inline-flex items-center">
-				<Calendar class="w-5 h-5 mr-1" />
-				<p class="ml-1">{trip.date}</p>
-			</div>
-		{/if}
-		{#if trip.location && trip.location !== ''}
-			<div class="inline-flex items-center">
-				<MapMarker class="w-5 h-5 mr-1" />
-				<p class="ml-1">{trip.location}</p>
-			</div>
-		{/if}
-
+		<h2 class="card-title overflow-ellipsis">{collection.name}</h2>
+		<p>{collection.adventures.length} Adventures</p>
 		<div class="card-actions justify-end">
 			<button class="btn btn-secondary"><TrashCanOutline class="w-5 h-5 mr-1" /></button>
-			<button class="btn btn-primary" on:click={() => goto(`/trip/${trip.id}`)}
+			<button class="btn btn-primary" on:click={() => goto(`/trip/${collection.id}`)}
 				><Launch class="w-5 h-5 mr-1" /></button
 			>
 		</div>

frontend/src/lib/components/Navbar.svelte

@@ -55,6 +55,9 @@
 					<li>
 						<button on:click={() => goto('/adventures')}>Adventures</button>
 					</li>
+					<li>
+						<button on:click={() => goto('/collections')}>Collections</button>
+					</li>
 					<li>
 						<button on:click={() => goto('/worldtravel')}>World Travel</button>
 					</li>
@@ -83,6 +86,9 @@
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/adventures')}>Adventures</button>
 				</li>
+				<li>
+					<button class="btn btn-neutral" on:click={() => goto('/collections')}>Collections</button>
+				</li>
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}>World Travel</button
 					>

frontend/src/lib/components/NewCollection.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { Adventure, Collection } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { enhance } from '$app/forms';
+	import { addToast } from '$lib/toasts';
+
+	let newCollection: Collection = {
+		user_id: NaN,
+		id: NaN,
+		name: '',
+		description: '',
+		adventures: [] as Adventure[],
+		is_public: false
+	};
+
+	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 handleSubmit(event: Event) {
+		event.preventDefault();
+		const form = event.target as HTMLFormElement;
+		const formData = new FormData(form);
+
+		const response = await fetch(form.action, {
+			method: form.method,
+			body: formData
+		});
+
+		if (response.ok) {
+			const result = await response.json();
+			const data = JSON.parse(result.data); // Parsing the JSON string in the data field
+
+			if (data[1] !== undefined) {
+				// these two lines here are wierd, because the data[1] is the id of the new adventure and data[2] is the user_id of the new adventure
+				console.log(data);
+				let id = data[1];
+				let user_id = data[2];
+
+				console.log(newCollection);
+				dispatch('create', newCollection);
+				addToast('success', 'Collection created successfully!');
+				close();
+			}
+		}
+	}
+</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" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-lg">New Collection</h3>
+		<div
+			class="modal-action items-center"
+			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
+		>
+			<form
+				method="post"
+				style="width: 100%;"
+				on:submit={handleSubmit}
+				action="/collections?/create"
+			>
+				<div class="mb-2">
+					<label for="name">Name</label><br />
+					<input
+						type="text"
+						id="name"
+						name="name"
+						bind:value={newCollection.name}
+						class="input input-bordered w-full max-w-xs mt-1"
+						required
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="description"
+						>Description<iconify-icon icon="mdi:notebook" class="text-lg ml-1 -mb-0.5"
+						></iconify-icon></label
+					><br />
+					<div class="flex">
+						<input
+							type="text"
+							id="description"
+							name="description"
+							bind:value={newCollection.description}
+							class="input input-bordered w-full max-w-xs mt-1 mb-2"
+						/>
+					</div>
+				</div>
+				<div class="mb-2">
+					<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>
+			</form>
+		</div>
+	</div>
+</dialog>

frontend/src/lib/types.ts

@@ -54,13 +54,11 @@ export type Point = {
 	name: string;
 };
 
-export type Trip = {
+export type Collection = {
 	id: number;
 	user_id: number;
 	name: string;
-	type: string;
-	location: string;
-	date: string;
+	description: string;
 	is_public: boolean;
 	adventures: Adventure[];
 };

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

@@ -361,7 +361,6 @@ export const actions: Actions = {
 		const formData = await event.request.formData();
 		const visited = formData.get('visited');
 		const planned = formData.get('planned');
-		const featured = formData.get('featured');
 
 		const order_direction = formData.get('order_direction') as string;
 		const order_by = formData.get('order_by') as string;
@@ -387,12 +386,6 @@ export const actions: Actions = {
 			}
 			filterString += 'planned';
 		}
-		if (featured) {
-			if (filterString) {
-				filterString += ',';
-			}
-			filterString += 'featured';
-		}
 		if (!filterString) {
 			filterString = '';
 		}

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

@@ -240,15 +240,6 @@
 							checked
 						/>
 					</label>
-					<label class="label cursor-pointer">
-						<span class="label-text">Featured</span>
-						<input
-							type="checkbox"
-							id="featured"
-							name="featured"
-							class="checkbox checkbox-primary"
-						/>
-					</label>
 					<!-- <div class="divider"></div> -->
 					<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
 					<p class="text-md font-semibold mb-2">Order Direction</p>

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

@@ -0,0 +1,421 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure, Collection } from '$lib/types';
+
+import type { Actions, RequestEvent } from '@sveltejs/kit';
+import { fetchCSRFToken, tryRefreshToken } from '$lib/index.server';
+import { checkLink } from '$lib';
+
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let next = null;
+		let previous = null;
+		let count = 0;
+		let adventures: Adventure[] = [];
+		let initialFetch = await fetch(`${serverEndpoint}/api/collections/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!initialFetch.ok) {
+			console.error('Failed to fetch visited adventures');
+			return redirect(302, '/login');
+		} else {
+			let res = await initialFetch.json();
+			let visited = res.results as Adventure[];
+			next = res.next;
+			previous = res.previous;
+			count = res.count;
+			adventures = [...adventures, ...visited];
+		}
+
+		return {
+			props: {
+				adventures,
+				next,
+				previous,
+				count
+			}
+		};
+	}
+}) satisfies PageServerLoad;
+
+export const actions: Actions = {
+	create: async (event) => {
+		const formData = await event.request.formData();
+
+		const name = formData.get('name') as string;
+		const description = formData.get('description') as string | null;
+
+		if (!name) {
+			return {
+				status: 400,
+				body: { error: 'Missing required fields' }
+			};
+		}
+
+		const formDataToSend = new FormData();
+		formDataToSend.append('name', name);
+		formDataToSend.append('description', description || '');
+		let auth = event.cookies.get('auth');
+
+		if (!auth) {
+			const refresh = event.cookies.get('refresh');
+			if (!refresh) {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+			let res = await tryRefreshToken(refresh);
+			if (res) {
+				auth = res;
+				event.cookies.set('auth', auth, {
+					httpOnly: true,
+					sameSite: 'lax',
+					expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+					path: '/'
+				});
+			} else {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+		}
+
+		if (!auth) {
+			return {
+				status: 401,
+				body: { message: 'Unauthorized' }
+			};
+		}
+
+		const csrfToken = await fetchCSRFToken();
+
+		if (!csrfToken) {
+			return {
+				status: 500,
+				body: { message: 'Failed to fetch CSRF token' }
+			};
+		}
+
+		const res = await fetch(`${serverEndpoint}/api/collections/`, {
+			method: 'POST',
+			headers: {
+				'X-CSRFToken': csrfToken,
+				Cookie: auth
+			},
+			body: formDataToSend
+		});
+
+		let new_id = await res.json();
+
+		if (!res.ok) {
+			const errorBody = await res.json();
+			return {
+				status: res.status,
+				body: { error: errorBody }
+			};
+		}
+
+		let id = new_id.id;
+		let user_id = new_id.user_id;
+
+		return { id, user_id };
+	},
+	// edit: async (event) => {
+	// 	const formData = await event.request.formData();
+
+	// 	const adventureId = formData.get('adventureId') as string;
+	// 	const type = formData.get('type') as string;
+	// 	const name = formData.get('name') as string;
+	// 	const location = formData.get('location') as string | null;
+	// 	let date = (formData.get('date') as string | null) ?? null;
+	// 	const description = formData.get('description') as string | null;
+	// 	let activity_types = formData.get('activity_types')
+	// 		? (formData.get('activity_types') as string).split(',')
+	// 		: null;
+	// 	const rating = formData.get('rating') ? Number(formData.get('rating')) : null;
+	// 	let link = formData.get('link') as string | null;
+	// 	let latitude = formData.get('latitude') as string | null;
+	// 	let longitude = formData.get('longitude') as string | null;
+	// 	let is_public = formData.get('is_public') as string | null | boolean;
+
+	// 	if (is_public) {
+	// 		is_public = true;
+	// 	} else {
+	// 		is_public = false;
+	// 	}
+
+	// 	// check if latitude and longitude are valid
+	// 	if (latitude && longitude) {
+	// 		if (isNaN(Number(latitude)) || isNaN(Number(longitude))) {
+	// 			return {
+	// 				status: 400,
+	// 				body: { error: 'Invalid latitude or longitude' }
+	// 			};
+	// 		}
+	// 	}
+
+	// 	// round latitude and longitude to 6 decimal places
+	// 	if (latitude) {
+	// 		latitude = Number(latitude).toFixed(6);
+	// 	}
+	// 	if (longitude) {
+	// 		longitude = Number(longitude).toFixed(6);
+	// 	}
+
+	// 	const image = formData.get('image') as File;
+
+	// 	// console.log(activity_types);
+
+	// 	if (!type || !name) {
+	// 		return {
+	// 			status: 400,
+	// 			body: { error: 'Missing required fields' }
+	// 		};
+	// 	}
+
+	// 	if (date == null || date == '') {
+	// 		date = null;
+	// 	}
+
+	// 	if (link) {
+	// 		link = checkLink(link);
+	// 	}
+
+	// 	const formDataToSend = new FormData();
+	// 	formDataToSend.append('type', type);
+	// 	formDataToSend.append('name', name);
+	// 	formDataToSend.append('location', location || '');
+	// 	formDataToSend.append('date', date || '');
+	// 	formDataToSend.append('description', description || '');
+	// 	formDataToSend.append('latitude', latitude || '');
+	// 	formDataToSend.append('longitude', longitude || '');
+	// 	formDataToSend.append('is_public', is_public.toString());
+	// 	if (activity_types) {
+	// 		// Filter out empty and duplicate activity types, then trim each activity type
+	// 		const cleanedActivityTypes = Array.from(
+	// 			new Set(
+	// 				activity_types
+	// 					.map((activity_type) => activity_type.trim())
+	// 					.filter((activity_type) => activity_type !== '' && activity_type !== ',')
+	// 			)
+	// 		);
+
+	// 		// Append each cleaned activity type to formDataToSend
+	// 		cleanedActivityTypes.forEach((activity_type) => {
+	// 			formDataToSend.append('activity_types', activity_type);
+	// 		});
+	// 	}
+	// 	formDataToSend.append('rating', rating ? rating.toString() : '');
+	// 	formDataToSend.append('link', link || '');
+
+	// 	if (image && image.size > 0) {
+	// 		formDataToSend.append('image', image);
+	// 	}
+
+	// 	let auth = event.cookies.get('auth');
+
+	// 	if (!auth) {
+	// 		const refresh = event.cookies.get('refresh');
+	// 		if (!refresh) {
+	// 			return {
+	// 				status: 401,
+	// 				body: { message: 'Unauthorized' }
+	// 			};
+	// 		}
+	// 		let res = await tryRefreshToken(refresh);
+	// 		if (res) {
+	// 			auth = res;
+	// 			event.cookies.set('auth', auth, {
+	// 				httpOnly: true,
+	// 				sameSite: 'lax',
+	// 				expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+	// 				path: '/'
+	// 			});
+	// 		} else {
+	// 			return {
+	// 				status: 401,
+	// 				body: { message: 'Unauthorized' }
+	// 			};
+	// 		}
+	// 	}
+
+	// 	if (!auth) {
+	// 		return {
+	// 			status: 401,
+	// 			body: { message: 'Unauthorized' }
+	// 		};
+	// 	}
+
+	// 	const csrfToken = await fetchCSRFToken();
+
+	// 	if (!csrfToken) {
+	// 		return {
+	// 			status: 500,
+	// 			body: { message: 'Failed to fetch CSRF token' }
+	// 		};
+	// 	}
+
+	// 	const res = await fetch(`${serverEndpoint}/api/adventures/${adventureId}/`, {
+	// 		method: 'PATCH',
+	// 		headers: {
+	// 			'X-CSRFToken': csrfToken,
+	// 			Cookie: auth
+	// 		},
+	// 		body: formDataToSend
+	// 	});
+
+	// 	if (!res.ok) {
+	// 		const errorBody = await res.json();
+	// 		return {
+	// 			status: res.status,
+	// 			body: { error: errorBody }
+	// 		};
+	// 	}
+
+	// 	let adventure = await res.json();
+
+	// 	let image_url = adventure.image;
+	// 	let link_url = adventure.link;
+	// 	return { image_url, link_url };
+	// },
+	get: async (event) => {
+		if (!event.locals.user) {
+		}
+
+		const formData = await event.request.formData();
+
+		const order_direction = formData.get('order_direction') as string;
+		const order_by = formData.get('order_by') as string;
+
+		console.log(order_direction, order_by);
+
+		let adventures: Adventure[] = [];
+
+		if (!event.locals.user) {
+			return {
+				status: 401,
+				body: { message: 'Unauthorized' }
+			};
+		}
+
+		let next = null;
+		let previous = null;
+		let count = 0;
+
+		let visitedFetch = await fetch(
+			`${serverEndpoint}/api/collections/?order_by=${order_by}&order_direction=${order_direction}`,
+			{
+				headers: {
+					Cookie: `${event.cookies.get('auth')}`
+				}
+			}
+		);
+		if (!visitedFetch.ok) {
+			console.error('Failed to fetch visited adventures');
+			return redirect(302, '/login');
+		} else {
+			let res = await visitedFetch.json();
+			let visited = res.results as Adventure[];
+			next = res.next;
+			previous = res.previous;
+			count = res.count;
+			adventures = [...adventures, ...visited];
+			console.log(next, previous, count);
+		}
+
+		return {
+			adventures,
+			next,
+			previous,
+			count
+		};
+	},
+	changePage: async (event) => {
+		const formData = await event.request.formData();
+		const next = formData.get('next') as string;
+		const previous = formData.get('previous') as string;
+		const page = formData.get('page') as string;
+
+		if (!event.locals.user) {
+			return {
+				status: 401,
+				body: { message: 'Unauthorized' }
+			};
+		}
+
+		if (!page) {
+			return {
+				status: 400,
+				body: { error: 'Missing required fields' }
+			};
+		}
+
+		// Start with the provided URL or default to the filtered adventures endpoint
+		let url: string = next || previous || '/api/collections/';
+
+		// Extract the path starting from '/api/adventures'
+		const apiIndex = url.indexOf('/api/collections');
+		if (apiIndex !== -1) {
+			url = url.slice(apiIndex);
+		} else {
+			url = '/api/collections/';
+		}
+
+		// Replace or add the page number in the URL
+		if (url.includes('page=')) {
+			url = url.replace(/page=\d+/, `page=${page}`);
+		} else {
+			// If 'page=' is not in the URL, add it
+			url += url.includes('?') ? '&' : '?';
+			url += `page=${page}`;
+		}
+
+		const fullUrl = `${serverEndpoint}${url}`;
+		console.log(fullUrl);
+		console.log(serverEndpoint);
+
+		try {
+			const response = await fetch(fullUrl, {
+				headers: {
+					'Content-Type': 'application/json',
+					Cookie: `${event.cookies.get('auth')}`
+				}
+			});
+
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+			const data = await response.json();
+			let adventures = data.results as Adventure[];
+			let next = data.next;
+			let previous = data.previous;
+			let count = data.count;
+
+			return {
+				status: 200,
+				body: {
+					adventures,
+					next,
+					previous,
+					count,
+					page
+				}
+			};
+		} catch (error) {
+			console.error('Error fetching data:', error);
+			return {
+				status: 500,
+				body: { error: 'Failed to fetch data' }
+			};
+		}
+	}
+};

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

@@ -0,0 +1,261 @@
+<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 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';
+
+	export let data: any;
+	console.log(data);
+
+	let collections: Collection[] = data.props.adventures || [];
+
+	let currentSort = { attribute: 'name', order: 'asc' };
+
+	let isShowingCreateModal: boolean = false;
+	let newType: string = '';
+
+	let resultsPerPage: number = 10;
+
+	let currentView: string = 'cards';
+
+	let next: string | null = data.props.next || null;
+	let previous: string | null = data.props.previous || null;
+	let count = data.props.count || 0;
+	let totalPages = Math.ceil(count / resultsPerPage);
+	let currentPage: number = 1;
+
+	function handleChangePage() {
+		return async ({ result }: any) => {
+			if (result.type === 'success') {
+				console.log(result.data);
+				collections = result.data.body.adventures as Collection[];
+				next = result.data.body.next;
+				previous = result.data.body.previous;
+				count = result.data.body.count;
+				currentPage = result.data.body.page;
+				totalPages = Math.ceil(count / resultsPerPage);
+			}
+		};
+	}
+
+	function handleSubmit() {
+		return async ({ result, update }: any) => {
+			// First, call the update function with reset: false
+			update({ reset: false });
+
+			// Then, handle the result
+			if (result.type === 'success') {
+				if (result.data) {
+					// console.log(result.data);
+					collections = result.data.adventures as Collection[];
+					next = result.data.next;
+					previous = result.data.previous;
+					count = result.data.count;
+					totalPages = Math.ceil(count / resultsPerPage);
+					currentPage = 1;
+
+					console.log(next);
+				}
+			}
+		};
+	}
+
+	function sort({ attribute, order }: { attribute: string; order: string }) {
+		currentSort.attribute = attribute;
+		currentSort.order = order;
+		if (attribute === 'name') {
+			if (order === 'asc') {
+				collections = collections.sort((a, b) => b.name.localeCompare(a.name));
+			} else {
+				collections = collections.sort((a, b) => a.name.localeCompare(b.name));
+			}
+		}
+	}
+
+	let collectionToEdit: Collection;
+	let isEditModalOpen: boolean = false;
+
+	function deleteAdventure(event: CustomEvent<number>) {
+		collections = collections.filter((adventure) => adventure.id !== event.detail);
+	}
+
+	function createAdventure(event: CustomEvent<Collection>) {
+		collections = [event.detail, ...collections];
+		isShowingCreateModal = false;
+	}
+
+	function editAdventure(event: CustomEvent<Collection>) {
+		collectionToEdit = event.detail;
+		isEditModalOpen = true;
+	}
+
+	function saveEdit(event: CustomEvent<Collection>) {
+		collections = collections.map((adventure) => {
+			if (adventure.id === event.detail.id) {
+				return event.detail;
+			}
+			return adventure;
+		});
+		isEditModalOpen = false;
+	}
+
+	let sidebarOpen = false;
+
+	function toggleSidebar() {
+		sidebarOpen = !sidebarOpen;
+	}
+</script>
+
+{#if isShowingCreateModal}
+	<NewCollection on:create={createAdventure} on:close={() => (isShowingCreateModal = false)} />
+{/if}
+
+<!-- {#if isEditModalOpen}
+	<EditAdventure
+		adventureToEdit={collectionToEdit}
+		on:close={() => (isEditModalOpen = false)}
+		on:saveEdit={saveEdit}
+	/>
+{/if} -->
+
+<div class="fixed bottom-4 right-4 z-[999]">
+	<div class="flex flex-row items-center justify-center gap-4">
+		<div class="dropdown dropdown-top dropdown-end">
+			<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
+				<Plus class="w-8 h-8" />
+			</div>
+			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			<ul
+				tabindex="0"
+				class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
+			>
+				<p class="text-center font-bold text-lg">Create new...</p>
+				<button
+					class="btn btn-primary"
+					on:click={() => {
+						isShowingCreateModal = true;
+						newType = 'visited';
+					}}
+				>
+					Collection</button
+				>
+
+				<!-- <button
+			class="btn btn-primary"
+			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
+		  > -->
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div class="drawer lg:drawer-open">
+	<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
+	<div class="drawer-content">
+		<!-- Page content -->
+		<h1 class="text-center font-bold text-4xl mb-6">My Collections</h1>
+		<p class="text-center">This search returned {count} results.</p>
+		{#if collections.length === 0}
+			<NotFound />
+		{/if}
+		<div class="p-4">
+			<button
+				class="btn btn-primary drawer-button lg:hidden mb-4 fixed bottom-0 left-0 ml-2 z-[999]"
+				on:click={toggleSidebar}
+			>
+				{sidebarOpen ? 'Close Filters' : 'Open Filters'}
+			</button>
+			{#if currentView == 'cards'}
+				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+					{#each collections as collection}
+						<CollectionCard {collection} />
+					{/each}
+				</div>
+			{/if}
+			<div class="join flex items-center justify-center mt-4">
+				{#if next || previous}
+					<div class="join">
+						{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
+							<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
+								<input type="hidden" name="page" value={page} />
+								<input type="hidden" name="next" value={next} />
+								<input type="hidden" name="previous" value={previous} />
+								{#if currentPage != page}
+									<button class="join-item btn btn-lg">{page}</button>
+								{:else}
+									<button class="join-item btn btn-lg btn-active">{page}</button>
+								{/if}
+							</form>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+	<div class="drawer-side">
+		<label for="my-drawer" class="drawer-overlay"></label>
+		<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
+			<!-- Sidebar content here -->
+			<div class="form-control">
+				<form action="?/get" method="post" use:enhance={handleSubmit}>
+					<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
+					<p class="text-md font-semibold mb-2">Order Direction</p>
+					<label for="asc">Ascending</label>
+					<input
+						type="radio"
+						name="order_direction"
+						id="asc"
+						class="radio radio-primary"
+						checked
+						value="asc"
+					/>
+					<label for="desc">Descending</label>
+					<input
+						type="radio"
+						name="order_direction"
+						id="desc"
+						value="desc"
+						class="radio radio-primary"
+					/>
+					<br />
+					<p class="text-md font-semibold mt-2 mb-2">Order By</p>
+					<label for="name">Name</label>
+					<input
+						type="radio"
+						name="order_by"
+						id="name"
+						class="radio radio-primary"
+						checked
+						value="name"
+					/>
+					<button type="submit" class="btn btn-primary mt-4">Filter</button>
+				</form>
+				<div class="divider"></div>
+				<h3 class="text-center font-semibold text-lg mb-4">View</h3>
+				<div class="join">
+					<input
+						class="join-item btn-neutral btn"
+						type="radio"
+						name="options"
+						aria-label="Cards"
+						on:click={() => (currentView = 'cards')}
+						checked
+					/>
+					<input
+						class="join-item btn btn-neutral"
+						type="radio"
+						name="options"
+						aria-label="Table"
+						on:click={() => (currentView = 'table')}
+					/>
+				</div>
+			</div>
+		</ul>
+	</div>
+</div>

frontend/src/routes/collections/[id]/+page.server.ts

@@ -0,0 +1,93 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	const id = event.params as { id: string };
+	let request = await fetch(`${endpoint}/api/collections/${id.id}/`, {
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!request.ok) {
+		console.error('Failed to fetch adventure ' + id.id);
+		return {
+			props: {
+				adventure: null
+			}
+		};
+	} else {
+		let collection = (await request.json()) as Adventure;
+
+		return {
+			props: {
+				adventure: collection
+			}
+		};
+	}
+}) satisfies PageServerLoad;
+
+import type { Actions } from '@sveltejs/kit';
+import { tryRefreshToken } from '$lib/index.server';
+
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const actions: Actions = {
+	delete: async (event) => {
+		const id = event.params as { id: string };
+		const adventureId = id.id;
+
+		if (!event.locals.user) {
+			const refresh = event.cookies.get('refresh');
+			let auth = event.cookies.get('auth');
+			if (!refresh) {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+			let res = await tryRefreshToken(refresh);
+			if (res) {
+				auth = res;
+				event.cookies.set('auth', auth, {
+					httpOnly: true,
+					sameSite: 'lax',
+					expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
+					path: '/'
+				});
+			} else {
+				return {
+					status: 401,
+					body: { message: 'Unauthorized' }
+				};
+			}
+		}
+		if (!adventureId) {
+			return {
+				status: 400,
+				error: new Error('Bad request')
+			};
+		}
+
+		let res = await fetch(`${serverEndpoint}/api/adventures/${event.params.id}`, {
+			method: 'DELETE',
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`,
+				'Content-Type': 'application/json'
+			}
+		});
+		console.log(res);
+		if (!res.ok) {
+			return {
+				status: res.status,
+				error: new Error('Failed to delete adventure')
+			};
+		} else {
+			return {
+				status: 204
+			};
+		}
+	}
+};

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

@@ -0,0 +1,127 @@
+<!-- <script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import type { Adventure } from '$lib/types';
+
+	export let data;
+	console.log(data);
+	let adventure: Adventure | null = data.props.adventure;
+</script>
+
+{#if !adventure}
+	<p>Adventure not found</p>
+{:else}
+	<AdventureCard {adventure} type={adventure.type} />
+{/if} -->
+
+<script lang="ts">
+	import type { Adventure } from '$lib/types';
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
+	import { goto } from '$app/navigation';
+	import Lost from '$lib/assets/undraw_lost.svg';
+
+	export let data: PageData;
+
+	let adventure: Adventure;
+
+	let notFound: boolean = false;
+
+	onMount(() => {
+		if (data.props.adventure) {
+			adventure = data.props.adventure;
+		} else {
+			notFound = true;
+		}
+	});
+</script>
+
+{#if notFound}
+	<div
+		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
+	>
+		<div class="mx-auto max-w-md text-center">
+			<div class="flex items-center justify-center">
+				<img src={Lost} alt="Lost" class="w-1/2" />
+			</div>
+			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+				Adventure not Found
+			</h1>
+			<p class="mt-4 text-muted-foreground">
+				The adventure you were looking for could not be found. Please try a different adventure or
+				check back later.
+			</p>
+			<div class="mt-6">
+				<button class="btn btn-primary" on:click={() => goto('/')}>Homepage</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+{#if !adventure && !notFound}
+	<div class="flex justify-center items-center w-full mt-16">
+		<span class="loading loading-spinner w-24 h-24"></span>
+	</div>
+{/if}
+{#if adventure}
+	{#if adventure.name}
+		<h1 class="text-center font-extrabold text-4xl mb-2">{adventure.name}</h1>
+	{/if}
+	{#if adventure.location}
+		<p class="text-center text-2xl">
+			<iconify-icon icon="mdi:map-marker" class="text-xl -mb-0.5"
+			></iconify-icon>{adventure.location}
+		</p>
+	{/if}
+	{#if adventure.date}
+		<p class="text-center text-lg mt-4 pl-16 pr-16">
+			Visited on: {adventure.date}
+		</p>
+	{/if}
+	{#if adventure.rating !== undefined && adventure.rating !== null}
+		<div class="flex justify-center items-center">
+			<div class="rating" aria-readonly="true">
+				{#each Array.from({ length: 5 }, (_, i) => i + 1) as star}
+					<input
+						type="radio"
+						name="rating-1"
+						class="mask mask-star"
+						checked={star <= adventure.rating}
+						disabled
+					/>
+				{/each}
+			</div>
+		</div>
+	{/if}
+	{#if adventure.description}
+		<p class="text-center text-lg mt-4 pl-16 pr-16">{adventure.description}</p>
+	{/if}
+	{#if adventure.link}
+		<div class="flex justify-center items-center mt-4">
+			<a href={adventure.link} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
+				Visit Website
+			</a>
+		</div>
+	{/if}
+	{#if adventure.activity_types && adventure.activity_types.length > 0}
+		<div class="flex justify-center items-center mt-4">
+			<p class="text-center text-lg">Activities:&nbsp</p>
+			<ul class="flex flex-wrap">
+				{#each adventure.activity_types as activity}
+					<div class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1">
+						{activity}
+					</div>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+	{#if adventure.image}
+		<div class="flex content-center justify-center">
+			<!-- svelte-ignore a11y-img-redundant-alt -->
+			<img
+				src={adventure.image}
+				alt="Adventure Image"
+				class="w-1/2 mt-4 align-middle rounded-lg shadow-lg"
+			/>
+		</div>
+	{/if}
+{/if}

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

@@ -3,7 +3,6 @@
 
 	let stats: {
 		country_count: number;
-		featured_count: number;
 		planned_count: number;
 		total_regions: number;
 		trips_count: number;

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

@@ -1,31 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
-const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
-
-export const load = (async (event) => {
-	const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
-	if (!event.locals.user || !event.cookies.get('auth')) {
-		return redirect(302, '/login');
-	} else {
-		let res = await event.fetch(`${endpoint}/api/trips/`, {
-			headers: {
-				Cookie: `${event.cookies.get('auth')}`
-			}
-		});
-		if (res.ok) {
-			let data = await res.json();
-			console.log(data);
-			return {
-				props: {
-					trips: data
-				}
-			};
-		} else {
-			return {
-				status: res.status,
-				error: 'Failed to load trips'
-			};
-		}
-	}
-	return {};
-}) satisfies PageServerLoad;

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

@@ -1,74 +0,0 @@
-<script lang="ts">
-	import type { Trip } from '$lib/types';
-	import { onMount } from 'svelte';
-	import type { PageData } from './$types';
-	import Lost from '$lib/assets/undraw_lost.svg';
-	import { goto } from '$app/navigation';
-	import TripCard from '$lib/components/TripCard.svelte';
-
-	export let data: PageData;
-
-	let trips: Trip[];
-	let notFound: boolean = false;
-	let noTrips: boolean = false;
-
-	onMount(() => {
-		if (data.props && data.props.trips?.length > 0) {
-			trips = data.props.trips;
-		} else if (data.props && data.props.trips?.length === 0) {
-			noTrips = true;
-		} else {
-			notFound = true;
-		}
-	});
-
-	console.log(data);
-</script>
-
-{#if notFound}
-	<div
-		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
-	>
-		<div class="mx-auto max-w-md text-center">
-			<div class="flex items-center justify-center">
-				<img src={Lost} alt="Lost" class="w-1/2" />
-			</div>
-			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
-				Adventure not Found
-			</h1>
-			<p class="mt-4 text-muted-foreground">
-				The adventure you were looking for could not be found. Please try a different adventure or
-				check back later.
-			</p>
-			<div class="mt-6">
-				<button class="btn btn-primary" on:click={() => goto('/')}>Homepage</button>
-			</div>
-		</div>
-	</div>
-{/if}
-
-{#if noTrips}
-	<div
-		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
-	>
-		<div class="mx-auto max-w-md text-center">
-			<div class="flex items-center justify-center">
-				<img src={Lost} alt="Lost" class="w-1/2" />
-			</div>
-			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
-				No Trips Found
-			</h1>
-			<p class="mt-4 text-muted-foreground">
-				There are no trips to display. Please try again later.
-			</p>
-		</div>
-	</div>
-{/if}
-
-{#if trips && !notFound}
-	<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
-		{#each trips as trip (trip.id)}
-			<TripCard {trip} />
-		{/each}
-	</div>
-{/if}