import React from 'react';
import { withTranslation } from 'react-i18next';
+import LockButton from './LockButton';
import SeedButton from './SeedButton';
import SeedCode from './SeedCode';
import List from '../results/List';
import ReportButton from '../results/ReportButton';
-import { isParticipant } from '../../helpers/permissions';
+import { isParticipant, isRunner } from '../../helpers/permissions';
+import { isComplete } from '../../helpers/Round';
import { findParticipant } from '../../helpers/Tournament';
+import { hasFinishedRound } from '../../helpers/User';
import { withUser } from '../../helpers/UserContext';
import i18n from '../../i18n';
+const getClassName = (round, tournament, user) => {
+ const classNames = ['round', 'd-flex'];
+ if (round.locked) {
+ classNames.push('is-locked');
+ } else {
+ classNames.push('is-unlocked');
+ }
+ if (isComplete(tournament, round)) {
+ classNames.push('is-complete');
+ } else {
+ classNames.push('is-incomplete');
+ }
+ if (hasFinishedRound(user, round)) {
+ classNames.push('has-finished');
+ } else if (isRunner(user, tournament)) {
+ classNames.push('has-not-finished');
+ }
+ return classNames.join(' ');
+};
+
const Item = ({
round,
tournament,
user,
}) =>
-<li className="round d-flex">
+<li className={getClassName(round, tournament, user)}>
<div className="info">
<p className="date">
{round.number ? `#${round.number} ` : '#?'}
/>
</p>
: null}
+ <LockButton round={round} tournament={tournament} />
</div>
<List round={round} tournament={tournament} />
</li>;