Merge pull request #42 from umgefahren/front-page

some minor UI improvements

components/cocktail.vue

@@ -14,8 +14,8 @@
                 <div class="flex flex-wrap justify-center">
                     <template v-for="({ingredient, measure}, index) in cocktail.ingredients">
                         <div class="flex flex-col mx-5" :class="{'mb-5': index < cocktail.ingredients.length - 1 }">
-                            <p>{{ ingredient.name }}</p>
                             <p class="opacity-60">{{ measure }}</p>
+                            <p>{{ ingredient.name }}</p>
                         </div>
                     </template>
                 </div>

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="mb-5">
-        <div class="sticky top-0 navbar bg-base-100 mb-5 px-8 z-50">
+        <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>
@@ -43,7 +43,7 @@
             }">
                 <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">Get a Random Cocktail!</h2>
+                    <h2 class="card-title py-3 text-white">Get a Random Cocktail!</h2>
                 </div>
             </a>
         </div>

pages/search.vue

@@ -1,7 +1,7 @@
 <template>
     <ais-instant-search :search-client="client" 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 pb-2 mb-2 bg-base-100 z-50">
+      <div class="sticky top-0 px-5 py-2 mb-2 bg-base-100 z-50">
         <div class="navbar">
           <div class="dropdown">
             <label tabindex="0" class="btn btn-ghost">

server/api/drink/[slug].get.ts

@@ -1,41 +1,9 @@
-import { Drink, Ingredient } from "~~/util/types"
+import { Drink } from "~~/util/types"
 import { client } from "../../utils/db/main"
+import { drinkFromHit } from "~~/server/utils/drink_from_hit"
 
 export default defineEventHandler(async (event): Promise<Drink> => {
     const slug = event.context.params.slug
-    const drink = (await client.index('drinks').search('', {limit: 1, filter: 'slug = ' + slug})).hits.at(0)
-  console.log(drink)
-    const ingredients = await Promise.all(drink.ingredients.map(async (slug, index): Promise<{
-        ingredient: Ingredient,
-        measure: String
-    }> => {
-        const ingredient = (await client.index('ingredients').search('', {limit: 1, filter: 'slug = ' + slug})).hits.at(0)
-        return {
-            ingredient: {
-                id: ingredient.id,
-                name: ingredient.name,
-                slug: slug,
-                description: ingredient.description,
-                ingredientType: ingredient.ingredientType,
-                ABV: ingredient.abv,
-                alcohol: ingredient.alcohol
-            },
-            measure: drink.measures[index]
-        }
-    }))
-    return {
-        id: drink.id,
-        name: drink.name,
-        slug: drink.slug,
-        tags: drink.tags,
-        category: drink.category,
-        iba: drink.iba,
-        alcoholic: drink.alcoholic,
-        glass: drink.glass,
-        instructions: drink.instructions,
-        drinkThumb: drink.drinkThumb,
-        ingredients: ingredients,
-        imageAttribution: drink.imageAttribution,
-        imageSource: drink.imageSource
-    }
+    const hit = (await client.index('drinks').search('', {limit: 1, filter: 'slug = ' + slug})).hits.at(0)
+    return await drinkFromHit(hit)
 })

server/api/drink/random.ts

@@ -1,12 +1,13 @@
 import { randomInt } from "crypto"
 import { client } from "~~/server/utils/db/main"
+import { drinkFromHit } from "~~/server/utils/drink_from_hit"
 
 export default defineEventHandler(async (event) => {
     const query = getQuery(event)
     const query_tags = query.tags as string | undefined
     const tags = query_tags === undefined ? undefined : query_tags.split(",")
     const tags_filter = tags === undefined ? '' : `(${tags.map((t) => `tags = ${t}`).join(' OR ')})`
-   
+
     const query_category = query.category as string | undefined
     const category_filter = query_category === undefined ? '' : `category = "${query_category}"`
 
@@ -15,7 +16,7 @@ export default defineEventHandler(async (event) => {
 
     const query_alcoholic = query.alcoholic as string | undefined
     const alcoholic_filter = query_alcoholic === undefined ? '' : `alcoholic = ${query_alcoholic}`
-    
+
     const query_glass = query.glass as string | undefined
     const glass_filter = query_glass === undefined ? '' : `glass = "${query_glass}"`
 
@@ -34,5 +35,5 @@ export default defineEventHandler(async (event) => {
     })
     const hits = result.hits
     const hit_idx = randomInt(hits.length)
-    return hits[hit_idx]
-})
+    return await drinkFromHit(hits[hit_idx])
+})

