s452097/BuyAndKnow
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add AddReceipt subscreens

Browse Source
This commit is contained in:
Stanislaw-Golebiewski 2019-12-27 00:45:07 +01:00
parent d7b22f96aa
commit a748900ac1
10 changed files with 239 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
bk_webapp/package-lock.json generated
View File

@ -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",

2
bk_webapp/package.json
View File

@ -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": {

109
bk_webapp/src/screens/AddReceipt/AddReceipt.jsx
View File

@ -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 (
<div className="site-wrapper">
<Menu icon className="nav-menu">
<Menu.Item onClick={() => history.push("/home")}>
<Icon name="arrow left" />
</Menu.Item>
</Menu>
<div className="add_receipt-container">
<Container className="products-list-container">
{products.map((product, index) => (
<ProductTile
text="keh"
key={index}
number={index + 1}
name={product.name}
price={product.price}
onRemove={() => {
removeItem(index);
}}
/>
))}
</Container>
<Container textAlign="right">
Razem: {products.length > 0 ? sum_products_prices(products) : "-"}
zł
</Container>
<Button
fluid
icon
color="green"
onClick={() => {
addItem(fake_product());
}}
className="add-product-btn"
>
<Icon name="plus" />
Dodaj produkt
</Button>
{products.length > 0 && (
<Button
fluid
icon
color="olive"
onClick={openConfirmModal}
className="add-product-btn"
>
<Icon name="upload" />
Dodaj paragon
</Button>
)}
</div>
<ModalConfirm
open={confirmModalOpen}
onClose={closeConfirmModal}
onConfirm={handleConfirm}
/>
</div>
<Switch>
<Route path={`${match.url}/list`}>
<ProductsList />
</Route>
<Route path={`${match.url}`}>
<AddMetadata />
</Route>
</Switch>
);
}
function sum_products_prices(products) {
let sum = 0;
products.forEach(prod => (sum += prod.price));
return sum;
}
export default AddReceipt;

4
bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.css
View File

@ -1,2 +1,6 @@
.site-wrapper {
height: 100%;
}
.add_metadata {
}

85
bk_webapp/src/screens/AddReceipt/subscreens/AddMetadata/AddMetadata.jsx
View File

@ -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 (
<div className="add_metadata">
<h2> AddMetadata screen </h2>
<div className="site-wrapper">
<Menu icon className="nav-menu">
<Menu.Item onClick={() => history.push("/home")}>
<Icon name="arrow left" />
</Menu.Item>
</Menu>
<div className="add_metadata">
<Container>
<DateInput
fluid
name="date"
placeholder="Data zakupu"
value={pickedDate}
onChange={handleDateChange}
/>
<Input fluid list="languages" placeholder="Choose language..." />
<datalist id="languages">
<option value="English" />
<option value="Chinese" />
<option value="Dutch" />
</datalist>
</Container>
<input
type="file"
hidden
id="mypic"
accept="image/*"
ref={fileInputRef}
onChange={stuff => {
uploadPhoto(stuff);
}}
/>
<Button
fluid
icon
color="orange"
onClick={() => fileInputRef.current.click()}
className="add-product-btn"
>
<Icon name="camera" />
Dodaj zdjęcie
</Button>
<Button
fluid
icon
color="olive"
onClick={() => {
history.push("/home/add_receipt/list", { shop: "Biedronka" });
}}
className="add-product-btn"
>
<Icon name="arrow right" />
Dalej
</Button>
{selectedFile && <Image centered src={selectedFile} size="small" />}
</div>
</div>
);
}

27
bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.css
View File

@ -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 {
}

97
bk_webapp/src/screens/AddReceipt/subscreens/ProductsList/ProductsList.jsx
View File

@ -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 (
<div className="products_list">
<h1> ProductsList screen </h1>
<div className="site-wrapper">
<Menu icon className="nav-menu">
<Menu.Item onClick={() => history.push("/home")}>
<Icon name="arrow left" />
</Menu.Item>
</Menu>
<div className="add_receipt-container">
<Container className="products-list-container">
{products.map((product, index) => (
<ProductTile
text="keh"
key={index}
number={index + 1}
name={product.name}
price={product.price}
onRemove={() => {
removeItem(index);
}}
/>
))}
</Container>
<Container textAlign="right">
Razem: {products.length > 0 ? sum_products_prices(products) : "-"}
zł
</Container>
<Button
fluid
icon
color="green"
onClick={() => {
addItem(fake_product());
}}
className="add-product-btn"
>
<Icon name="plus" />
Dodaj produkt
</Button>
{products.length > 0 && (
<Button
fluid
icon
color="olive"
onClick={openConfirmModal}
className="add-product-btn"
>
<Icon name="upload" />
Dodaj paragon
</Button>
)}
</div>
<ModalConfirm
open={confirmModalOpen}
onClose={closeConfirmModal}
onConfirm={handleConfirm}
/>
</div>
);
}
function sum_products_prices(products) {
let sum = 0;
products.forEach(prod => (sum += prod.price));
return sum;
}
export default ProductsList;

2
bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.css
View File

@ -1,2 +0,0 @@
.take_photo {
}

41
bk_webapp/src/screens/AddReceipt/subscreens/TakePhoto/TakePhoto.jsx
View File

@ -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 (
<div className="take_photo">
{waitingForResponse ? (
<Dimmer active>
<Loader size="huge">Loading</Loader>
</Dimmer>
) : (
<Camera
onTakePhoto={dataUri => {
handleTakePhoto(dataUri);
}}
imageType={IMAGE_TYPES.JPG}
idealResolution={{ width: 640, height: 480 }}
/>
)}
</div>
);
}
export default TakePhoto;

3
bk_webapp/src/screens/AddReceipt/subscreens/index.js
View File

@ -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 };