249 lines
11 KiB
TypeScript
249 lines
11 KiB
TypeScript
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>
|
|
<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;
|