server/api/drinks.get.ts

@@ -1,6 +1,7 @@
 import { client } from "../utils/db/main"
 import { SearchParams } from 'meilisearch';
-import { Drink, Ingredient } from "~~/util/types";
+import { Drink } from "~~/util/types";
+import { drinkFromHit } from "../utils/drink_from_hit";
 
 
 export default defineEventHandler(async (event): Promise<Drink[]> => {
@@ -11,41 +12,5 @@ export default defineEventHandler(async (event): Promise<Drink[]> => {
   if (query.limit) queryOpts.limit = parseInt(query.limit.toString())
   if (query.offset) queryOpts.offset = parseInt(query.offset.toString())
   const res = await client.index('drinks').search('', queryOpts)
-  return Promise.all(res.hits.map(async (hit) => {
-    const ingredients = await Promise.all(hit.ingredients.map(async (slug, index): Promise<{
-        ingredient: Ingredient,
-        measure: String
-    }> => {
-        const ingredient = (await client.index('ingredients').search('', {limit: 1, filter: 'slug = ' + slug})).hits.at(0)
-        return {
-            ingredient: {
-                id: ingredient.id,
-                name: ingredient.name,
-                slug: slug,
-                description: ingredient.description,
-                ingredientType: ingredient.ingredientType,
-                ABV: ingredient.abv,
-                alcohol: ingredient.alcohol
-            },
-            measure: hit.measures[index]
-        }
-    }))
-    return {
-      id: hit.id,
-      name: hit.name,
-      slug: hit.slug,
-      tags: hit.tags,
-      category: hit.category,
-      iba: hit.iba,
-      alcoholic: hit.alcoholic,
-      glass: hit.glass,
-      instructions: hit.instructions,
-      drinkThumb: hit.drinkThumb,
-      ingredients: ingredients,
-      measures: hit.measures,
-      imageAttribution: hit.imageAttribution,
-      imageSource: hit.imageSource
-    }
-  }))
+  return Promise.all(res.hits.map(drinkFromHit))
 })
-

server/utils/drink_from_hit.ts

@@ -0,0 +1,39 @@
+import { client } from "./db/main"
+import { Hit } from 'meilisearch'
+import { Drink, Ingredient } from "~~/util/types"
+
+export async function drinkFromHit(hit: Hit<Record<string, any>>): Promise<Drink> {
+    const ingredients = await Promise.all(hit.ingredients.map(async (slug, index): Promise<{
+        ingredient: Ingredient,
+        measure: String
+    }> => {
+        const ingredient = (await client.index('ingredients').search('', {limit: 1, filter: 'slug = ' + slug})).hits.at(0)
+        return {
+            ingredient: {
+                id: ingredient.id,
+                name: ingredient.name,
+                slug: slug,
+                description: ingredient.description,
+                ingredientType: ingredient.ingredientType,
+                ABV: ingredient.abv,
+                alcohol: ingredient.alcohol
+            },
+            measure: hit.measures[index]
+        }
+    }))
+    return {
+        id: hit.id,
+        name: hit.name,
+        slug: hit.slug,
+        tags: hit.tags,
+        category: hit.category,
+        iba: hit.iba,
+        alcoholic: hit.alcoholic,
+        glass: hit.glass,
+        instructions: hit.instructions,
+        drinkThumb: hit.drinkThumb,
+        ingredients: ingredients,
+        imageAttribution: hit.imageAttribution,
+        imageSource: hit.imageSource
+    }
+}