Autocomplete for plans activity types

src/lib/components/EditModal.svelte

@@ -5,18 +5,42 @@
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
   import { addActivityType, generateDescription, getImage } from "$lib";
+  import AutoComplete from "./AutoComplete.svelte";
   let modal: HTMLDialogElement;
 
   console.log(adventureToEdit.id);
 
   let originalName = adventureToEdit.name;
 
-  onMount(() => {
+  let activityTypes: string[] = [];
+
+  $: selected = "";
+
+  // on selection add to activityTypes
+  $: {
+    if (selected) {
+      adventureToEdit = addActivityType(selected, adventureToEdit);
+
+      if (activityInput.length === 0) {
+        activityInput = selected;
+      } else {
+        activityInput = activityInput + ", " + selected;
+      }
+      selected = "";
+    }
+  }
+
+  onMount(async () => {
     modal = document.getElementById("my_modal_1") as HTMLDialogElement;
     if (modal) {
       modal.showModal();
     }
     activityInput = (adventureToEdit?.activityTypes || []).join(", ");
+    let activityFetch = await fetch(
+      "/api/activitytypes?type=" + adventureToEdit.type
+    );
+    let res = await activityFetch.json();
+    activityTypes = res.types;
   });
 
   function submit() {
@@ -120,6 +144,7 @@
             bind:value={activityInput}
             class="input input-bordered w-full max-w-xs"
           />
+          <AutoComplete items={activityTypes} bind:selectedItem={selected} />
         </div>
         <div>
           <label for="rating">Rating</label>