new adventure list

frontend/src/lib/components/Navbar.svelte

@@ -53,10 +53,7 @@
 			>
 				{#if data.user}
 					<li>
-						<button on:click={() => goto('/visited')}>Visited</button>
+						<button on:click={() => goto('/adventures')}>Adventures</button>
-					</li>
-					<li>
-						<button on:click={() => goto('/planner')}>Planner</button>
 					</li>
 					<li>
 						<button on:click={() => goto('/worldtravel')}>World Travel</button>
@@ -87,10 +84,7 @@
 		<ul class="menu menu-horizontal px-1 gap-2">
 			{#if data.user}
 				<li>
-					<button class="btn btn-neutral" on:click={() => goto('/visited')}>Visited</button>
+					<button class="btn btn-neutral" on:click={() => goto('/adventures')}>Adventures</button>
-				</li>
-				<li>
-					<button class="btn btn-neutral" on:click={() => goto('/planner')}>Planner</button>
 				</li>
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}>World Travel</button

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

@@ -13,7 +13,8 @@ export const load = (async (event) => {
 	if (!event.locals.user) {
 		return redirect(302, '/login');
 	} else {
-		let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/`, {
+		let adventures: Adventure[] = [];
+		let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
 			headers: {
 				Cookie: `${event.cookies.get('auth')}`
 			}
@@ -23,12 +24,21 @@ export const load = (async (event) => {
 			return redirect(302, '/login');
 		} else {
 			let visited = (await visitedFetch.json()) as Adventure[];
-			return {
+			adventures = [...adventures, ...visited];
-				props: {
-					visited
-				}
-			};
 		}
+		let plannedFetch = await fetch(`${serverEndpoint}/api/adventures/planned/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!plannedFetch.ok) {
+			console.error('Failed to fetch visited adventures');
+			return redirect(302, '/login');
+		} else {
+			let planned = (await plannedFetch.json()) as Adventure[];
+			adventures = [...adventures, ...planned];
+		}
+		return { adventures } as { adventures: Adventure[] };
 	}
 }) satisfies PageServerLoad;
 
@@ -224,7 +234,7 @@ export const actions: Actions = {
 
 		const image = formData.get('image') as File;
 
-		console.log(activity_types);
+		// console.log(activity_types);
 
 		if (!type || !name) {
 			return {
@@ -339,23 +349,66 @@ export const actions: Actions = {
 		return { image_url, link_url };
 	},
 	get: async (event) => {
-		const adventureId = event.params.adventureId;
+		if (!event.locals.user) {
+		}
 
-		const res = await fetch(`${serverEndpoint}/api/adventures/${adventureId}/`, {
+		const formData = await event.request.formData();
-			headers: {
+		const visited = formData.get('visited');
-				Cookie: `${event.cookies.get('auth')}`
+		const planned = formData.get('planned');
-			}
+		const featured = formData.get('featured');
-		});
 
-		if (!res.ok) {
+		let adventures: Adventure[] = [];
+
+		if (!event.locals.user) {
 			return {
-				status: res.status,
+				status: 401,
-				body: { error: 'Failed to fetch adventure' }
+				body: { message: 'Unauthorized' }
 			};
 		}
 
-		let adventure = await res.json();
+		if (visited) {
-
+			let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
-		return { adventure };
+				headers: {
+					Cookie: `${event.cookies.get('auth')}`
+				}
+			});
+			if (!visitedFetch.ok) {
+				console.error('Failed to fetch visited adventures');
+				return redirect(302, '/login');
+			} else {
+				let visited = (await visitedFetch.json()) as Adventure[];
+				adventures = [...adventures, ...visited];
+			}
+		}
+		if (planned) {
+			let plannedFetch = await fetch(`${serverEndpoint}/api/adventures/planned/`, {
+				headers: {
+					Cookie: `${event.cookies.get('auth')}`
+				}
+			});
+			if (!plannedFetch.ok) {
+				console.error('Failed to fetch visited adventures');
+				return redirect(302, '/login');
+			} else {
+				let planned = (await plannedFetch.json()) as Adventure[];
+				adventures = [...adventures, ...planned];
+			}
+		}
+		if (featured) {
+			let featuredFetch = await fetch(`${serverEndpoint}/api/adventures/featured/`, {
+				headers: {
+					Cookie: `${event.cookies.get('auth')}`
+				}
+			});
+			if (!featuredFetch.ok) {
+				console.error('Failed to fetch visited adventures');
+				return redirect(302, '/login');
+			} else {
+				let featured = (await featuredFetch.json()) as Adventure[];
+				adventures = [...adventures, ...featured];
+			}
+		}
+		// console.log(adventures);
+		return adventures as Adventure[];
 	}
 };

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

@@ -1,27 +1,131 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
 	import type { Adventure } from '$lib/types';
-	import { onMount } from 'svelte';
+
+	import Plus from '~icons/mdi/plus';
 
 	export let data: any;
 	console.log(data);
 
-	let adventures: Adventure[] = data.props.visited;
+	let adventures: Adventure[] = data.adventures || [];
+
+	let currentSort = { attribute: 'name', order: 'asc' };
+
+	let isShowingCreateModal: boolean = false;
+	let newType: string = '';
+
+	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);
+					adventures = result.data as Adventure[];
+					sort(currentSort);
+				}
+			}
+		};
+	}
+
+	function sort({ attribute, order }: { attribute: string; order: string }) {
+		currentSort.attribute = attribute;
+		currentSort.order = order;
+		if (attribute === 'name') {
+			if (order === 'asc') {
+				adventures = adventures.sort((a, b) => a.name.localeCompare(b.name));
+			} else {
+				adventures = adventures.sort((a, b) => b.name.localeCompare(a.name));
+			}
+		}
+	}
+
+	let adventureToEdit: Adventure;
+	let isEditModalOpen: boolean = false;
+
+	function deleteAdventure(event: CustomEvent<number>) {
+		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
+	}
+
+	function createAdventure(event: CustomEvent<Adventure>) {
+		adventures = [event.detail, ...adventures];
+		isShowingCreateModal = 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;
+	}
 
 	let sidebarOpen = false;
 
 	function toggleSidebar() {
 		sidebarOpen = !sidebarOpen;
 	}
