X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=inline;f=resources%2Fjs%2Fcomponents%2Ftwitch-bot%2FControls.js;h=3093d90c04dd34e8b4f050367efa4c5c16f219b6;hb=24489254a5d05efd6fe7dceb2cffe5fdb49ab7b7;hp=bdc89380fe75c07a4a1ad22e8dd2587661d1ac1b;hpb=e49b130505f5712075dca2ff990e5a63fc90ce3c;p=alttp.git diff --git a/resources/js/components/twitch-bot/Controls.js b/resources/js/components/twitch-bot/Controls.js index bdc8938..3093d90 100644 --- a/resources/js/components/twitch-bot/Controls.js +++ b/resources/js/components/twitch-bot/Controls.js @@ -5,12 +5,19 @@ 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(); @@ -56,12 +63,66 @@ 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 <> {t('twitchBot.channel')} { setChannel(channel); }} @@ -105,41 +166,103 @@ const Controls = () => { {channel ? - - {t('twitchBot.chat')} - { - setChatText(value); + + {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')} + + { + setShowCommandDialog(false); + setEditCommand(''); + setEditCommandSettings({}); }} - value={chatText} + onSubmit={saveCommand} + settings={editCommandSettings} + show={showCommandDialog} /> - - { - if (chatText) chat(chatText, 'localhorsttv'); - }} - variant="twitch" - > - {t('twitchBot.sendApp')} - - { - if (chatText) chat(chatText, 'horstiebot'); - }} - variant="twitch" - > - {t('twitchBot.sendChat')} + + + {t('twitchBot.addCommand')} - - - {t('twitchBot.chatSettings')} - + + + + {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" + > + + + + + :