From 646ee6564430acfc233505cc13f58df2f16a3c6c Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Sun, 4 Dec 2022 19:11:44 -0500
Subject: [PATCH 1/2] styling set up for expiration status on feeds - will be
 set up after expiration integrated

---
 src/components/RecipeFeed.vue | 49 ++++++++++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/components/RecipeFeed.vue b/src/components/RecipeFeed.vue
index 20688a9..48f88bc 100644
--- a/src/components/RecipeFeed.vue
+++ b/src/components/RecipeFeed.vue
@@ -73,11 +73,28 @@
               <ul>
                 <div v-for="(recipe, name) in types" :key="name">
                   <div class="col-md-auto">
-                    <button type="button" class="btn recipe-item">
+                    <button type="button" class="btn recipe-item normal">
                       <div class="col-md-auto text-center recipe-text">
                         {{ name }}
                       </div>
                     </button>
+                    <!-- TODO when expiration is implemented a simple v-id for each of these should work-->
+                    <!-- <div class="isExpired">
+                      <button type="button" class="btn recipe-item">
+                        <div class="col-md-auto text-center recipe-text">
+                          {{ name }}
+                        </div>
+                      </button>
+                      <h5 class="expiration-notif">Expiried</h5>
+                    </div>
+                    <div class="isExpiring">
+                      <button type="button" class="btn recipe-item">
+                        <div class="col-md-auto text-center recipe-text">
+                          {{ name }}
+                        </div>
+                      </button>
+                      <h5 class="expiration-notif">Expiring Soon</h5>
+                    </div> -->
                   </div>
                 </div>
               </ul>
@@ -240,7 +257,8 @@ css. If not, just extract this into a separate css file */
 }
 
 .type-of-recipe,
-.recipe-text {
+.recipe-text,
+.expiration-notif {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -258,10 +276,13 @@ css. If not, just extract this into a separate css file */
       rgb(0 0 0 / 73%)
     ),
     url("../assets/food.png");
-  margin: 15px;
   padding: 0;
 }
 
+.normal {
+  margin: 15px;
+}
+
 .col-md-auto {
   padding: 0;
   margin: 0;
@@ -317,4 +338,26 @@ h3 {
   cursor: pointer;
   width: 100%;
 }
+
+.isExpired,
+.isExpiring {
+  width: 12vw;
+  border-radius: 15px;
+  padding: 0;
+  margin: 15px;
+}
+
+.isExpired {
+  background-color: red;
+}
+
+.isExpiring {
+  background-color: rgb(255 0 0 / 47%);
+}
+
+.expiration-notif {
+  color: white;
+  text-align: center;
+  padding: 10px;
+}
 </style>

From 10ad268e56ca2038905d88ac1ab7a15944c8813a Mon Sep 17 00:00:00 2001
From: BryanV <bveith2000@gmail.com>
Date: Tue, 6 Dec 2022 17:29:08 -0500
Subject: [PATCH 2/2] set up working allergen and expire status notifier

---
 src/components/RecipeFeed.vue | 158 +++++++++++++++++++++++++++++++---
 1 file changed, 146 insertions(+), 12 deletions(-)

diff --git a/src/components/RecipeFeed.vue b/src/components/RecipeFeed.vue
index 48f88bc..7abdd22 100644
--- a/src/components/RecipeFeed.vue
+++ b/src/components/RecipeFeed.vue
@@ -73,13 +73,52 @@
               <ul>
                 <div v-for="(recipe, name) in types" :key="name">
                   <div class="col-md-auto">
-                    <button type="button" class="btn recipe-item normal">
-                      <div class="col-md-auto text-center recipe-text">
-                        {{ name }}
+                    <!-- IF EXPIRED and has Allergin -->
+                    <div
+                      v-if="
+                        expiration(recipe.expirationDate) == 'expired' &&
+                        recipe.hasAllergin == 'true'
+                      "
+                      class="both-allergin-expired-layout"
+                    >
+                      <div class="hasAllergin-and-expiration">
+                        <button type="button" class="btn recipe-item">
+                          <div class="col-md-auto text-center recipe-text">
+                            {{ name }}
+                          </div>
+                        </button>
+                        <h5 class="allergin-notif">Allergin</h5>
                       </div>
-                    </button>
-                    <!-- TODO when expiration is implemented a simple v-id for each of these should work-->
-                    <!-- <div class="isExpired">
+                      <h5 class="expiration-notif">Expired</h5>
+                    </div>
+
+                    <!-- IF EXPIRING SOON and has Allergin -->
+                    <div
+                      v-else-if="
+                        expiration(recipe.expirationDate) == 'expires soon' &&
+                        recipe.hasAllergin == 'true'
+                      "
+                      class="both-allergin-expiringsoon-layout"
+                    >
+                      <div class="hasAllergin-and-expiration">
+                        <button type="button" class="btn recipe-item">
+                          <div class="col-md-auto text-center recipe-text">
+                            {{ name }}
+                          </div>
+                        </button>
+                        <h5 class="allergin-notif">Allergin</h5>
+                      </div>
+                      <h5 class="expiration-notif">Expiring Soon</h5>
+                    </div>
+
+                    <!-- IF EXPIRED -->
+                    <div
+                      v-else-if="
+                        expiration(recipe.expirationDate) == 'expired' &&
+                        recipe.hasAllergin == 'false'
+                      "
+                      class="isExpired"
+                    >
                       <button type="button" class="btn recipe-item">
                         <div class="col-md-auto text-center recipe-text">
                           {{ name }}
@@ -87,14 +126,43 @@
                       </button>
                       <h5 class="expiration-notif">Expiried</h5>
                     </div>
-                    <div class="isExpiring">
+                    <!-- IF HAS ALLERGIN -->
+                    <div
+                      v-else-if="
+                        expiration(recipe.expirationDate) == '' &&
+                        recipe.hasAllergin == 'true'
+                      "
+                      class="hasAllergin"
+                    >
+                      <button type="button" class="btn recipe-item">
+                        <div class="col-md-auto text-center recipe-text">
+                          {{ name }}
+                        </div>
+                      </button>
+                      <h5 class="allergin-notif">Allergin</h5>
+                    </div>
+
+                    <!-- If Expires Soon -->
+                    <div
+                      v-else-if="
+                        expiration(recipe.expirationDate) == 'expires soon' &&
+                        recipe.hasAllergin == 'false'
+                      "
+                      class="isExpiring"
+                    >
                       <button type="button" class="btn recipe-item">
                         <div class="col-md-auto text-center recipe-text">
                           {{ name }}
                         </div>
                       </button>
                       <h5 class="expiration-notif">Expiring Soon</h5>
-                    </div> -->
+                    </div>
+
+                    <button v-else type="button" class="btn recipe-item normal">
+                      <div class="col-md-auto text-center recipe-text">
+                        {{ name }}
+                      </div>
+                    </button>
                   </div>
                 </div>
               </ul>
@@ -120,6 +188,42 @@ export default {
       this.$router.push("/login");
     }
   },
