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