Marbes/Luncher
5
2
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

Navbar s možností odhlášení

Browse Source
This commit is contained in:
Martin Berka 2023-06-02 19:51:30 +02:00
parent 00a3e4c79d
commit 00047e7183
3 changed files with 82 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/App.css
View File

@ -55,4 +55,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
}
.navbar {
background-color: #3c3c3c;
padding-left: 20px;
padding-right: 20px;
}
#basic-navbar-nav {
justify-content: flex-end;
} }

102
client/src/App.tsx
View File

@ -5,8 +5,9 @@ import { getData, getFood, updateChoice } from './Api';
import { useAuth } from './context/auth'; import { useAuth } from './context/auth';
import Login from './Login'; import Login from './Login';
import { Locations, ClientData } from './Types'; import { Locations, ClientData } from './Types';
import './App.css';
import { Alert, Col, Form, Row, Table } from 'react-bootstrap'; import { Alert, Col, Form, Row, Table } from 'react-bootstrap';
import Header from './components/Header';
import './App.css';
const EVENT_CONNECT = "connect" const EVENT_CONNECT = "connect"
@ -89,53 +90,55 @@ function App() {
// const pizzaDayExists = data?.state > 0; // const pizzaDayExists = data?.state > 0;
return ( return (
<div className='wrapper'> <>
<Alert variant={'primary'}> <Header />
Tvé zobrazované jméno je {auth.login}. Změnu můžeš provést v local storage prohlížeče.<br /> <div className='wrapper'>
<small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small> <Alert variant={'primary'}>
</Alert> Tvé zobrazované jméno je {auth.login}. Změnu můžeš provést v local storage prohlížeče.<br />
<h1 className='title'>Dnes je {data.date}</h1> <small>Pro gamer move: Změň si své jméno na cizí. Můžeš pak libovolně měnit jejich volbu.</small>
<Row className='food-tables'> </Alert>
{renderFoodTable('Sladovnická', food.sladovnicka)} <h1 className='title'>Dnes je {data.date}</h1>
{renderFoodTable('U Motlíků', food["uMotliku:"])} <Row className='food-tables'>
{renderFoodTable('TechTower', food.techTower)} {renderFoodTable('Sladovnická', food.sladovnicka)}
</Row> {renderFoodTable('U Motlíků', food["uMotliku:"])}
<div className='content-wrapper'> {renderFoodTable('TechTower', food.techTower)}
<div className='content'> </Row>
<p>Jak to dnes vidíš s obědem?</p> <div className='content-wrapper'>
<Form.Select onChange={changeChoice}> <div className='content'>
<option></option> <p>Jak to dnes vidíš s obědem?</p>
<option value={Locations.SLADOVNICKA}>Sladovnická</option> <Form.Select onChange={changeChoice}>
<option value={Locations.UMOTLIKU}>U Motlíků</option> <option></option>
<option value={Locations.TECHTOWER}>TechTower</option> <option value={Locations.SLADOVNICKA}>Sladovnická</option>
<option value={Locations.SPSE}>SPŠE</option> <option value={Locations.UMOTLIKU}>U Motlíků</option>
<option value={Locations.VLASTNI}>Mám vlastní</option> <option value={Locations.TECHTOWER}>TechTower</option>
<option value={Locations.OBJEDNAVAM}>Budu objednávat</option> <option value={Locations.SPSE}>SPŠE</option>
<option value={Locations.NEOBEDVAM}>Nebudu obědvat</option> <option value={Locations.VLASTNI}>Mám vlastní</option>
</Form.Select> <option value={Locations.OBJEDNAVAM}>Budu objednávat</option>
<p style={{ fontSize: "12px", marginTop: "5px" }}> <option value={Locations.NEOBEDVAM}>Nebudu obědvat</option>
Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění. </Form.Select>
</p> <p style={{ fontSize: "12px", marginTop: "5px" }}>
{Object.keys(data.choices).length > 0 ? Aktuálně je možné vybrat pouze jednu variantu. Vyber prázdnou položku pro odstranění.
<Table striped bordered hover className='results-table mt-5'> </p>
<tbody> {Object.keys(data.choices).length > 0 ?
{Object.keys(data.choices).map((key: string, index: number) => <Table striped bordered hover className='results-table mt-5'>
<tr key={index}> <tbody>
<td>{Object.values(Locations)[Number(key)]}</td> {Object.keys(data.choices).map((key: string, index: number) =>
<td> <tr key={index}>
<ul> <td>{Object.values(Locations)[Number(key)]}</td>
{data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)} <td>
</ul> <ul>
</td> {data.choices[Number(key)].map((p: string, index: number) => <li key={index}>{p}</li>)}
</tr> </ul>
)} </td>
</tbody> </tr>
</Table> )}
: <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div> </tbody>
} </Table>
: <div className='mt-5'><i>Zatím nikdo nehlasoval...</i></div>
}
</div>
</div> </div>
</div> {/* {!pizzaDayExists &&
{/* {!pizzaDayExists &&
<div> <div>
<p>Pro dnešní den není aktuálně založen Pizza day.</p> <p>Pro dnešní den není aktuálně založen Pizza day.</p>
<Button onClick={async () => { <Button onClick={async () => {
@ -149,11 +152,12 @@ function App() {
}}>Smazat Pizza day</Button> }}>Smazat Pizza day</Button>
<OrderList orders={data.orders} /> <OrderList orders={data.orders} />
</div>} */} </div>} */}
{/* <Button onClick={async () => { {/* <Button onClick={async () => {
const pizzy = await getPizzy(); const pizzy = await getPizzy();
console.log("Výsledek", pizzy); console.log("Výsledek", pizzy);
}}>Získat pizzy</Button> */} }}>Získat pizzy</Button> */}
</div> </div>
</>
); );
} }

19
client/src/components/Header.tsx Normal file
View File

@ -0,0 +1,19 @@
import React from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import { useAuth } from "../context/auth";
export default function Header() {
const auth = useAuth();
return <Navbar variant='dark' expand="lg">
<Navbar.Brand>Luncher</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="nav">
<NavDropdown title={auth?.login} id="basic-nav-dropdown">
<NavDropdown.Item onClick={auth?.clearLogin}>Odhlásit se</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
}