]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tournament/Detail.js
3ce0b48998987405626aa82bf5de8244f63ab28f
[alttp.git] / resources / js / components / tournament / Detail.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { Button, Col, Container, Row } from 'react-bootstrap';
4 import { withTranslation } from 'react-i18next';
5
6 import Scoreboard from './Scoreboard';
7 import Protocol from '../protocol/Protocol';
8 import Rounds from '../rounds/List';
9 import {
10         mayAddRounds,
11         mayViewProtocol,
12 } from '../../helpers/permissions';
13 import { withUser } from '../../helpers/UserContext';
14 import i18n from '../../i18n';
15
16 const Detail = ({
17         addRound,
18         tournament,
19         user,
20 }) => <Container fluid>
21         <Row>
22                 <Col lg={8} xl={9}>
23                         <div className="d-flex align-items-center justify-content-between">
24                                 <h1>{tournament.title}</h1>
25                                 {mayViewProtocol(user, tournament) ?
26                                         <Protocol id={tournament.id} />
27                                 : null}
28                         </div>
29                 </Col>
30         </Row>
31         <Row>
32                 <Col lg={8} xl={9}>
33                         <div className="d-flex align-items-center justify-content-between">
34                                 <h2>{i18n.t('rounds.heading')}</h2>
35                                 {addRound && mayAddRounds(user, tournament) ?
36                                         <Button onClick={addRound}>
37                                                 {i18n.t('rounds.new')}
38                                         </Button>
39                                 : null}
40                         </div>
41                         {tournament.rounds ?
42                                 <Rounds rounds={tournament.rounds} tournament={tournament} />
43                         : null}
44                 </Col>
45                 <Col lg={4} xl={3}>
46                         <div className="d-flex align-items-center justify-content-between">
47                                 <h2>{i18n.t('tournaments.scoreboard')}</h2>
48                         </div>
49                         {tournament.participants ?
50                                 <Scoreboard tournament={tournament} />
51                         : null}
52                 </Col>
53         </Row>
54 </Container>;
55
56 Detail.propTypes = {
57         addRound: PropTypes.func,
58         tournament: PropTypes.shape({
59                 id: PropTypes.number,
60                 participants: PropTypes.arrayOf(PropTypes.shape({
61                 })),
62                 rounds: PropTypes.arrayOf(PropTypes.shape({
63                 })),
64                 title: PropTypes.string,
65         }),
66         user: PropTypes.shape({
67         }),
68 };
69
70 export default withTranslation()(withUser(Detail));