From 6c1664b468219de7b7b7593d0c77cf2a6afae8c5 Mon Sep 17 00:00:00 2001
From: Josef Zoller <josef@walterzollerpiano.com>
Date: Sat, 15 Oct 2022 22:51:18 +0200
Subject: [PATCH] Add some navigation

---
 components/ingredientSelectItem.vue |  2 +-
 pages/cocktail/[slug].vue           | 20 +++++++++++++-
 pages/index.vue                     | 43 ++++++++++-------------------
 pages/ingredients.vue               | 35 +++++++++++++++++++++--
 pages/search.vue                    | 42 ++++++++++++++++++++++++----
 5 files changed, 103 insertions(+), 39 deletions(-)

diff --git a/components/ingredientSelectItem.vue b/components/ingredientSelectItem.vue
index 37acc4f..07b2ec4 100644
--- a/components/ingredientSelectItem.vue
+++ b/components/ingredientSelectItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         @click="toggle"
-        class="card md:w-56 w-32 md:h-56 h-44 bg-primary shadow-xl m-4 text-white hover:scale-110 ease-in duration-[50ms]"
+        class="card md:w-56 w-32 md:h-56 h-44 bg-primary shadow-xl m-4 text-white hover:scale-110 ease-in duration-[50ms] cursor-pointer"
         :class="{ 'bg-secondary': selected }"
     >
         <div class="place-content-center items-center card-body">
diff --git a/pages/cocktail/[slug].vue b/pages/cocktail/[slug].vue
index c6e2df4..923756f 100644
--- a/pages/cocktail/[slug].vue
+++ b/pages/cocktail/[slug].vue
@@ -1,7 +1,25 @@
 <template>
-    <Cocktail :cocktail="cocktail" />
+    <div>
+        <div class="absolute top-0 navbar mb-8 px-8 py-4 z-50">
+            <button @click="back" class="btn btn-ghost">
+                <font-awesome-icon icon="fa-solid fa-arrow-left" />
+            </button>
+        </div>
+        <Cocktail :cocktail="cocktail" />
+    </div>
 </template>
 
+<script>
+export default {
+    methods: {
+        back(event) {
+            const router = useRouter()
+            router.back()
+        }
+    }
+}
+</script>
+
 <script setup>
     import Cocktail from '~~/components/cocktail.vue'
 
diff --git a/pages/index.vue b/pages/index.vue
index 1ceeeaf..bacd1a9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,41 +1,26 @@
 <template>
     <div class="mb-5">
-        <div class="sticky top-0 navbar bg-base-100 mb-8 border-b-[0.5px] px-8 z-50">
-            <div class="flex-1">
-                <a href="#" class="btn btn-ghost normal-case text-white mt-5 text-4xl">Cocktail Coach</a>
+        <div class="sticky top-0 navbar bg-base-100 mb-12 border-b-[0.5px] px-8 py-4 z-50">
+            <div class="flex-grow">
+                <a href="#" class="btn btn-ghost normal-case text-white text-4xl">Cocktail Coach</a>
             </div>
-            <div class="flex-none">
+            <div class="flex-none gap-2">
+                <NuxtLink to="/ingredients" class="btn btn-ghost normal-case">
+                    My Ingredients
+                </NuxtLink>
                 <div class="form-control">
                     <input type="text" placeholder="Search Cocktail" class="input input-bordered text-white" @focus="search">
                 </div>
             </div>
         </div>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-10 lg:gap-12 mx-8">
-            <a :href="`/cocktail/${recommendations.month.slug}`" class="card w-full shadow-xl group transition-[background-size] bg-center bg-[length:100%_auto] hover:bg-[length:105%_auto]" :style="{
-                'background-image': 'url(' + recommendations.month.drinkThumb + ')'
-            }">
-                <div class="absolute w-full h-full bg-black transition-[background-opacity] bg-opacity-50 group-hover:bg-opacity-70 z-10"></div>
-                <div class="card-body z-20">
-                    <h2 class="card-title text-white">Cocktail of the Month</h2>
-                    <p>{{ recommendations.month.name }}</p>
-                </div>
-            </a>
-            <a :href="`/cocktail/${recommendations.week.slug}`" class="card w-full shadow-xl group transition-[background-size] bg-center bg-[length:100%_auto] hover:bg-[length:105%_auto]" :style="{
-                'background-image': 'url(' + recommendations.week.drinkThumb + ')'
-            }">
+            <a :href="`/cocktail/${recommendation.slug}`" class="card w-full shadow-xl group transition-[background-size] bg-center bg-[length:100%_auto] hover:bg-[length:105%_auto]" :style="{
+                'background-image': 'url(' + recommendation.drinkThumb + ')'
+            }" v-for="(recommendation, key) in {'Month': recommendations.month, 'Week': recommendations.week, 'Day': recommendations.day}">
                 <div class="absolute w-full h-full bg-black transition-[background-opacity] bg-opacity-50 group-hover:bg-opacity-70 z-10"></div>
