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';
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';
15 } from '../../helpers/permissions';
18 getTournamentMonitors,
21 hasTournamentMonitors,
22 } from '../../helpers/Tournament';
23 import { withUser } from '../../helpers/UserContext';
24 import i18n from '../../i18n';
26 const getClassName = (tournament, user) => {
27 const classNames = ['tournament'];
28 if (tournament.locked) {
29 classNames.push('is-locked');
31 classNames.push('is-active');
33 if (isRunner(user, tournament)) {
34 classNames.push('is-runner');
36 return classNames.join(' ');
43 }) => <Container className={getClassName(tournament, user)} fluid>
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} />
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>
63 {hasRunners(tournament) ?
64 <Scoreboard tournament={tournament} />
66 {hasTournamentAdmins(tournament) ?
68 <div className="d-flex align-items-center justify-content-between">
69 <h2>{i18n.t('tournaments.admins')}</h2>
71 {getTournamentAdmins(tournament).map(p =>
72 <p key={p.id}><Box user={p.user} /></p>
76 {hasTournamentMonitors(tournament) ?
78 <div className="d-flex align-items-center justify-content-between">
79 <h2>{i18n.t('tournaments.monitors')}</h2>
81 {getTournamentMonitors(tournament).map(p =>
82 <p key={p.id}><Box user={p.user} /></p>
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')}
98 <Rounds rounds={tournament.rounds} tournament={tournament} />
105 addRound: PropTypes.func,
106 tournament: PropTypes.shape({
107 id: PropTypes.number,
108 participants: PropTypes.arrayOf(PropTypes.shape({
110 rounds: PropTypes.arrayOf(PropTypes.shape({
112 title: PropTypes.string,
114 user: PropTypes.shape({
118 export default withTranslation()(withUser(Detail));