add Receipts mock screens
This commit is contained in:
parent
1ebbf6573b
commit
f57f2887d6
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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;
|
101
bk_webapp/src/screens/Receipts/Receipts.js
Normal file
101
bk_webapp/src/screens/Receipts/Receipts.js
Normal 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;
|
@ -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 };
|
||||
|
Loading…
Reference in New Issue
Block a user