diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx index 0b1a730a..c4efef74 100644 --- a/src/components/modals/main/settings/sections/Message.jsx +++ b/src/components/modals/main/settings/sections/Message.jsx @@ -1,19 +1,82 @@ import variables from 'modules/variables'; +import { PureComponent, Fragment } from 'react'; +import { Cancel } from '@mui/icons-material'; +import { toast } from 'react-toastify'; import Switch from '../Switch'; -import Text from '../Text'; import Slider from '../Slider'; -export default function MessageSettings() { - const getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text); - const languagecode = variables.languagecode; +import EventBus from 'modules/helpers/eventbus'; - return ( - <> -

{getMessage(languagecode, 'modals.main.settings.sections.message.title')}

- - - - - ); +export default class Message extends PureComponent { + getMessage = (languagecode, text) => variables.language.getMessage(languagecode, text); + languagecode = variables.languagecode; + + constructor() { + super(); + this.state = { + messages: JSON.parse(localStorage.getItem('messages')) || [''], + }; + } + + reset = () => { + localStorage.setItem('messages', '[""]'); + this.setState({ + messages: [''] + }); + toast(this.getMessage(this.languagecode, 'toasts.reset')); + EventBus.dispatch('refresh', 'message'); + } + + modifyMessage(type, index) { + const messages = this.state.messages; + if (type === 'add') { + messages.push(''); + } else { + messages.splice(index, 1); + } + + this.setState({ + messages + }); + this.forceUpdate(); + + localStorage.setItem('messages', JSON.stringify(messages)); + } + + message(e, text, index) { + const result = (text === true) ? e.target.value : e.target.result; + + const messages = this.state.messages; + messages[index] = result; + this.setState({ + messages + }); + this.forceUpdate(); + + localStorage.setItem('messages', JSON.stringify(messages)); + document.querySelector('.reminder-info').style.display = 'block'; + localStorage.setItem('showReminder', true); + } + + render() { + return ( + <> +

{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.title')}

+ +

{this.getMessage(this.languagecode, 'modals.main.settings.sections.message.text')}

+ {this.state.messages.map((_url, index) => ( + + this.message(e, true, index)}> + {this.state.messages.length > 1 ? : null} +

+
+ ))} + + + + ); + } } diff --git a/src/components/widgets/message/Message.jsx b/src/components/widgets/message/Message.jsx index e5677dd6..77531915 100644 --- a/src/components/widgets/message/Message.jsx +++ b/src/components/widgets/message/Message.jsx @@ -8,7 +8,7 @@ export default class Message extends PureComponent { constructor(props) { super(props); this.state = { - messageText: localStorage.getItem('messageText') + messageText: '' }; this.message = createRef(); } @@ -22,20 +22,20 @@ export default class Message extends PureComponent { this.message.current.style.display = 'block'; this.message.current.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomMessage') || 100) / 100)}em`; - - this.setState({ - messageText: localStorage.getItem('messageText') - }); } }); this.message.current.style.fontSize = `${1.6 * Number((localStorage.getItem('zoomMessage') || 100) / 100)}em`; + const messages = JSON.parse(localStorage.getItem('messages')) || []; + this.setState({ + messageText: messages[Math.floor(Math.random() * messages.length)] + }); } render() { return (

- {localStorage.getItem('messageText')} + {this.state.messageText}

); } diff --git a/src/translations/de_DE.json b/src/translations/de_DE.json index 867c9feb..8174ca38 100644 --- a/src/translations/de_DE.json +++ b/src/translations/de_DE.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/en_GB.json b/src/translations/en_GB.json index 020802cd..64f00480 100644 --- a/src/translations/en_GB.json +++ b/src/translations/en_GB.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/en_US.json b/src/translations/en_US.json index 3bccad4f..7d4e896a 100644 --- a/src/translations/en_US.json +++ b/src/translations/en_US.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/es.json b/src/translations/es.json index cc786235..1b25bbef 100644 --- a/src/translations/es.json +++ b/src/translations/es.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/fr.json b/src/translations/fr.json index 4202a1e4..728b4c9b 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/nl.json b/src/translations/nl.json index 797303fa..c36cc443 100644 --- a/src/translations/nl.json +++ b/src/translations/nl.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/no.json b/src/translations/no.json index 6ea5d7a4..47a5f5e2 100644 --- a/src/translations/no.json +++ b/src/translations/no.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/ru.json b/src/translations/ru.json index cf31a652..cc26c187 100644 --- a/src/translations/ru.json +++ b/src/translations/ru.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": { diff --git a/src/translations/zh_CN.json b/src/translations/zh_CN.json index 1411065a..84e5971e 100644 --- a/src/translations/zh_CN.json +++ b/src/translations/zh_CN.json @@ -230,6 +230,7 @@ }, "message": { "title": "Message", + "add": "Add message", "text": "Text" }, "appearance": {