]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tournament/SettingsDialog.js
dark mode
[alttp.git] / resources / js / components / tournament / SettingsDialog.js
1 import axios from 'axios';
2 import PropTypes from 'prop-types';
3 import React from 'react';
4 import { Button, Col, Modal, Row } from 'react-bootstrap';
5 import { withTranslation } from 'react-i18next';
6 import toastr from 'toastr';
7
8 import DiscordForm from './DiscordForm';
9 import DiscordSelect from '../common/DiscordSelect';
10 import Icon from '../common/Icon';
11 import ToggleSwitch from '../common/ToggleSwitch';
12 import i18n from '../../i18n';
13
14 const open = async tournament => {
15         try {
16                 await axios.post(`/api/tournaments/${tournament.id}/open`);
17                 toastr.success(i18n.t('tournaments.openSuccess'));
18         } catch (e) {
19                 toastr.error(i18n.t('tournaments.openError'));
20         }
21 };
22
23 const close = async tournament => {
24         try {
25                 await axios.post(`/api/tournaments/${tournament.id}/close`);
26                 toastr.success(i18n.t('tournaments.closeSuccess'));
27         } catch (e) {
28                 toastr.error(i18n.t('tournaments.closeError'));
29         }
30 };
31
32 const lock = async tournament => {
33         try {
34                 await axios.post(`/api/tournaments/${tournament.id}/lock`);
35                 toastr.success(i18n.t('tournaments.lockSuccess'));
36         } catch (e) {
37                 toastr.error(i18n.t('tournaments.lockError'));
38         }
39 };
40
41 const unlock = async tournament => {
42         try {
43                 await axios.post(`/api/tournaments/${tournament.id}/unlock`);
44                 toastr.success(i18n.t('tournaments.unlockSuccess'));
45         } catch (e) {
46                 toastr.error(i18n.t('tournaments.unlockError'));
47         }
48 };
49
50 const setDiscord = async (tournament, guild_id) => {
51         try {
52                 await axios.post(`/api/tournaments/${tournament.id}/discord`, { guild_id });
53                 toastr.success(i18n.t('tournaments.discordSuccess'));
54         } catch (e) {
55                 toastr.error(i18n.t('tournaments.discordError'));
56         }
57 };
58
59 const inviteUrl = 'https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot';
60
61 const SettingsDialog = ({
62         onHide,
63         show,
64         tournament,
65 }) =>
66 <Modal
67         className="settings-dialog"
68         onHide={onHide}
69         show={show}
70         size={tournament.discord ? 'lg' : 'md'}
71 >
72         <Modal.Header closeButton>
73                 <Modal.Title>
74                         {i18n.t('tournaments.settings')}
75                 </Modal.Title>
76         </Modal.Header>
77         <Modal.Body>
78                 <Row>
79                         <Col sm={tournament.discord ? 6 : 12}>
80                                 <div className="d-flex align-items-center justify-content-between mb-3">
81                                         <span>{i18n.t('tournaments.open')}</span>
82                                         <ToggleSwitch
83                                                 onChange={({ target: { value } }) => value
84                                                         ? open(tournament) : close(tournament)}
85                                                 value={tournament.accept_applications}
86                                         />
87                                 </div>
88                                 <div className="d-flex align-items-center justify-content-between mb-3">
89                                         <span>{i18n.t('tournaments.locked')}</span>
90                                         <ToggleSwitch
91                                                 onChange={({ target: { value } }) => value
92                                                         ? lock(tournament) : unlock(tournament)}
93                                                 value={tournament.locked}
94                                         />
95                                 </div>
96                                 <div className="d-flex align-items-center justify-content-between">
97                                         <div>
98                                                 <p>{i18n.t('tournaments.discord')}</p>
99                                                 {!tournament.discord ?
100                                                         <div>
101                                                                 <Button
102                                                                         href={inviteUrl}
103                                                                         target="_blank"
104                                                                         variant="discord"
105                                                                 >
106                                                                         <Icon.DISCORD />
107                                                                         {' '}
108                                                                         {i18n.t('tournaments.inviteBot')}
109                                                                 </Button>
110                                                         </div>
111                                                 : null}
112                                         </div>
113                                         <DiscordSelect
114                                                 onChange={({ target: { value } }) => setDiscord(tournament, value)}
115                                                 value={tournament.discord}
116                                         />
117                                 </div>
118                         </Col>
119                         {tournament.discord ?
120                                 <Col sm={6}>
121                                         <DiscordForm tournament={tournament} />
122                                 </Col>
123                         : null}
124                 </Row>
125         </Modal.Body>
126         <Modal.Footer>
127                 <Button onClick={onHide} variant="secondary">
128                         {i18n.t('button.close')}
129                 </Button>
130         </Modal.Footer>
131 </Modal>;
132
133 SettingsDialog.propTypes = {
134         onHide: PropTypes.func,
135         show: PropTypes.bool,
136         tournament: PropTypes.shape({
137                 accept_applications: PropTypes.bool,
138                 discord: PropTypes.string,
139                 locked: PropTypes.bool,
140         }),
141 };
142
143 export default withTranslation()(SettingsDialog);