From 0193bab7ad3fb42c6a421491deb4bd99e58cca8e Mon Sep 17 00:00:00 2001
From: Ingrid Martinsheimen Egge <ingrimeg@stud.ntnu.no>
Date: Sat, 29 Apr 2023 08:22:01 +0200
Subject: [PATCH] kan nesten oppdatere fridgeItem mengde
---
src/components/EatFridgeItemModal.vue | 35 +++++++++-
src/util/API.js | 94 ++++++++++++++++-----------
src/views/FridgeView.vue | 35 ++++++----
3 files changed, 110 insertions(+), 54 deletions(-)
diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index 734d482..142956a 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -9,8 +9,8 @@
<input type = "range" id = "slider" name = "slider" min="0" :max = "this.maxValue" v-model="sliderValue">
<div id="buttons">
- <button @click="close">Ble kastet ðŸ—‘ï¸ </button>
- <button id="eatenBtn" @click="close" >Ble spist 😋</button>
+ <button @click="logFoodAsDiscarded">Ble kastet ðŸ—‘ï¸ </button>
+ <button id="eatenBtn" @click="logFoodAsEaten" >Ble spist 😋</button>
</div>
</div>
</template>
@@ -18,6 +18,7 @@
<script>
import {Icon} from "@iconify/vue";
import fridgeItem from "@/components/FridgeItem.vue";
+import {API} from "@/util/API";
export default {
name: "EatFridgeItemModal",
@@ -38,7 +39,31 @@ export default {
close(){
this.$emit('closeModal',this);
},
+ logFoodAsEaten(){
+ const fridgeAction = "CONSUMED";
+ const ingredientId = this.fridgeItem.ingredient_id;
+ const amountEaten = {
+ "quantity": this.sliderValue,
+ "unit": this.fridgeItem.amount.unit
+ };
+
+ const request = {
+ action: fridgeAction,
+ ingredients: {
+ [ingredientId]:{
+ "quantity": this.sliderValue,
+ "unit": this.fridgeItem.amount.unit
+ }
+ }
+ };
+
+ API.removeIngredientFromFridge(request).catch((error)=> console.log(error));
+ this.close();
+ },
+ logFoodAsDiscarded(){
+ this.close();
+ },
},
computed:{
redIconColor() {
@@ -98,10 +123,14 @@ button {
margin:.1em;
font-weight: bolder;
width: 40%;
-
+ padding:1em;
background-color: base.$red;
color:white;
}
+
+button:hover, #eatenBtn:hover {
+ background-color: base.$grey;
+}
#eatenBtn {
background-color: base.$green;
}
diff --git a/src/util/API.js b/src/util/API.js
index 0c543ab..030b56c 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -136,9 +136,8 @@ export const API = {
.catch(() => {throw new Error()})
},
-
/**
- * fetches all fridge items belonging to user
+ * fetches all fridge items belonging to the user that is currently logged in
* @returns {Promise<*>}
*/
getFridgeItems: async () =>{
@@ -154,21 +153,6 @@ export const API = {
});
},
- //returns fridgeItem of specific id
- getFridgeItem: async (id) =>{
- const authStore = useAuthStore();
-
- axios.get(`${import.meta.env.VITE_BACKEND_URL}/fridge/${id}`, {
- headers: { Authorization: `Bearer ${authStore.token}` },
- })
- .then((response) => {
- return response.data;
- })
- .catch(() => {
- throw new Error("Could not fetch fridge item");
- });
- },
-
/**
* Adds item(s) to the fridge
* @param request List<Ingredient> listOfIngredients
@@ -184,29 +168,12 @@ export const API = {
}).catch(()=> {
throw new Error("Could not add item to fridge: ");
})
-
},
/**
- * Array(3) [ {…}, {…}, {…} ]
- * 0: Object { name: "Tomat", ean: "7040512550214", shelfLife: 10, … }
- * allergens: Array []
- * amount: Object { quantity: 4, unit: "stk" }
- * quantity: 4
- * unit: "stk"
- * <prototype>: Object { … }
- * ean: "7040512550214"
- * image_url: "https://bilder.ngdata.no/7040512550818/meny/large.jpg"
- * name: "Tomat"
- * nutrition: Array(11) [ {…}, {…}, {…}, … ]
- * shelfLife: 10
- * store: null
- */
-
- /**
- * Searches for available items
- * @param searchPhrase
- * @returns {Promise<*>}
+ * Searches for registered items.
+ * @param searchPhrase Name of the item that one is looking for (e.g: "purre")
+ * @returns {Promise<*>} list containing items that match the search phrase
*/
searchItems: async(searchPhrase)=> {
return axios.get(`${import.meta.env.VITE_BACKEND_URL}/item/search?name=${searchPhrase}`, {
@@ -216,5 +183,56 @@ export const API = {
}).catch(()=> {
throw new Error("Error when searching for item ");
})
- }
+ },
+
+ /**
+ * Removes an amount of an ingredient from the frodge, and the action is then logged
+ * @param request Log.Action action, Map<Integer, Amount>
+ * Action available: CONSUMED, DISCARDED,ADDED_TO_FRIDGE
+ * @returns {Promise<void>}
+ */
+ removeIngredientFromFridge: async(request) => {
+ const authStore = useAuthStore();
+
+ axios.put(`${import.meta.env.VITE_BACKEND_URL}/fridge/ingredients`, request,{
+ headers: { Authorization: `Bearer ${authStore.token}` },
+ }).then((response) => {
+ return response.data;
+ }).catch(()=> {
+ throw new Error("Could modify ingredient. ");
+ })
+ },
+
+ /**
+ * Changes the expiration date of an ingredient.
+ * @param request ingredientId, newExpDate (Tip: )
+ * @returns {Promise<void>}
+ */
+ changeExpirationOfIngredient: async(request) => {
+ const authStore = useAuthStore();
+
+ axios.put(`${import.meta.env.VITE_BACKEND_URL}/fridge/ingredient`, request,{
+ headers: { Authorization: `Bearer ${authStore.token}` },
+ }).then((response) => {
+ return response.data;
+ }).catch(()=> {
+ throw new Error("Could modify ingredient. ");
+ })
+ },
+
+
+ //returns fridgeItem of specific id
+ getFridgeItem: async (id) =>{
+ const authStore = useAuthStore();
+
+ axios.get(`${import.meta.env.VITE_BACKEND_URL}/fridge/${id}`, {
+ headers: { Authorization: `Bearer ${authStore.token}` },
+ })
+ .then((response) => {
+ return response.data;
+ })
+ .catch(() => {
+ throw new Error("Could not fetch fridge item");
+ });
+ },
}
\ No newline at end of file
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
index f5fd1f0..f57303c 100644
--- a/src/views/FridgeView.vue
+++ b/src/views/FridgeView.vue
@@ -1,15 +1,16 @@
<template>
<main>
<h1>Kjøleskap</h1><br><br>
- <ItemSearch @itemsAdded="updateFridge"></ItemSearch>
+ <ItemSearch v-if="searchVisible" @itemsAdded="updateFridge"></ItemSearch>
+ <div><p>{{this.fridgeMsg}}</p></div>
<eat-fridge-item-modal @closeModal="hideModal" v-if="visible" :fridge-item="selectedItem"></eat-fridge-item-modal>
<div id = "itemContainer" >
- <FridgeItem v-for="item in fridgeItems" :actualItem = "item" :item="testItem" @appleBtnPressed="showModal"></FridgeItem>
+ <FridgeItem v-for="item in fridgeItems" :actualItem = "item" @appleBtnPressed="showModal"></FridgeItem>
</div>
<div id="addItemBtn-container">
- <button @click="addItemToFridge" id="addItemBtn">
+ <button @click="showItemSearch" id="addItemBtn">
<span class="plus">+</span>
</button>
</div>
@@ -32,13 +33,14 @@ export default {
computed:{
...mapState(useAuthStore, ['account']),
...mapStores(useFridgeStore),
-
},
data() {
return {
- visible: false, //is the useitemModal visible
- selectedItem: null,
- fridgeItems: [],
+ visible: false, //is the useitemModal visible
+ selectedItem: null,
+ fridgeItems: [],
+ searchVisible: false,
+ fridgeMsg: "fridge message:"
}
},
methods: {
@@ -46,19 +48,26 @@ export default {
this.visible = true;
this.selectedItem = item;
},
- hideModal(){
+ hideModal(){
this.visible=false;
- },
- addItemToFridge() {
- alert("Denne knappen legger en ny vare i kjøleskapet")
- },
+ },
+ showItemSearch() {
+ this.searchVisible=!this.searchVisible;
+ },
+ hideItemSearch() {
+ this.searchVisible=false;
+ },
+ updateFridgeMessage(msg){
+ this.fridgeMsg=msg;
+ },
async updateFridge() {
this.fridgeItems = await API.getFridgeItems();
+ this.hideItemSearch();
+ this.updateFridgeMessage("Varen ble lagt i kjøleskapet.")
}
},
async mounted() {
this.fridgeItems = await API.getFridgeItems();
- console.log(this.fridgeItems.length)
}
}
</script>
--
GitLab