Introduce a more uniform look for the tournament statistics

This commit is contained in:
Jonny 2019-05-02 08:12:12 +02:00 committed by JP1998
parent 7976d8b0f3
commit bfe89b6387
1 changed files with 43 additions and 5 deletions

View File

@ -5,6 +5,8 @@ import {
Card, Card,
CardBody, CardBody,
Container, Container,
ListGroup,
ListGroupItem,
Table Table
} from 'reactstrap'; } from 'reactstrap';
@ -90,7 +92,7 @@ class StatisticsTournamentPage extends React.Component {
let tournamentStatistics = { let tournamentStatistics = {
tournament: { tournament: {
code: 'abcd1234', code: 'abcd1234',
description: '', description: 'The Overwatch League Season 2 Stage 2',
id: 0xa1, id: 0xa1,
name: 'Overwatch League Season 2019 Stage 1', name: 'Overwatch League Season 2019 Stage 1',
owner_username: 'Blizzard Entertainment Inc.', owner_username: 'Blizzard Entertainment Inc.',
@ -233,14 +235,20 @@ class StatisticsTournamentPage extends React.Component {
}; };
return ( return (
<div className="main"> <div>
<Head> <Head>
<title>{tournamentStatistics.tournament.name}: turnie.re</title> <title>{tournamentStatistics.tournament.name}: turnie.re</title>
</Head> </Head>
<TurniereNavigation/> <TurniereNavigation/>
<BigImage text={tournamentStatistics.tournament.name}/>
<div className='pb-5'>
<TournamentInformationView tournament={tournamentStatistics.tournament}/>
<div className='stages pt-5'>
<Container className="py-5"> <Container className="py-5">
<StatisticsComponent data={tournamentStatistics}/> <StatisticsComponent data={tournamentStatistics}/>
</Container> </Container>
</div>
</div>
<Footer/> <Footer/>
</div> </div>
); );
@ -248,3 +256,33 @@ class StatisticsTournamentPage extends React.Component {
} }
export default connect()(StatisticsTournamentPage); export default connect()(StatisticsTournamentPage);
class PrivateTournamentInformationView extends React.Component {
render() {
const { tournament, isSignedIn, username } = this.props;
return (
<Container>
<p>{tournament.description}</p>
<ListGroup>
<ListGroupItem>
{tournament.isPublic ? 'Das Turnier ist öffentlich.' : 'Das Turnier ist privat.'}
</ListGroupItem>
<ListGroupItem>Turnier-Code: <b>{tournament.code}</b></ListGroupItem>
<ListGroupItem>von <b>{tournament.owner_username}</b></ListGroupItem>
</ListGroup>
</Container>
);
}
}
function mapStateToPrivateTournamentInformationViewProps(state) {
const { isSignedIn, username } = state.userinfo;
return { isSignedIn, username };
}
const TournamentInformationView = connect(
mapStateToPrivateTournamentInformationViewProps
)(PrivateTournamentInformationView);