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