Merge pull request #116 from seanmorley15/development

Development

frontend/src/lib/components/Navbar.svelte

@@ -53,10 +53,7 @@
 			>
 				{#if data.user}
 					<li>
-						<button on:click={() => goto('/visited')}>Visited</button>
-					</li>
-					<li>
-						<button on:click={() => goto('/planner')}>Planner</button>
+						<button on:click={() => goto('/adventures')}>Adventures</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>
-				</li>
-				<li>
-					<button class="btn btn-neutral" on:click={() => goto('/planner')}>Planner</button>
+					<button class="btn btn-neutral" on:click={() => goto('/adventures')}>Adventures</button>
 				</li>
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}>World Travel</button

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,45 @@ 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 adventures: Adventure[] = [];
+		let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
+			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];
+		}
+		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;
+
 export const actions: Actions = {
 	create: async (event) => {
 		const formData = await event.request.formData();
@@ -203,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 {
@@ -316,5 +347,68 @@ export const actions: Actions = {
 		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 visited = formData.get('visited');
+		const planned = formData.get('planned');
+		const featured = formData.get('featured');
+
+		let adventures: Adventure[] = [];
+
+		if (!event.locals.user) {
+			return {
+				status: 401,
+				body: { message: 'Unauthorized' }
+			};
+		}
+
+		if (visited) {
+			let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
+				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

@@ -0,0 +1,217 @@
+<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 Plus from '~icons/mdi/plus';
+
+	export let data: any;
+	console.log(data);
+
+	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;
+	}
+</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">
+		<!-- 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={adventure.type}
+						{adventure}
+						on:delete={deleteAdventure}
+						on:edit={editAdventure}
+					/>
+				{/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">
+				<form action="?/get" method="post" use:enhance={handleSubmit}>
+					<label class="label cursor-pointer">
+						<span class="label-text">Completed</span>
+						<input
+							type="checkbox"
+							name="visited"
+							id="visited"
+							class="checkbox checkbox-primary"
+							checked
+						/>
+					</label>
+					<label class="label cursor-pointer">
+						<span class="label-text">Planned</span>
+						<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>
+					<label for="name-asc">Name ASC</label>
+					<input
+						type="radio"
+						name="name"
+						id="name-asc"
+						class="radio radio-primary"
+						checked
+						on:click={() => sort({ attribute: 'name', order: 'asc' })}
+					/>
+					<label for="name-desc">Name DESC</label>
+					<input
+						type="radio"
+						name="name"
+						id="name-desc"
+						class="radio radio-primary"
+						on:click={() => sort({ attribute: 'name', order: 'desc' })}
+					/>
+				</form>
+			</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}