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 ModalBox from './ModalBox.js';
import { Button, Spinner } from 'react-bootstrap';
import './App.css';
import './bootstrap.min.css';
function isCheckedIn(movements) {
@ -68,15 +69,17 @@ class BadgePage extends React.Component {
dynButton() {
const badge = (
<div>
<button type="button" className="btn btn-primary" onClick={this.handleToggle}>{this.buttonValue()}</button>
</div>
<ModalBox
title="Badge"
data={<Button variant="primary" type="button" onClick={this.handleToggle}>{this.buttonValue()}</Button>}
/>
);
const loading =
<div className="spinner-border text-primary" role="status">
<span className="sr-only">Loading...</span>
</div>;
<ModalBox
title="Badge"
data=<Spinner animation="border" variant="primary" />
/>;
if (this.state.loading) {
return loading;
@ -89,7 +92,7 @@ class BadgePage extends React.Component {
if (this.state.loggedIn) {
return this.dynButton();
} 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 { 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 MovementsPage from './Movements.js';
import BadgePage from './Badge.js';
@ -27,7 +27,7 @@ class IndexPage extends React.Component {
<Navbar.Brand href="/">BotZ</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav variant="tabs" className="mr-auto">
<Nav.Item>
<Nav.Link as='div' eventKey="login">
<Link to='/login'>Login</Link>
@ -52,12 +52,14 @@ class IndexPage extends React.Component {
</Navbar.Collapse>
</Navbar>
<div>
<Container>
<Switch>
<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="/badge" component={() => <BadgePage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
<Route path="/logout" component={() => <LogoffPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
</Switch>
</Container>
</div>
</Router>
);

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

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

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

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