X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=3093d90c04dd34e8b4f050367efa4c5c16f219b6;hb=6702d0ef2ec2a796a9aa6afdf58604800c4915a0;hp=1faa912fa0c95525dcc7bf1983fac4113f0243f1;hpb=51a752c7cce2465043dfb3d63a0152b64765b167;p=alttp.git diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js index 1faa912..3093d90 100644 --- a/resources/js/components/twitch-bot/Controls.js +++ b/resources/js/components/twitch-bot/Controls.js @@ -4,19 +4,28 @@ import { Alert, Button, Col, Form, Row } from 'react-bootstrap'; 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 Icon from '../common/Icon'; 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(); - const chat = React.useCallback(async text => { + 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) { @@ -24,9 +33,9 @@ const Controls = () => { } }, [channel, chatText, t]); - const join = React.useCallback(async () => { + const join = React.useCallback(async (bot_nick) => { try { - const rsp = await axios.post(`/api/channels/${channel.id}/join`); + const rsp = await axios.post(`/api/channels/${channel.id}/join`, { bot_nick }); setChannel(rsp.data); toastr.success(t('twitchBot.joinSuccess')); } catch (e) { @@ -34,9 +43,9 @@ const Controls = () => { } }, [channel, t]); - const part = React.useCallback(async () => { + const part = React.useCallback(async (bot_nick) => { try { - const rsp = await axios.post(`/api/channels/${channel.id}/part`); + const rsp = await axios.post(`/api/channels/${channel.id}/part`, { bot_nick }); setChannel(rsp.data); toastr.success(t('twitchBot.partSuccess')); } catch (e) { @@ -44,59 +53,217 @@ const Controls = () => { } }, [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]); + + 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 <> {t('twitchBot.channel')} { setChannel(channel); }} value={channel ? channel.id : ''} /> - {channel ? - - {t('twitchBot.join')} + {channel ? <> + + {t('twitchBot.joinApp')} { if (value) { - join(); + join('localhorsttv'); } else { - part(); + part('localhorsttv'); } }} value={channel.join} /> - : null} + + {t('twitchBot.joinChat')} + + { + if (value) { + join('horstiebot'); + } else { + part('horstiebot'); + } + }} + value={channel.chat} + /> + + + > : null} {channel ? - - {t('twitchBot.chat')} - { - setChatText(value); - }} - value={chatText} + + {t('twitchBot.chat')} + + {t('twitchBot.chat')} + { + setChatText(value); + }} + value={chatText} + /> + + { + if (chatText) chat(chatText, 'localhorsttv'); + }} + variant="twitch" + > + {t('twitchBot.sendApp')} + + { + if (chatText) chat(chatText, 'horstiebot'); + }} + variant="twitch" + > + {t('twitchBot.sendChat')} + + + + + + {t('twitchBot.chatSettings')} + + + + {t('twitchBot.commands')} + - { - if (chatText) chat(chatText); + { + setShowCommandDialog(false); + setEditCommand(''); + setEditCommandSettings({}); }} - variant="twitch" - > - {t('button.send')} - - + onSubmit={saveCommand} + settings={editCommandSettings} + show={showCommandDialog} + /> + + + {t('twitchBot.addCommand')} + + + + + + {t('twitchBot.guessingGame.settings')} + + {channel.access_key ? + + + + : null} + { + window.open( + `/guessing-game/controls/${channel.id}`, + '', + 'width=640,height=800,titlebar=0,menubar=0,toolbar=0', + ); + }} + title={t('twitchBot.guessingGame.popoutControls')} + variant="outline-secondary" + > + + + + + + :