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';
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 { useUser } from '../../hooks/user';
30 const getClassName = (tournament, user) => {
31 const classNames = ['tournament'];
32 if (tournament.locked) {
33 classNames.push('is-locked');
35 classNames.push('is-active');
37 if (isRunner(user, tournament)) {
38 classNames.push('is-runner');
40 return classNames.join(' ');
47 const { t } = useTranslation();
48 const { user } = useUser();
50 return <Container className={getClassName(tournament, user)} fluid>
53 <div className="d-flex align-items-center justify-content-between">
54 <h1>{tournament.title}</h1>
55 <div className="button-bar">
56 <ApplicationsButton tournament={tournament} />
57 <ApplyButton tournament={tournament} />
58 {mayUpdateTournament(user, tournament) ?
59 <SettingsButton tournament={tournament} />
61 {mayViewProtocol(user, tournament) ?
62 <Protocol id={tournament.id} />
69 <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
70 <div className="tournament-sidebar">
71 {hasScoreboard(tournament) ? <>
72 <div className="d-flex align-items-center justify-content-between">
73 <h2>{t('tournaments.scoreboard')}</h2>
74 {hasRunners(tournament) && tournament.rounds.length > 2 ?
75 <ScoreChartButton tournament={tournament} />
78 {hasRunners(tournament) ?
79 <Scoreboard tournament={tournament} />
82 {hasTournamentAdmins(tournament) ?
84 <div className="d-flex align-items-center justify-content-between">
85 <h2>{t('tournaments.admins')}</h2>
87 {getTournamentAdmins(tournament).map(p =>
88 <p key={p.id}><Box user={p.user} /></p>
92 {hasTournamentMonitors(tournament) ?
94 <div className="d-flex align-items-center justify-content-between">
95 <h2>{t('tournaments.monitors')}</h2>
97 {getTournamentMonitors(tournament).map(p =>
98 <p key={p.id}><Box user={p.user} /></p>
104 <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
105 <div className="d-flex align-items-center justify-content-between">
106 <h2>{t('rounds.heading')}</h2>
107 {addRound && mayAddRounds(user, tournament) ?
108 <Button onClick={addRound}>
114 <Rounds rounds={tournament.rounds} tournament={tournament} />
122 addRound: PropTypes.func,
123 tournament: PropTypes.shape({
124 id: PropTypes.number,
125 participants: PropTypes.arrayOf(PropTypes.shape({
127 rounds: PropTypes.arrayOf(PropTypes.shape({
129 title: PropTypes.string,
133 export default Detail;