X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;fp=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=822c201b8fde5504b97c5553dbd484fe6bc536d6;hb=93f50820771a0333b169f76f74727239cf0cb286;hp=bdc89380fe75c07a4a1ad22e8dd2587661d1ac1b;hpb=7fc357a5943bf280ce2fa9aa97ec516af61efd69;p=alttp.git

diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js
index bdc8938..822c201 100644
--- a/resources/js/components/twitch-bot/Controls.js
+++ b/resources/js/components/twitch-bot/Controls.js
@@ -5,12 +5,18 @@ import { useTranslation } from 'react-i18next';
 import toastr from 'toastr';
 
 import ChatSettingsForm from './ChatSettingsForm';
+import CommandDialog from './CommandDialog';
+import Commands from './Commands';
+import GuessingSettingsForm from './GuessingSettingsForm';
 import ChannelSelect from '../common/ChannelSelect';
 import ToggleSwitch from '../common/ToggleSwitch';
 
 const Controls = () => {
 	const [channel, setChannel] = React.useState(null);
 	const [chatText, setChatText] = React.useState('');
+	const [editCommand, setEditCommand] = React.useState('');
+	const [editCommandSettings, setEditCommandSettings] = React.useState({});
+	const [showCommandDialog, setShowCommandDialog] = React.useState(false);
 
 	const { t } = useTranslation();
 
@@ -56,6 +62,59 @@ const Controls = () => {
 		}
 	}, [channel, t]);
 
+	const onAddCommand = React.useCallback(() => {
+		setEditCommand('');
+		setEditCommandSettings({});
+		setShowCommandDialog(true);
+	}, [channel]);
+
+	const onEditCommand = React.useCallback((name, settings) => {
+		setEditCommand(name);
+		setEditCommandSettings(settings);
+		setShowCommandDialog(true);
+	}, [channel]);
+
+	const onRemoveCommand = React.useCallback(async (name) => {
+		try {
+			const rsp = await axios.delete(`/api/channels/${channel.id}/commands/${name}`);
+			setChannel(rsp.data);
+			toastr.success(t('twitchBot.saveSuccess'));
+		} catch (e) {
+			toastr.error(t('twitchBot.saveError'));
+		}
+	}, [channel]);
+
+	const saveCommand = React.useCallback(async (values) => {
+		try {
+			const rsp = await axios.put(
+				`/api/channels/${channel.id}/commands/${values.name}`,
+				values,
+			);
+			setChannel(rsp.data);
+			setShowCommandDialog(false);
+			setEditCommand('');
+			setEditCommandSettings({});
+			toastr.success(t('twitchBot.saveSuccess'));
+		} catch (e) {
+			toastr.error(t('twitchBot.saveError'));
+			throw e;
+		}
+	}, [channel]);
+
+	const saveGuessingGame = React.useCallback(async (values) => {
+		try {
+			const rsp = await axios.put(
+				`/api/channels/${channel.id}/guessing-game/${values.name}`,
+				values,
+			);
+			setChannel(rsp.data);
+			toastr.success(t('twitchBot.saveSuccess'));
+		} catch (e) {
+			toastr.error(t('twitchBot.saveError'));
+			throw e;
+		}
+	}, [channel]);
+
 	return <>
 		<Row className="mb-4">
 			<Form.Group as={Col} md={6}>
@@ -105,41 +164,76 @@ const Controls = () => {
 		</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);
+				<Col className="mt-5" md={6}>
+					<h3>{t('twitchBot.chat')}</h3>
+					<Form.Group>
+						<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>
+				<Col className="mt-5" md={6}>
+					<h3>{t('twitchBot.chatSettings')}</h3>
+					<ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
+				</Col>
+				<Col className="mt-5" md={12}>
+					<h3>{t('twitchBot.commands')}</h3>
+					<Commands
+						channel={channel}
+						onEditCommand={onEditCommand}
+						onRemoveCommand={onRemoveCommand}
+					/>
+					<CommandDialog
+						name={editCommand}
+						onHide={() => {
+							setShowCommandDialog(false);
+							setEditCommand('');
+							setEditCommandSettings({});
 						}}
-						value={chatText}
+						onSubmit={saveCommand}
+						settings={editCommandSettings}
+						show={showCommandDialog}
 					/>
-					<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')}
+					<div>
+						<Button onClick={onAddCommand} variant="primary">
+							{t('twitchBot.addCommand')}
 						</Button>
 					</div>
-				</Form.Group>
-				<Col md={6}>
-					<h3>{t('twitchBot.chatSettings')}</h3>
-					<ChatSettingsForm channel={channel} onSubmit={saveChatSettings} />
+				</Col>
+				<Col className="mt-5" md={12}>
+					<h3>{t('twitchBot.guessingGame.settings')}</h3>
+					<GuessingSettingsForm
+						name="gtbk"
+						onSubmit={saveGuessingGame}
+						settings={channel.guessing_settings?.gtbk || {}}
+					/>
 				</Col>
 			</Row>
 		: