option to hide round numbers

[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 995c07b8250ee4388a267b26bac67c0b0880ad62..46fbfd87ecae299ec5aef94bddebbf71c691af9b 100644 (file)
--- a/resources/js/components/tournament/SettingsDialog.js
+++ b/resources/js/components/tournament/SettingsDialog.js
@@ -1,13 +1,15 @@
 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 Tournament from '../../helpers/Tournament';
 import i18n from '../../i18n';
 
 const open = async tournament => {
@@ -55,52 +57,91 @@ const setDiscord = async (tournament, guild_id) => {
        }
 };
 
+const settings = async (tournament, params) => {
+       try {
+               await axios.post(`/api/tournaments/${tournament.id}/settings`, params);
+               toastr.success(i18n.t('tournaments.settingsSuccess'));
+       } catch (e) {
+               toastr.error(i18n.t('tournaments.settingsError'));
+       }
+};
+
+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 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>
-                               <div>
-                                       <Button
-                                               href="https://discordapp.com/oauth2/authorize?client_id=951113702839549982&scope=bot"
-                                               target="_blank"
-                                               variant="discord"
-                                       >
-                                               <Icon.DISCORD />
-                                               {' '}
-                                               {i18n.t('tournaments.inviteBot')}
-                                       </Button>
+               <Row>
+                       <Col sm={tournament.discord ? 6 : 12}>
+                               {Tournament.hasSignup(tournament) ?
+                                       <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>
+                               : null}
+                               <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 mb-3">
+                                       <span>{i18n.t('tournaments.showNumbers')}</span>
+                                       <ToggleSwitch
+                                               onChange={({ target: { value } }) =>
+                                                       settings(tournament, { show_numbers: value })}
+                                               value={tournament.show_numbers}
+                                       />
+                               </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>
-                       </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">
@@ -116,6 +157,7 @@ SettingsDialog.propTypes = {
                accept_applications: PropTypes.bool,
                discord: PropTypes.string,
                locked: PropTypes.bool,
+               show_numbers: PropTypes.bool,
        }),
 };