import PropTypes from 'prop-types';
import React from 'react';
-import { Button, Container } from 'react-bootstrap';
+import { Button, Col, Container, Row } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
-import Participants from '../participants/List';
+import Scoreboard from './Scoreboard';
+import Protocol from '../protocol/Protocol';
import Rounds from '../rounds/List';
-import { mayAddRounds } from '../../helpers/permissions';
+import {
+ mayAddRounds,
+ mayViewProtocol,
+} from '../../helpers/permissions';
import { withUser } from '../../helpers/UserContext';
import i18n from '../../i18n';
addRound,
tournament,
user,
-}) => <Container>
- <div className="d-flex align-items-center justify-content-between">
- <h1>{tournament.title}</h1>
- </div>
- <div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('participants.heading')}</h2>
- </div>
- {tournament.participants ?
- <Participants participants={tournament.participants} tournament={tournament} />
- : null}
- <div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('rounds.heading')}</h2>
- {addRound && mayAddRounds(user, tournament) ?
- <Button onClick={addRound}>
- {i18n.t('rounds.new')}
- </Button>
- : null}
- </div>
- {tournament.rounds ?
- <Rounds rounds={tournament.rounds} tournament={tournament} />
- : null}
+}) => <Container fluid>
+ <Row>
+ <Col lg={8} xl={9}>
+ <div className="d-flex align-items-center justify-content-between">
+ <h1>{tournament.title}</h1>
+ {mayViewProtocol(user, tournament) ?
+ <Protocol id={tournament.id} />
+ : null}
+ </div>
+ </Col>
+ </Row>
+ <Row>
+ <Col lg={8} xl={9}>
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{i18n.t('rounds.heading')}</h2>
+ {addRound && mayAddRounds(user, tournament) ?
+ <Button onClick={addRound}>
+ {i18n.t('rounds.new')}
+ </Button>
+ : null}
+ </div>
+ {tournament.rounds ?
+ <Rounds rounds={tournament.rounds} tournament={tournament} />
+ : null}
+ </Col>
+ <Col lg={4} xl={3}>
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{i18n.t('tournaments.scoreboard')}</h2>
+ </div>
+ {tournament.participants ?
+ <Scoreboard tournament={tournament} />
+ : null}
+ </Col>
+ </Row>
</Container>;
Detail.propTypes = {
addRound: PropTypes.func,
tournament: PropTypes.shape({
+ id: PropTypes.number,
participants: PropTypes.arrayOf(PropTypes.shape({
})),
rounds: PropTypes.arrayOf(PropTypes.shape({