From 1c79f03fd3fc9f233e567dc964ab76dc05333404 Mon Sep 17 00:00:00 2001 From: KrisMoe Date: Sat, 4 May 2024 14:31:45 -0500 Subject: [PATCH 1/2] Quanity spelled correctly --- src/components/FoodItem.jsx | 2 +- src/css/Search.module.css | 4 ++-- src/pages/food/CreateFood.js | 4 +++- src/pages/food/Foods.js | 3 ++- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/FoodItem.jsx b/src/components/FoodItem.jsx index e05cf82..3578ff6 100644 --- a/src/components/FoodItem.jsx +++ b/src/components/FoodItem.jsx @@ -216,7 +216,7 @@ async function removeFood() { - Quantiny: { quantity ? quantity : "NA"} + Quantity: { quantity ? quantity : "NA"} diff --git a/src/css/Search.module.css b/src/css/Search.module.css index b43f1f6..a8127e0 100644 --- a/src/css/Search.module.css +++ b/src/css/Search.module.css @@ -125,7 +125,7 @@ color: #0d2714; background-color: #58b16e; border: 5px solid #58b16e; - box-shadow: -2px 0px 0px 0px #58b16e; + box-shadow: 0px 0px 0px 0px #58b16e; height: 30px; padding: 5px; padding: 1em; @@ -142,7 +142,7 @@ .searchbutton:hover{ background-color: #35b148; border: 5px solid #35b148; - box-shadow: -9px 0px 0px 0px #35b148; + /* box-shadow: -9px 0px 0px 0px #35b148; */ } .searchbar{ width: 14em; diff --git a/src/pages/food/CreateFood.js b/src/pages/food/CreateFood.js index 74bf36a..ad523f3 100644 --- a/src/pages/food/CreateFood.js +++ b/src/pages/food/CreateFood.js @@ -59,10 +59,12 @@ export default function CreateFood() { console.log("In createBlankFood..."); } + + return (
- {setFood(e.target.value)}} + {setFood(e.target.value)}} id="inputFeild" onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); diff --git a/src/pages/food/Foods.js b/src/pages/food/Foods.js index 76431f3..e43b17c 100644 --- a/src/pages/food/Foods.js +++ b/src/pages/food/Foods.js @@ -22,12 +22,13 @@ function Foods() { console.log(res) const resJson = await res.json() console.log(resJson) - setItems(resJson.foods) + setItems(resJson.foods.reverse()) // setItems(testItems) setLoading(false); })() console.log(loading + "loading ") }, []) + if(loading){ return
From c4c329d799d30ffb51d298e96695214033d8d6b7 Mon Sep 17 00:00:00 2001 From: KrisMoe Date: Sun, 5 May 2024 01:16:55 -0500 Subject: [PATCH 2/2] Added changes for 5/4 --- src/assets/upload.svg | 10 ++++++++- src/assets/uploadold.svg | 1 + src/components/FoodItem.jsx | 10 ++++----- src/components/LinkFoodPopup.jsx | 8 ++++++- src/components/Navbarbootstrap.jsx | 1 + src/components/QueueItem.jsx | 2 +- src/components/QueueItemPopup.jsx | 18 +++++++++++++-- src/components/RecipeItemBootstrap.jsx | 6 ++--- src/css/ItemPageLayout.module.css | 25 ++++++++++++++++++++- src/css/Login.module.css | 14 ++++++------ src/css/Queue.module.css | 2 ++ src/css/QueueItem.module.css | 2 ++ src/pages/Landing.js | 31 +++++++++++++++++++++++--- src/pages/Login.js | 6 ++--- src/pages/food/Foods.js | 7 ++++++ src/pages/queue/RecipeQueue.js | 6 +++-- src/pages/recipe/Recipes.js | 8 ++++++- 17 files changed, 127 insertions(+), 30 deletions(-) create mode 100644 src/assets/uploadold.svg diff --git a/src/assets/upload.svg b/src/assets/upload.svg index 7827d02..3d004ac 100644 --- a/src/assets/upload.svg +++ b/src/assets/upload.svg @@ -1 +1,9 @@ - \ No newline at end of file += + + + + + + + + diff --git a/src/assets/uploadold.svg b/src/assets/uploadold.svg new file mode 100644 index 0000000..7827d02 --- /dev/null +++ b/src/assets/uploadold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/FoodItem.jsx b/src/components/FoodItem.jsx index 3578ff6..8a028e9 100644 --- a/src/components/FoodItem.jsx +++ b/src/components/FoodItem.jsx @@ -39,7 +39,7 @@ export default function FoodItem({ food }) { setName(newFood.name) setImage(newFood.image) setQuantity(newFood.quantity) - setUnit(newFood.units) + setUnit(newFood.unit) setExpirationDate(newFood.expirationDate) setExpirationDateAndQuantity(food); }})() @@ -169,7 +169,7 @@ async function removeFood() { -
Quantity:   +
Quantity:   setQuantity(e.target.value)} min="0"/> @@ -177,7 +177,7 @@ async function removeFood() { -
Unit:   +
Unit:   setUnit(e.target.value)} />
@@ -215,11 +215,11 @@ async function removeFood() { - + Quantity: { quantity ? quantity : "NA"} - + Unit: { unit ? unit : "NA"} diff --git a/src/components/LinkFoodPopup.jsx b/src/components/LinkFoodPopup.jsx index d8c7d8b..78cfd9c 100644 --- a/src/components/LinkFoodPopup.jsx +++ b/src/components/LinkFoodPopup.jsx @@ -2,11 +2,15 @@ import { useState, useEffect } from 'react'; import Modal from 'react-bootstrap/Modal'; import SearchResult from './SearchResultBootstrap'; import Button from '../css/Buttons.module.css'; +import { Placeholder } from 'react-bootstrap'; +import Card from 'react-bootstrap/Card' function LinkFood({ ingredient, hidePopup }) { const [results, setResults] = useState([]) + const [loading,setLoading] = useState(true) useEffect(() => { (async () => { + setLoading(true) const res = await fetch("/api/food/byname", { method: "POST", headers: { @@ -21,6 +25,7 @@ function LinkFood({ ingredient, hidePopup }) { const foods = await res.json() console.log(foods) setResults(foods.foods) + setLoading(false) })() }, []) @@ -35,13 +40,14 @@ function LinkFood({ ingredient, hidePopup }) { Searching pantry for "{ingredient ? ingredient.name : ''}" + {loading? :<> { results && results.length !== 0 ? results.map((e,i) => // using array index as keys here is fine so long as there is no way to add/remove elements from the array
linkIngredient(e._id)}>
- ) : <>{'\"' + ingredient.name + '\" not in pantry'} } + ) : <>{'\"' + ingredient.name + '\" not in pantry'} }} {/*
-
View
+
Info
diff --git a/src/components/QueueItemPopup.jsx b/src/components/QueueItemPopup.jsx index 3a33923..c0da385 100644 --- a/src/components/QueueItemPopup.jsx +++ b/src/components/QueueItemPopup.jsx @@ -2,6 +2,10 @@ import Modal from 'react-bootstrap/Modal' import ListGroup from 'react-bootstrap/ListGroup' import { useEffect, useState } from 'react' import { compare } from '../conversion.mjs' +import Layout from "../css/ItemPageLayout.module.css"; +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; function IngredientFoodItem({ ingredient }) { const [food, setFood] = useState() @@ -27,8 +31,11 @@ function IngredientFoodItem({ ingredient }) { return 0 ? {color: "green"} : {}) }> - { ingredient.name + ' ' + ingredient.amount + ' ' + ingredient.unit } - { food ? ' ' + food.name + ' ' + food.quantity + ' ' + food.unit : '' } + + { ingredient.name + ' ' + ingredient.amount + ' ' + ingredient.unit } + { food ? ' ' + food.name + ' ' + food.quantity + ' ' + food.unit : '' } + + } export default function QueueItemPopup({ showPopup, setShow, recipe }) { @@ -37,7 +44,14 @@ export default function QueueItemPopup({ showPopup, setShow, recipe }) { { recipe.name } + + + +
Recipe
+
Your Pantry
+ + { recipe.ingredients.map((e,i) => ) } diff --git a/src/components/RecipeItemBootstrap.jsx b/src/components/RecipeItemBootstrap.jsx index 7ae4c4c..071db9b 100644 --- a/src/components/RecipeItemBootstrap.jsx +++ b/src/components/RecipeItemBootstrap.jsx @@ -11,13 +11,13 @@ export default function RecipeItemBootstrap({ id, name, image, desciption, editL return (
navigate(editLink)}> + > -
+
- {name} + navigate(editLink)}>{name}
diff --git a/src/css/ItemPageLayout.module.css b/src/css/ItemPageLayout.module.css index 95089e1..66f68bc 100644 --- a/src/css/ItemPageLayout.module.css +++ b/src/css/ItemPageLayout.module.css @@ -39,7 +39,16 @@ display: flex; justify-content: center; } - +.flex{ + display: flex; + flex-direction: row; +} +.flexstart{ + align-self: flex-start; +} +.flexend{ + align-self: flex-end; +} .ref{ position: relative; } @@ -104,6 +113,20 @@ .noQuantity{ border: yellow solid .2em; } +.subtitle{ + position: absolute; + top:0; +} +.quantity:hover::after{ + content: " How much of an item you have"; + background-color: #ffffff88; + font-size: small; +} +.unit:hover::after{ + content: " What units is this item measured in"; + background-color: #ffffff88; + font-size: small; +} @media only screen and (min-width: 900px) { .switchRowCol{ display: flex; diff --git a/src/css/Login.module.css b/src/css/Login.module.css index 926f553..6f13031 100644 --- a/src/css/Login.module.css +++ b/src/css/Login.module.css @@ -1,21 +1,21 @@ -h1, h2, h3{ +.h1, .h2, .h3{ margin-left: auto; margin-right: auto; position: relative; text-align: center; } -h1 { +.h1 { top: 20vh; font-size: 7em; } -h2 { +.h2 { top: 20vh; font-size: 2.5em; } -h3 { +.h3 { top: 20vh; font-size: 1.5em; } @@ -73,13 +73,13 @@ h3 { @media only screen and (max-width: 900px) { - h1 { + .h1 { font-size: 3em; } - h2 { + .h2 { font-size: 1.5em; } - h3 { + .h3 { font-size: 1.2em; } } \ No newline at end of file diff --git a/src/css/Queue.module.css b/src/css/Queue.module.css index 8e0f2eb..5e64c7a 100644 --- a/src/css/Queue.module.css +++ b/src/css/Queue.module.css @@ -115,6 +115,8 @@ left:0; width: 5em; height: 5em; + opacity: 0.5; + background-color: #ffffff22; } .uploadSvg:hover{ diff --git a/src/css/QueueItem.module.css b/src/css/QueueItem.module.css index 3241093..960435e 100644 --- a/src/css/QueueItem.module.css +++ b/src/css/QueueItem.module.css @@ -111,6 +111,8 @@ left:0; width: 5em; height: 5em; + opacity: 0.5; + background-color: #ffffff22; } .uploadSvg:hover{ diff --git a/src/pages/Landing.js b/src/pages/Landing.js index 2d59955..d61806f 100644 --- a/src/pages/Landing.js +++ b/src/pages/Landing.js @@ -5,6 +5,7 @@ import Tabs from 'react-bootstrap/Tabs' import Tab from 'react-bootstrap/Tab' import EmptyCard from "../components/EmptyCard" import FoodItem from '../components/FoodItem'; +import Layout from "../css/ItemPageLayout.module.css" import styles from "../css/LandingPage.module.css" export default function Landing() { @@ -75,27 +76,51 @@ export default function Landing() { sortArrayByName(lowestFoods)}> {lowestLoading ? +
+ + +
: lowestFoods.map(e => ) } +
+ {!lowestFoods.length?

No Food items in pantry

+

if you add a food item using the add button it will show up here

:
} +
setLowestFoods(lowestFoods)}> {lowestLoading ? - +
+ + + +
: lowestFoods.map(e => ) } +
+ {!lowestFoods.length?

No Food items in pantry

+

if you add a food item using the add button it will show up here

:
} +
setExpiringFoods(expiringFoods)}> - {expiringLoading ? - + { expiringLoading? +
+ + + +
: expiringFoods.map(e => ) } +
+ {!expiringFoods.length?

No Food items in pantry

+

if you add a food item using the add button it will show up here

:
} +
diff --git a/src/pages/Login.js b/src/pages/Login.js index eabea89..5eeb907 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -22,9 +22,9 @@ function loginOnClick(url) { export default function Login() { return -

Let Me Cook

-

A Virtual Pantry Manager & Recipe Tracker!

-

Login/Signup

+

Let Me Cook

+

A Virtual Pantry Manager & Recipe Tracker!

+

Login/Signup

diff --git a/src/pages/food/Foods.js b/src/pages/food/Foods.js index e43b17c..13c6d4c 100644 --- a/src/pages/food/Foods.js +++ b/src/pages/food/Foods.js @@ -47,11 +47,18 @@ function Foods() { else return
{navigate('/food/create')}}/> +
+ + { items.map(e => )} +
+ {!items.length?

No Food items in pantry

+

if you add a food item using the add button it will show up here

:
} +
} export default Foods; \ No newline at end of file diff --git a/src/pages/queue/RecipeQueue.js b/src/pages/queue/RecipeQueue.js index 9e1ddbe..2702712 100644 --- a/src/pages/queue/RecipeQueue.js +++ b/src/pages/queue/RecipeQueue.js @@ -115,6 +115,7 @@ export default function RecipeQueue() {
+ { recipeIds ? recipeIds.map((recpId,i) => (
)) - : <>} - + :
} + {!recipeIds.length?

No Recipes in queue

+

you can add saved recipes to your queue here

:
}
diff --git a/src/pages/recipe/Recipes.js b/src/pages/recipe/Recipes.js index 28b318f..14f84a4 100644 --- a/src/pages/recipe/Recipes.js +++ b/src/pages/recipe/Recipes.js @@ -24,6 +24,7 @@ export default function Recipes() { const resJson = await res.json() console.log(resJson) setItems(resJson.recipes) + console.log(items) SetLoading(false); })(); console.log(loading + "loading ") @@ -49,6 +50,8 @@ export default function Recipes() { {navigate('/recipe/create')}}/>
+ + { items.map(e => )} - +
+ {!items.length?

No Recipes saved

+

if you add a recipe item using the add button it will show up here

:
} +
) } \ No newline at end of file