260 lines
10 KiB
TypeScript
260 lines
10 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} from '../../utils/Api';
|
|
import {SettingsTypes} from '../../types/ApiTypes';
|
|
import {GeneralSuccess} from '../../types/GeneralTypes';
|
|
|
|
interface state {
|
|
generalSettings: SettingsTypes.SettingsType;
|
|
sizes: SettingsTypes.SizesType;
|
|
}
|
|
|
|
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 = {
|
|
generalSettings: {
|
|
DarkMode: true,
|
|
EpisodePath: '',
|
|
MediacenterName: '',
|
|
Password: '',
|
|
PasswordEnabled: false,
|
|
TMDBGrabbing: false,
|
|
VideoPath: ''
|
|
},
|
|
sizes: {
|
|
DBSize: 0,
|
|
DifferentTags: 0,
|
|
TagsAdded: 0,
|
|
VideoNr: 0
|
|
}
|
|
};
|
|
}
|
|
|
|
componentDidMount(): void {
|
|
this.loadSettings();
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
const themeStyle = GlobalInfos.getThemeStyle();
|
|
return (
|
|
<>
|
|
<div className={style.infoheader}>
|
|
<InfoHeaderItem
|
|
backColor='lightblue'
|
|
text={this.state.sizes.VideoNr}
|
|
subtext='Videos in Gravity'
|
|
icon={faArchive}
|
|
/>
|
|
<InfoHeaderItem
|
|
backColor='yellow'
|
|
text={this.state.sizes.DBSize + ' MB'}
|
|
subtext='Database size'
|
|
icon={faRulerVertical}
|
|
/>
|
|
<InfoHeaderItem
|
|
backColor='green'
|
|
text={this.state.sizes.DifferentTags}
|
|
subtext='different Tags'
|
|
icon={faAddressCard}
|
|
/>
|
|
<InfoHeaderItem
|
|
backColor='orange'
|
|
text={this.state.sizes.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'
|
|
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());
|
|
}}
|
|
/>
|
|
|
|
<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 {
|
|
interface SettingsResponseType {
|
|
Settings: SettingsTypes.SettingsType;
|
|
Sizes: SettingsTypes.SizesType;
|
|
}
|
|
|
|
callAPI(APINode.Settings, {action: 'loadGeneralSettings'}, (result: SettingsResponseType) => {
|
|
this.setState({
|
|
generalSettings: result.Settings,
|
|
sizes: result.Sizes
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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();
|
|
|
|
console.log(settings);
|
|
callAPI(
|
|
APINode.Settings,
|
|
{
|
|
action: 'saveGeneralSettings',
|
|
...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;
|