From a748900ac1e5372d61e33328344a676b9d83d143 Mon Sep 17 00:00:00 2001 From: Stanislaw-Golebiewski Date: Fri, 27 Dec 2019 00:45:07 +0100 Subject: [PATCH] add AddReceipt subscreens --- bk_webapp/package-lock.json | 29 ++--- bk_webapp/package.json | 2 +- .../src/screens/AddReceipt/AddReceipt.jsx | 109 +++--------------- .../subscreens/AddMetadata/AddMetadata.css | 4 + .../subscreens/AddMetadata/AddMetadata.jsx | 85 +++++++++++++- .../subscreens/ProductsList/ProductsList.css | 27 ++++- .../subscreens/ProductsList/ProductsList.jsx | 97 +++++++++++++++- .../subscreens/TakePhoto/TakePhoto.css | 2 - .../subscreens/TakePhoto/TakePhoto.jsx | 41 ------- .../screens/AddReceipt/subscreens/index.js | 3 +- 10 files changed, 239 insertions(+), 160 deletions(-) delete mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css delete mode 100644 bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx diff --git a/bk_webapp/package-lock.json b/bk_webapp/package-lock.json index 02ccc73..879b04a 100644 --- a/bk_webapp/package-lock.json +++ b/bk_webapp/package-lock.json @@ -8107,11 +8107,6 @@ "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==" }, - "jslib-html5-camera-photo": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/jslib-html5-camera-photo/-/jslib-html5-camera-photo-3.1.3.tgz", - "integrity": "sha512-8vJwX0a6o82+AJur7KntGvGLYhfxN5h7HRNd77zuoLOi3/Rd+5L47gL9MwTHdtWu3J3VC3a3MuC4KiW8l8HXzA==" - }, "json-parse-better-errors": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", @@ -8803,6 +8798,11 @@ } } }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -11083,14 +11083,6 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz", "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==" }, - "react-html5-camera-photo": { - "version": "1.5.4", - "resolved": "https://registry.npmjs.org/react-html5-camera-photo/-/react-html5-camera-photo-1.5.4.tgz", - "integrity": "sha512-uourTihaJQjqfqyE/Za/SV5DcUzvxOR7Rc85CyxuB+I7p1QpE84VDKyNkr+GweJ2KkbOvWLJ5gZrenRoXLA78g==", - "requires": { - "jslib-html5-camera-photo": "3.1.3" - } - }, "react-is": { "version": "16.12.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", @@ -11835,6 +11827,17 @@ "node-forge": "0.9.0" } }, + "semantic-ui-calendar-react": { + "version": "0.15.3", + "resolved": "https://registry.npmjs.org/semantic-ui-calendar-react/-/semantic-ui-calendar-react-0.15.3.tgz", + "integrity": "sha512-cXlg/dJf0z/dydnol1GCy9ssccXBAGYhmka9W2KNXqqW+B0mgPhu6ugWOjGD4i99e3dnNl1QVqYvQpQcpkcEIg==", + "requires": { + "keyboard-key": "^1.0.2", + "lodash": "^4.17.15", + "moment": "^2.22.2", + "prop-types": "^15.6.2" + } + }, "semantic-ui-react": { "version": "0.88.2", "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.88.2.tgz", diff --git a/bk_webapp/package.json b/bk_webapp/package.json index e5a82d0..962a3bf 100644 --- a/bk_webapp/package.json +++ b/bk_webapp/package.json @@ -9,10 +9,10 @@ "axios": "^0.19.0", "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-calendar-react": "^0.15.3", "semantic-ui-react": "^0.88.2" }, "scripts": { diff --git a/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx b/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx index 7a22d46..4142725 100644 --- a/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx +++ b/bk_webapp/src/screens/AddReceipt/AddReceipt.jsx @@ -1,102 +1,27 @@ import React, { useState } from "react"; -import { Button, Container, Icon, Menu } from "semantic-ui-react"; -import { useHistory } from "react-router-dom"; +import { + BrowserRouter as Router, + Switch, + Route, + useRouteMatch +} from "react-router-dom"; -import { fake_product } from "../../utils/gen_fake_data"; -import { ProductTile, ModalConfirm } from "./components"; -import { AddMetadata, ProductsList, TakePhoto } from "./subscreens"; +import { AddMetadata, ProductsList } from "./subscreens"; import "./AddReceipt.css"; function AddReceipt() { - const [products, setProducts] = useState([]); - 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"); - }; - + const match = useRouteMatch(); + console.log(match.url); return ( -
- - history.push("/home")}> - - - -
- - {products.map((product, index) => ( - { - removeItem(index); - }} - /> - ))} - - - Razem: {products.length > 0 ? sum_products_prices(products) : "-"} - zł - - - {products.length > 0 && ( - - )} -
- -
+ + + + + + + + ); } -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/subscreens/AddMetadata/AddMetadata.css b/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css index 4c7da7a..e086bbe 100644 --- a/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css +++ b/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css @@ -1,2 +1,6 @@ +.site-wrapper { + height: 100%; +} + .add_metadata { } diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx b/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx index b1f6e22..5e21d18 100644 --- a/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx +++ b/bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx @@ -1,12 +1,89 @@ -import React from "react"; -import { Button } from "semantic-ui-react"; +import React, { useRef, useState } from "react"; +import { + Button, + Container, + Image, + Icon, + Menu, + Search, + Input +} from "semantic-ui-react"; +import { DateInput } from "semantic-ui-calendar-react"; +import { useHistory } from "react-router-dom"; import "./AddMetadata.css"; function AddMetadata() { + const history = useHistory(); + const fileInputRef = useRef(null); + const [selectedFile, setSelectedFile] = useState(null); + const [pickedDate, setPickedDate] = useState(""); + + const uploadPhoto = event => { + console.log(event.target.files[0]); + setSelectedFile(URL.createObjectURL(event.target.files[0])); + }; + + const handleDateChange = (event, { name, value }) => { + setPickedDate(value); + }; return ( -
-

AddMetadata screen

+
+ + history.push("/home")}> + + + +
+ + + + + + + { + uploadPhoto(stuff); + }} + /> + + + {selectedFile && } +
); } diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css b/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css index 26bc458..9d96051 100644 --- a/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css +++ b/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css @@ -1,2 +1,27 @@ -.products_list { +.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/subscreens/ProductsList/ProductsList.jsx b/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx index 463ee75..85f5369 100644 --- a/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx +++ b/bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx @@ -1,14 +1,103 @@ -import React from "react"; -import { Button } from "semantic-ui-react"; +import React, { useState } from "react"; +import { Button, Container, Icon, Menu } from "semantic-ui-react"; +import { useHistory } from "react-router-dom"; +import { fake_product } from "../../../../utils/gen_fake_data"; +import { ProductTile, ModalConfirm } from "../../components"; import "./ProductsList.css"; function ProductsList() { + const [products, setProducts] = useState([]); + const [confirmModalOpen, setConfirmModalOpen] = useState(false); + const history = useHistory(); + + console.log(history.location.state); + + 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 ( -
-

ProductsList screen

+
+ + history.push("/home")}> + + + +
+ + {products.map((product, index) => ( + { + removeItem(index); + }} + /> + ))} + + + Razem: {products.length > 0 ? sum_products_prices(products) : "-"} + zł + + + {products.length > 0 && ( + + )} +
+
); } +function sum_products_prices(products) { + let sum = 0; + products.forEach(prod => (sum += prod.price)); + return sum; +} + export default ProductsList; diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css b/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css deleted file mode 100644 index 2a9fd6c..0000000 --- a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css +++ /dev/null @@ -1,2 +0,0 @@ -.take_photo { -} diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx b/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx deleted file mode 100644 index 7d389be..0000000 --- a/bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React, { useState } from "react"; -import { useHistory } from "react-router-dom"; -import Camera, { IMAGE_TYPES } from "react-html5-camera-photo"; -import { Dimmer, Loader } from "semantic-ui-react"; - -import "react-html5-camera-photo/build/css/index.css"; -import "./TakePhoto.css"; - -function TakePhoto() { - const history = useHistory(); - const [waitingForResponse, setWaitingForResponse] = useState(false); - - const handleTakePhoto = dataUri => { - const afterResponse = () => { - history.push("/add_receipt/list"); - }; - setWaitingForResponse(true); - //simulate API response time - const timeout = setTimeout(afterResponse, 2000); - }; - - return ( -
- {waitingForResponse ? ( - - Loading - - ) : ( - { - handleTakePhoto(dataUri); - }} - imageType={IMAGE_TYPES.JPG} - idealResolution={{ width: 640, height: 480 }} - /> - )} -
- ); -} - -export default TakePhoto; diff --git a/bk_webapp/src/screens/AddReceipt/subscreens/index.js b/bk_webapp/src/screens/AddReceipt/subscreens/index.js index 0c1bf29..1bbfa45 100644 --- a/bk_webapp/src/screens/AddReceipt/subscreens/index.js +++ b/bk_webapp/src/screens/AddReceipt/subscreens/index.js @@ -1,5 +1,4 @@ import AddMetadata from "./AddMetadata/AddMetadata"; import ProductsList from "./ProductsList/ProductsList"; -import TakePhoto from "./TakePhoto/TakePhoto"; -export { AddMetadata, ProductsList, TakePhoto }; +export { AddMetadata, ProductsList };