add Receipts mock screens

This commit is contained in:
Stanislaw-Golebiewski 2019-12-22 21:30:23 +01:00
parent 1ebbf6573b
commit f57f2887d6
6 changed files with 108 additions and 20 deletions

View File

@ -8,7 +8,7 @@ import {
useParams
} from "react-router-dom";
import { Home, Login, AddReceipt, Statistics } from "./screens";
import { Home, Login, AddReceipt, Statistics, Receipts } from "./screens";
import SimpleReactFileUpload from "./react-file-upload.js";
function App() {
@ -21,6 +21,9 @@ function App() {
<Route path="/home/statistics">
<Statistics />
</Route>
<Route path="/home/receipts">
<Receipts />
</Route>
<Route path="/debug">
<SimpleReactFileUpload />
</Route>

View File

@ -23,7 +23,7 @@ function Home() {
icon
size="massive"
className="home-button-wrapper"
onClick={() => history.push("/home/statistics")}
onClick={() => history.push("/home/receipts")}
>
<Icon name="shop" />
Zakupy

View File

@ -1,17 +0,0 @@
import React from "react";
import { Button } from "semantic-ui-react";
import "./styles.css";
function Home() {
return (
<div class="home">
<h2>Home</h2>
<Button>Statystyki</Button>
<Button>Zakupy</Button>
<Button>Dodaj paragon</Button>
</div>
);
}
export default Home;

View File

@ -0,0 +1,101 @@
import React, { useState } from "react";
import {
Container,
Header,
Icon,
Image,
Menu,
Segment,
Sidebar,
Pagination,
Accordion,
Table,
Label
} from "semantic-ui-react";
import { useHistory } from "react-router-dom";
import "./Receipts.css";
function Receipts() {
const history = useHistory();
const [active, setActive] = useState(0);
const handleClick = (current_index, new_index) => {
const newIndex = current_index === new_index ? -1 : new_index;
setActive(newIndex);
};
return (
<div>
<Menu icon>
<Menu.Item onClick={() => history.push("/home")}>
<Icon name="arrow left" />
</Menu.Item>
</Menu>
<Container textAlign="center">
<Accordion fluid styled>
<Accordion.Title
index={0}
active={active === 0}
onClick={() => handleClick(active, 0)}
>
Zakup #1
</Accordion.Title>
<Accordion.Content active={active == 0}>
<Table celled unstackable>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Produkt</Table.HeaderCell>
<Table.HeaderCell>Cena</Table.HeaderCell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
</Table.Header>
</Table>
</Accordion.Content>
<Accordion.Title
index={1}
active={active === 1}
onClick={() => handleClick(active, 1)}
>
Zakup #2
</Accordion.Title>
<Accordion.Content active={active == 1}>
<Table celled unstackable>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Produkt</Table.HeaderCell>
<Table.HeaderCell>Cena</Table.HeaderCell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell</Table.Cell>
<Table.Cell>Cell</Table.Cell>
</Table.Row>
</Table.Header>
</Table>
</Accordion.Content>
</Accordion>
</Container>
</div>
);
}
export default Receipts;

View File

@ -2,5 +2,6 @@ import Home from "./Home/Home";
import Login from "./Login/Login";
import AddReceipt from "./AddReceipt/AddReceipt";
import Statistics from "./Statistics/Statistics";
import Receipts from "./Receipts/Receipts";
export { Home, Login, AddReceipt, Statistics };
export { Home, Login, AddReceipt, Statistics, Receipts };