delete meals

src/components/MealCard.vue

@@ -3,22 +3,22 @@
         <h3>{{ dayOfWeek }} <small>{{ date }}</small></h3>
         
         <p v-if="meal.recipes.length && meal.extra_ingredients.length">
-            <span v-for="recipe in meal.recipes" :key="recipe.id">
+            <span v-for="(recipe, index) in meal.recipes" :key="recipe.id">
-                {{ recipe.name }}
+                {{ recipe.name }}{{ seperator(index, meal.recipes) }}
             </span>
             with
-            <span v-for="ingredient in meal.extra_ingredients" :key="ingredient.id">
+            <span v-for="(ingredient, index) in meal.extra_ingredients" :key="ingredient.id">
-                {{ ingredient.name }}
+                {{ ingredient.name }}{{ seperator(index, meal.extra_ingredients) }}
             </span>
         </p>
         <p v-else-if="meal.recipes.length">
-            <span v-for="recipe in meal.recipes" :key="recipe.id">
+            <span v-for="(recipe, index) in meal.recipes" :key="recipe.id">
-                {{ recipe.name }}
+                {{ recipe.name }}{{ seperator(index, meal.recipes) }}
             </span>
         </p>
         <p v-else-if="meal.extra_ingredients.length">
-            <span v-for="ingredient in meal.extra_ingredients" :key="ingredient.id">
+            <span v-for="(ingredient, index) in meal.extra_ingredients" :key="ingredient.id">
-                {{ ingredient.name }}
+                {{ ingredient.name }}{{ seperator(index, meal.extra_ingredients) }}
             </span>
         </p>
         <p v-else>
@@ -28,14 +28,14 @@
         <p>
             Cooked by 
             <span v-for="chef in meal.chefs" :key="chef.id">
-                {{ chef.name }}
+                {{ chef.name }}{{ seperator(index, meal.chefs) }}
             </span>
             <span v-if="!meal.chefs.length">somebody?</span>
         </p>
         <p> 
             For 
             <span v-for="consumer in meal.consumers" :key="consumer.id">
-                {{ consumer.name }}
+                {{ consumer.name }}{{ seperator(index, meal.consumers) }}
             </span>
             <span v-if="!meal.consumers.length">somebody?</span>
         </p>
@@ -62,6 +62,18 @@ export default {
         },
         dayOfWeek() {
             return this.meal.date.toLocaleDateString('en-au', { weekday: 'long' })
+        },
+    },
+    methods: {
+        seperator(index, list) {
+            switch (index) {
+                case list.length - 1:
+                    return '';
+                case list.length - 2:
+                    return ' and ';
+                default:
+                    return ', ';
+            }
         }
     }
 }

src/components/MealPlanPage.vue

@@ -59,6 +59,8 @@ export default {
     },
     data() {
         const from = new Date();
+        from.setTime(0);
+        
         const to = new Date();
         to.setDate(to.getDate() + 7);
 
@@ -77,8 +79,9 @@ export default {
             console.log('editmeal', meal)
             this.selectedMeal = meal;
         },
-        deleteSelectedMeal() {
+        async deleteSelectedMeal() {
-            console.log('deleteSelectedMeal', this.selectedMeal)
+            await data.deleteMeal(this.selectedMeal.id);
+            this.meals = this.meals.filter(m => m.id !== this.selectedMeal.id);
             this.selectedMeal = null;
         }
     }

src/data.js

@@ -14,6 +14,12 @@ export default {
         var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`);
         return await response.json();
     },
+    async deleteMeal(id) {
+        var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`, {
+            method: "DELETE",
+        });
+        return await response.json();
+    },
     async searchRecipes(query) {
         const response = await fetch(BASE_URL + "/recipes?q=" + encodeURIComponent(query));
         return await response.json();