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 Box from '../users/Box';
  10 import {
  11         isRunner,
  12         mayAddRounds,
  13         mayViewProtocol,
  14 } from '../../helpers/permissions';
  15 import {
  16         getTournamentAdmins,
  17         hasRunners,
  18         hasTournamentAdmins,
  19 } from '../../helpers/Tournament';
  20 import { withUser } from '../../helpers/UserContext';
  21 import i18n from '../../i18n';
  22
  23 const getClassName = (tournament, user) => {
  24         const classNames = ['tournament'];
  25         if (tournament.locked) {
  26                 classNames.push('is-locked');
  27         } else {
  28                 classNames.push('is-active');
  29         }
  30         if (isRunner(user, tournament)) {
  31                 classNames.push('is-runner');
  32         }
  33         return classNames.join(' ');
  34 };
  35
  36 const Detail = ({
  37         addRound,
  38         tournament,
  39         user,
  40 }) => <Container className={getClassName(tournament, user)} fluid>
  41         <Row>
  42                 <Col lg={8} xl={9}>
  43                         <div className="d-flex align-items-center justify-content-between">
  44                                 <h1>{tournament.title}</h1>
  45                                 {mayViewProtocol(user, tournament) ?
  46                                         <Protocol id={tournament.id} />
  47                                 : null}
  48                         </div>
  49                 </Col>
  50         </Row>
  51         <Row>
  52                 <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
  53                         <div className="d-flex align-items-center justify-content-between">
  54                                 <h2>{i18n.t('tournaments.scoreboard')}</h2>
  55                         </div>
  56                         {hasRunners(tournament) ?
  57                                 <Scoreboard tournament={tournament} />
  58                         : null}
  59                         {hasTournamentAdmins(tournament) ?
  60                                 <>
  61                                         <div className="d-flex align-items-center justify-content-between">
  62                                                 <h2>{i18n.t('tournaments.admins')}</h2>
  63                                         </div>
  64                                         {getTournamentAdmins(tournament).map(p =>
  65                                                 <p key={p.id}><Box user={p.user} /></p>
  66                                         )}
  67                                 </>
  68                         : null}
  69                 </Col>
  70                 <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
  71                         <div className="d-flex align-items-center justify-content-between">
  72                                 <h2>{i18n.t('rounds.heading')}</h2>
  73                                 {addRound && mayAddRounds(user, tournament) ?
  74                                         <Button onClick={addRound}>
  75                                                 {i18n.t('rounds.new')}
  76                                         </Button>
  77                                 : null}
  78                         </div>
  79                         {tournament.rounds ?
  80                                 <Rounds rounds={tournament.rounds} tournament={tournament} />
  81                         : null}
  82                 </Col>
  83         </Row>
  84 </Container>;
  85
  86 Detail.propTypes = {
  87         addRound: PropTypes.func,
  88         tournament: PropTypes.shape({
  89                 id: PropTypes.number,
  90                 participants: PropTypes.arrayOf(PropTypes.shape({
  91                 })),
  92                 rounds: PropTypes.arrayOf(PropTypes.shape({
  93                 })),
  94                 title: PropTypes.string,
  95         }),
  96         user: PropTypes.shape({
  97         }),
  98 };
  99
 100 export default withTranslation()(withUser(Detail));