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 Scoreboard from './Scoreboard';
7 import Protocol from '../protocol/Protocol';
8 import Rounds from '../rounds/List';
9 import Box from '../users/Box';
14 } from '../../helpers/permissions';
17 getTournamentMonitors,
20 hasTournamentMonitors,
21 } from '../../helpers/Tournament';
22 import { withUser } from '../../helpers/UserContext';
23 import i18n from '../../i18n';
25 const getClassName = (tournament, user) => {
26 const classNames = ['tournament'];
27 if (tournament.locked) {
28 classNames.push('is-locked');
30 classNames.push('is-active');
32 if (isRunner(user, tournament)) {
33 classNames.push('is-runner');
35 return classNames.join(' ');
42 }) => <Container className={getClassName(tournament, user)} fluid>
45 <div className="d-flex align-items-center justify-content-between">
46 <h1>{tournament.title}</h1>
47 {mayViewProtocol(user, tournament) ?
48 <Protocol id={tournament.id} />
54 <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
55 <div className="d-flex align-items-center justify-content-between">
56 <h2>{i18n.t('tournaments.scoreboard')}</h2>
58 {hasRunners(tournament) ?
59 <Scoreboard tournament={tournament} />
61 {hasTournamentAdmins(tournament) ?
63 <div className="d-flex align-items-center justify-content-between">
64 <h2>{i18n.t('tournaments.admins')}</h2>
66 {getTournamentAdmins(tournament).map(p =>
67 <p key={p.id}><Box user={p.user} /></p>
71 {hasTournamentMonitors(tournament) ?
73 <div className="d-flex align-items-center justify-content-between">
74 <h2>{i18n.t('tournaments.monitors')}</h2>
76 {getTournamentMonitors(tournament).map(p =>
77 <p key={p.id}><Box user={p.user} /></p>
82 <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
83 <div className="d-flex align-items-center justify-content-between">
84 <h2>{i18n.t('rounds.heading')}</h2>
85 {addRound && mayAddRounds(user, tournament) ?
86 <Button onClick={addRound}>
87 {i18n.t('rounds.new')}
92 <Rounds rounds={tournament.rounds} tournament={tournament} />
99 addRound: PropTypes.func,
100 tournament: PropTypes.shape({
101 id: PropTypes.number,
102 participants: PropTypes.arrayOf(PropTypes.shape({
104 rounds: PropTypes.arrayOf(PropTypes.shape({
106 title: PropTypes.string,
108 user: PropTypes.shape({
112 export default withTranslation()(withUser(Detail));