-
-	// onMount(() => {
-	// 	const mediaQuery = window.matchMedia('(min-width: 768px)');
-	// 	sidebarOpen = mediaQuery.matches;
-	// 	mediaQuery.addListener((e) => (sidebarOpen = e.matches));
-	// });
 </script>
 
+{#if isShowingCreateModal}
+	<NewAdventure
+		type={newType}
+		on:create={createAdventure}
+		on:close={() => (isShowingCreateModal = false)}
+	/>
+{/if}
+
+{#if isEditModalOpen}
+	<EditAdventure
+		{adventureToEdit}
+		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';
+					}}
+				>
+					Visited Adventure</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">
@@ -39,7 +143,12 @@
 			</button>
 			<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 				{#each adventures as adventure}
-					<AdventureCard type="visited" {adventure} />
+					<AdventureCard
+						type={adventure.type}
+						{adventure}
+						on:delete={deleteAdventure}
+						on:edit={editAdventure}
+					/>
 				{/each}
 			</div>
 		</div>
@@ -50,20 +159,56 @@
 			<!-- Sidebar content here -->
 			<h3 class="text-center font-semibold text-lg mb-4">Adventure Types</h3>
 			<div class="form-control">
-				<label class="label cursor-pointer">
+				<form action="?/get" method="post" use:enhance={handleSubmit}>
-					<span class="label-text">Completed</span>
+					<label class="label cursor-pointer">
-					<input type="checkbox" class="checkbox checkbox-primary" />
+						<span class="label-text">Completed</span>
-				</label>
+						<input
-				<label class="label cursor-pointer">
+							type="checkbox"
-					<span class="label-text">Planned</span>
+							name="visited"
-					<input type="checkbox" class="checkbox checkbox-primary" />
+							id="visited"
-				</label>
+							class="checkbox checkbox-primary"
-				<label class="label cursor-pointer">
+							checked
-					<span class="label-text">Featured</span>
+						/>
-					<input type="checkbox" class="checkbox checkbox-primary" />
+					</label>
-				</label>
+					<label class="label cursor-pointer">
-				<div class="divider"></div>
+						<span class="label-text">Planned</span>
-				<button type="button" class="btn btn-primary mt-4">Filter</button>
+						<input
+							type="checkbox"
+							id="planned"
+							name="planned"
+							class="checkbox checkbox-primary"
+							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>
+
+					<button type="submit" class="btn btn-primary mt-4">Filter</button>
+					<div class="divider"></div>
+					<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
+					<input
+						type="radio"
+						name="name"
+						id="name-asc"
+						class="radio radio-primary"
+						checked
+						on:click={() => sort({ attribute: 'name', order: 'asc' })}
+					/>
+					<input
+						type="radio"
+						name="name"
+						id="name-desc"
+						class="radio radio-primary"
+						on:click={() => sort({ attribute: 'name', order: 'desc' })}
+					/>
+				</form>
 			</div>
 		</ul>
 	</div>