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 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';
19 } from '../../helpers/permissions';
22 getTournamentMonitors,
26 hasTournamentMonitors,
27 } from '../../helpers/Tournament';
28 import { withUser } from '../../helpers/UserContext';
29 import i18n from '../../i18n';
31 const getClassName = (tournament, user) => {
32 const classNames = ['tournament'];
33 if (tournament.locked) {
34 classNames.push('is-locked');
36 classNames.push('is-active');
38 if (isRunner(user, tournament)) {
39 classNames.push('is-runner');
41 return classNames.join(' ');
48 }) => <Container className={getClassName(tournament, user)} fluid>
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} />
59 {mayViewProtocol(user, tournament) ?
60 <Protocol id={tournament.id} />
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} />
76 {hasRunners(tournament) ?
77 <Scoreboard tournament={tournament} />
80 {hasTournamentAdmins(tournament) ?
82 <div className="d-flex align-items-center justify-content-between">
83 <h2>{i18n.t('tournaments.admins')}</h2>
85 {getTournamentAdmins(tournament).map(p =>
86 <p key={p.id}><Box user={p.user} /></p>
90 {hasTournamentMonitors(tournament) ?
92 <div className="d-flex align-items-center justify-content-between">
93 <h2>{i18n.t('tournaments.monitors')}</h2>
95 {getTournamentMonitors(tournament).map(p =>
96 <p key={p.id}><Box user={p.user} /></p>
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')}
112 <Rounds rounds={tournament.rounds} tournament={tournament} />
119 addRound: PropTypes.func,
120 tournament: PropTypes.shape({
121 id: PropTypes.number,
122 participants: PropTypes.arrayOf(PropTypes.shape({
124 rounds: PropTypes.arrayOf(PropTypes.shape({
126 title: PropTypes.string,
128 user: PropTypes.shape({
132 export default withTranslation()(withUser(Detail));