2021-09-10 15:38:53 +00:00
|
|
|
import variables from 'modules/variables';
|
2021-08-14 19:10:48 +00:00
|
|
|
import { PureComponent } from 'react';
|
2021-08-15 21:28:37 +00:00
|
|
|
import {
|
|
|
|
SettingsRounded as Settings,
|
|
|
|
PhotoOutlined as Photos,
|
2021-11-23 18:11:36 +00:00
|
|
|
FormatQuoteOutlined as Quotes,
|
|
|
|
Upload as ImportIcon,
|
|
|
|
Download as ExportIcon,
|
2021-09-10 18:00:45 +00:00
|
|
|
} from '@mui/icons-material';
|
2021-11-04 13:58:53 +00:00
|
|
|
import { TextField } from '@mui/material';
|
2021-08-15 21:28:37 +00:00
|
|
|
import { toast } from 'react-toastify';
|
2021-08-14 16:23:54 +00:00
|
|
|
|
2021-08-28 14:34:12 +00:00
|
|
|
import { saveFile } from 'modules/helpers/settings/modals';
|
2021-08-15 21:28:37 +00:00
|
|
|
|
|
|
|
import FileUpload from '../../settings/FileUpload';
|
2021-09-18 19:51:00 +00:00
|
|
|
import Dropdown from '../../settings/Dropdown';
|
2021-08-14 16:23:54 +00:00
|
|
|
|
2021-08-15 10:28:21 +00:00
|
|
|
import '../../../welcome/welcome.scss';
|
|
|
|
|
2021-08-14 19:10:48 +00:00
|
|
|
export default class Create extends PureComponent {
|
2021-08-14 16:23:54 +00:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
|
|
|
currentTab: 1,
|
|
|
|
addonMetadata: {
|
|
|
|
name: '',
|
|
|
|
description: '',
|
|
|
|
type: '',
|
|
|
|
version: '',
|
|
|
|
author: '',
|
|
|
|
icon_url: '',
|
2021-08-15 10:28:21 +00:00
|
|
|
screenshot_url: ''
|
2021-08-14 16:23:54 +00:00
|
|
|
},
|
2021-08-15 14:12:03 +00:00
|
|
|
addonData: '',
|
|
|
|
settingsClasses: {
|
|
|
|
current: 'toggle lightTheme',
|
|
|
|
json: 'toggle lightTheme'
|
|
|
|
}
|
2021-08-14 16:23:54 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
changeTab(tab, type) {
|
|
|
|
if (type) {
|
|
|
|
return this.setState({
|
|
|
|
currentTab: tab,
|
|
|
|
addonMetadata: {
|
|
|
|
type: type
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
currentTab: tab
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-08-15 10:28:21 +00:00
|
|
|
importSettings(input) {
|
|
|
|
const data = input || localStorage;
|
2021-08-14 16:23:54 +00:00
|
|
|
let settings = {};
|
2021-08-15 10:28:21 +00:00
|
|
|
Object.keys(data).forEach((key) => {
|
2021-08-14 16:23:54 +00:00
|
|
|
if (key === 'statsData' || key === 'firstRun' || key === 'showWelcome' || key === 'language' || key === 'installed' || key === 'stats') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
settings[key] = localStorage.getItem(key);
|
|
|
|
});
|
|
|
|
|
|
|
|
this.setState({
|
2021-08-15 14:12:03 +00:00
|
|
|
addonData: settings,
|
|
|
|
settingsClasses: {
|
|
|
|
current: input ? 'toggle lightTheme' : 'toggle lightTheme active',
|
|
|
|
json: input ? 'toggle lightTheme active' : 'toggle lightTheme'
|
|
|
|
}
|
2021-08-14 16:23:54 +00:00
|
|
|
});
|
|
|
|
|
2021-09-19 18:50:55 +00:00
|
|
|
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
|
2021-08-14 16:23:54 +00:00
|
|
|
}
|
|
|
|
|
2021-09-19 10:22:53 +00:00
|
|
|
updateQuotePackType(type) {
|
|
|
|
if (type === 'quotePack') {
|
2021-09-18 19:51:00 +00:00
|
|
|
this.setState({
|
|
|
|
addonMetadata: {
|
2021-09-19 10:22:53 +00:00
|
|
|
type,
|
|
|
|
name: this.state.addonMetadata.name,
|
|
|
|
description: this.state.addonMetadata.description,
|
|
|
|
version: this.state.addonMetadata.version,
|
|
|
|
author: this.state.addonMetadata.author,
|
|
|
|
icon_url: this.state.addonMetadata.icon_url,
|
|
|
|
screenshot_url: this.state.addonMetadata.screenshot_url,
|
2021-09-19 18:50:55 +00:00
|
|
|
quotes: []
|
2021-09-18 19:51:00 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.setState({
|
|
|
|
addonMetadata: {
|
2021-09-19 10:22:53 +00:00
|
|
|
type,
|
|
|
|
name: this.state.addonMetadata.name,
|
|
|
|
description: this.state.addonMetadata.description,
|
|
|
|
version: this.state.addonMetadata.version,
|
|
|
|
author: this.state.addonMetadata.author,
|
|
|
|
icon_url: this.state.addonMetadata.icon_url,
|
|
|
|
screenshot_url: this.state.addonMetadata.screenshot_url
|
|
|
|
},
|
|
|
|
addonData: {
|
|
|
|
url: '',
|
|
|
|
name: '',
|
|
|
|
author: ''
|
2021-09-18 19:51:00 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
updateQuotePackAPI(type, data) {
|
|
|
|
this.setState({
|
|
|
|
addonData: {
|
|
|
|
url: (type === 'url') ? data : this.state.addonData.url || '',
|
|
|
|
name: (type === 'name') ? data : this.state.addonData.name || '',
|
|
|
|
author: (type === 'author') ? data : this.state.addonData.author || '',
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-09-19 18:50:55 +00:00
|
|
|
importQuotes() {
|
|
|
|
this.setState({
|
2021-11-23 18:11:36 +00:00
|
|
|
addonData: JSON.parse(localStorage.getItem('customQuote')) || []
|
2021-09-19 18:50:55 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
|
|
|
|
}
|
|
|
|
|
|
|
|
importPhotos() {
|
|
|
|
let data = [];
|
|
|
|
try {
|
2021-11-23 18:11:36 +00:00
|
|
|
const current = JSON.parse(localStorage.getItem('customBackground')) || [];
|
|
|
|
data = current.map((item) => {
|
|
|
|
return {
|
|
|
|
photographer: '???',
|
|
|
|
location: '???',
|
|
|
|
url: {
|
|
|
|
default: item
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2021-09-19 18:50:55 +00:00
|
|
|
toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
|
|
|
|
} catch (e) {
|
|
|
|
console.log(e);
|
|
|
|
toast(variables.language.getMessage(variables.languagecode, 'toasts.error'));
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
2021-11-23 18:11:36 +00:00
|
|
|
addonData: data
|
2021-09-19 18:50:55 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-08-14 16:23:54 +00:00
|
|
|
downloadAddon() {
|
2021-08-14 19:10:48 +00:00
|
|
|
saveFile({
|
2021-08-14 16:23:54 +00:00
|
|
|
name: this.state.addonMetadata.name,
|
|
|
|
description: this.state.addonMetadata.description,
|
2021-09-18 19:51:00 +00:00
|
|
|
type: (this.state.addonMetadata.type === 'quote_api') ? 'quotes' : this.state.addonMetadata.type,
|
2021-08-14 16:23:54 +00:00
|
|
|
version: this.state.addonMetadata.version,
|
|
|
|
author: this.state.addonMetadata.author,
|
|
|
|
icon_url: this.state.addonMetadata.icon_url,
|
|
|
|
screenshot_url: this.state.addonMetadata.screenshot_url,
|
2021-08-15 10:28:21 +00:00
|
|
|
[this.state.addonMetadata.type]: this.state.addonData
|
2021-08-14 16:23:54 +00:00
|
|
|
}, this.state.addonMetadata.name + '.json');
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let tabContent;
|
|
|
|
|
2021-09-17 13:13:31 +00:00
|
|
|
const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
|
2021-08-15 10:59:30 +00:00
|
|
|
|
2021-08-14 16:23:54 +00:00
|
|
|
const chooseType = (
|
|
|
|
<>
|
2021-09-17 13:13:31 +00:00
|
|
|
<h3>{getMessage('modals.main.settings.sections.time.type')}</h3>
|
2021-08-15 10:28:21 +00:00
|
|
|
<div className='themesToggleArea'>
|
|
|
|
<div className='options'>
|
2021-09-19 18:50:55 +00:00
|
|
|
<div className='toggle lightTheme' onClick={() => this.changeTab(2, 'photos')}>
|
2021-08-15 10:28:21 +00:00
|
|
|
<Photos/>
|
2021-09-19 18:50:55 +00:00
|
|
|
<span>{getMessage('modals.main.marketplace.photo_packs')}</span>
|
2021-08-15 10:28:21 +00:00
|
|
|
</div>
|
|
|
|
<div className='toggle lightTheme' onClick={() => this.changeTab(2, 'quotes')}>
|
|
|
|
<Quotes/>
|
2021-09-18 19:51:00 +00:00
|
|
|
<span>{getMessage('modals.main.marketplace.quote_packs')}</span>
|
2021-08-22 15:12:13 +00:00
|
|
|
</div>
|
2021-08-15 10:28:21 +00:00
|
|
|
<div className='toggle lightTheme' onClick={() => this.changeTab(2, 'settings')}>
|
|
|
|
<Settings/>
|
2021-09-17 13:13:31 +00:00
|
|
|
<span>{getMessage('modals.main.marketplace.preset_settings')}</span>
|
2021-08-15 10:28:21 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-14 16:23:54 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
2021-08-15 10:28:21 +00:00
|
|
|
// todo: find a better way to do all this
|
|
|
|
const nextDescriptionDisabled = (this.state.addonMetadata.name !== undefined &&
|
|
|
|
this.state.addonMetadata.description !== undefined &&
|
|
|
|
this.state.addonMetadata.version !== undefined && this.state.addonMetadata.author !== undefined &&
|
|
|
|
this.state.addonMetadata.icon_url !== undefined && this.state.addonMetadata.screenshot_url !== undefined)
|
|
|
|
? false : true;
|
|
|
|
|
|
|
|
const setMetadata = (data, type) => {
|
|
|
|
this.setState({
|
|
|
|
addonMetadata: {
|
|
|
|
name: (type === 'name') ? data : this.state.addonMetadata.name,
|
|
|
|
description: (type === 'description') ? data : this.state.addonMetadata.description,
|
|
|
|
version: (type === 'version') ? data : this.state.addonMetadata.version,
|
|
|
|
author: (type === 'author') ? data : this.state.addonMetadata.author,
|
|
|
|
icon_url: (type === 'icon_url') ? data : this.state.addonMetadata.icon_url,
|
|
|
|
screenshot_url: (type === 'screenshot_url') ? data : this.state.addonMetadata.screenshot_url,
|
|
|
|
type: this.state.addonMetadata.type
|
|
|
|
}
|
|
|
|
});
|
2021-08-27 17:27:11 +00:00
|
|
|
};
|
2021-08-15 10:28:21 +00:00
|
|
|
|
2021-08-14 16:23:54 +00:00
|
|
|
const writeDescription = (
|
|
|
|
<>
|
2021-09-17 13:13:31 +00:00
|
|
|
<h3>{getMessage('modals.main.marketplace.product.information')}</h3>
|
2021-11-10 16:20:40 +00:00
|
|
|
<TextField label={getMessage('modals.main.addons.create.metadata.name')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.name} onInput={(e) => setMetadata(e.target.value, 'name')}/>
|
|
|
|
<TextField label={getMessage('modals.main.marketplace.product.version')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.version} onInput={(e) => setMetadata(e.target.value, 'version')}/>
|
|
|
|
<TextField label={getMessage('modals.main.marketplace.product.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.author} onInput={(e) => setMetadata(e.target.value, 'author')}/>
|
|
|
|
<TextField label={getMessage('modals.main.addons.create.metadata.icon_url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.icon_url} onInput={(e) => setMetadata(e.target.value, 'icon_url')}/>
|
|
|
|
<TextField label={getMessage('modals.main.addons.create.metadata.screenshot_url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.screenshot_url} onInput={(e) => setMetadata(e.target.value, 'screenshot_url')}/>
|
|
|
|
<TextField label={getMessage('modals.main.addons.create.metadata.description')} varient='outlined' InputLabelProps={{ shrink: true }} multiline spellCheck={false} rows={4} InputLabelProps={{ shrink: true }} value={this.state.addonMetadata.description} onInput={(e) => setMetadata(e.target.value, 'description')}/>
|
2021-08-14 16:23:54 +00:00
|
|
|
<br/>
|
2021-09-17 13:13:31 +00:00
|
|
|
<button onClick={() => this.changeTab(1)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
2021-09-19 10:22:53 +00:00
|
|
|
<button onClick={() => this.changeTab(this.state.addonMetadata.type)} className='uploadbg' disabled={nextDescriptionDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
|
2021-08-14 16:23:54 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
// settings
|
2021-08-15 14:12:03 +00:00
|
|
|
const nextSettingsDisabled = (this.state.addonData === '') ? true : false;
|
2021-08-14 16:23:54 +00:00
|
|
|
const importSettings = (
|
|
|
|
<>
|
2021-09-17 13:13:31 +00:00
|
|
|
<h3>{getMessage('modals.mwelcome.sections.title')}</h3>
|
2021-08-15 14:12:03 +00:00
|
|
|
<div className='themesToggleArea'>
|
|
|
|
<div className='options'>
|
|
|
|
<div className={this.state.settingsClasses.current} onClick={() => this.importSettings()}>
|
2021-11-23 18:11:36 +00:00
|
|
|
<ExportIcon/>
|
2021-09-17 13:13:31 +00:00
|
|
|
<span>{getMessage('modals.main.addons.create.settings.current')}</span>
|
2021-08-15 14:12:03 +00:00
|
|
|
</div>
|
|
|
|
<div className={this.state.settingsClasses.json} onClick={() => document.getElementById('file-input').click()}>
|
2021-11-23 18:11:36 +00:00
|
|
|
<ImportIcon/>
|
2021-09-17 13:13:31 +00:00
|
|
|
<span>{getMessage('modals.main.addons.create.settings.json')}</span>
|
2021-08-15 14:12:03 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-15 10:28:21 +00:00
|
|
|
<FileUpload id='file-input' type='settings' accept='application/json' loadFunction={(e) => this.importSettings(JSON.parse(e.target.result))} />
|
2021-08-14 16:23:54 +00:00
|
|
|
<br/><br/>
|
2021-11-23 18:11:36 +00:00
|
|
|
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
|
|
|
<button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextSettingsDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
|
2021-08-15 10:28:21 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
// quotes
|
2021-09-19 18:50:55 +00:00
|
|
|
const nextQuotesDisabled = ((this.state.addonMetadata.type === 'quote_api' && this.state.addonData.url !== '' && this.state.addonData.name !== '' && this.state.addonData.author !== '')
|
2021-09-29 18:19:03 +00:00
|
|
|
|| (this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '')) ? false : true;
|
2021-08-15 10:28:21 +00:00
|
|
|
const addQuotes = (
|
|
|
|
<>
|
2021-09-17 13:13:31 +00:00
|
|
|
<h3>{getMessage('modals.main.addons.create.quotes.title')}</h3>
|
2021-09-19 10:22:53 +00:00
|
|
|
<Dropdown label={getMessage('modals.main.settings.sections.time.type')} noSetting onChange={(e) => this.updateQuotePackType(e)}>
|
|
|
|
<option value='quotes'>{getMessage('modals.main.addons.create.quotes.local.title')}</option>
|
|
|
|
<option value='quote_api'>{getMessage('modals.main.addons.create.quotes.api.title')}</option>
|
2021-09-18 19:51:00 +00:00
|
|
|
</Dropdown>
|
|
|
|
{this.state.addonMetadata.type === 'quote_api' ? <>
|
2021-11-14 16:01:45 +00:00
|
|
|
<TextField label={getMessage('modals.main.addons.create.quotes.api.url')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.url} onInput={(e) => this.updateQuotePack(e.target.value, 'url')}/>
|
|
|
|
<TextField label={getMessage('modals.main.addons.create.quotes.api.name')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.name} onInput={(e) => this.updateQuotePack(e.target.value, 'name')}/>
|
|
|
|
<TextField label={getMessage('modals.main.addons.create.quotes.api.author')} varient='outlined' InputLabelProps={{ shrink: true }} value={this.state.addonData.author} onInput={(e) => this.updateQuotePack(e.target.value, 'author')}/>
|
2021-09-18 19:51:00 +00:00
|
|
|
<br/><br/>
|
|
|
|
</> : <>
|
2021-11-23 18:11:36 +00:00
|
|
|
<button onClick={() => this.importQuotes()} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
|
2021-09-19 18:50:55 +00:00
|
|
|
<br/><br/>
|
2021-09-18 19:51:00 +00:00
|
|
|
</>}
|
2021-11-23 18:11:36 +00:00
|
|
|
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
|
|
|
<button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }}disabled={nextQuotesDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
|
2021-08-15 10:28:21 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
// photos
|
2021-09-19 18:50:55 +00:00
|
|
|
const nextPhotosDisabled = (this.state.addonData.photos !== '' && this.state.addonData.photos !== []) ? false : true;
|
2021-08-15 10:28:21 +00:00
|
|
|
const addPhotos = (
|
|
|
|
<>
|
2021-09-17 13:13:31 +00:00
|
|
|
<h3>{getMessage('modals.main.addons.create.photos.title')}</h3>
|
2021-11-14 16:01:45 +00:00
|
|
|
<button onClick={() => this.importPhotos()} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.main.addons.create.settings.current')}</button>
|
2021-09-19 18:50:55 +00:00
|
|
|
<br/><br/>
|
2021-11-23 18:11:36 +00:00
|
|
|
<button onClick={() => this.changeTab(2)} className='uploadbg' style={{ margin: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
|
|
|
<button onClick={() => this.changeTab(3)} className='uploadbg' style={{ margin: '10px' }} disabled={nextPhotosDisabled}>{getMessage('modals.welcome.buttons.next')}</button>
|
2021-08-14 16:23:54 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
const downloadAddon = (
|
|
|
|
<>
|
2021-09-17 13:13:31 +00:00
|
|
|
<h3>{getMessage('modals.main.addons.create.finish.title')}</h3>
|
|
|
|
<button onClick={() => this.downloadAddon()} className='upload'>{getMessage('modals.main.addons.create.finish.download')}</button>
|
2021-08-14 16:23:54 +00:00
|
|
|
<br/><br/>
|
2021-09-19 10:22:53 +00:00
|
|
|
<button onClick={() => this.changeTab((this.state.addonMetadata.type === 'quote_api') ? 'quotes' : this.state.addonMetadata.type)} className='uploadbg' style={{ marginRight: '10px' }}>{getMessage('modals.welcome.buttons.previous')}</button>
|
2021-08-14 16:23:54 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
switch (this.state.currentTab) {
|
|
|
|
case 2: tabContent = writeDescription; break;
|
|
|
|
case 'settings': tabContent = importSettings; break;
|
2021-08-15 10:28:21 +00:00
|
|
|
case 'quotes': tabContent = addQuotes; break;
|
|
|
|
case 'photos': tabContent = addPhotos; break;
|
2021-08-14 16:23:54 +00:00
|
|
|
case 3: tabContent = downloadAddon; break;
|
|
|
|
default: tabContent = chooseType;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
2021-09-17 13:13:31 +00:00
|
|
|
<h2>{getMessage('modals.main.addons.create.other_title')}</h2>
|
2021-08-14 16:23:54 +00:00
|
|
|
{tabContent}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
2021-08-15 10:28:21 +00:00
|
|
|
}
|