Complete basic interfaces, adapt db class

elleneee · Mar 23, 2024 · cf8c100 · cf8c100
1 parent 881204a
commit cf8c100
Show file tree

Hide file tree

Showing 13 changed files with 571 additions and 59 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,3 +1,3 @@
 vite.svg,1710975305380,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
-assets/index-DyCb2_pT.js,1710979430766,7f06ade92a42e9a7ef116a3e01b14fcf65e9c6350a497155a49a9ca8d0952705
-index.html,1710979497080,83726dcfe0c2d84ad90fa422764ffe9c08694eda3b1008931c62a017309eaf1e
+index.html,1711081066568,806cf11cde56568f43314444ecc4832ee1c843c52e62cf8c8ed1d4f0aaf6efda
+assets/index--S1mGhzX.js,1711081066568,9bd500c0d101b82cc0f4b0664b5033757bbe4b3c8a859698e5aab9b0862fd795
diff --git a/index.html b/index.html
@@ -4,10 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <title>DailyTrack</title>
   </head>
   <body>
     <div id="root"></div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,24 @@
+.container { 
+  height: 600px;
+  width: 900px;
+  position: relative;
+  /* border: 3px solid #C8DAB6;  */
+  border-radius: 1rem;
+  margin-top: 100px;
+  padding: 30px 5px 20px 10px;
+  background-color:rgb(243, 243, 243);
+  box-shadow: 0px 0px 80px 10px rgb(221, 219, 222);
+}
+
+.center {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+body {
+  background-color: rgb(235, 232, 237);
+  /* background-color: rgb(232, 235, 237); */
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,28 +1,112 @@
 // import { useState } from 'react'
 import { useEffect, useState } from 'react';
-import './App.css'
-import ItemView from './components/ItemView'
+import './App.css';
 import { myFirebase } from './models/myFirebaseDB';
+// import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Col, Nav, Row, Tab } from 'react-bootstrap';
+import SearchBar from './components/SearchBar';
+import NewItem from './components/NewItem';
+import ItemGallery from './components/ItemGallery';
+import ItemManager from './models/ItemManager';
 
 function App() {
 
+  // items that are not expired
   const [items, setItems] = useState([]);
+
+  // expired items
+  const [expiredItems, setExpItems] = useState([])
+
+  // tags
+  const [tags, setTags] = useState([]);
 
-  const myDB = myFirebase;
-  // Retreive data from db
-  async function refreshitems() {
-    setItems(await myDB.getItems(">="));
-  }
+  const itemManager = ItemManager();
 
   useEffect(() => {
-    refreshitems();
+    refreshItems();
+    refreshExpItems();
   }, [])
+
+  // Retreive items from db
+  async function refreshItems() {
+    setItems(await itemManager.getItems());
+  }
+
+  // Retreive expired items from db
+  async function refreshExpItems() {
+    setExpItems(await itemManager.getExpiredItems());
+  }
+
+  // New item
+  async function newItem(item) {
+    await itemManager.addItem(item);
+    await refreshItems();
+  }
+
+  async function searchItems(name, tag, expiration){
+    // setItems(await itemManager.searchItems())
+  }
+  async function searchExpItems(name, tag, expiration){
+
+  }
 
   return (
     <>
-      <p>hello!</p>
-      {/* { items?.map((i) => <ItemView key={i.id} item={i}/>)} */}
-      {items[0]?.name}
+      <div className="container">
+        {/* <BrowserRouter>
+          <Routes>
+            <Route path="/" exact Component={}/>
+            <Route path="/expired" Component={}/>
+          </Routes>
+        </BrowserRouter> */}
+        <Tab.Container className="center" defaultActiveKey={"home"}>
+          <Row className='gap-2'>
+            <Col sm={2} className='border-end border-success-subtle'>
+              <Nav variant="pills" className="flex-column">
+                <Nav.Item>
+                  <Nav.Link eventKey="new">New</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link eventKey="home">Home</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link eventKey="expired">Expired</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link eventKey="search">Search</Nav.Link>
+                </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link eventKey="analytics">Analytics</Nav.Link>
+                </Nav.Item>
+              </Nav>
+            </Col>
+            <Col sm={9}>
+              {/* <div>
+                <SearchBar/>
+              </div> */}
+              <Tab.Content>
+                <Tab.Pane eventKey="new">
+                  <NewItem newItem={newItem}/>
+                </Tab.Pane>
+                <Tab.Pane eventKey="home">
+                  {/* <SearchBar onSearchItem={searchItems}/> */}
+                  <ItemGallery items={items}/>
+                </Tab.Pane>
+                <Tab.Pane eventKey="expired">
+                  {/* <SearchBar onSearchItem={searchItems}/> */}
+                  <ItemGallery items={expiredItems}/>
+                </Tab.Pane>
+                <Tab.Pane eventKey="search">
+
+                </Tab.Pane>
+                <Tab.Pane eventKey="analytics">
+                  I guess this is for the third nav tab
+                </Tab.Pane>
+              </Tab.Content>
+            </Col>
+          </Row>
+        </Tab.Container>
+      </div>
     </>
   )
 }

diff --git a/src/components/ItemGallery.jsx b/src/components/ItemGallery.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import ItemView from './ItemView'
+import PropTypes from "prop-types";
+
+export default function ItemGallery({ items }) {
+  return (
+    <div className='m-3'>
+      {/* <div className='d-flex flex-row justify-content-between align-items-center pb-2 pt-2 border-bottom'>
+        <span>Name</span>
+        <span>Quantity</span>
+        <span>Expiration</span>
+        <span>Operation</span>
+      </div> */}
+      { items && 
+          items.map((item) => (
+          <ItemView 
+            key={item.id} 
+            item={item} 
+            // isModify={isModify} 
+            // onRemoveItem={onRemoveItem} 
+            // onModifyItem={onModifyItem}
+          />
+        )) }
+    </div>
+  )
+}
+ItemGallery.propTypes = {
+  items: PropTypes.array,
+  // onRemoveItem: PropTypes.func.isRequired,
+  // onModifyItem: PropTypes.func,
+  // isModify: PropTypes.bool,
+};
diff --git a/src/components/ItemView.jsx b/src/components/ItemView.jsx
@@ -1,10 +1,22 @@
 import React from 'react';
 import PropTypes from "prop-types";
 
-export default function ItemView() {
+export default function ItemView({ item }) {
 
 
   return (
-    <p>hello</p>
+    <div className='d-flex flex-row justify-content-between align-items-center pb-2 pt-2 border-bottom'>
+      <span>{item.name}</span>
+      <span>Quantity: {item.quantity}</span>
+      <span>{item.expiration}</span>
+      <button className='btn btn-sm btn-outline-success'>Delete</button>
+    </div>
   );
 }
+
+ItemView.propTypes = {
+  item: PropTypes.object.isRequired,
+  // onRemoveItem: PropTypes.func.isRequired,
+  // onModifyItem: PropTypes.func,
+  // isModify: PropTypes.bool,
+};
diff --git a/src/components/NewItem.jsx b/src/components/NewItem.jsx
@@ -0,0 +1,106 @@
+import moment from 'moment'
+import React from 'react'
+// import { Nav } from 'react-bootstrap';
+import PropTypes from "prop-types";
+
+export default function NewItem({ newItem }) {
+
+  const tags = ["Food", "Medicine", "Drink", "Personal care"];
+  const period = ["Day", "Week", "Month", "Year"];
+
+  function onNew(event) {
+    event.preventDefault();
+    // get inputs from form
+    const formData = new FormData(event.target);
+    const item = {
+      name: formData.get("name"),
+      quantity: formData.get("quantity"),
+      expiration: formData.get("expiration"),
+      tags: formData.getAll("tags"),
+      period: formData.get("period"),
+    };
+    // console.log("comfirm item", item);
+    newItem(item);
+    alert("Add sucessfully!");
+    event.target.reset();
+  }
+
+  return (
+    <div>
+      <h3>New Item</h3>
+      <form className='gap-2' onSubmit={onNew}>
+        <label htmlFor="item-name" className="form-label">
+          Name:
+        </label>
+        <input type="text" className="form-control" id="item-name" name="name" required/>
+        <label htmlFor="item-qty" className="form-label">
+          Quantity:
+        </label>
+        <input type="number" className="form-control" id="item-qty" name="quantity"/>
+        <label htmlFor="item-exp" className="col-form-label">
+          Expiration:
+        </label>
+        <input type="date" className="form-control" id="item-exp" name="expiration" 
+          defaultValue={moment().format ("YYYY-MM-DD")} min={moment().format("YYYY-MM-DD")}/>
+        <label htmlFor="item-tags" className="col-form-label">
+          Tags:
+        </label>
+        <button className='btn btn-sm btn-outline-secondary ms-5'>Add Tag</button>
+        {tags.map((tag) => (
+          <div className="form-check" key={tag}>
+            <input
+              className="form-check-input"
+              type="checkbox"
+              id={tag}
+              name="tags"
+              value={tag}
+              defaultChecked={tag==="All"}
+            />
+            <label className="form-check-label" htmlFor={tag}>
+              {tag}
+            </label>
+          </div>
+        ))}
+        <label htmlFor="item-period" className="form-label me-2 mt-2 d-block">
+          Reminder period:
+        </label>
+        <div
+          className="btn-group"
+          role="group"
+          aria-label="Basic radio toggle button group"
+        >
+          {period.map((p) => (
+            <div key={p}>
+              <input
+                type="radio"
+                className="btn-check"
+                name="period"
+                id={p}
+                value={p}
+                autoComplete="off"
+                defaultChecked={p==="Day"?"Checked":""} />
+              <label className="btn btn-outline-primary" htmlFor={p}>
+                {p}
+              </label>
+            </div>
+          ))}
+        </div>
+        <div className='d-flex justify-content-end gap-2'>
+          <button type="click" className="btn btn-primary d-block ">
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-primary d-block ">
+            Comfirm
+          </button>
+
+        </div>
+      </form>
+    </div>
+  )
+}
+NewItem.propTypes = {
+  newItem: PropTypes.func.isRequired,
+  // onRemoveItem: PropTypes.func.isRequired,
+  // onModifyItem: PropTypes.func,
+  // isModify: PropTypes.bool,
+};