diff --git a/src/util/API.js b/src/util/API.js index 48507b710f51989fa41da77523087c1abb8abe0f..45626fd2ba520b4de11110a42db0b97c5fc64a05 100644 --- a/src/util/API.js +++ b/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 diff --git a/src/views/RecipeView.vue b/src/views/RecipeView.vue index 88fd6572f4de41dae6c0a44719f0a0255f2b3dc1..b8b31201b3f04c628723d8c38795d5f1153e29fc 100644 --- a/src/views/RecipeView.vue +++ b/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; + } + } + } + + }