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