tournament settings

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

diff --git a/resources/js/components/tournament/SettingsDialog.js b/resources/js/components/tournament/SettingsDialog.js
index 9cecb14a70dcfcfcdcb2c62798457fc052288968..af4d664efe0d2f60c435e169c9a000a395b39bd6 100644 (file)
--- a/resources/js/components/tournament/SettingsDialog.js
+++ b/resources/js/components/tournament/SettingsDialog.js
@@ -1,10 +1,13 @@
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Col, Modal, Row } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
+import DiscordForm from './DiscordForm';
+import DiscordSelect from '../common/DiscordSelect';
+import Icon from '../common/Icon';
 import ToggleSwitch from '../common/ToggleSwitch';
 import i18n from '../../i18n';
 
@@ -44,32 +47,81 @@ const unlock = async tournament => {
        }
 };
 
+const setDiscord = async (tournament, guild_id) => {
+       try {
+               await axios.post(`/api/tournaments/${tournament.id}/discord`, { guild_id });
+               toastr.success(i18n.t('tournaments.discordSuccess'));
+       } catch (e) {
+               toastr.error(i18n.t('tournaments.discordError'));
+       }
+};
+
+const inviteUrl = 'https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot';
+
 const SettingsDialog = ({
        onHide,
        show,
        tournament,
 }) =>
-<Modal className="settings-dialog" onHide={onHide} show={show}>
+<Modal
+       className="settings-dialog"
+       onHide={onHide}
+       show={show}
+       size={tournament.discord ? 'lg' : 'md'}
+>
        <Modal.Header closeButton>
                <Modal.Title>
                        {i18n.t('tournaments.settings')}
                </Modal.Title>
        </Modal.Header>
        <Modal.Body>
-               <div className="d-flex align-items-center justify-content-between mb-3">
-                       <span>{i18n.t('tournaments.open')}</span>
-                       <ToggleSwitch
-                               onChange={({ target: { value } }) => value ? open(tournament) : close(tournament)}
-                               value={tournament.accept_applications}
-                       />
-               </div>
-               <div className="d-flex align-items-center justify-content-between">
-                       <span>{i18n.t('tournaments.locked')}</span>
-                       <ToggleSwitch
-                               onChange={({ target: { value } }) => value ? lock(tournament) : unlock(tournament)}
-                               value={tournament.locked}
-                       />
-               </div>
+               <Row>
+                       <Col sm={tournament.discord ? 6 : 12}>
+                               <div className="d-flex align-items-center justify-content-between mb-3">
+                                       <span>{i18n.t('tournaments.open')}</span>
+                                       <ToggleSwitch
+                                               onChange={({ target: { value } }) => value
+                                                       ? open(tournament) : close(tournament)}
+                                               value={tournament.accept_applications}
+                                       />
+                               </div>
+                               <div className="d-flex align-items-center justify-content-between mb-3">
+                                       <span>{i18n.t('tournaments.locked')}</span>
+                                       <ToggleSwitch
+                                               onChange={({ target: { value } }) => value
+                                                       ? lock(tournament) : unlock(tournament)}
+                                               value={tournament.locked}
+                                       />
+                               </div>
+                               <div className="d-flex align-items-center justify-content-between">
+                                       <div>
+                                               <p>{i18n.t('tournaments.discord')}</p>
+                                               {!tournament.discord ?
+                                                       <div>
+                                                               <Button
+                                                                       href={inviteUrl}
+                                                                       target="_blank"
+                                                                       variant="discord"
+                                                               >
+                                                                       <Icon.DISCORD />
+                                                                       {' '}
+                                                                       {i18n.t('tournaments.inviteBot')}
+                                                               </Button>
+                                                       </div>
+                                               : null}
+                                       </div>
+                                       <DiscordSelect
+                                               onChange={({ target: { value } }) => setDiscord(tournament, value)}
+                                               value={tournament.discord}
+                                       />
+                               </div>
+                       </Col>
+                       {tournament.discord ?
+                               <Col sm={6}>
+                                       <DiscordForm tournament={tournament} />
+                               </Col>
+                       : null}
+               </Row>
        </Modal.Body>
        <Modal.Footer>
                <Button onClick={onHide} variant="secondary">
@@ -83,6 +135,7 @@ SettingsDialog.propTypes = {
        show: PropTypes.bool,
        tournament: PropTypes.shape({
                accept_applications: PropTypes.bool,
+               discord: PropTypes.string,
                locked: PropTypes.bool,
        }),
 };