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