Meal Planning Start

src/assets/plan-meal.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="XMLID_124_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 24 24" xml:space="preserve">
+<g id="plan">
+	<g>
+		<path d="M24,24H0V3h5V0h2v3h10V0h2v3h5V24z M2,22h20V5H2v3h20v2H2V22z M19,19H9v-2h10V19z M7,19H5v-2h2V19z M19,15H9v-2h10V15z
+			 M7,15H5v-2h2V15z"/>
+	</g>
+</g>
+</svg>

src/components/ActionsPage.vue

@@ -2,6 +2,7 @@
     <div>
         <action-item title="Add to next shop" :image="require('@/assets/add-cart.svg')" @click="addToNextShop" />
         <action-item title="Add Recipe" :image="require('@/assets/add-recipe.svg')" @click="addRecipe" />
+        <action-item title="Plan Meal" :image="require('@/assets/plan-meal.svg')" @click="planMeal" />
     </div>
 </template>
 <script>
@@ -19,6 +20,10 @@ export default {
         addRecipe() {
             console.log('Add Recipe')
             this.$router.push('/recipes/add')
+        },
+        planMeal() {
+            console.log('Plan Meal')
+            this.$router.push('/meals/add')
         }
     }
 }

src/components/EditMealPage.vue

@@ -1,19 +1,36 @@
 <template>
-    <div></div>
+    <div>
+        <input type="date" v-model="meal.date" />
+        <recipe-search-box @select-recipe="selectRecipe" />
+    </div>
 </template>
 
 <script>
+import data from '@/data.js'
+import RecipeSearchBox from './RecipeSearchBox.vue';
+
 export default {
     props: ['id'],
+    components: { RecipeSearchBox },
     data() {
         return {
             meal: {
                 date: new Date(),
-                recipe: { name: 'Sar Tay' },
+                recipes: [{ name: 'Sar Tay' }],
                 chefs: [{ name: 'Ryan' }],
                 consumers: [{ name: 'Ryan' }, { name: 'Jacob' }],
             }
+        };
+    },
+    beforeMount() {
+        if (this.id) {
+            this.meal = data.getMeal(this.id);
         }
     },
+    methods: {
+        selectRecipe(recipe) {
+            this.meal.recipe = recipe;
+        }
+    }
 }
 </script>

src/components/MealPlanPage.vue

@@ -10,8 +10,8 @@
         </ul>
 
         <ul class="actions" v-if="selectedMeal">
-            <li><router-link class="nav-link" to="/meal/{{meal.id}}/edit" active-class="active">Edit Meal</router-link></li>
+            <li><router-link class="nav-link" to="/meals/{{meal.id}}" active-class="active">Edit Meal</router-link></li>
-            <li><router-link class="nav-link" to="/meal/{{meal.id}}/swap" active-class="active">Swap Day</router-link></li>
+            <li><router-link class="nav-link" to="/meals/{{meal.id}}/swap" active-class="active">Swap Day</router-link></li>
             <li><a @click="deleteSelectedMeal" class="button">Remove</a></li>
             <li><a @click="selectedMeal = null">Cancel</a></li>
         </ul>
@@ -50,6 +50,7 @@ li {
 
 <script>
 import MealCard from './MealCard.vue'
+import data from '@/data.js'
 
 export default {
     name: 'MealPlanPage',
@@ -57,7 +58,11 @@ export default {
         MealCard
     },
     data() {
+        const from = new Date();
+        const to = new Date(from.getDate() + 7)
+
         return {
+            from, to,
             meals: [{
                 'date': new Date(),
                 'recipe': {'name': 'Sar Tay'},
@@ -69,6 +74,10 @@ export default {
             selectedMeal: null
         }
     },
+    beforeMount() {
+        data.getMeals(this.from, this.to)
+            .then(meals => this.meals = meals);
+    },
     methods: {
         editmeal(meal) {
             console.log('editmeal', meal)

src/components/RecipeSearchBox.vue

@@ -0,0 +1,96 @@
+<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>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import data from '@/data.js'
+export default {
+    data() {
+        return {
+            searchTerm: '',
+            recipes: []
+        }
+    },
+    watch: {
+        searchTerm() {
+            const searchTerm = this.searchTerm;
+            setTimeout(() => {
+                if (searchTerm === this.searchTerm){
+                    this.search();
+                }
+            }, 200);
+        }
+    },
+    methods: {
+        search() {
+            data.searchRecipes(this.searchTerm).then((recipes) => {
+                this.recipes = recipes
+            });
+        },
+        selectRecipe(recipe) {
+            this.$emit('select-recipe', recipe);
+            this.searchTerm = '';
+            this.recipes = [];
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+input {
+    border: 0;
+    border-bottom: 1px solid #ccc;
+    font-size: large;
+    margin: 1ex 1em;
+    width: 80%;
+    font-size: larger;
+}
+
+/* Show recipes as cards in a flex grid 2-3 items wide */
+ul {
+    padding: 0;
+    width: 80%;
+    margin: 0 auto;
+    border: solid 1px #ccc;
+}
+
+li {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    border: solid 1px #ccc;
+    border-radius: 3px;
+    padding: 1em;
+    vertical-align: middle;
+    text-align: left;
+    max-height: 10em;
+}
+
+li img {
+    display: block;
+    width: 8em;
+    height: 8em;
+    margin: 0.5em;
+    object-fit: cover;
+}
+
+li:hover {
+    background-color: #ccc;
+}
+
+.recipe-name {
+    font-size: larger;
+    font-weight: bold;
+
+}
+
+</style>

src/data.js

@@ -1,15 +1,17 @@
 const BASE_URL = "http://localhost:8000"
 
 export default {
-    getMeals() {
+    getMeals(from, to) {
-        return fetch(BASE_URL + "/meals")
+        return fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString())
             .then(response => response.json())
     },
     getMeal(id) {
         return fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`)
             .then(response => response.json())
     },
-    getRecipes() {
+    searchRecipes(query) {
+        return fetch(BASE_URL + "/recipes?q=" + encodeURIComponent(query))
+            .then(response => response.json())
     },
     parseRecipe(url) {
         return fetch(BASE_URL + `/recipes/parse?url=${encodeURIComponent(url)}`)

src/main.js

@@ -7,7 +7,6 @@ import ActionsPage from './components/ActionsPage.vue'
 import MealPlanPage from './components/MealPlanPage.vue'
 import ShoppingPage from './components/ShoppingPage.vue'
 import EditMealPage from './components/EditMealPage.vue'
-import SwapMealPage from './components/SwapMealPage.vue'
 import EditRecipePage from './components/EditRecipePage.vue'
 
 // 2. Define some routes
@@ -17,10 +16,10 @@ const routes = [
     { path: '/', component: ActionsPage },
     { path: '/mealplan', component: MealPlanPage },
     { path: '/shopping', component: ShoppingPage },
-    { path: '/meal/:id/edit', component: EditMealPage },
-    { path: '/meal/:id/swap', component: SwapMealPage },
     { path: '/recipes/add', component: EditRecipePage },
     { path: '/recipes/:id', component: EditRecipePage, props: true },
+    { path: '/meals/add', component: EditMealPage },
+    { path: '/meals/:id', component: EditMealPage, props: true },
 ]
   
 // 3. Create the router instance and pass the `routes` option