activity type overhaul

frontend/src/lib/components/ActivityComplete.svelte

@@ -20,8 +20,9 @@
 
 	function addActivity() {
 		if (inputVal && activities) {
-			if (!activities.includes(inputVal) && allActivities.includes(inputVal)) {
+			const trimmedInput = inputVal.trim();
-				activities = [...activities, inputVal];
+			if (trimmedInput && !activities.includes(trimmedInput)) {
+				activities = [...activities, trimmedInput];
 				inputVal = '';
 			}
 		}
@@ -56,6 +57,7 @@
 	/>
 	{#if inputVal && filteredItems.length > 0}
 		<ul class="absolute z-10 w-full bg-base-100 shadow-lg max-h-60 overflow-auto">
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			{#each filteredItems as item}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->

frontend/src/lib/components/Avatar.svelte

@@ -31,6 +31,7 @@
 		<p class="text-lg ml-4 font-bold">Hi, {user.first_name} {user.last_name}</p>
 		<li><button on:click={() => goto('/profile')}>Profile</button></li>
 		<li><button on:click={() => goto('/adventures')}>My Adventures</button></li>
+		<li><button on:click={() => goto('/activities')}>My Activities</button></li>
 		<li><button on:click={() => goto('/settings')}>User Settings</button></li>
 		<form method="post">
 			<li><button formaction="/?/logout">Logout</button></li>

frontend/src/lib/components/NewAdventure.svelte

@@ -10,6 +10,8 @@
 	export let type: string = 'visited';
 
 	import Wikipedia from '~icons/mdi/wikipedia';
+	import ClipboardList from '~icons/mdi/clipboard-list';
+	import ActivityComplete from './ActivityComplete.svelte';
 
 	let newAdventure: Adventure = {
 		id: NaN,
@@ -218,17 +220,18 @@
 					</div>
 				</div>
 				<div class="mb-2">
-					<label for="activity_types"
+					<label for="activityTypes"
-						>Activity Types <iconify-icon icon="mdi:clipboard-list" class="text-xl -mb-1"
+						>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-						></iconify-icon></label
 					><br />
 					<input
 						type="text"
-						name="activity_types"
 						id="activity_types"
+						name="activity_types"
+						hidden
 						bind:value={newAdventure.activity_types}
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<ActivityComplete bind:activities={newAdventure.activity_types} />
 				</div>
 				<div class="mb-2">
 					<label for="rating"

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

@@ -0,0 +1,26 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	}
+	let allActivities: string[] = [];
+	let res = await fetch(`${endpoint}/api/activity-types/types/`, {
+		headers: {
+			'Content-Type': 'application/json',
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	let data = await res.json();
+	if (data) {
+		allActivities = data;
+	}
+	return {
+		props: {
+			activities: allActivities
+		}
+	};
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	let activities: string[] = data.props.activities;
+</script>
+
+<!-- make a table with pinned rows -->
+<table class="table table-compact">
+	<thead>
+		<tr>
+			<th>Activity</th>
+			<th>Actions</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each activities as activity}
+			<tr>
+				<td>{activity}</td>
+				<td>
+					<!-- <button
+						class="btn btn-sm btn-error"
+						on:click={() => {
+							activities = activities.filter((a) => a !== activity);
+						}}>Remove</button
+					> -->
+				</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+<!-- 		</ul> -->

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

@@ -6,6 +6,10 @@
 
 	export let data: PageData;
 
+	function deleteAdventure(event: CustomEvent<number>) {
+		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
+	}
+
 	console.log(data);
 	let adventures: Adventure[] = [];
 	if (data.props) {
@@ -18,7 +22,7 @@
 {:else}
 	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 		{#each adventures as adventure}
-			<AdventureCard type={adventure.type} {adventure} />
+			<AdventureCard type={adventure.type} {adventure} on:delete={deleteAdventure} />
 		{/each}
 	</div>
 {/if}