import { Button, Col, Container, Row } from 'react-bootstrap';
import { withTranslation } from 'react-i18next';
+import ApplyButton from './ApplyButton';
import Scoreboard from './Scoreboard';
+import ScoreChartButton from './ScoreChartButton';
+import SettingsButton from './SettingsButton';
+import ApplicationsButton from '../applications/Button';
import Protocol from '../protocol/Protocol';
import Rounds from '../rounds/List';
import Box from '../users/Box';
import {
+ isRunner,
mayAddRounds,
+ mayUpdateTournament,
mayViewProtocol,
} from '../../helpers/permissions';
import {
- getRunners,
getTournamentAdmins,
+ getTournamentMonitors,
hasRunners,
hasTournamentAdmins,
+ hasTournamentMonitors,
} from '../../helpers/Tournament';
import { withUser } from '../../helpers/UserContext';
import i18n from '../../i18n';
+const getClassName = (tournament, user) => {
+ const classNames = ['tournament'];
+ if (tournament.locked) {
+ classNames.push('is-locked');
+ } else {
+ classNames.push('is-active');
+ }
+ if (isRunner(user, tournament)) {
+ classNames.push('is-runner');
+ }
+ return classNames.join(' ');
+};
+
const Detail = ({
addRound,
tournament,
user,
-}) => <Container fluid>
+}) => <Container className={getClassName(tournament, user)} fluid>
<Row>
<Col lg={8} xl={9}>
<div className="d-flex align-items-center justify-content-between">
<h1>{tournament.title}</h1>
- {mayViewProtocol(user, tournament) ?
- <Protocol id={tournament.id} />
- : null}
+ <div className="button-bar">
+ <ApplicationsButton tournament={tournament} />
+ <ApplyButton tournament={tournament} />
+ {mayUpdateTournament(user, tournament) ?
+ <SettingsButton tournament={tournament} />
+ : null}
+ {mayViewProtocol(user, tournament) ?
+ <Protocol id={tournament.id} />
+ : null}
+ </div>
</div>
</Col>
</Row>
<Row>
- <Col lg={8} xl={9}>
+ <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
+ <div className="tournament-sidebar">
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{i18n.t('tournaments.scoreboard')}</h2>
+ {hasRunners(tournament) && tournament.rounds.length > 2 ?
+ <ScoreChartButton tournament={tournament} />
+ : null}
+ </div>
+ {hasRunners(tournament) ?
+ <Scoreboard tournament={tournament} />
+ : null}
+ {hasTournamentAdmins(tournament) ?
+ <>
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{i18n.t('tournaments.admins')}</h2>
+ </div>
+ {getTournamentAdmins(tournament).map(p =>
+ <p key={p.id}><Box user={p.user} /></p>
+ )}
+ </>
+ : null}
+ {hasTournamentMonitors(tournament) ?
+ <>
+ <div className="d-flex align-items-center justify-content-between">
+ <h2>{i18n.t('tournaments.monitors')}</h2>
+ </div>
+ {getTournamentMonitors(tournament).map(p =>
+ <p key={p.id}><Box user={p.user} /></p>
+ )}
+ </>
+ : null}
+ </div>
+ </Col>
+ <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
<div className="d-flex align-items-center justify-content-between">
<h2>{i18n.t('rounds.heading')}</h2>
{addRound && mayAddRounds(user, tournament) ?
<Rounds rounds={tournament.rounds} tournament={tournament} />
: null}
</Col>
- <Col lg={4} xl={3}>
- <div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('tournaments.scoreboard')}</h2>
- </div>
- {hasRunners(tournament) ?
- <Scoreboard tournament={tournament} />
- : null}
- {hasTournamentAdmins(tournament) ?
- <>
- <div className="d-flex align-items-center justify-content-between">
- <h2>{i18n.t('tournaments.admins')}</h2>
- </div>
- {getTournamentAdmins(tournament).map(p =>
- <p key={p.id}><Box user={p.user} /></p>
- )}
- </>
- : null}
- </Col>
</Row>
</Container>;