import React from 'react'; import Radio from '../main/settings/Radio'; import Checkbox from '../main/settings/Checkbox'; import FileUpload from '../main/settings/FileUpload'; import UploadIcon from '@material-ui/icons/CloudUpload'; import AutoIcon from '@material-ui/icons/AutoAwesome'; import LightModeIcon from '@material-ui/icons/LightMode'; import DarkModeIcon from '@material-ui/icons/DarkMode'; import SettingsFunctions from '../../../modules/helpers/settings'; import SettingsFunctionsModal from '../../../modules/helpers/settings/modals'; const languages = require('../../../modules/languages.json'); const default_settings = require('../../../modules/default_settings.json'); export default class WelcomeSections extends React.Component { constructor() { super(); this.state = { // themes autoClass: 'toggle auto active', lightClass: 'toggle lightTheme', darkClass: 'toggle darkTheme', // welcome welcomeImage: 0, // final importedSettings: [] }; this.changeWelcomeImg = this.changeWelcomeImg.bind(this); this.welcomeImages = ['./welcome-images/example1.webp', './welcome-images/example2.webp', './welcome-images/example3.webp', './welcome-images/example4.webp']; } changeTheme(type) { this.setState({ autoClass: (type === 'auto') ? 'toggle auto active' : 'toggle auto', lightClass: (type === 'light') ? 'toggle lightTheme active' : 'toggle lightTheme', darkClass: (type === 'dark') ? 'toggle darkTheme active': 'toggle darkTheme' }); localStorage.setItem('theme', type); SettingsFunctions.loadSettings(true); } getSetting(name) { const value = localStorage.getItem(name).replace('false', 'Off').replace('true', 'On'); return value.charAt(0).toUpperCase() + value.slice(1); } importSettings(e) { SettingsFunctionsModal.importSettings(e); let settings = []; const data = JSON.parse(e.target.result); Object.keys(data).forEach((setting) => { if (setting === 'language' || setting === 'theme'|| setting === 'firstRun' || setting === 'showWelcome' || setting === 'showReminder') { return; } const defaultSetting = default_settings.find((i) => i.name === setting); if (defaultSetting !== undefined) { if (data[setting] === String(defaultSetting.value)) { return; } } settings.push({ name: setting, value: data[setting] }); }); this.setState({ importedSettings: settings }); this.props.switchTab(5); } changeWelcomeImg() { let welcomeImage = this.state.welcomeImage; this.setState({ welcomeImage: ++welcomeImage % this.welcomeImages.length }); this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000); } componentDidMount() { this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000); } // cancel welcome image timer if not on welcome tab componentDidUpdate() { if (this.props.currentTab !== 0) { if (this.timeout) { clearTimeout(this.timeout); } } else { if (!this.timeout) { this.timeout = setTimeout(this.changeWelcomeImg, 3 * 1000); } } } render() { const language = window.language.modals.welcome; let tabContent; const intro = ( <>
{language.sections.intro.description}
{language.sections.language.description}
{language.sections.theme.description}
{language.sections.theme.tip}
{language.sections.settings.description}
{language.sections.settings.tip}
> ); const privacy = ( <>{language.sections.privacy.description}
{language.sections.privacy.offline_mode_description}
{language.sections.final.description}
{language.sections.final.changes_description}