Beskjed til bruker på ingredienser som har gått ut på dato. Datoen kan forlenges med 5 dager

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

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) => {