add search bar to navbar

src/lib/components/Navbar.svelte

@@ -1,30 +1,36 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
   import { goto } from "$app/navigation";
-  import type { DatabaseUser } from "$lib/server/auth";
   export let user: any;
   import UserAvatar from "./UserAvatar.svelte";
-  import { onMount } from "svelte";
   import InfoModal from "./InfoModal.svelte";
-  import infoIcon from "$lib/assets/info.svg";
   import type { SubmitFunction } from "@sveltejs/kit";
-  async function goHome() {
-    goto("/");
-  }
-  async function goToLog() {
-    goto("/log");
-  }
-  async function goToFeatured() {
-    goto("/featured");
-  }
+  import { onMount } from "svelte";
+
+  let searchVal: string = "";
+
   async function toToLogin() {
     goto("/login");
   }
   async function goToSignup() {
     goto("/signup");
   }
-  async function goToWorldTravel() {
-    goto("/worldtravel");
+
+  onMount(() => {
+    if (window.location.pathname === "/search") {
+      searchVal = new URLSearchParams(window.location.search).get("all") || "";
+    }
+  });
+
+  async function goToSearch() {
+    let reload: boolean = false;
+    if (window.location.pathname === "/search") {
+      reload = true;
+    }
+    await goto("/search?all=" + searchVal);
+    if (reload) {
+      location.reload();
+    }
   }
 
   const submitUpdateTheme: SubmitFunction = ({ action }) => {
@@ -86,6 +92,24 @@
         <li>
           <button on:click={() => goto("/featured")}>Featured</button>
         </li>
+        {#if user}
+          <li>
+            <label class="input input-bordered flex items-center gap-2">
+              <input type="text" class="grow" placeholder="Search" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                class="w-4 h-4 opacity-70"
+                ><path
+                  fill-rule="evenodd"
+                  d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+                  clip-rule="evenodd"
+                /></svg
+              >
+            </label>
+          </li>
+        {/if}
         {#if !user}
           <li>
             <button class="btn btn-primary" on:click={toToLogin}>Login</button>
@@ -125,6 +149,38 @@
           >Featured</button
         >
       </li>
+      {#if user}
+        <li>
+          <label class="input input-bordered flex items-center gap-2">
+            <form on:submit={() => goto("/search?all=" + searchVal)}>
+              <input
+                type="text"
+                class="grow"
+                placeholder="Search"
+                bind:value={searchVal}
+                on:keydown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+
+                    goToSearch();
+                  }
+                }}
+              />
+            </form>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+              class="w-4 h-4 opacity-70"
+              ><path
+                fill-rule="evenodd"
+                d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+                clip-rule="evenodd"
+              /></svg
+            >
+          </label>
+        </li>
+      {/if}
       {#if !user}
         <li>
           <button class="btn btn-primary" on:click={toToLogin}>Login</button>

src/routes/+layout.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
   export let data;
-  import Footer from "$lib/components/Footer.svelte";
+  // import Footer from "$lib/components/Footer.svelte";
   import Navbar from "$lib/components/Navbar.svelte";
-  import type { SubmitFunction } from "@sveltejs/kit";
   import "../app.css";
   import { goto } from "$app/navigation";
   import { onMount } from "svelte";
@@ -36,5 +35,5 @@
   <main class="flex-grow">
     <slot />
   </main>
-  <Footer />
+  <!-- <Footer /> -->
 </div>

src/routes/api/planner/+server.ts

@@ -132,8 +132,6 @@ export async function POST(event: RequestEvent): Promise<Response> {
     });
   }
 
-  console.log(activityTypes);
-
   // insert the adventure to the user's visited list
   let res = await db
     .insert(adventureTable)
@@ -153,7 +151,6 @@ export async function POST(event: RequestEvent): Promise<Response> {
     .execute();
 
   let insertedId = res[0].insertedId;
-  console.log(insertedId);
 
   body.detailAdventure.id = insertedId;
 

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

@@ -3,7 +3,7 @@ import { redirect } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
 import { db } from "$lib/db/db.server";
 import { adventureTable } from "$lib/db/schema";
-import { and, eq, arrayContains } from "drizzle-orm";
+import { and, eq, arrayContains, ilike } from "drizzle-orm";
 
 /**
  * Loads the page data based on the provided URL and locals.
@@ -21,11 +21,47 @@ export const load: PageServerLoad = async ({ url, locals }) => {
     const params = Array.from(url.searchParams.entries());
     param = params[0][0];
     value = params[0][1];
+  } else {
+    param = "all";
+    value = "";
   }
   // Activity type search
   if (param === "activity") {
+    return {
+      props: await activitySearch(value, locals),
+    };
+  }
+
+  if (param === "location") {
+    return {
+      props: await locationSearch(value, locals),
+    };
+  }
+  if (param === "name") {
+    return {
+      props: await nameSearch(value, locals),
+    };
+  }
+  if (param == "all" || param == "") {
+    console.log("all");
+    const activityResults = await activitySearch(value, locals);
+    const locationResults = await locationSearch(value, locals);
+    const namesResults = await nameSearch(value, locals);
+
+    return {
+      props: {
+        adventures: [
+          ...activityResults.adventures,
+          ...locationResults.adventures,
+          ...namesResults.adventures,
+        ],
+      },
+    };
+  }
+
+  async function activitySearch(value: string, locals: any) {
     let arr: string[] = [];
-    arr.push(value);
+    arr.push(value.toLowerCase());
     let res = await db
       .select()
       .from(adventureTable)
@@ -36,12 +72,43 @@ export const load: PageServerLoad = async ({ url, locals }) => {
         )
       )
       .execute();
-    console.log(res);
 
     return {
-      props: {
-        adventures: res,
-      },
+      adventures: res,
+    };
+  }
+
+  async function locationSearch(value: string, locals: any) {
+    let res = await db
+      .select()
+      .from(adventureTable)
+      .where(
+        and(
+          ilike(adventureTable.location, value),
+          eq(adventureTable.userId, locals.user.id)
+        )
+      )
+      .execute();
+
+    return {
+      adventures: res,
+    };
+  }
+
+  async function nameSearch(value: string, locals: any) {
+    let res = await db
+      .select()
+      .from(adventureTable)
+      .where(
+        and(
+          ilike(adventureTable.name, value),
+          eq(adventureTable.userId, locals.user.id)
+        )
+      )
+      .execute();
+
+    return {
+      adventures: res,
     };
   }
 };

src/routes/search/+page.svelte

@@ -19,6 +19,6 @@
       {/each}
     </div>
   {:else}
-    <p>No results found</p>
+    <h1 class="text-center text-4xl font-bold mt-16">No Results Found</h1>
   {/if}
 </main>