From fbaff06968f9db7fed31821683837bb0c661654b Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sun, 14 Jan 2024 12:46:45 +1100
Subject: [PATCH] Meal Planning Page

---
 src/assets/egg.svg                 |   2 +
 src/assets/external-link.svg       |   2 +
 src/components/DatePicker.vue      | 113 +++++++++++++++++++++++++++++
 src/components/EditMealPage.vue    |  77 ++++++++++++++++++--
 src/components/IngredientLine.vue  |  44 +++++++----
 src/components/RecipeCard.vue      |  46 ++++++++++++
 src/components/RecipeSearchBox.vue | 100 +++++++++++++------------
 src/data.js                        |   2 +-
 8 files changed, 316 insertions(+), 70 deletions(-)
 create mode 100644 src/assets/egg.svg
 create mode 100644 src/assets/external-link.svg
 create mode 100644 src/components/DatePicker.vue
 create mode 100644 src/components/RecipeCard.vue

diff --git a/src/assets/egg.svg b/src/assets/egg.svg
new file mode 100644
index 0000000..62e2acc
--- /dev/null
+++ b/src/assets/egg.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,23c6.8,0,9-6.737,9-10a13.629,13.629,0,0,0-4.293-9.707A7.193,7.193,0,0,0,12,1,7.193,7.193,0,0,0,7.293,3.293,13.629,13.629,0,0,0,3,13C3,16.263,5.2,23,12,23ZM11.989,3C14.444,3.036,19,7.393,19,13c0,2.61-1.711,8-7,8s-7-5.39-7-8C5,7.381,9.559,3.053,11.989,3ZM7.812,16.488a1,1,0,1,1,1.745-.976A2.663,2.663,0,0,0,12,17a1,1,0,0,1,0,2A4.654,4.654,0,0,1,7.812,16.488Z"/></svg>
\ No newline at end of file
diff --git a/src/assets/external-link.svg b/src/assets/external-link.svg
new file mode 100644
index 0000000..5c2b253
--- /dev/null
+++ b/src/assets/external-link.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" stroke-width="3" stroke="#000000" fill="none"><path d="M55.4,32V53.58a1.81,1.81,0,0,1-1.82,1.82H10.42A1.81,1.81,0,0,1,8.6,53.58V10.42A1.81,1.81,0,0,1,10.42,8.6H32"/><polyline points="40.32 8.6 55.4 8.6 55.4 24.18"/><line x1="19.32" y1="45.72" x2="54.61" y2="8.91"/></svg>
\ No newline at end of file
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
new file mode 100644
index 0000000..d9e949c
--- /dev/null
+++ b/src/components/DatePicker.vue
@@ -0,0 +1,113 @@
+<template>
+    <div class="date-picker">
+      <input
+        type="text"
+        v-model="selectedDate"
+        @focus="showDatePicker = true"
+        @blur="showDatePicker = false"
+        placeholder="Select a date"
+      />
+      <div v-if="showDatePicker" class="date-picker-dropdown">
+        <ul>
+          <li
+            v-for="(day, index) in nextSevenDays"
+            :key="index"
+            @click="selectDate(day)"
+          >
+            {{ formatDay(day) }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      date: {
+        type: Date,
+        default: new Date(),
+      },
+    },
+    data() {
+      return {
+        selectedDate: this.formatDay(this.date),
+        showDatePicker: false,
+      };
+    },
+    computed: {
+      nextSevenDays() {
+        const today = new Date();
+        const nextSevenDays = [];
+  
+        for (let i = 0; i < 7; i++) {
+          const date = new Date(today);
+          date.setDate(today.getDate() + i);
+          nextSevenDays.push(date);
+        }
+  
+        return nextSevenDays;
+      },
+    },
+    methods: {
+      formatDay(date) {
+        const options = { weekday: "long", day: "numeric", month: "numeric" };
+        return date.toLocaleDateString("en-AU", options);
+      },
+      selectDate(date) {
+        this.selectedDate = this.formatSelectedDate(date);
+        this.showDatePicker = false;
+  
+        // Emit custom event
+        this.$emit("date-selected", date);
+      },
+      formatSelectedDate(date) {
+        const options = { weekday: "long", day: "numeric", month: "numeric" };
+        return date.toLocaleDateString("en-AU", options);
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .date-picker {
+    position: relative;
+  }
+
+  .date-picker input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    outline: none;
+  }
+  
+  .date-picker-dropdown {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    margin: auto;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+  }
+  
+  .date-picker-dropdown ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .date-picker-dropdown li {
+    padding: 8px;
+    cursor: pointer;
+    border-bottom: 1px solid #ccc;
+  }
+  
+  .date-picker-dropdown li:last-child {
+    border-bottom: none;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/EditMealPage.vue b/src/components/EditMealPage.vue
index 22e39c5..dcd70cb 100644
--- a/src/components/EditMealPage.vue
+++ b/src/components/EditMealPage.vue
@@ -1,17 +1,33 @@
 <template>
-    <div>
-        <input type="date" v-model="meal.date" />
-        <recipe-search-box @select-recipe="selectRecipe" />
+    <div class="container">
+        <div class="fields">
+            <date-picker @date-selected="selectDate" :date="meal.date" />
+            <recipe-search-box @select-recipe="selectRecipe" />
+        </div>
+        <h2>Foods</h2>
+        <ul v-if="meal.recipes && meal.recipes.length">
+            <li v-for="recipe in meal.recipes" :key="recipe.id" class="saved-recipe">
+                <p class="recipe-card">
+                    <recipe-card :recipe="recipe" />
+                </p>
+                <button @click="removeRecipe(recipe)">Remove</button>
+            </li>
+        </ul>
+        <div v-else>
+            <p>Add some recipes</p>
+        </div>
     </div>
 </template>
 
 <script>
 import data from '@/data.js'
 import RecipeSearchBox from './RecipeSearchBox.vue';
+import RecipeCard from './RecipeCard.vue';
+import DatePicker from './DatePicker.vue';
 
 export default {
     props: ['id'],
-    components: { RecipeSearchBox },
+    components: { RecipeSearchBox, DatePicker, RecipeCard },
     data() {
         return {
             meal: {
@@ -29,8 +45,59 @@ export default {
     },
     methods: {
         selectRecipe(recipe) {
-            this.meal.recipe = recipe;
+            this.meal.recipes.push(recipe);
+        },
+        selectDate(date) {
+            this.meal.date = date;
+        },
+        removeRecipe(recipe) {
+            this.meal.recipes = this.meal.recipes.filter(r => r.id !== recipe.id);
         }
     }
 }
 </script>
+
+<style scoped>
+
+.container {
+    margin: 1em auto;
+    max-width: 1200px;
+}
+
+.fields {
+    width: 80%;
+    margin: 0 auto;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.saved-recipe {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1vh 1em;
+}
+
+.saved-recipe button {
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 0.5em;
+    cursor: pointer;
+    margin: 1em
+}
+
+.saved-recipe button:hover {
+    background: #eee;
+}
+
+.saved-recipe .recipe-card {
+    flex: 1;
+    margin: 0 1em;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/IngredientLine.vue b/src/components/IngredientLine.vue
index 0c1f2b6..f553af7 100644
--- a/src/components/IngredientLine.vue
+++ b/src/components/IngredientLine.vue
@@ -7,9 +7,7 @@
             </p>
             <p>
                 <input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
-            </p>
-            <p>
-                <input v-model="productLink" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
+                <input class="product-link-input" v-model="productLink" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
             </p>
         </div>
 
@@ -21,7 +19,12 @@
                     <span class="parse-element unit" :class="{ missing: !(ingredient?.unit)}">{{ ingredient?.unit || 'unit' }}</span>
                     of
                     <span class="parse-element name" :class="{ missing: !(ingredient?.name)}">{{ ingredient?.name || 'name' }}</span>
-                    <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">({{ ingredient?.product?.name || 'product' }})</span>
+                    <span class="parse-element product-name" :class="{missing: !(ingredient?.product)}">
+                        <a :href="ingredient?.product?.link" v-if="ingredient?.product?.link" target=”_blank”>
+                        ( {{ ingredient?.product?.name }} <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" /> )
+                        </a>
+                        <span v-else>( {{ 'product' }} )</span>
+                    </span>
                 </div>
 
                 <!-- Delete button -->
@@ -33,18 +36,21 @@
                 </button>
             </div>
             <!-- Details section -->
-            <div v-if="showDetails" class="details-section">
-                <div class="ingredient-details" v-if="ingredient && showDetails">
-                    <div class="parse-result">
-                        <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
-                        <p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
-                        <p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
-                        <p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
-                    </div>
-                    <div  v-if="ingredient.product" class="product-result">
-                        <p><small>Product: </small><strong>{{ ingredient.product.name }}</strong></p>
-                        <p><img :src="ingredient.product.img_small" /></p>
-                    </div>
+            <div v-if="ingredient && showDetails" class="details-section ingredient-details">
+                <div class="parse-result">
+                    <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
+                    <p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
+                    <p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
+                    <p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
+                </div>
+                <div  v-if="ingredient.product" class="product-result">
+                    <p>
+                        <a :href="ingredient.link"><small>Product: </small>
+                            <strong>{{ ingredient.product.name }}</strong>
+                            <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" target=”_blank”/>
+                        </a>
+                    </p>
+                    <p><img :src="ingredient.product.img_small" /></p>
                 </div>
             </div>
         </div>
@@ -186,6 +192,12 @@ export default {
     width: 100%;
 }
 
+.product-link-input {
+    padding: 0.5vh;
+    color: #777;
+    margin-top: 0.2vh;
+}
+
 .ingredient-details {
     display: flex;
     flex-direction: row;
diff --git a/src/components/RecipeCard.vue b/src/components/RecipeCard.vue
new file mode 100644
index 0000000..a31c3d7
--- /dev/null
+++ b/src/components/RecipeCard.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="recipe-card">
+        <p>
+            <img v-if="recipe.image_urls" :src="recipe.image_urls[0]" />
+            <img v-else src="@/assets/egg.svg" />
+        </p>
+        <p class="recipe-name">{{ recipe.name }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'RecipeCard',
+    props: ['recipe']
+}
+</script>
+
+<style scoped>
+
+.recipe-card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border: solid 1px #ccc;
+    border-radius: 3px;
+    padding: 1vh;
+    text-align: left;
+    max-height: 10em;
+}
+
+li img {
+    display: block;
+    width: 3em;
+    height: 3em;
+    margin: 3px;
+    object-fit: cover;
+}
+
+.recipe-name {
+    font-size: larger;
+    font-weight: bold;
+    flex: 1;
+    margin: auto;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/RecipeSearchBox.vue b/src/components/RecipeSearchBox.vue
index df16c23..0a8cac0 100644
--- a/src/components/RecipeSearchBox.vue
+++ b/src/components/RecipeSearchBox.vue
@@ -1,10 +1,10 @@
 <template>
-    <div>
-        <input type="text" v-model="searchTerm" @keyup.enter="search" @focusin="search" @focusout="search" placeholder="Add a recipe..." />
-        <ul v-if="recipes?.length">
-            <li class="recipe" v-for="recipe in recipes" :key="recipe.id" @click="selectRecipe(recipe)">
-                <img v-if="recipe.image_urls" :src="recipe.image_urls[0]" />
-                <p class="recipe-name">{{ recipe.name }}</p>
+    <div class="recipe-search-box" @focusout="recipes = []">
+        <input type="text" v-model="searchTerm" @keyup.enter="search" @keyup.exit="clear" @focusin="search"
+            placeholder="Add a recipe..." />
+        <ul v-if="recipes?.length" class="dropdown">
+            <li class="recipe" v-for="recipe in recipes" :key="recipe.id" @mousedown="selectRecipe(recipe)">
+                <recipe-card :recipe="recipe" />
             </li>
         </ul>
     </div>
@@ -12,21 +12,28 @@
 
 <script>
 import data from '@/data.js'
+import RecipeCard from './RecipeCard.vue';
+
 export default {
+    name: 'RecipeSearchBox',
+    components: { RecipeCard },
     data() {
         return {
             searchTerm: '',
-            recipes: []
+            recipes: [],
+            timeouts: [],
         }
     },
     watch: {
         searchTerm() {
             const searchTerm = this.searchTerm;
-            setTimeout(() => {
-                if (searchTerm === this.searchTerm){
-                    this.search();
-                }
-            }, 200);
+            if (searchTerm) {
+                this.timeouts.push(setTimeout(() => {
+                    if (searchTerm === this.searchTerm) {
+                        this.search();
+                    }
+                }, 200));
+            }
         }
     },
     methods: {
@@ -45,52 +52,49 @@ export default {
 </script>
 
 <style scoped>
-
-input {
-    border: 0;
-    border-bottom: 1px solid #ccc;
-    font-size: large;
-    margin: 1ex 1em;
-    width: 80%;
-    font-size: larger;
+.recipe-search-box {
+    position: relative;
 }
 
-/* Show recipes as cards in a flex grid 2-3 items wide */
-ul {
-    padding: 0;
-    width: 80%;
-    margin: 0 auto;
-    border: solid 1px #ccc;
+.recipe-search-box input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    outline: none;
 }
 
-li {
-    display: flex;
-    flex-direction: row;
+.recipe-search-box .dropdown {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    margin: auto;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+
+.recipe-search-box .dropdown {
     list-style-type: none;
-    border: solid 1px #ccc;
-    border-radius: 3px;
-    padding: 1em;
-    vertical-align: middle;
-    text-align: left;
-    max-height: 10em;
+    margin: 0;
+    padding: 0;
+    max-height: 40vh;
+    overflow-y: scroll;
 }
 
-li img {
-    display: block;
-    width: 8em;
-    height: 8em;
-    margin: 0.5em;
-    object-fit: cover;
+.recipe-search-box .dropdown li {
+    padding: 8px;
+    cursor: pointer;
+    border-bottom: 1px solid #ccc;
 }
 
-li:hover {
-    background-color: #ccc;
+.recipe-search-box .dropdown li:last-child {
+    border-bottom: none;
 }
 
-.recipe-name {
-    font-size: larger;
-    font-weight: bold;
-
+.recipe-search-box .dropdown li:hover {
+    background-color: #eee;
 }
-
 </style>
\ No newline at end of file
diff --git a/src/data.js b/src/data.js
index 0c4da1a..6cbf9eb 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,4 +1,4 @@
-const BASE_URL = "http://localhost:8000"
+const BASE_URL = "http://192.168.68.177:8000"
 
 export default {
     getMeals(from, to) {