activity type overhaul

frontend/src/lib/components/ActivityComplete.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let activities: string[] | undefined | null;
+
+	let allActivities: string[] = [];
+	let inputVal: string = '';
+
+	if (activities == null || activities == undefined) {
+		activities = [];
+	}
+
+	onMount(async () => {
+		let res = await fetch('/api/activity-types/types/');
+		let data = await res.json();
+		if (data) {
+			allActivities = data;
+		}
+	});
+
+	function addActivity() {
+		if (inputVal && activities) {
+			if (!activities.includes(inputVal) && allActivities.includes(inputVal)) {
+				activities = [...activities, inputVal];
+				inputVal = '';
+			}
+		}
+	}
+
+	function removeActivity(item: string) {
+		if (activities) {
+			activities = activities.filter((activity) => activity !== item);
+		}
+	}
+
+	$: filteredItems = allActivities.filter(function (activity) {
+		return (
+			activity.toLowerCase().includes(inputVal.toLowerCase()) &&
+			(!activities || !activities.includes(activity))
+		);
+	});
+</script>
+
+<div class="relative">
+	<input
+		type="text"
+		class="input input-bordered w-full"
+		placeholder="Add an activity"
+		bind:value={inputVal}
+		on:keydown={(e) => {
+			if (e.key === 'Enter') {
+				e.preventDefault();
+				addActivity();
+			}
+		}}
+	/>
+	{#if inputVal && filteredItems.length > 0}
+		<ul class="absolute z-10 w-full bg-base-100 shadow-lg max-h-60 overflow-auto">
+			{#each filteredItems as item}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+				<li
+					class="p-2 hover:bg-base-200 cursor-pointer"
+					on:click={() => {
+						inputVal = item;
+						addActivity();
+					}}
+				>
+					{item}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<div class="mt-2">
+	<ul class="space-y-2">
+		{#if activities}
+			{#each activities as activity}
+				<li class="flex items-center justify-between bg-base-200 p-2 rounded">
+					{activity}
+					<button class="btn btn-sm btn-error" on:click={() => removeActivity(activity)}>
+						Remove
+					</button>
+				</li>
+			{/each}
+		{/if}
+	</ul>
+</div>

frontend/src/lib/components/EditAdventure.svelte

@@ -27,6 +27,7 @@
 	import Earth from '~icons/mdi/earth';
 	import Wikipedia from '~icons/mdi/wikipedia';
 	import ImageFetcher from './ImageFetcher.svelte';
+	import ActivityComplete from './ActivityComplete.svelte';
 
 	onMount(async () => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
@@ -213,9 +214,11 @@
 						type="text"
 						id="activity_types"
 						name="activity_types"
+						hidden
 						bind:value={adventureToEdit.activity_types}
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<ActivityComplete bind:activities={adventureToEdit.activity_types} />
 				</div>
 				<div class="mb-2">
 					<label for="image">Image </label><br />