-                <div class="card-body z-20">
-                    <h2 class="card-title text-white">Cocktail of the Week</h2>
-                    <p>{{ recommendations.week.name }}</p>
-                </div>
-            </a>
-            <a :href="`/cocktail/${recommendations.day.slug}`" class="card w-full shadow-xl group transition-[background-size] bg-center bg-[length:100%_auto] hover:bg-[length:105%_auto]" :style="{
-                'background-image': 'url(' + recommendations.day.drinkThumb + ')'
-            }">
-                <div class="absolute w-full h-full bg-black transition-[background-opacity] bg-opacity-50 group-hover:bg-opacity-70 z-10"></div>
-                <div class="card-body z-20">
-                    <h2 class="card-title text-white">Cocktail of the Day</h2>
-                    <p>{{ recommendations.day.name }}</p>
+                <div class="card-body z-20 py-10">
+                    <h2 class="card-title text-white">Cocktail of the {{ key }}</h2>
+                    <p>{{ recommendation.name }}</p>
                 </div>
             </a>
             <a href="/cocktail/random" class="card w-full shadow-xl group transition-[background-size] bg-center bg-[length:100%_auto] hover:bg-[length:105%_auto]" :style="{
@@ -58,7 +43,7 @@ export default {
         search(event) {
             console.log('Foo')
             const router = useRouter();
-            //router.push('/search')
+            router.push('/search')
         }
     }
 }
diff --git a/pages/ingredients.vue b/pages/ingredients.vue
index d381c48..39631b9 100644
--- a/pages/ingredients.vue
+++ b/pages/ingredients.vue
@@ -1,8 +1,23 @@
 <template>
+    <div class="sticky top-0 navbar bg-base-100 mb-8 border-b-[0.5px] px-8 py-4 z-50">
+        <div class="flex-grow">
+            <button @click="back" class="btn btn-ghost">
+                <font-awesome-icon icon="fa-solid fa-arrow-left" />
+            </button>
+            <h1 class="text-2xl ml-2">
+                Ingredients
+            </h1>
+        </div>
+        <div class="form-control">
+            <input type="text" placeholder="Search Cocktail" class="input input-bordered text-white" @focus="search">
+        </div>
+    </div>
     <div class="container mx-auto px-4">
-        <h1 class="text-center text-5xl font-bold my-8">Ingredients</h1>
-        <p class="text-center text-2xl">
+        <h2 class="text-center mb-2 text-2xl">
             Select the ingredients you have available
+        </h2>
+        <p class="text-center">
+            They will be persisted in your local browser storage
         </p>
         <div class="container mx-auto max-w-6xl">
             <ais-instant-search
@@ -53,6 +68,22 @@
     </div>
 </template>
 
+<script>
+export default {
+    methods: {
+        back(event) {
+            const router = useRouter()
+            router.back()
+        },
+        search(event) {
+            console.log('Foo')
+            const router = useRouter();
+            router.push('/search')
+        }
+    }
+}
+</script>
+
 <script setup>
 import {
     AisInstantSearch,
diff --git a/pages/search.vue b/pages/search.vue
index bdff297..d3460f1 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -1,23 +1,28 @@
 <template>
-    <ais-instant-search :search-client="client" index-name="drinks" class="w-full">
+    <ais-instant-search :search-client="client" :search-function="searchFunction" index-name="drinks" class="w-full">
       <ais-configure :hits-per-page.camel="10" :distinct="true" :analytics="false" :enable-personalization.camel="true" />
-      <div class="sticky top-0 px-5 py-2 mb-2 bg-base-100 z-50">
+      <div class="sticky top-0 px-5 py-2 bg-base-100 z-50 border-b-[0.5px]">
         <div class="navbar">
+          <div>
+            <button @click="back" class="btn btn-ghost">
+              <font-awesome-icon icon="fa-solid fa-arrow-left" />
+            </button>
+          </div>
           <div class="dropdown">
             <label tabindex="0" class="btn btn-ghost">
               <font-awesome-icon icon="fa-solid fa-bars" />
             </label>
             <div tabindex="0" class="mt-3 p-2 menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
-              <ais-clear-refinements/>
-              <ais-refinement-list operator="and" show-more :limit="5" :show-more-limit="15" attribute="ingredients" :class-names="{
+              <ais-clear-refinements
+                operator="or" show-more :limit="5" :show-more-limit="15" attribute="ingredients" :class-names="{
                 'ais-RefinementList-labelText': 'text-white mx-2'
-              }"/>
+              }" />
             </div>
           </div>
           <ais-search-box class="flex-grow">
             <template v-slot="{ currentRefinement, isSearchStalled, refine }">
               <div class="form-control w-full">
-                <input type="text" :value="currentRefinement" @input="refine($event.currentTarget.value)" placeholder="Search" class="input input-bordered text-white" />
+                <input type="text" :value="currentRefinement" @input="refine($event.currentTarget.value)" placeholder="Search" class="input input-bordered text-white" autofocus />
               </div>
             </template>
           </ais-search-box>
@@ -59,6 +64,26 @@
     </ais-instant-search>
 </template>
 
+<script>
+export default {
+    data() {
+      return {
+        searchFunction(helper) {
+          console.log('Foo')
+
+          helper.search()
+        },
+      }
+    },
+    methods: {
+        back(event) {
+            const router = useRouter()
+            router.back()
+        }
+    }
+}
+</script>
+
 <script setup>
 import {
   AisInstantSearch,
@@ -71,7 +96,12 @@ import {
   AisVoiceSearch,
   AisConfigure
 } from 'vue-instantsearch/vue3/es'
+import { useStore } from '~/stores/state'
+
 import ListCocktail from '~~/components/list-cocktail.vue'
 
 const client = useMeilisearchClient()
+const store = useStore()
+
+const selected = computed(() => store.selectedIngredients)
 </script>