diff --git a/bk_webapp/package-lock.json b/bk_webapp/package-lock.json index 1d99d6c..b04e558 100644 --- a/bk_webapp/package-lock.json +++ b/bk_webapp/package-lock.json @@ -11090,6 +11090,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" }, + "react-minimal-pie-chart": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/react-minimal-pie-chart/-/react-minimal-pie-chart-6.0.1.tgz", + "integrity": "sha512-AlnZn2TjgX7Rm9E4SlV4iZphJVx8r3cojhm/VAzxuJMOevizCAxbSKhBlYjmmRtCNAWBX6JlALaPkOpEaPBFMQ==", + "requires": { + "prop-types": "^15.5.7" + } + }, "react-popper": { "version": "1.3.7", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", diff --git a/bk_webapp/package.json b/bk_webapp/package.json index 760bf76..8a1416d 100644 --- a/bk_webapp/package.json +++ b/bk_webapp/package.json @@ -10,6 +10,7 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-html5-camera-photo": "^1.5.4", + "react-minimal-pie-chart": "^6.0.1", "react-router-dom": "^5.1.2", "react-scripts": "3.3.0", "semantic-ui-react": "^0.88.2" diff --git a/bk_webapp/src/App.js b/bk_webapp/src/App.js index aa31bbf..2d48dfd 100644 --- a/bk_webapp/src/App.js +++ b/bk_webapp/src/App.js @@ -1,21 +1,14 @@ import React from "react"; -import { - BrowserRouter as Router, - Switch, - Route, - Link, - useRouteMatch, - useParams -} from "react-router-dom"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import { Home, Login, AddReceipt, Statistics, Receipts } from "./screens"; -import SimpleReactFileUpload from "./react-file-upload.js"; +// import SimpleReactFileUpload from "./react-file-upload.js"; function App() { return ( - + @@ -24,9 +17,6 @@ function App() { - - - diff --git a/bk_webapp/src/logo.svg b/bk_webapp/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/bk_webapp/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/bk_webapp/src/screens/AddReceipt/AddReceipt.css b/bk_webapp/src/screens/AddReceipt/AddReceipt.css index 1f04351..9d96051 100644 --- a/bk_webapp/src/screens/AddReceipt/AddReceipt.css +++ b/bk_webapp/src/screens/AddReceipt/AddReceipt.css @@ -1,3 +1,27 @@ -.add_receipt { - background-color: orange; +.site-wrapper { + height: 100%; +} + +.add_receipt-container { + height: 85%; +} + +.nav-menu { + /* height: 10%; */ +} + +.products-list-container { + background-color: rgba(0, 0, 0, 0.4); + /* opacity: 0.2; */ + height: 80%; + width: 100%; + overflow: scroll; +} + +.add-product-btn { + margin-bottom: 2rem !important; + /* margin-right: 1rem !important; */ +} + +.sum-container { } diff --git a/bk_webapp/src/screens/AddReceipt/AddReceipt.js b/bk_webapp/src/screens/AddReceipt/AddReceipt.js deleted file mode 100644 index fa462d2..0000000 --- a/bk_webapp/src/screens/AddReceipt/AddReceipt.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { Button } from "semantic-ui-react"; - -import Summary from "./subscreens/Summary/Summary"; -import TakePhoto from "./subscreens/TakePhoto/TakePhoto"; -import "./AddReceipt.css"; - -function handleTakePhoto(dataUri) { - console.log(dataUri); -} - -function AddReceipt() { - return ( -
-

Dodaj Paragon

- -
- ); -} - -export default AddReceipt; diff --git a/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx b/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx new file mode 100644 index 0000000..54d6c29 --- /dev/null +++ b/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx @@ -0,0 +1,121 @@ +import React, { useState } from "react"; +import { Button, Container, Icon, Menu } from "semantic-ui-react"; +import { useHistory } from "react-router-dom"; + +import { ProductTile, ModalConfirm } from "./components"; +import "./AddReceipt.css"; + +const INIT_STATE = []; + +function AddReceipt() { + const [products, setProducts] = useState(INIT_STATE); + const [confirmModalOpen, setConfirmModalOpen] = useState(false); + const history = useHistory(); + + const addItem = item => { + setProducts([...products, item]); + }; + + const removeItem = index => { + const new_products = [...products]; + new_products.splice(index, 1); + setProducts([...new_products]); + }; + + const openConfirmModal = () => { + setConfirmModalOpen(true); + }; + const closeConfirmModal = () => { + setConfirmModalOpen(false); + }; + + const handleConfirm = () => { + history.push("/home"); + }; + + return ( +
+ + history.push("/home")}> + + + +
+ + {products.map((product, index) => ( + { + console.log(index, "lol"); + removeItem(index); + }} + /> + ))} + + + Razem:{" "} + {products.length > 0 ? sum_products_prices(products).toFixed(2) : "-"} + zł + + + {products.length > 0 && ( + + )} +
+ +
+ ); +} + +function get_random_product() { + const products = [ + "Ser", + "Ogórek", + "Papier toaletowy", + "Awokado", + "Chleb", + "Woda", + "Szampon" + ]; + let tmp = Math.random() * Math.floor(Math.random() * Math.floor(10)); + return { + name: products[Math.floor(Math.random() * products.length)], + price: tmp + }; +} + +function sum_products_prices(products) { + let sum = 0; + products.forEach(prod => (sum += prod.price)); + return sum; +} + +export default AddReceipt; diff --git a/bk_webapp/src/screens/AddReceipt/components/ModalConfirm/ModalConfirm.css b/bk_webapp/src/screens/AddReceipt/components/ModalConfirm/ModalConfirm.css new file mode 100644 index 0000000..c0faec4 --- /dev/null +++ b/bk_webapp/src/screens/AddReceipt/components/ModalConfirm/ModalConfirm.css @@ -0,0 +1,6 @@ +.product_tile-container { + height: 5rem; + width: 100%; + margin-top: 1rem; + background-color: lightgray; +} diff --git a/bk_webapp/src/screens/AddReceipt/components/ModalConfirm/ModalConfirm.jsx b/bk_webapp/src/screens/AddReceipt/components/ModalConfirm/ModalConfirm.jsx new file mode 100644 index 0000000..d57f050 --- /dev/null +++ b/bk_webapp/src/screens/AddReceipt/components/ModalConfirm/ModalConfirm.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import { Button, Modal } from "semantic-ui-react"; + +import "./ModalConfirm.css"; + +const ModalConfirm = props => ( + + +

Zakończyć edycję nowego paragonu i dodać go do bazy?

+ + + + + +); + +export default ModalConfirm; diff --git a/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.css b/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.css new file mode 100644 index 0000000..542e8b4 --- /dev/null +++ b/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.css @@ -0,0 +1,50 @@ +.product_tile-container { + display: flex; + justify-content: space-around; + align-items: center; + height: 5rem; + width: 100%; + margin-top: 1rem; + background-color: rgba(200, 200, 80, 0.5); +} + +.tile-number { + margin-left: 1rem; + text-align: center; + vertical-align: middle; + background-color: white; + height: 1.5rem; + width: 1.5rem; + border-radius: 50%; +} + +.tile-name { + margin-left: 1rem; + flex-grow: 20; +} + +.tile-price { + flex-grow: 1; + text-align: center; + vertical-align: middle; + width: 4rem; + height: 1.5rem; + background-color: #00bb00; + border-radius: 15%; + margin-right: 1rem; +} + +.headerDivider { + border-left: 1px solid #38546d; + border-right: 1px solid #16222c; + height: 80px; + position: absolute; + right: 249px; + top: 10px; +} + +.icon-delete { + position: absolute; + top: 0; + right: 0; +} diff --git a/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx b/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx new file mode 100644 index 0000000..52e11ea --- /dev/null +++ b/bk_webapp/src/screens/AddReceipt/components/ProductTile/ProductTile.jsx @@ -0,0 +1,35 @@ +import React, { useState } from "react"; +import { Icon } from "semantic-ui-react"; + +import "./ProductTile.css"; + +function ProductTile(props) { + const [clicked, setClicked] = useState(false); + + return ( +
{ + setClicked(!clicked); + }} + > +
+ {props.number} +
+ +
{props.name}
+ +
{props.price.toFixed(2)} zł
+ {clicked && ( + + )} +
+ ); +} + +export default ProductTile; diff --git a/bk_webapp/src/screens/AddReceipt/components/index.js b/bk_webapp/src/screens/AddReceipt/components/index.js new file mode 100644 index 0000000..169f9c1 --- /dev/null +++ b/bk_webapp/src/screens/AddReceipt/components/index.js @@ -0,0 +1,4 @@ +import ProductTile from "./ProductTile/ProductTile"; +import ModalConfirm from "./ModalConfirm/ModalConfirm"; + +export { ProductTile, ModalConfirm }; diff --git a/bk_webapp/src/screens/Home/Home.js b/bk_webapp/src/screens/Home/Home.js index bd1068d..1fb2ffb 100644 --- a/bk_webapp/src/screens/Home/Home.js +++ b/bk_webapp/src/screens/Home/Home.js @@ -1,5 +1,5 @@ import React from "react"; -import { Button, Container, Grid, Icon } from "semantic-ui-react"; +import { Button, Container, Icon } from "semantic-ui-react"; import { useHistory } from "react-router-dom"; import "./Home.css"; @@ -33,7 +33,7 @@ function Home() { icon size="massive" className="home-button-wrapper" - onClick={() => history.push("/home/statistics")} + onClick={() => history.push("/home/add_receipt")} > Dodaj paragon diff --git a/bk_webapp/src/screens/Login/Login.js b/bk_webapp/src/screens/Login/Login.js index 9723753..dfcb1d1 100644 --- a/bk_webapp/src/screens/Login/Login.js +++ b/bk_webapp/src/screens/Login/Login.js @@ -3,8 +3,6 @@ import { Button, Form, Grid, - Header, - Message, Segment, Container, Image diff --git a/bk_webapp/src/screens/Receipts/Receipts.js b/bk_webapp/src/screens/Receipts/Receipts.js index c1e3be6..30af745 100644 --- a/bk_webapp/src/screens/Receipts/Receipts.js +++ b/bk_webapp/src/screens/Receipts/Receipts.js @@ -1,17 +1,5 @@ import React, { useState } from "react"; -import { - Container, - Header, - Icon, - Image, - Menu, - Segment, - Sidebar, - Pagination, - Accordion, - Table, - Label -} from "semantic-ui-react"; +import { Container, Icon, Menu, Accordion, Table } from "semantic-ui-react"; import { useHistory } from "react-router-dom"; import "./Receipts.css"; @@ -40,7 +28,7 @@ function Receipts() { > Zakup #1 - + @@ -70,7 +58,7 @@ function Receipts() { > Zakup #2 - +
diff --git a/bk_webapp/src/screens/Statistics/Statistics.js b/bk_webapp/src/screens/Statistics/Statistics.js index 2ac0d9b..5e7ec02 100644 --- a/bk_webapp/src/screens/Statistics/Statistics.js +++ b/bk_webapp/src/screens/Statistics/Statistics.js @@ -1,14 +1,7 @@ -import React, { Component, useState } from "react"; -import { - Container, - Header, - Icon, - Image, - Menu, - Segment, - Sidebar -} from "semantic-ui-react"; +import React, { useState } from "react"; +import { Container, Icon, Menu, Sidebar } from "semantic-ui-react"; import { useHistory } from "react-router-dom"; +import PieChart from "react-minimal-pie-chart"; import "./Statistics.css"; @@ -44,7 +37,49 @@ function Statistics() { - + + + );