Skip to content

styling set up for expiration status on feeds - will be set up after expiration integrated #80

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
BryanVeith wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

styling set up for expiration status on feeds - will be set up after expiration integrated #80

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
646ee65
styling set up for expiration status on feeds - will be set up after …
BryanVeith Dec 5, 2022
10ad268
set up working allergen and expire status notifier
BryanVeith Dec 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
183 changes: 180 additions & 3 deletions src/components/RecipeFeed.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,92 @@
<ul>
<div v-for="(recipe, name) in types" :key="name">
<div class="col-md-auto">
<button type="button" class="btn recipe-item">
<!-- 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>
<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 }}
</div>
</button>
<h5 class="expiration-notif">Expiried</h5>
</div>
<!-- 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>

<button v-else type="button" class="btn recipe-item normal">
<div class="col-md-auto text-center recipe-text">
{{ name }}
</div>
Expand Down Expand Up @@ -103,29 +188,75 @@ 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([
{
Category1: {
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",
Expand Down Expand Up @@ -240,7 +371,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;
Expand All @@ -258,10 +390,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;
Expand Down Expand Up @@ -317,4 +452,46 @@ h3 {
cursor: pointer;
width: 100%;
}

.isExpired,
.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,
.both-allergin-expired-layout {
background-color: red;
}

.isExpiring,
.both-allergin-expiringsoon-layout {
background-color: rgb(255 0 0 / 47%);
}

.hasAllergin,
.hasAllergin-and-expiration {
background-color: purple;
}

.expiration-notif,
.allergin-notif {
color: white;
text-align: center;
padding: 10px;
margin-bottom: 0;
}
</style>