Merge pull request #22 from csci5117s24/KrisMoe

Kris moe
csci5117s24 · May 5, 2024 · de322fb · de322fb
2 parents 983a414 + c4c329d
commit de322fb
Show file tree

Hide file tree

Showing 19 changed files with 134 additions and 34 deletions.
diff --git a/src/assets/upload.svg b/src/assets/upload.svg
diff --git a/src/assets/uploadold.svg b/src/assets/uploadold.svg
diff --git a/src/components/FoodItem.jsx b/src/components/FoodItem.jsx
@@ -169,15 +169,15 @@ async function removeFood() {
           </Card.Body>
           <ListGroup variant="flush">
           <ListGroup.Item className={`list-group-flush`}>
-            <div className={Layout.text}>Quantity:   &ensp;
+            <div className={Layout.text+" "+Layout.quantity}>Quantity:   &ensp;
               <input type="text" 
                 value={quantity} onChange={(e)=>setQuantity(e.target.value)}
                 min="0"/>
             </div>
           </ListGroup.Item>
 
           <ListGroup.Item className="list-group-flush">
-          <div className={Layout.text}>Unit:   &ensp;
+          <div className={Layout.text+" "+Layout.unit}>Unit:   &ensp;
           <input type="text" 
               value={unit} onChange={(e)=>setUnit(e.target.value)} />
               </div>
@@ -215,11 +215,11 @@ async function removeFood() {
 
       <ListGroup variant="flush">
 
-        <ListGroup.Item className={`${isNoQuantity ? Layout.noQuantity : ''} ${Layout.text} list-group-flush`}>
-             Quantiny: { quantity ? quantity : "NA"}
+        <ListGroup.Item className={`${isNoQuantity ? Layout.noQuantity : ''} ${Layout.text} ${Layout.quantity} list-group-flush`}>
+             Quantity: { quantity ? quantity : "NA"}
         </ListGroup.Item>
 
-        <ListGroup.Item className={Layout.text+" "+"list-group-flush"}>
+        <ListGroup.Item className={Layout.text+" "+"list-group-flush"+" "+Layout.unit}>
              Unit: { unit ? unit : "NA"}
         </ListGroup.Item>
 

diff --git 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'
 
 export default function LinkFoodPopup({ 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 @@ export default function LinkFoodPopup({ ingredient, hidePopup }) {
           const foods = await res.json()
           console.log(foods)
           setResults(foods.foods)
+          setLoading(false)
       })()
   }, [])
 
@@ -35,13 +40,14 @@ export default function LinkFoodPopup({ ingredient, hidePopup }) {
         <Modal.Title>Searching pantry for "{ingredient ? ingredient.name : ''}"</Modal.Title>
       </Modal.Header>
       <Modal.Body>
+      {loading? <Placeholder as={Card.Text} animation="glow"><Placeholder xs={4} /></Placeholder>:<>
       { 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
         <div key={i} onClick={()=>linkIngredient(e._id)}> 
         <SearchResult name={ e.name } image ={e.image}></SearchResult>
           </div>
-        ) : <>{'\"' + ingredient.name + '\" not in pantry'}</> }
+        ) : <>{'\"' + ingredient.name + '\" not in pantry'}</> }</>}
       </Modal.Body>
       {/* <Modal.Footer>
         <button>

diff --git a/src/components/Navbarbootstrap.jsx b/src/components/Navbarbootstrap.jsx
@@ -12,6 +12,7 @@ function ColorSchemesExample() {
         <Container>
           <Navbar.Brand href="/" className = {styles.removewhensmall}>Let Me Cook</Navbar.Brand>
           <Nav className="me-auto">
+            <Nav.Link as={Link} to="/">Home</Nav.Link>
             <Nav.Link as={Link} to="/foods">Food</Nav.Link>
             <Nav.Link as={Link} to="/recipes">Recipes</Nav.Link>
             <Nav.Link as={Link} to="/queue">Queue</Nav.Link>

diff --git a/src/components/QueueItem.jsx b/src/components/QueueItem.jsx
@@ -59,7 +59,7 @@ export default function QueueItem({ recipeId, deleteItem }) {
                 e.stopPropagation()
                 navigate('/recipe/edit/'+recipe._id)
               }}><EditSVG /></div>
-          <div className={styles.viewButton}>View</div>
+          <div className={styles.viewButton}>Info</div>
 
           <div className={styles.iconContainer}><DragSVG /></div>
         </div>

diff --git 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 <ListGroup.Item style={ 
       comparisonStatus < 0 ? {color: "red"} 
       : (comparisonStatus > 0 ? {color: "green"} : {}) }>
-      { ingredient.name + '  ' + ingredient.amount + ' ' + ingredient.unit }
-      { food ? '  ' + food.name + ' ' + food.quantity + ' ' + food.unit : '' }</ListGroup.Item>
+      <Row>
+      <Col>{ ingredient.name + '  ' + ingredient.amount + ' ' + ingredient.unit }</Col>
+      <Col> { food ? '  ' + food.name + ' ' + food.quantity + ' ' + food.unit : '' }</Col>
+      </Row>
+      </ListGroup.Item>
 }
 
 export default function QueueItemPopup({ showPopup, setShow, recipe }) {
@@ -37,7 +44,14 @@ export default function QueueItemPopup({ showPopup, setShow, recipe }) {
         <Modal.Title>{ recipe.name }</Modal.Title>
     </Modal.Header>
     <Modal.Body>
+
     <ListGroup className="list-group-flush">
+    <ListGroup.Item >
+      <Row>
+      <Col><h6>Recipe</h6></Col>
+      <Col> <h6>Your Pantry</h6></Col>
+      </Row>
+      </ListGroup.Item>
       { recipe.ingredients.map((e,i) => 
         <IngredientFoodItem key={i} ingredient={e} />) }
     </ListGroup>

diff --git a/src/components/RecipeItemBootstrap.jsx b/src/components/RecipeItemBootstrap.jsx
@@ -11,13 +11,13 @@ export default function RecipeItemBootstrap({ id, name, image, desciption, editL
   return (
     <div className={styles.wholeCard +" "+Layout.centerrow}>
       <Card className={styles.customCard} style={{ width: '18rem', cursor: 'pointer' }}
-            onClick={()=>navigate(editLink)}>
+            >
         <Card.Body>
-          <div className={styles.innerBodyContainer}>
+          <div className={styles.innerBodyContainer} >
             <Card.Img className={styles.cardImg} src={image}/>
 
             <div className={styles.cardTextContainer}>
-              <Card.Text className={styles.cardText}>{name}</Card.Text>
+              <Card.Text className={styles.cardText} onClick={()=>navigate(editLink)}>{name}</Card.Text>
             </div>
             <Link to={editLink} className={styles.iconContainer+ " "+styles.editButton}> 
                 <EditSVG />

diff --git 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
@@ -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;
     }
 }
diff --git 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
@@ -111,6 +111,8 @@
     left:0;
     width: 5em;
     height: 5em;
+    opacity: 0.5;
+    background-color: #ffffff22;
 
 }
 .uploadSvg:hover{

diff --git 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/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() {
                 <Tab eventKey="alphabetical" title="All" className={styles.tab} onClick={() => sortArrayByName(lowestFoods)}>
                     <Container>
                         {lowestLoading ?
+                            <div>
                             <EmptyCard feildnum="2"></EmptyCard>
+                            <EmptyCard feildnum="2"></EmptyCard>
+                            <EmptyCard feildnum="2"></EmptyCard>
+                            </div>
                             : lowestFoods.map(e => <FoodItem food={e} />)
                         }
+                         <div className ={Layout.centerrow}>
+                        {!lowestFoods.length?<div className ={Layout.center}><h2>No Food items in pantry</h2>
+                        <p >if you add a food item using the add button it will show up here </p></div>:<div></div>}
+                    </div>
                     </Container>
                 </Tab>
                 <Tab eventKey="lowQuantity" title="Low Quantity" className={styles.tab} onClick={() => setLowestFoods(lowestFoods)}>
 
                     <Container>
                         {lowestLoading ?
-                            <EmptyCard feildnum="2"></EmptyCard>
+                             <div>
+                             <EmptyCard feildnum="2"></EmptyCard>
+                             <EmptyCard feildnum="2"></EmptyCard>
+                             <EmptyCard feildnum="2"></EmptyCard>
+                             </div>
                             : lowestFoods.map(e => <FoodItem food={e} />)
                         }
                     </Container>
+                    <div className ={Layout.centerrow}>
+                        {!lowestFoods.length?<div className ={Layout.center}><h2>No Food items in pantry</h2>
+                        <p >if you add a food item using the add button it will show up here </p></div>:<div></div>}
+                    </div>
                 </Tab>
                 <Tab eventKey="expringSoon" title="Expiring Soon " className={styles.tab} onClick={() => setExpiringFoods(expiringFoods)}>
 
                     <Container>
-                        {expiringLoading ?
-                            <EmptyCard feildnum="2"></EmptyCard>
+                        { expiringLoading?
+                             <div>
+                             <EmptyCard feildnum="2"></EmptyCard>
+                             <EmptyCard feildnum="2"></EmptyCard>
+                             <EmptyCard feildnum="2"></EmptyCard>
+                             </div>
                             : expiringFoods.map(e => <FoodItem food={e} />)
                         }
+                        <div className ={Layout.centerrow}>
+                        {!expiringFoods.length?<div className ={Layout.center}><h2>No Food items in pantry</h2>
+                        <p >if you add a food item using the add button it will show up here </p></div>:<div></div>}
+                    </div>
                     </Container>
                 </Tab>
             </Tabs>

diff --git a/src/pages/Login.js b/src/pages/Login.js
@@ -22,9 +22,9 @@ function loginOnClick(url) {
 
 export default function Login() {
     return <Stack gap={3} className = "body">
-        <h1>Let Me Cook</h1>
-        <h2>A Virtual Pantry Manager & Recipe Tracker!</h2>
-        <h3>Login/Signup</h3>
+        <h1  className= { styles.h1}>Let Me Cook</h1>
+        <h2 className= { styles.h2}>A Virtual Pantry Manager & Recipe Tracker!</h2>
+        <h3 className= { styles.h3}>Login/Signup</h3>
         <div id={styles.buttons}>
             <button className={styles.button+' '+styles.apple} onClick={loginOnClick('apple')}>Apple</button>
             <button className={styles.button+' '+styles.google} onClick={loginOnClick('google')}>Google</button>

diff --git 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 (<div>
     <div className={searchStyle.centerContents}>
       <div className={iconContainer} >
-        <input type="text" value={food} onInput={(e)=>{setFood(e.target.value)}} 
+        <input type="text" value={food} onInput={(e)=>{setFood(e.target.value)}} id="inputFeild"
           onKeyDown={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();