From 25337776a170879152df28758b7118fd6c28bf48 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 7 Jun 2024 20:40:05 +0000
Subject: [PATCH 1/3] Fix search filter UI

---
 src/routes/search/+page.svelte | 135 ++++++++++++++++++++++-----------
 1 file changed, 89 insertions(+), 46 deletions(-)

diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index f3601d3..9d0261b 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -5,8 +5,29 @@
   import type { SubmitFunction } from "@sveltejs/kit";
   import type { PageData } from "./$types";
 
-  // let visitedValue = "all";
-  // let typeValue = "";
+  let typeValue: string = "";
+  let visitedValue: string = "all";
+
+  async function filterResults() {
+    console.log(typeValue);
+    console.log(visitedValue);
+
+    if (!typeValue) {
+      typeValue = "";
+    }
+    const value = new URLSearchParams(location.search).get("value");
+    console.log(value);
+    console.log(
+      `/api/search?value=${value}&type=${typeValue}&visited=${visitedValue}`
+    );
+    let data = await fetch(
+      `/api/search?value=${value}&type=${typeValue}&visited=${visitedValue}`
+    );
+    console.log(data);
+    adventureArray = [];
+    let res = await data.json();
+    adventureArray = res.adventures as Adventure[];
+  }
 
   export let data: PageData;
   let adventureArray: Adventure[] = data.props?.adventures as Adventure[];
@@ -34,51 +55,73 @@
 </script>
 
 <main>
-  <form method="post" use:enhance={filter}>
-    <input
-      type="radio"
-      name="visited"
-      value="all"
-      checked
-      class="radio radio-primary"
-    />
-    All
-    <input
-      type="radio"
-      name="visited"
-      value="false"
-      class="radio radio-primary"
-    />
-    Not Visited
-    <input
-      type="radio"
-      name="visited"
-      value="true"
-      class="radio radio-primary"
-    />
-    Visited
+  <h1 class="text-center font-semibold text-2xl mb-2">Filtering Options</h1>
+  <div class="flex items-center justify-center gap-6 mb-4">
+    <div class="join">
+      <input
+        type="radio"
+        name="visited"
+        value="all"
+        checked
+        class="join-item btn"
+        aria-label="All"
+        bind:group={visitedValue}
+      />
+      <input
+        type="radio"
+        name="visited"
+        value="false"
+        class="join-item btn"
+        bind:group={visitedValue}
+        aria-label="Not Visited"
+      />
+      <input
+        type="radio"
+        name="visited"
+        value="true"
+        class="join-item btn"
+        bind:group={visitedValue}
+        aria-label="Visited"
+      />
+    </div>
     <br />
-    <input type="radio" name="type" value="" class="radio radio-primary" />
-    All
-    <input
-      type="radio"
-      name="type"
-      value="activity"
-      class="radio radio-primary"
-    />
-    Activity
-    <input
-      type="radio"
-      name="type"
-      value="location"
-      class="radio radio-primary"
-    />
-    Location
-    <input type="radio" name="type" value="name" class="radio radio-primary" />
-    Name
-    <!-- submit button -->
-    <button type="submit" class="btn btn-primary">Search</button>
-  </form>
+    <div class="join">
+      <input
+        type="radio"
+        name="type"
+        value=""
+        class="join-item btn"
+        bind:group={typeValue}
+        aria-label="All"
+      />
+      <input
+        type="radio"
+        name="type"
+        value="activity"
+        class="join-item btn"
+        bind:group={typeValue}
+        aria-label="Activity"
+      />
+      <input
+        type="radio"
+        name="type"
+        value="location"
+        class="join-item btn"
+        bind:group={typeValue}
+        aria-label="Location"
+      />
+      <input
+        type="radio"
+        name="type"
+        value="name"
+        class="join-item btn"
+        aria-label="Name"
+        bind:group={typeValue}
+      />
+    </div>
+    <button class="btn btn-primary" on:click={filterResults}>Filter</button>
+  </div>
+
   <h1 class="text-center font-bold text-4xl">Search Results</h1>
   {#if adventureArray.length > 0}
     <div

From 2ace7040663a43ded3957b7ab8c8919e5df0254b Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 7 Jun 2024 21:37:38 +0000
Subject: [PATCH 2/3] Add images to cards

---
 src/lib/components/AdventureCard.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index 7ae6205..ad69701 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -40,6 +40,15 @@
 <div
   class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
+  {#if adventure.imageUrl && adventure.imageUrl.length > 0}
+    <figure>
+      <img
+        src={adventure.imageUrl}
+        alt="Shoes"
+        class="w-full h-48 object-cover"
+      />
+    </figure>
+  {/if}
   <div class="card-body">
     <h2 class="card-title overflow-ellipsis">{adventure.name}</h2>
     {#if adventure.location && adventure.location !== ""}

From c58c679d5ffeca9036dd695750b1e3f9b4548083 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 7 Jun 2024 21:49:58 +0000
Subject: [PATCH 3/3] Image fixes

---
 src/lib/components/AdventureCard.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index ad69701..a2026f4 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -42,9 +42,10 @@
 >
   {#if adventure.imageUrl && adventure.imageUrl.length > 0}
     <figure>
+      <!-- svelte-ignore a11y-img-redundant-alt -->
       <img
         src={adventure.imageUrl}
-        alt="Shoes"
+        alt="No image available"
         class="w-full h-48 object-cover"
       />
     </figure>
@@ -74,7 +75,7 @@
         {/each}
       </ul>
     {/if}
-    <div class="card-actions justify-end">
+    <div class="card-actions justify-end mt-2">
       {#if type == "mylog"}
         <button class="btn btn-primary" on:click={moreInfo}
           ><iconify-icon icon="mdi:launch" class="text-2xl"