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