Add more options for featured adventures

src/lib/components/AddFromFeatured.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { Adventure } from "$lib/utils/types";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  import { onMount } from "svelte";
+  let modal: HTMLDialogElement;
+
+  export let adventure: Adventure;
+
+  onMount(() => {
+    modal = document.getElementById("my_modal_1") as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
+  });
+
+  function close() {
+    dispatch("close");
+  }
+
+  function viisted() {
+    dispatch("visited");
+    close();
+  }
+  function idea() {
+    dispatch("idea");
+    close();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+</script>
+
+<dialog id="my_modal_1" class="modal">
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+    <h3 class="font-bold text-lg">
+      Where should Adventure: {adventure.name} be added?
+    </h3>
+    <button class="btn btn-primary mr-2" on:click={viisted}
+      >Visited Adventures</button
+    >
+    <button class="btn btn-primary" on:click={idea}>Adventure Idea</button>
+    <button class="btn btn-neutral" on:click={close}>Close</button>
+  </div>
+</dialog>

src/lib/db/schema.ts

@@ -9,12 +9,6 @@ import {
   integer,
 } from "drizzle-orm/pg-core";
 
-export const featuredAdventures = pgTable("featuredAdventures", {
-  id: serial("id").primaryKey(),
-  name: text("name").notNull().unique(),
-  location: text("location"),
-});
-
 export const sharedAdventures = pgTable("sharedAdventures", {
   id: text("id").primaryKey(),
   data: json("data").notNull(),

src/routes/featured/+page.server.ts

@@ -1,5 +1,5 @@
 import { db } from "$lib/db/db.server";
-import { adventureTable, featuredAdventures } from "$lib/db/schema";
+import { adventureTable } from "$lib/db/schema";
 import type { Adventure } from "$lib/utils/types";
 import { eq } from "drizzle-orm";
 

src/routes/featured/+page.svelte

@@ -3,9 +3,32 @@
   import { goto } from "$app/navigation";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import type { Adventure } from "$lib/utils/types.js";
+  import AddFromFeatured from "$lib/components/AddFromFeatured.svelte";
+  import { addAdventure } from "../../services/adventureService.js";
+  import SucessToast from "$lib/components/SucessToast.svelte";
+
+  let isShowingToast: boolean = false;
+  let toastAction: string = "";
+
+  let adventureToAdd: Adventure | null = null;
+
+  function showToast(action: string) {
+    toastAction = action;
+    isShowingToast = true;
+
+    setTimeout(() => {
+      isShowingToast = false;
+      toastAction = "";
+    }, 3000);
+  }
 
   async function add(event: CustomEvent<Adventure>) {
-    let detailAdventure = event.detail;
+    adventureToAdd = event.detail;
+  }
+
+  async function addToVisted() {
+    let detailAdventure = adventureToAdd;
+    adventureToAdd = null;
 
     const response = await fetch("/api/visits", {
       method: "POST",
@@ -19,10 +42,46 @@
 
     if (response.status === 401) {
       goto("/login");
+    } else {
+      showToast("Adventure added to visited list!");
+    }
+  }
+
+  async function addIdea() {
+    let detailAdventure = adventureToAdd;
+    adventureToAdd = null;
+
+    const response = await fetch("/api/planner", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        detailAdventure,
+      }),
+    });
+
+    if (response.status === 401) {
+      goto("/login");
+    } else {
+      showToast("Adventure added to idea list!");
     }
   }
 </script>
 
+{#if isShowingToast}
+  <SucessToast action={toastAction} />
+{/if}
+
+{#if adventureToAdd}
+  <AddFromFeatured
+    adventure={adventureToAdd}
+    on:close={() => (adventureToAdd = null)}
+    on:visited={addToVisted}
+    on:idea={addIdea}
+  />
+{/if}
+
 <div class="flex justify-center items-center w-full mt-4 mb-4">
   <article class="prose">
     <h1 class="text-center">Featured Adventure Locations</h1>