From 40b47b86372cd4f576cbea858c67a5507d28c662 Mon Sep 17 00:00:00 2001
From: Ingrid Martinsheimen Egge <ingrimeg@stud.ntnu.no>
Date: Sat, 29 Apr 2023 09:15:44 +0200
Subject: [PATCH] =?UTF-8?q?Beskjed=20til=20bruker=20p=C3=A5=20ingredienser?=
 =?UTF-8?q?=20som=20har=20g=C3=A5tt=20ut=20p=C3=A5=20dato.=20Datoen=20kan?=
 =?UTF-8?q?=20forlenges=20med=205=20dager?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EatFridgeItemModal.vue | 50 ++++++++++++++++++++++-----
 src/util/API.js                       |  2 +-
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index 142956a..5bc0347 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -12,6 +12,11 @@
           <button @click="logFoodAsDiscarded">Ble kastet 🗑️ </button>
           <button id="eatenBtn" @click="logFoodAsEaten" >Ble spist 😋</button>
       </div>
+      <div v-if="isExpired" id = "itemHasExpiredMessage">
+          <h2>Varen har gått ut på dato</h2>
+          <p>Se, lukt, smak : Hvis varen fortsatt ser fin ut, kan du forlenge utløpsdatoen med 5 dager</p>
+          <button id= "eatenBtn" @click="extendExpiration">Utsett utløpsdato med 5 dager</button>
+      </div>
   </div>
 </template>
 
@@ -40,13 +45,8 @@ export default {
         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,
@@ -64,6 +64,17 @@ export default {
       logFoodAsDiscarded(){
           this.close();
       },
+      extendExpiration(){
+          const id = this.fridgeItem.ingredient_id;
+          const today = new Date();
+          const fiveDays = new Date();
+          fiveDays.setDate(today.getDate()+5);
+
+          API.changeExpirationOfIngredient({"ingredientId": id, "newExpDate":fiveDays}).catch((error)=> {
+              console.log("could not change date")
+          })
+          this.close();
+      }
   },
   computed:{
     redIconColor() {
@@ -74,11 +85,22 @@ export default {
     },
       maxValue(){
         return this.fridgeItem.amount.quantity;
-      }
+      },
+      isExpired(){
+          let date = this.fridgeItem.exp_date;
+          const epDate = new Date(date);
+
+          const parsedDate = Date.parse(epDate)
+          const today = new Date();
+
+          const ms = parsedDate-today;
+          const numOfDays = Math.ceil(ms/(86400000))
+
+          return numOfDays < 1 ;
+      },
   }
 }
 </script>
-
 <style scoped lang="scss">
 #popup {
   background-color: base.$white;
@@ -119,13 +141,13 @@ export default {
 }
 
 button {
-  qpadding: .2em 2.4em;
   margin:.1em;
   font-weight: bolder;
     width: 40%;
     padding:1em;
   background-color: base.$red;
   color:white;
+    border:none;
 }
 
 button:hover, #eatenBtn:hover {
@@ -134,4 +156,16 @@ button:hover, #eatenBtn:hover {
 #eatenBtn {
   background-color: base.$green;
 }
+
+#itemHasExpiredMessage  {
+    border: 3px dashed base.$red;
+    padding: 1em;
+}
+
+#itemHasExpiredMessage button {
+    padding: 1em;
+    width:100%;
+    border:none;
+    border-radius:5px;
+}
 </style>
\ No newline at end of file
diff --git a/src/util/API.js b/src/util/API.js
index 030b56c..43a793b 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -205,7 +205,7 @@ export const API = {
 
     /**
      * Changes the expiration date of an ingredient.
-     * @param request ingredientId, newExpDate (Tip: )
+     * @param request ingredientId: id of the ingredient, newExpDate: the new expiration date of the ingredient
      * @returns {Promise<void>}
      */
     changeExpirationOfIngredient: async(request) => {
-- 
GitLab