Reasonable anonymous component.

This commit is contained in:
Dominik Pantůček 2025-04-14 15:34:15 +02:00
parent 1815547daf
commit 96cadc4f47
2 changed files with 28 additions and 27 deletions

View file

@ -1,6 +1,6 @@
.App { .App {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--primary-text-color) !important; color: var(--primary-text-color) !important;
min-height: 100vh; height: 100vh;
width: 100%; width: 10vh;
} }

View file

@ -7,6 +7,7 @@ import Table from 'react-bootstrap/Table';
import Alert from 'react-bootstrap/Alert'; import Alert from 'react-bootstrap/Alert';
import Form from 'react-bootstrap/Form'; import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button'; import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import './App.css'; import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -26,41 +27,41 @@ function App() {
// If no user, must be scanned/set otherwise // If no user, must be scanned/set otherwise
return ( return (
<Container> <>
{user === "" ? {user === "" ?
<NoUserView setUser={setUser} /> <NoUserView setUser={setUser} />
: :
<UserView user={user} setUser={setUser} />} <UserView user={user} setUser={setUser} />}
</Container> </>
); );
} }
function NoUserView({setUser}) { function NoUserView({setUser}) {
const [preUser, setPreUser] = useState(""); const [preUser, setPreUser] = useState("");
return ( return (
<> <Card bg="info" style={{width: '100vw', height: '100vh'}}>
<Row> <Card.Body>
<Col> <Card.Title>BrmInv Anonymous</Card.Title>
<Form.Group> <Form.Group>
<Form.Label>User:</Form.Label> <Form.Label>User name:</Form.Label>
<Form.Control type="text" placeholder="Username" <Form.Control type="text" placeholder="Username"
value={preUser} onChange={(v) => setPreUser(v.target.value)} /> value={preUser} onChange={(v) => setPreUser(v.target.value)} />
<Form.Text>Which user is using this App?</Form.Text> <Form.Text>Enter a user name or scan your barcode.</Form.Text>
</Form.Group> </Form.Group>
</Col> <Card.Text>
</Row> <BarcodeScannerComponent
<Row> style={{width: 'auto', height: 'auto'}}
<Col> onUpdate={() => console.log("scanned")}
Scanner delay={1500}
</Col> />
</Row> </Card.Text>
<Row> </Card.Body>
<Col> <Card.Footer>
<Button variant="primary" <Button variant="primary"
style={{width: '100%'}}
onClick={() => setUser(preUser)}>Set!</Button> onClick={() => setUser(preUser)}>Set!</Button>
</Col> </Card.Footer>
</Row> </Card>
</>
); );
} }