+  methods: {
+    expiration(expirationDate) {
+      const expireDate = new Date(expirationDate);
+      const today = new Date();
+      if (expireDate != "Invalid Date") {
+        // console.log(expireDate);
+        // console.log(today);
+        // const formatedexpireDate = `${
+        //   expireDate.getMonth() + 1
+        // }/${expireDate.getDate()}/${expireDate.getFullYear()}`;
+
+        // const formatedtoday = `${
+        //   today.getMonth() + 1
+        // }/${today.getDate()}/${today.getFullYear()}`;
+        // console.log(formatedexpireDate);
+        // console.log(formatedtoday);
+        // console.log("-------------------");
+
+        if (expireDate.getTime() < today.getTime()) {
+          console.log(expireDate.getTime());
+          console.log(today.getTime());
+          console.log(expireDate - today);
+          return "expired";
+        } else if ((expireDate - today) / 86400000 <= 10) {
+          console.log(expireDate.getTime());
+          console.log(today.getTime());
+          console.log(expireDate - today);
+          return "expires soon";
+        }
+      } else {
+        console.log("No Expiration Date");
+      }
+
+      return "";
+    },
+  },
   data() {
     const data = ref([
       {
@@ -127,22 +231,32 @@ export default {
           Recipe1: {
             recipeName: "Recipe1",
             recipeType: "Category1",
+            expirationDate: "12/12/2022",
+            hasAllergin: "false",
           },
           RecipeNameVeryLong: {
             recipeName: "RecipeNameVeryLong",
             recipeType: "Category1",
+            expirationDate: "12/5/2022",
+            hasAllergin: "false",
           },
           Recipe3: {
             recipeName: "Recipe3",
             recipeType: "Category1",
+            expirationDate: "12/30/2022",
+            hasAllergin: "false",
           },
           Recipe4: {
             recipeName: "Recipe4",
             recipeType: "Category1",
+            expirationDate: "12/5/2022",
+            hasAllergin: "true",
           },
           Recipe5: {
             recipeName: "Recipe5",
             recipeType: "Category1",
+            expirationDate: "12/10/2022",
+            hasAllergin: "true",
           },
           Recipe6: {
             recipeName: "Recipe6",
@@ -340,24 +454,44 @@ h3 {
 }
 
 .isExpired,
-.isExpiring {
+.isExpiring,
+.hasAllergin,
+.both-allergin-expired-layout,
+.hasAllergin-and-expiration,
+.both-allergin-expiringsoon-layout {
   width: 12vw;
   border-radius: 15px;
   padding: 0;
+}
+
+.isExpired,
+.isExpiring,
+.hasAllergin,
+.both-allergin-expired-layout,
+.both-allergin-expiringsoon-layout {
   margin: 15px;
 }
 
-.isExpired {
+.isExpired,
+.both-allergin-expired-layout {
   background-color: red;
 }
 
-.isExpiring {
+.isExpiring,
+.both-allergin-expiringsoon-layout {
   background-color: rgb(255 0 0 / 47%);
 }
 
-.expiration-notif {
+.hasAllergin,
+.hasAllergin-and-expiration {
+  background-color: purple;
+}
+
+.expiration-notif,
+.allergin-notif {
   color: white;
   text-align: center;
   padding: 10px;
+  margin-bottom: 0;
 }
 </style>