turniere-frontend/js/components/TournamentInformationView.js

106 lines
3.2 KiB
JavaScript

import React from 'react';
import {connect} from 'react-redux';
import {
Button,
ButtonGroup,
Col,
Container,
ListGroup,
ListGroupItem,
Row
} from 'reactstrap';
class PrivateTournamentInformationView extends React.Component {
render() {
const {tournament, isSignedIn, username, currentpage} = this.props;
return (
<Container>
<Row>
<Col xs="6">
<ButtonsBadge
id={tournament.id}
ownerName={tournament.owner_username}
isSignedIn={isSignedIn}
username={username}
currentpage={currentpage}
className="pb-3"/>
<p>{tournament.description}</p>
</Col>
<Col xs="6">
<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>
</Col>
</Row>
</Container>
);
}
}
function mapStateToPrivateTournamentInformationViewProps(state) {
const {isSignedIn, username} = state.userinfo;
return {isSignedIn, username};
}
export const TournamentInformationView = connect(
mapStateToPrivateTournamentInformationViewProps
)(PrivateTournamentInformationView);
function ButtonsBadge(props) {
const {id, ownerName, isSignedIn, username, currentpage} = props;
switch (currentpage) {
case 'statistics':
return (
<ButtonGroup className={props.className}>
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
<TournamentButton id={id}/>
</ButtonGroup>
);
case 'tournament':
return (
<ButtonGroup className={props.className}>
<EditButton id={id} ownerName={ownerName} isSignedIn={isSignedIn} username={username}/>
<StatisticsButton id={id}/>
</ButtonGroup>
);
case 'edit':
return (
<ButtonGroup className={props.className}>
<StatisticsButton id={id}/>
<TournamentButton id={id}/>
</ButtonGroup>
);
default: return null;
}
}
function TournamentButton(props) {
const {id} = props;
return <Button href={'/t/' + id} color='success'>Zum Turnier</Button>;
}
function EditButton(props) {
const {id, ownerName, isSignedIn, username} = props;
if (isSignedIn && ownerName === username) {
return (
<Button href={'/t/' + id + '/edit'} color='success'>Turnier bearbeiten</Button>
);
} else {
return null;
}
}
function StatisticsButton(props) {
const {id} = props;
return <Button href={'/t/' + id + '/statistics'} color='success'>Statistiken zum Turnier</Button>;
}