lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

build electron app

Browse Source 
implement new fetch api calls
use typescript
This commit is contained in:
Lukas Heiligenbrunner
2020-12-17 20:53:22 +00:00
parent c049aa345c
commit 7d696122fa
43 changed files with 804 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/pages/SettingsPage/GeneralSettings.js
View File

@ -1,11 +1,12 @@
import React from 'react';
import {Button, Col, Form} from 'react-bootstrap';
import style from './GeneralSettings.module.css';
import GlobalInfos from '../../GlobalInfos';
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 {callAPI, setCustomBackendDomain} from '../../utils/Api';
/**
* Component for Generalsettings tag on Settingspage
@ -18,6 +19,7 @@ class GeneralSettings extends React.Component {
this.state = {
passwordsupport: false,
tmdbsupport: null,
customapi: false,
videopath: '',
tvshowpath: '',
@ -77,6 +79,31 @@ class GeneralSettings extends React.Component {
</Form.Group>
</Form.Row>
<Form.Check
type='switch'
id='custom-switch-api'
label='Use custom API url'
checked={this.state.customapi}
onChange={() => {
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) => {
this.setState({apipath: e.target.value});
setCustomBackendDomain(e.target.value);
}}/>
</Form.Group> : null}
<Form.Check
type='switch'
id='custom-switch'
@ -142,54 +169,44 @@ class GeneralSettings extends React.Component {
* inital load of already specified settings from backend
*/
loadSettings() {
const updateRequest = new FormData();
updateRequest.append('action', 'loadGeneralSettings');
callAPI('settings.php', {action: 'loadGeneralSettings'}, (result) => {
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled,
tmdbsupport: result.TMDB_grabbing,
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
console.log(result);
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled,
tmdbsupport: result.TMDB_grabbing,
videonr: result.videonr,
dbsize: result.dbsize,
difftagnr: result.difftagnr,
tagsadded: result.tagsadded
});
}));
videonr: result.videonr,
dbsize: result.dbsize,
difftagnr: result.difftagnr,
tagsadded: result.tagsadded
});
});
}
/**
* save the selected and typed settings to the backend
*/
saveSettings() {
const updateRequest = new FormData();
updateRequest.append('action', 'saveGeneralSettings');
updateRequest.append('password', this.state.passwordsupport ? this.state.password : '-1');
updateRequest.append('videopath', this.state.videopath);
updateRequest.append('tvshowpath', this.state.tvshowpath);
updateRequest.append('mediacentername', this.state.mediacentername);
updateRequest.append('tmdbsupport', this.state.tmdbsupport);
updateRequest.append('darkmodeenabled', GlobalInfos.isDarkTheme().toString());
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
if (result.success) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
}
}));
callAPI('settings.php', {
action: 'saveGeneralSettings',
password: this.state.passwordsupport ? this.state.password : '-1',
videopath: this.state.videopath,
tvshowpath: this.state.tvshowpath,
mediacentername: this.state.mediacentername,
tmdbsupport: this.state.tmdbsupport,
darkmodeenabled: GlobalInfos.isDarkTheme().toString()
}, (result) => {
if (result.success) {
console.log('successfully saved settings');
// todo 2020-07-10: popup success
} else {
console.log('failed to save settings');
// todo 2020-07-10: popup error
}
});
}
}

5
src/pages/SettingsPage/GeneralSettings.module.css
View File

