X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=bdc89380fe75c07a4a1ad22e8dd2587661d1ac1b;hb=e49b130505f5712075dca2ff990e5a63fc90ce3c;hp=158fb7c7ab5d8a58df9972e19f4162e1c8b5762b;hpb=3b545fa995c34c0ab8270ae495fedc24ddc2fe4d;p=alttp.git

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index 158fb7c..bdc8938 100644
--- 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;