more filtering options

frontend/src/lib/components/NotFound.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Lost from '$lib/assets/undraw_lost.svg';
+</script>
+
+<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 adventures found
+		</h1>
+		<p class="mt-4 text-muted-foreground">
+			There are no adventures to display. Add some using the plus button at the bottom right or try
+			changing filters!
+		</p>
+	</div>
+</div>

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

@@ -3,14 +3,35 @@ 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';
-
 import type { Actions } 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 visitedFetch = await fetch(`${serverEndpoint}/api/adventures/`, {
+			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[];
+			return {
+				props: {
+					visited
+				}
+			};
+		}
+	}
+}) satisfies PageServerLoad;
+
 export const actions: Actions = {
 	create: async (event) => {
 		const formData = await event.request.formData();
@@ -316,5 +337,25 @@ export const actions: Actions = {
 		let image_url = adventure.image;
 		let link_url = adventure.link;
 		return { image_url, link_url };
+	},
+	get: async (event) => {
+		const adventureId = event.params.adventureId;
+
+		const res = await fetch(`${serverEndpoint}/api/adventures/${adventureId}/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+
+		if (!res.ok) {
+			return {
+				status: res.status,
+				body: { error: 'Failed to fetch adventure' }
+			};
+		}
+
+		let adventure = await res.json();
+
+		return { adventure };
 	}
 };

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import NotFound from '$lib/components/NotFound.svelte';
+	import type { Adventure } from '$lib/types';
+	import { onMount } from 'svelte';
+
+	export let data: any;
+	console.log(data);
+
+	let adventures: Adventure[] = data.props.visited;
+
+	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>
+
+<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 Adventures</h1>
+		{#if adventures.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>
+			<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+				{#each adventures as adventure}
+					<AdventureCard type="visited" {adventure} />
+				{/each}
+			</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 -->
+			<h3 class="text-center font-semibold text-lg mb-4">Adventure Types</h3>
+			<div class="form-control">
+				<label class="label cursor-pointer">
+					<span class="label-text">Completed</span>
+					<input type="checkbox" class="checkbox checkbox-primary" />
+				</label>
+				<label class="label cursor-pointer">
+					<span class="label-text">Planned</span>
+					<input type="checkbox" class="checkbox checkbox-primary" />
+				</label>
+				<label class="label cursor-pointer">
+					<span class="label-text">Featured</span>
+					<input type="checkbox" class="checkbox checkbox-primary" />
+				</label>
+				<div class="divider"></div>
+				<button type="button" class="btn btn-primary mt-4">Filter</button>
+			</div>
+		</ul>
+	</div>
+</div>

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

@@ -7,6 +7,7 @@
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
 
 	import Lost from '$lib/assets/undraw_lost.svg';
+	import NotFound from '$lib/components/NotFound.svelte';
 
 	export let data: PageData;
 	console.log(data);
@@ -84,6 +85,8 @@
 
 {#if adventures.length > 0}
 	<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
+{:else}
+	<NotFound />
 {/if}
 
 <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
@@ -91,21 +94,3 @@
 		<AdventureCard type="visited" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
 	{/each}
 </div>
-
-{#if adventures.length === 0}
-	<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 visited adventures found
-			</h1>
-			<p class="mt-4 text-muted-foreground">
-				There are no adventures to display. Add some using the plus button at the bottom right!
-			</p>
-		</div>
-	</div>
-{/if}