@ -8,6 +8,11 @@
width: 40%;
}
.customapiform{
margin-top: 15px;
width: 40%;
}
.infoheader {
display: flex;
flex-wrap: wrap;

2
src/pages/SettingsPage/GeneralSettings.test.js
View File

@ -1,7 +1,7 @@
import {shallow} from 'enzyme';
import React from 'react';
import GeneralSettings from './GeneralSettings';
import GlobalInfos from '../../GlobalInfos';
import GlobalInfos from '../../utils/GlobalInfos';
describe('<GeneralSettings/>', function () {
it('renders without crashing ', function () {

83
src/pages/SettingsPage/MovieSettings.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import style from './MovieSettings.module.css';
import {callAPI} from '../../utils/Api';
/**
* Component for MovieSettings on Settingspage
@ -50,23 +51,17 @@ class MovieSettings extends React.Component {
this.setState({startbtnDisabled: true});
console.log('starting');
const request = new FormData();
request.append('action', 'startReindex');
// fetch all videos available
fetch('/api/settings.php', {method: 'POST', body: request})
.then((response) => response.json()
.then((result) => {
console.log(result);
if (result.success) {
console.log('started successfully');
} else {
console.log('error, reindex already running');
this.setState({startbtnDisabled: true});
}
}))
.catch(() => {
console.log('no connection to backend');
});
callAPI('settings.php', {action: 'startReindex'}, (result) => {
console.log(result);
if (result.success) {
console.log('started successfully');
} else {
console.log('error, reindex already running');
this.setState({startbtnDisabled: true});
}
});
if (this.myinterval) {
clearInterval(this.myinterval);
}
@ -77,49 +72,33 @@ class MovieSettings extends React.Component {
* This interval function reloads the current status of reindexing from backend
*/
updateStatus = () => {
const request = new FormData();
request.append('action', 'getStatusMessage');
callAPI('settings.php', {action: 'getStatusMessage'}, (result) => {
if (result.contentAvailable === true) {
console.log(result);
// todo 2020-07-4: scroll to bottom of div here
this.setState({
// insert a string for each line
text: [...result.message.split('\n'),
...this.state.text]
});
} else {
// clear refresh interval if no content available
clearInterval(this.myinterval);
fetch('/api/settings.php', {method: 'POST', body: request})
.then((response) => response.json()
.then((result) => {
if (result.contentAvailable === true) {
console.log(result);
// todo 2020-07-4: scroll to bottom of div here
this.setState({
// insert a string for each line
text: [...result.message.split('\n'),
...this.state.text]
});
} else {
// clear refresh interval if no content available
clearInterval(this.myinterval);
this.setState({startbtnDisabled: false});
}
}))
.catch(() => {
console.log('no connection to backend');
});
this.setState({startbtnDisabled: false});
}
});
};
/**
* send request to cleanup db gravity
*/
cleanupGravity() {
const request = new FormData();
request.append('action', 'cleanupGravity');
fetch('/api/settings.php', {method: 'POST', body: request})
.then((response) => response.text()
.then((result) => {
this.setState({
text: ['successfully cleaned up gravity!']
});
}))
.catch(() => {
console.log('no connection to backend');
callAPI('settings.php', {action: 'cleanupGravity'}, (result) => {
this.setState({
text: ['successfully cleaned up gravity!']
});
});
}
}

14
src/pages/SettingsPage/SettingsPage.js → src/pages/SettingsPage/SettingsPage.tsx
View File

@ -2,14 +2,18 @@ import React from 'react';
import MovieSettings from './MovieSettings';
import GeneralSettings from './GeneralSettings';
import style from './SettingsPage.module.css';
import GlobalInfos from '../../GlobalInfos';
import GlobalInfos from '../../utils/GlobalInfos';
type SettingsPageState = {
currentpage: string
}
/**
* The Settingspage handles all kinds of settings for the mediacenter
* and is basically a wrapper for child-tabs
*/
class SettingsPage extends React.Component {
constructor(props, context) {
class SettingsPage extends React.Component<{}, SettingsPageState> {
constructor(props: Readonly<{}> | {}, context?: any) {
super(props, context);
this.state = {
@ -21,7 +25,7 @@ class SettingsPage extends React.Component {
* load the selected tab
* @returns {JSX.Element|string} the jsx element of the selected tab
*/
getContent() {
getContent(): JSX.Element | string {
switch (this.state.currentpage) {
case 'general':
return <GeneralSettings/>;
@ -34,7 +38,7 @@ class SettingsPage extends React.Component {
}
}
render() {
render() : JSX.Element {
const themestyle = GlobalInfos.getThemeStyle();
return (
<div>