Recipe view

src/util/API.js

@@ -352,18 +352,6 @@ export const API = {
       .catch(err => {console.log(err)})
     },
 
-
-      // addIngredientsToFridge: async (ingredientIds) => {
-      //   const authStore = useAuthStore();
-      //   return axios.delete(`${import.meta.env.VITE_BACKEND_URL}/shoppinglist/purchased`, {
-      //     headers: { Authorization: `Bearer ${authStore.token}`},
-      //     data: { ingredientIds }
-      //   })
-      //   .then((response) => {return response.data})
-      //   .catch(err => {console.log(err)})
-
-      // },
-
       addIngredientsToFridge: async (ingredients) => {
         const authStore = useAuthStore();
         return axios.put(`${import.meta.env.VITE_BACKEND_URL}/shoppinglist/purchased`, ingredients, {
@@ -390,6 +378,25 @@ export const API = {
             })
     },
 
+    /**
+     * Remove ingredients from fridge based on a recipe
+     * @param request
+     */
+    removeIngredientsFromFridge: (request) => {
+        const authStore = useAuthStore();
+
+        axios.put(`${import.meta.env.VITE_BACKEND_URL}/fridge/ingredients`, request,
+            {
+                headers: { Authorization: "Bearer " + authStore.token }
+            })
+            .then((response) => {
+                console.log(response);
+            })
+            .catch((error) => {
+                throw new Error(error);
+            })
+    },
+
 
     /**
      * Deletes account from the

src/views/RecipeView.vue

@@ -13,6 +13,7 @@ export default {
             time: "",
             ingredients: [],
             instructions: "",
+            recipeScalar: 1
         }
     },
     methods: {
@@ -26,11 +27,8 @@ export default {
                   this.instructions = recipe.instructions;
                 })
         },
-        addIngredientsShoppingList() {
-            //TODO add ingredients to shopping list
-        },
-        removeIngredientsFromFridge() {
-            //TODO remove used ingredients from fridge
+        adjustRecipeAmount(event) {
+            this.recipeScalar = event.target.value;
         }
     },
     async mounted() {
@@ -44,18 +42,19 @@ export default {
   <main>
       <h1>{{this.title}}</h1><br>
       <p>{{this.description}}</p><br>
-      <div class="ingredients">
-          <h2>Ingredienser</h2>
-          <ul>
-              <li v-for="ingredient in this.ingredients">{{ ingredient.item.name }} {{ ingredient.amount.quantity }} {{ingredient.amount.unit}}</li>
-          </ul>
-          <button @click="addIngredientsShoppingList">Legg til ingrediensene i handlekurven</button>
+      <div class="ingredient-container">
+          <div class="ingredients">
+            <h2>Ingredienser</h2>
+              <input class="recipe-scalar" type="number" min="1" max="20" placeholder="1" value="1" @change="event => adjustRecipeAmount(event)">
+              <ul>
+                  <li v-for="ingredient in this.ingredients">{{ ingredient.item.name }} {{ ingredient.amount.quantity*this.recipeScalar }} {{ingredient.amount.unit}}</li>
+              </ul>
+          </div>
       </div>
       <div class="instructions">
           <h2>Instruksjoner</h2>
           {{this.instructions}}
       </div>
-      <button @click="removeIngredientsFromFridge">Fjern varene fra kjøleskapet</button>
 
   </main>
 
@@ -70,16 +69,34 @@ export default {
 
 main {
   padding: 20px 10px;
-  .ingredients {
-    margin-bottom: 20px;
-  }
-    button {
-        min-height: 40px;
-        border-radius: 0;
-        border: 1px solid;
-        cursor: pointer;
-        padding: 5px;
+    h1 {
+        padding: 0;
+    }
+    .ingredient-container {
+        .ingredients {
+            margin-bottom: 20px;
+            h2 {
+                display: inline-block;
+                margin-right: 20px;
+                vertical-align: middle;
+
+            }
+            .recipe-scalar {
+                display: inline-block;
+                height: 40px;
+                width: 60px;
+                font-size: 16px;
+                padding: 5px;
+                vertical-align: middle;
+            }
+            ul {
+                margin-top: 10px;
+            }
+        }
+
     }
+
+
 }