133 lines
4.1 KiB
JavaScript
133 lines
4.1 KiB
JavaScript
import React from 'react';
|
|
import axios from 'axios';
|
|
import MessageSetting from './MessageSetting.jsx';
|
|
import ModuleSettings from '../common/ModuleSettings.jsx';
|
|
import SettingCheckbox from '../common/SettingCheckbox.jsx';
|
|
import RichSettingSelect from '../common/RichSettingSelect.jsx';
|
|
import Variables from '../common/Variables.jsx';
|
|
import Loader from './../common/Loader.jsx';
|
|
|
|
export default class Announcements extends ModuleSettings {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
announcements: {},
|
|
channels: [],
|
|
isLoading: true,
|
|
};
|
|
}
|
|
|
|
async componentWillMount() {
|
|
try {
|
|
let response = await axios.get(`/api/modules/${this.props.match.params.id}/announcements`);
|
|
|
|
this.setState({
|
|
announcements: response.data.announcements,
|
|
channels: response.data.channels,
|
|
isLoading: false,
|
|
});
|
|
} catch (e) {
|
|
this.setState({ error: 'Failed to get data, try again later' });
|
|
}
|
|
}
|
|
|
|
handleChannel = (selectedOption) => {
|
|
let announcements = this.state.announcements;
|
|
announcements.channel = selectedOption.value || false;
|
|
this.setState({ announcements });
|
|
}
|
|
|
|
render() {
|
|
if (this.state.isLoading) {
|
|
return <Loader />;
|
|
}
|
|
|
|
const module = this.props.data.module;
|
|
const announcements = this.state.announcements;
|
|
let channels = this.state.channels.filter(c => c.type === 0);
|
|
|
|
const channelOptions = channels.map(c => ({ value: c.id, label: c.name }));
|
|
const defaultChannel = channels.find(c => c.id === announcements.channel);
|
|
|
|
return (<div id='module-announcements' className='module-content module-settings'>
|
|
<h3 className='title is-4'>Announcements {this.ModuleToggle}</h3>
|
|
<div className='settings-panel'>
|
|
<div className='settings-content is-flex'>
|
|
<SettingCheckbox
|
|
module={module}
|
|
setting='joinEnabled'
|
|
friendlyName='Join Messages'
|
|
defaultValue={announcements.joinEnabled || false}
|
|
text='Enable Join Messages' />
|
|
<SettingCheckbox
|
|
module={module}
|
|
setting='leaveEnabled'
|
|
friendlyName='Leave Messages'
|
|
defaultValue={announcements.leaveEnabled || false}
|
|
text='Enable Leave Messages' />
|
|
<SettingCheckbox
|
|
module={module}
|
|
setting='banEnabled'
|
|
friendlyName='Ban Messages'
|
|
defaultValue={announcements.banEnabled || false}
|
|
text='Enable Ban Messages' />
|
|
<SettingCheckbox
|
|
module={module}
|
|
setting='dmJoins'
|
|
friendlyName='DM Join Messages'
|
|
defaultValue={announcements.dmJoins || false}
|
|
text='Send Join Messages as a DM' />
|
|
</div>
|
|
<div className='settings-content'>
|
|
<RichSettingSelect
|
|
module={module}
|
|
setting='channel'
|
|
friendlyName='Announcement Channel'
|
|
text='Announcement Channel'
|
|
defaultValue={defaultChannel}
|
|
defaultOption='Select Channel'
|
|
options={channelOptions}
|
|
onChange={this.handleChannel} />
|
|
</div>
|
|
<div className='settings-group'>
|
|
<div className='settings-content is-half'>
|
|
<h3 className='title is-5'>Join Messages</h3>
|
|
<MessageSetting
|
|
module={module}
|
|
setting='joinMessage'
|
|
friendlyName='Join Message'
|
|
text='Join Message'
|
|
defaultValue={announcements.joinMessage}
|
|
placeholder='{user} has joined.' />
|
|
</div>
|
|
<div className='settings-content is-half'>
|
|
<h3 className='title is-5'>Leave Messages</h3>
|
|
<MessageSetting
|
|
module={module}
|
|
setting='leaveMessage'
|
|
friendlyName='Leave Message'
|
|
text='Leave Message'
|
|
defaultValue={announcements.leaveMessage}
|
|
placeholder='{user} has left.' />
|
|
</div>
|
|
<div className='settings-content is-half'>
|
|
<h3 className='title is-5'>Ban Messages</h3>
|
|
<MessageSetting
|
|
module={module}
|
|
setting='banMessage'
|
|
friendlyName='Ban Message'
|
|
text='Ban Message'
|
|
defaultValue={announcements.banMessage}
|
|
placeholder='{user} was banned.' />
|
|
</div>
|
|
<div className='settings-content is-half'>
|
|
<h3 className='title is-5'>Variables</h3>
|
|
<p>You can use these variables in the message boxes below.</p>
|
|
<Variables />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>);
|
|
}
|
|
}
|