chat bot settings

[alttp.git] / resources / js / components / twitch-bot / Controls.js

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 158fb7c7ab5d8a58df9972e19f4162e1c8b5762b..bdc89380fe75c07a4a1ad22e8dd2587661d1ac1b 100644 (file)
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -1,7 +1,153 @@
+import axios from 'axios';
 import React from 'react';
+import { Alert, Button, Col, Form, Row } from 'react-bootstrap';
+import { useTranslation } from 'react-i18next';
+import toastr from 'toastr';
+
+import ChatSettingsForm from './ChatSettingsForm';
+import ChannelSelect from '../common/ChannelSelect';
+import ToggleSwitch from '../common/ToggleSwitch';
 
 const Controls = () => {
-       return <div />;
+       const [channel, setChannel] = React.useState(null);
+       const [chatText, setChatText] = React.useState('');
+
+       const { t } = useTranslation();
+
+       const chat = React.useCallback(async (text, bot_nick) => {
+               try {
+                       await axios.post(`/api/channels/${channel.id}/chat`, {
+                               text,
+                               bot_nick,
+                       });
+                       toastr.success(t('twitchBot.chatSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.chatError'));
+               }
+       }, [channel, chatText, t]);
+
+       const join = React.useCallback(async (bot_nick) => {
+               try {
+                       const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick });
+                       setChannel(rsp.data);
+                       toastr.success(t('twitchBot.joinSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.joinError'));
+               }
+       }, [channel, t]);
+
+       const part = React.useCallback(async (bot_nick) => {
+               try {
+                       const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick });
+                       setChannel(rsp.data);
+                       toastr.success(t('twitchBot.partSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.partError'));
+               }
+       }, [channel, t]);
+
+       const saveChatSettings = React.useCallback(async (values) => {
+               try {
+                       const rsp = await axios.post(`/api/channels/${channel.id}/chat-settings`, values);
+                       setChannel(rsp.data);
+                       toastr.success(t('twitchBot.saveSuccess'));
+               } catch (e) {
+                       toastr.error(t('twitchBot.saveError'));
+               }
+       }, [channel, t]);
+
+       return <>
+               <Row className="mb-4">
+                       <Form.Group as={Col} md={6}>
+                               <Form.Label>{t('twitchBot.channel')}</Form.Label>
+                               <Form.Control
+                                       as={ChannelSelect}
+                                       joinable
+                                       manageable
+                                       onChange={({ channel }) => { setChannel(channel); }}
+                                       value={channel ? channel.id : ''}
+                               />
+                       </Form.Group>
+                       {channel ? <>
+                               <Form.Group as={Col} md={3}>
+                                       <Form.Label>{t('twitchBot.joinApp')}</Form.Label>
+                                       <div>
+                                               <Form.Control
+                                                       as={ToggleSwitch}
+                                                       onChange={({ target: { value } }) => {
+                                                               if (value) {
+                                                                       join('localhorsttv');
+                                                               } else {
+                                                                       part('localhorsttv');
+                                                               }
+                                                       }}
+                                                       value={channel.join}
+                                               />
+                                       </div>
+                               </Form.Group>
+                               <Form.Group as={Col} md={3}>
+                                       <Form.Label>{t('twitchBot.joinChat')}</Form.Label>
+                                       <div>
+                                               <Form.Control
+                                                       as={ToggleSwitch}
+                                                       onChange={({ target: { value } }) => {
+                                                               if (value) {
+                                                                       join('horstiebot');
+                                                               } else {
+                                                                       part('horstiebot');
+                                                               }
+                                                       }}
+                                                       value={channel.chat}
+                                               />
+                                       </div>
+                               </Form.Group>
+                       </> : null}
+               </Row>
+               {channel ?
+                       <Row>
+                               <Form.Group as={Col} md={6}>
+                                       <Form.Label>{t('twitchBot.chat')}</Form.Label>
+                                       <Form.Control
+                                               as="textarea"
+                                               onChange={({ target: { value } }) => {
+                                                       setChatText(value);
+                                               }}
+                                               value={chatText}
+                                       />
+                                       <div className="button-bar">
+                                               <Button
+                                                       className="mt-2"
+                                                       disabled={!chatText || !channel.join}
+                                                       onClick={() => {
+                                                               if (chatText) chat(chatText, 'localhorsttv');
+                                                       }}
+                                                       variant="twitch"
+                                               >
+                                                       {t('twitchBot.sendApp')}
+                                               </Button>
+                                               <Button
+                                                       className="mt-2"
+                                                       disabled={!chatText || !channel.chat}
+                                                       onClick={() => {
+                                                               if (chatText) chat(chatText, 'horstiebot');
+                                                       }}
+                                                       variant="twitch"
+                                               >
+                                                       {t('twitchBot.sendChat')}
+                                               </Button>
+                                       </div>
+                               </Form.Group>
+                               <Col md={6}>
+                                       <h3>{t('twitchBot.chatSettings')}</h3>
+                                       <ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
+                               </Col>
+                       </Row>
+               :
+                       <Alert variant="info">
+                               {t('twitchBot.selectChannel')}
+                       </Alert>
+               }
+       </>;
 };
 
 export default Controls;