OpenMediaCenter/src/pages/SettingsPage/GeneralSettings.tsx

249 lines
11 KiB
TypeScript
Raw Normal View History

import React from 'react';
import {Button, Col, Form} from 'react-bootstrap';
import style from './GeneralSettings.module.css';
import GlobalInfos from '../../utils/GlobalInfos';
import InfoHeaderItem from '../../elements/InfoHeaderItem/InfoHeaderItem';
import {faArchive, faBalanceScaleLeft, faRulerVertical} from '@fortawesome/free-solid-svg-icons';
import {faAddressCard} from '@fortawesome/free-regular-svg-icons';
import {version} from '../../../package.json';
import {APINode, callAPI, setCustomBackendDomain} from '../../utils/Api';
import {SettingsTypes} from '../../types/ApiTypes';
import {GeneralSuccess} from '../../types/GeneralTypes';
interface state {
customapi: boolean
apipath: string
generalSettings: SettingsTypes.loadGeneralSettingsType
}
interface props {
}
/**
* Component for Generalsettings tag on Settingspage
* handles general settings of mediacenter which concerns to all pages
*/
class GeneralSettings extends React.Component<props, state> {
constructor(props: props) {
super(props);
this.state = {
customapi: false,
apipath: '',
generalSettings: {
DarkMode: true,
DBSize: 0,
DifferentTags: 0,
EpisodePath: "",
MediacenterName: "",
Password: "",
PasswordEnabled: false,
TagsAdded: 0,
TMDBGrabbing: false,
VideoNr: 0,
VideoPath: ""
}
};
}
componentDidMount(): void {
this.loadSettings();
}
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<>
<div className={style.infoheader}>
<InfoHeaderItem backColor='lightblue'
text={this.state.generalSettings.VideoNr}
subtext='Videos in Gravity'
icon={faArchive}/>
<InfoHeaderItem backColor='yellow'
text={this.state.generalSettings.DBSize + ' MB'}
subtext='Database size'
icon={faRulerVertical}/>
<InfoHeaderItem backColor='green'
text={this.state.generalSettings.DifferentTags}
subtext='different Tags'
icon={faAddressCard}/>
<InfoHeaderItem backColor='orange'
text={this.state.generalSettings.TagsAdded}
subtext='tags added'
icon={faBalanceScaleLeft}/>
</div>
2020-07-27 19:14:56 +00:00
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
<Form data-testid='mainformsettings' onSubmit={(e): void => {
e.preventDefault();
this.saveSettings();
}}>
<Form.Row>
<Form.Group as={Col} data-testid='videpathform'>
<Form.Label>Video Path</Form.Label>
<Form.Control type='text' placeholder='/var/www/html/video'
value={this.state.generalSettings.VideoPath}
onChange={(ee): void => this.setState({
generalSettings: {
...this.state.generalSettings,
VideoPath: ee.target.value
}
})}/>
</Form.Group>
<Form.Group as={Col} data-testid='tvshowpath'>
<Form.Label>TV Show Path</Form.Label>
<Form.Control type='text' placeholder='/var/www/html/tvshow'
value={this.state.generalSettings.EpisodePath}
onChange={(e): void => this.setState({
generalSettings: {
...this.state.generalSettings,
EpisodePath: e.target.value
}
})}/>
</Form.Group>
</Form.Row>
<Form.Check
type='switch'
id='custom-switch-api'
label='Use custom API url'
checked={this.state.customapi}
onChange={(): void => {
if (this.state.customapi) {
setCustomBackendDomain('');
}
this.setState({customapi: !this.state.customapi});
}}
/>
{this.state.customapi ?
<Form.Group className={style.customapiform} data-testid='apipath'>
<Form.Label>API Backend url</Form.Label>
<Form.Control type='text' placeholder='https://127.0.0.1'
value={this.state.apipath}
onChange={(e): void => {
this.setState({apipath: e.target.value});
setCustomBackendDomain(e.target.value);
}}/>
</Form.Group> : null}
<Form.Check
type='switch'
id='custom-switch'
data-testid='passwordswitch'
label='Enable Password support'
checked={this.state.generalSettings.PasswordEnabled}
onChange={(): void => {
this.setState({
generalSettings: {
...this.state.generalSettings,
PasswordEnabled: !this.state.generalSettings.PasswordEnabled
}
});
}}
/>
{this.state.generalSettings.PasswordEnabled ?
<Form.Group data-testid='passwordfield'>
<Form.Label>Password</Form.Label>
<Form.Control type='password' placeholder='**********'
value={this.state.generalSettings.Password}
onChange={(e): void => this.setState({
generalSettings: {
...this.state.generalSettings,
Password: e.target.value
}
})}/>
</Form.Group> : null
}
<Form.Check
type='switch'
id='custom-switch-2'
data-testid='tmdb-switch'
label='Enable TMDB video grabbing support'
checked={this.state.generalSettings.TMDBGrabbing}
onChange={(): void => {
this.setState({
generalSettings: {
...this.state.generalSettings,
TMDBGrabbing: !this.state.generalSettings.TMDBGrabbing
}
});
}}
/>
<Form.Check
type='switch'
id='custom-switch-3'
data-testid='darktheme-switch'
label='Enable Dark-Theme'
checked={GlobalInfos.isDarkTheme()}
onChange={(): void => {
GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
this.forceUpdate();
// todo initiate rerender
}}
/>
<Form.Group className={style.mediacenternameform} data-testid='nameform'>
<Form.Label>The name of the Mediacenter</Form.Label>
<Form.Control type='text' placeholder='Mediacentername'
value={this.state.generalSettings.MediacenterName}
onChange={(e): void => this.setState({
generalSettings: {
...this.state.generalSettings,
MediacenterName: e.target.value
}
})}/>
</Form.Group>
<Button variant='primary' type='submit'>
Submit
</Button>
</Form>
</div>
<div className={style.footer}>
Version: {version}
</div>
</>
);
}
/**
* inital load of already specified settings from backend
*/
loadSettings(): void {
callAPI(APINode.Settings, {action: 'loadGeneralSettings'}, (result: SettingsTypes.loadGeneralSettingsType) => {
this.setState({generalSettings: result});
});
}
/**
* save the selected and typed settings to the backend
*/
saveSettings(): void {
let settings = this.state.generalSettings;
if(!this.state.generalSettings.PasswordEnabled){
settings.Password = '-1';
}
settings.DarkMode = GlobalInfos.isDarkTheme()
callAPI(APINode.Settings, {
action: 'saveGeneralSettings',
Settings: settings
}, (result: GeneralSuccess) => {
if (result.result) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
}
});
}
}
export default GeneralSettings;