]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tournament/Detail.js
remove some useless svg groups
[alttp.git] / resources / js / components / tournament / Detail.js
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';
5
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';
14 import {
15         isRunner,
16         mayAddRounds,
17         mayUpdateTournament,
18         mayViewProtocol,
19 } from '../../helpers/permissions';
20 import {
21         getTournamentAdmins,
22         getTournamentMonitors,
23         hasRunners,
24         hasScoreboard,
25         hasTournamentAdmins,
26         hasTournamentMonitors,
27 } from '../../helpers/Tournament';
28 import { useUser } from '../../hooks/user';
29
30 const getClassName = (tournament, user) => {
31         const classNames = ['tournament'];
32         if (tournament.locked) {
33                 classNames.push('is-locked');
34         } else {
35                 classNames.push('is-active');
36         }
37         if (isRunner(user, tournament)) {
38                 classNames.push('is-runner');
39         }
40         return classNames.join(' ');
41 };
42
43 const Detail = ({
44         addRound,
45         moreRounds,
46         tournament,
47 }) => {
48         const { t } = useTranslation();
49         const { user } = useUser();
50
51         return <Container className={getClassName(tournament, user)} fluid>
52                 <Row>
53                         <Col lg={8} xl={9}>
54                                 <div className="d-flex align-items-center justify-content-between">
55                                         <h1>{tournament.title}</h1>
56                                         <div className="button-bar">
57                                                 <ApplicationsButton tournament={tournament} />
58                                                 <ApplyButton tournament={tournament} />
59                                                 {mayUpdateTournament(user, tournament) ?
60                                                         <SettingsButton tournament={tournament} />
61                                                 : null}
62                                                 {mayViewProtocol(user, tournament) ?
63                                                         <Protocol id={tournament.id} />
64                                                 : null}
65                                         </div>
66                                 </div>
67                         </Col>
68                 </Row>
69                 <Row>
70                         <Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
71                                 <div className="tournament-sidebar">
72                                         {hasScoreboard(tournament) ? <>
73                                                 <div className="d-flex align-items-center justify-content-between">
74                                                         <h2>{t('tournaments.scoreboard')}</h2>
75                                                         {hasRunners(tournament) && tournament.rounds.length > 2 ?
76                                                                 <ScoreChartButton tournament={tournament} />
77                                                         : null}
78                                                 </div>
79                                                 {hasRunners(tournament) ?
80                                                         <Scoreboard tournament={tournament} />
81                                                 : null}
82                                         </> : null}
83                                         {hasTournamentAdmins(tournament) ?
84                                                 <>
85                                                         <div className="d-flex align-items-center justify-content-between">
86                                                                 <h2>{t('tournaments.admins')}</h2>
87                                                         </div>
88                                                         {getTournamentAdmins(tournament).map(p =>
89                                                                 <p key={p.id}><Box user={p.user} /></p>
90                                                         )}
91                                                 </>
92                                         : null}
93                                         {hasTournamentMonitors(tournament) ?
94                                                 <>
95                                                         <div className="d-flex align-items-center justify-content-between">
96                                                                 <h2>{t('tournaments.monitors')}</h2>
97                                                         </div>
98                                                         {getTournamentMonitors(tournament).map(p =>
99                                                                 <p key={p.id}><Box user={p.user} /></p>
100                                                         )}
101                                                 </>
102                                         : null}
103                                 </div>
104                         </Col>
105                         <Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
106                                 <div className="d-flex align-items-center justify-content-between">
107                                         <h2>{t('rounds.heading')}</h2>
108                                         {addRound && mayAddRounds(user, tournament) ?
109                                                 <Button onClick={addRound}>
110                                                         {t('rounds.new')}
111                                                 </Button>
112                                         : null}
113                                 </div>
114                                 {tournament.rounds ?
115                                         <Rounds
116                                                 loadMore={moreRounds}
117                                                 rounds={tournament.rounds}
118                                                 tournament={tournament}
119                                         />
120                                 : null}
121                         </Col>
122                 </Row>
123         </Container>;
124 };
125
126 Detail.propTypes = {
127         addRound: PropTypes.func,
128         moreRounds: PropTypes.func,
129         tournament: PropTypes.shape({
130                 id: PropTypes.number,
131                 participants: PropTypes.arrayOf(PropTypes.shape({
132                 })),
133                 rounds: PropTypes.arrayOf(PropTypes.shape({
134                 })),
135                 title: PropTypes.string,
136         }),
137 };
138
139 export default Detail;