tournament monitors

[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 c966ca5250685da8c6a582302dfe6d8bd84ccdb7..cfea60d2bcd8100bb164282bd89017880e15f0da 100644 (file)
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -8,23 +8,38 @@ import Protocol from '../protocol/Protocol';
 import Rounds from '../rounds/List';
 import Box from '../users/Box';
 import {
+       isRunner,
        mayAddRounds,
        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">
@@ -36,20 +51,7 @@ const Detail = ({
                </Col>
        </Row>
        <Row>
-               <Col lg={8} xl={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>
-               <Col lg={4} xl={3}>
+               <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>
@@ -66,6 +68,29 @@ const Detail = ({
                                        )}
                                </>
                        : 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}
+               </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>;