allow admins to lock/unlock rounds

[alttp.git] / resources / js / components / tournament / Detail.js

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index 60c9d245716439653296fea58decc6659f4b8ae8..5b8e7804a5e45e0006c27a4f9bdae44d985bff33 100644 (file)
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -1,11 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, Container } from 'react-bootstrap';
+import { Button, Col, Container, Row } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
-import Participants from '../participants/List';
+import Scoreboard from './Scoreboard';
+import Protocol from '../protocol/Protocol';
 import Rounds from '../rounds/List';
-import { mayAddRounds } from '../../helpers/permissions';
+import Box from '../users/Box';
+import {
+       mayAddRounds,
+       mayViewProtocol,
+} from '../../helpers/permissions';
+import {
+       getTournamentAdmins,
+       hasRunners,
+       hasTournamentAdmins,
+} from '../../helpers/Tournament';
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
@@ -13,32 +23,56 @@ const Detail = ({
        addRound,
        tournament,
        user,
-}) => <Container>
-       <div className="d-flex align-items-center justify-content-between">
-               <h1>{tournament.title}</h1>
-       </div>
-       <div className="d-flex align-items-center justify-content-between">
-               <h2>{i18n.t('participants.heading')}</h2>
-       </div>
-       {tournament.participants ?
-               <Participants participants={tournament.participants} tournament={tournament} />
-       : null}
-       <div className="d-flex align-items-center justify-content-between">
-               <h2>{i18n.t('rounds.heading')}</h2>
-               {addRound && mayAddRounds(user, tournament) ?
-                       <Button onClick={addRound}>
-                               {i18n.t('rounds.new')}
-                       </Button>
-               : null}
-       </div>
-       {tournament.rounds ?
-               <Rounds rounds={tournament.rounds} tournament={tournament} />
-       : null}
+}) => <Container 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>
+               </Col>
+       </Row>
+       <Row>
+               <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 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>
+               <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) ?
+                                       <Button onClick={addRound}>
+                                               {i18n.t('rounds.new')}
+                                       </Button>
+                               : null}
+                       </div>
+                       {tournament.rounds ?
+                               <Rounds rounds={tournament.rounds} tournament={tournament} />
+                       : null}
+               </Col>
+       </Row>
 </Container>;
 
 Detail.propTypes = {
        addRound: PropTypes.func,
        tournament: PropTypes.shape({
+               id: PropTypes.number,
                participants: PropTypes.arrayOf(PropTypes.shape({
                })),
                rounds: PropTypes.arrayOf(PropTypes.shape({