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="tournament-sidebar">
56 <div className="d-flex align-items-center justify-content-between">
57 <h2>{i18n.t('tournaments.scoreboard')}</h2>
59 {hasRunners(tournament) ?
60 <Scoreboard tournament={tournament} />
62 {hasTournamentAdmins(tournament) ?
64 <div className="d-flex align-items-center justify-content-between">
65 <h2>{i18n.t('tournaments.admins')}</h2>
67 {getTournamentAdmins(tournament).map(p =>
68 <p key={p.id}><Box user={p.user} /></p>
72 {hasTournamentMonitors(tournament) ?
74 <div className="d-flex align-items-center justify-content-between">
75 <h2>{i18n.t('tournaments.monitors')}</h2>
77 {getTournamentMonitors(tournament).map(p =>
78 <p key={p.id}><Box user={p.user} /></p>
84 <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
85 <div className="d-flex align-items-center justify-content-between">
86 <h2>{i18n.t('rounds.heading')}</h2>
87 {addRound && mayAddRounds(user, tournament) ?
88 <Button onClick={addRound}>
89 {i18n.t('rounds.new')}
94 <Rounds rounds={tournament.rounds} tournament={tournament} />
101 addRound: PropTypes.func,
102 tournament: PropTypes.shape({
103 id: PropTypes.number,
104 participants: PropTypes.arrayOf(PropTypes.shape({
106 rounds: PropTypes.arrayOf(PropTypes.shape({
108 title: PropTypes.string,
110 user: PropTypes.shape({
114 export default withTranslation()(withUser(Detail));