kan nesten oppdatere fridgeItem mengde

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;
 }

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

src/views/FridgeView.vue

 <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>