blallo/BotZ
1
0
Fork 0
Code Issues 1 Pull Requests Releases 3 Wiki Activity

Improved styling in web app.

Browse Source
This commit is contained in:
sfigato 2019-08-06 14:04:27 +02:00 committed by blallo
parent 163d1ff8b1
commit 21590435e7
Signed by: blallo
GPG Key ID: 0CBE577C9B72DC3F
6 changed files with 74 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
bot.z_web/src/Badge.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import ModalBox from './ModalBox.js';
import { Button, Spinner } from 'react-bootstrap';
import './App.css'; import './App.css';
import './bootstrap.min.css';
function isCheckedIn(movements) { function isCheckedIn(movements) {
@ -68,15 +69,17 @@ class BadgePage extends React.Component {
dynButton() { dynButton() {
const badge = ( const badge = (
<div> <ModalBox
<button type="button" className="btn btn-primary" onClick={this.handleToggle}>{this.buttonValue()}</button> title="Badge"
</div> data={<Button variant="primary" type="button" onClick={this.handleToggle}>{this.buttonValue()}</Button>}
/>
); );
const loading = const loading =
<div className="spinner-border text-primary" role="status"> <ModalBox
<span className="sr-only">Loading...</span> title="Badge"
</div>; data=<Spinner animation="border" variant="primary" />
/>;
if (this.state.loading) { if (this.state.loading) {
return loading; return loading;
@ -89,7 +92,7 @@ class BadgePage extends React.Component {
if (this.state.loggedIn) { if (this.state.loggedIn) {
return this.dynButton(); return this.dynButton();
} else { } else {
return (<div><h2>You have to login first!</h2></div>); return (<ModalBox title="Badge" data=<h2>You have to login first!</h2> />);
} }
} }
} }

6
bot.z_web/src/IndexPage.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import {Nav, Navbar} from "react-bootstrap"; import { Nav, Navbar, Container } from "react-bootstrap";
import LoginForm from './LoginForm.js'; import LoginForm from './LoginForm.js';
import MovementsPage from './Movements.js'; import MovementsPage from './Movements.js';
import BadgePage from './Badge.js'; import BadgePage from './Badge.js';
@ -27,7 +27,7 @@ class IndexPage extends React.Component {
<Navbar.Brand href="/">BotZ</Navbar.Brand> <Navbar.Brand href="/">BotZ</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto"> <Nav variant="tabs" className="mr-auto">
<Nav.Item> <Nav.Item>
<Nav.Link as='div' eventKey="login"> <Nav.Link as='div' eventKey="login">
<Link to='/login'>Login</Link> <Link to='/login'>Login</Link>
@ -52,12 +52,14 @@ class IndexPage extends React.Component {
</Navbar.Collapse> </Navbar.Collapse>
</Navbar> </Navbar>
<div> <div>
<Container>
<Switch> <Switch>
<Route path="/login" component={() => <LoginForm targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} /> <Route path="/login" component={() => <LoginForm targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
<Route path="/movements" component={() => <MovementsPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} /> <Route path="/movements" component={() => <MovementsPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
<Route path="/badge" component={() => <BadgePage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} /> <Route path="/badge" component={() => <BadgePage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
<Route path="/logout" component={() => <LogoffPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} /> <Route path="/logout" component={() => <LogoffPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
</Switch> </Switch>
</Container>
</div> </div>
</Router> </Router>
); );

37
bot.z_web/src/LoginForm.js
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Form, Button } from 'react-bootstrap'; import { Form, Button, Spinner } from 'react-bootstrap';
import ModalBox from './ModalBox.js';
import './App.css'; import './App.css';
class LoginForm extends React.Component { class LoginForm extends React.Component {
@ -62,25 +63,27 @@ class LoginForm extends React.Component {
dynForm() { dynForm() {
const form = const form =
<div className="container"> <ModalBox
<h2>Login Form</h2> title=<h2>Login Form</h2>
<Form onSubmit={this.handleSubmit}> data=
<Form.Group controlId="username"> <Form onSubmit={this.handleSubmit}>
<Form.Control onChange={this.handleUserChange} type="text" name="username" placeholder="Username" /> <Form.Group controlId="username">
</Form.Group> <Form.Control onChange={this.handleUserChange} type="text" name="username" placeholder="Username" />
</Form.Group>
<Form.Group controlId="password"> <Form.Group controlId="password">
<Form.Control onChange={this.handlePasswordChange} type="password" name="password" placeholder="Password" /> <Form.Control onChange={this.handlePasswordChange} type="password" name="password" placeholder="Password" />
</Form.Group> </Form.Group>
<Button variant="primary" type="submit">Send</Button> <Button variant="primary" type="submit">Send</Button>
</Form> </Form>
</div>; />;
const loading = const loading =
<div className="spinner-border text-primary" role="status"> <ModalBox
<span className="sr-only">Loading...</span> title="Login"
</div>; data=<Spinner animation="border" variant="primary" />
/>;
if (this.state.loading) { if (this.state.loading) {
return loading; return loading;
@ -95,7 +98,7 @@ class LoginForm extends React.Component {
render() { render() {
if (this.state.loggedIn) { if (this.state.loggedIn) {
return (<div><h2>Yet logged in!</h2></div>); return (<ModalBox title="Login" data=<h2>Yet logged in!</h2> />);
} }
if (this.state.error) { if (this.state.error) {
return (<div><h2>Error!</h2></div>); return (<div><h2>Error!</h2></div>);

21
bot.z_web/src/Logoff.js
View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Container } from 'react-bootstrap'; import { Spinner, Button } from 'react-bootstrap';
import ModalBox from './ModalBox.js';
import './App.css'; import './App.css';
import './bootstrap.min.css'; import './bootstrap.min.css';
@ -41,17 +42,17 @@ class LogoffPage extends React.Component {
dynButton() { dynButton() {
const logout = ( const logout = (
<Container > <ModalBox
<button type="button" className="btn btn-primary" onClick={this.handleToggle}>{this.buttonValue()}</button> title="Logoff"
</Container> data=<Button variant="primary" type="button" onClick={this.handleToggle}>{this.buttonValue()}</Button>
/>
); );
const loading = const loading =
<Container> <ModalBox
<div className="spinner-border text-primary" role="status"> title="Logout"
<span className="sr-only">Loading...</span> data=<Spinner animation="border" variant="primary" />
</div> />;
</Container>;
if (this.state.loading) { if (this.state.loading) {
return loading; return loading;
@ -64,7 +65,7 @@ class LogoffPage extends React.Component {
if (this.state.loggedIn) { if (this.state.loggedIn) {
return this.dynButton(); return this.dynButton();
} else { } else {
return (<div><h2>You have to login first!</h2></div>); return (<ModalBox title="Logout" data=<h2>You have to login first!</h2> />);
} }
} }
} }

22
bot.z_web/src/ModalBox.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import { Modal } from 'react-bootstrap';
import './App.css';
class ModalBox extends React.Component {
render() {
return (
<Modal.Dialog>
<Modal.Header>
<Modal.Title>{this.props.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
{this.props.data}
</Modal.Body>
</Modal.Dialog>
);
}
}
export default ModalBox;

16
bot.z_web/src/Movements.js
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import ModalBox from './ModalBox.js';
import './App.css'; import './App.css';
import './bootstrap.min.css';
const Empty = <h3>Empty</h3>; const Empty = <ModalBox title="Movements" data=<h3>Empty</h3> />;
const Error = <h2>Error</h2>; const Error = <ModalBox title="Movements" data=<h3>Error</h3> />;
class MovementsPage extends React.Component { class MovementsPage extends React.Component {
@ -25,7 +25,7 @@ class MovementsPage extends React.Component {
} }
handleTable() { handleTable() {
if (this.state.movements.length > 0) { if (this.state.movements !== undefined) {
return <ul>{this.state.movements.map(movs => <li key={movs.time}>{movs.time}&nbsp; - &nbsp;{movs.type}</li>)}</ul>; return <ul>{this.state.movements.map(movs => <li key={movs.time}>{movs.time}&nbsp; - &nbsp;{movs.type}</li>)}</ul>;
} else { } else {
return Empty; return Empty;
@ -33,11 +33,7 @@ class MovementsPage extends React.Component {
} }
render() { render() {
const movements = const movements = <ModalBox title="Movements" data={this.handleTable()} />;
<div>
<h2>Movements</h2>
{this.handleTable()}
</div>;
if (this.state.error) { if (this.state.error) {
return Error; return Error;
@ -45,7 +41,7 @@ class MovementsPage extends React.Component {
if (this.state.loggedIn) { if (this.state.loggedIn) {
return movements; return movements;
} else { } else {
return (<div><h2>You have to login first!</h2></div>); return (<ModalBox title="Movements" data=<h2>You have to login first!</h2> />);
} }
} }
} }