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

added php code to get settings from database to react state

Browse Source 
add onchange events to change state on field change
This commit is contained in:
Lukas Heiligenbrunner
2020-07-10 01:18:23 +02:00
parent 75ae0d7d8b
commit 133851fe0d
2 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,9 +7,12 @@ class GeneralSettings extends React.Component {
super(props);
this.state = {
tvshowsupport: false,
passwordsupport: false,
videopath: "",
tvshowpath: ""
tvshowpath: "",
mediacentername: "",
password: ""
};
}
@@ -17,11 +20,16 @@ class GeneralSettings extends React.Component {
const updateRequest = new FormData();
updateRequest.append('action', 'loadGeneralSettings');
fetch('/api/settings.php', {method: 'POST', body: updateRequest})
fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
.then((response) => response.json()
.then((result) => {
// todo 2020-07-3: set state here
// todo 2020-07-4: php and test code
this.setState({
videopath: result.video_path,
tvshowpath: result.episode_path,
mediacentername: result.mediacenter_name,
password: result.password,
passwordsupport: result.passwordEnabled
});
}));
}
@@ -36,12 +44,15 @@ class GeneralSettings extends React.Component {
<Form.Row>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Video Path</Form.Label>
<Form.Control type="text" placeholder="/var/www/html/video"/>
<Form.Control type="text" placeholder="/var/www/html/video" value={this.state.videopath}
onChange={(ee) => this.setState({videopath: ee.target.value})}/>
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>TV Show Path</Form.Label>
<Form.Control type='text' placeholder="/var/www/html/tvshow"/>
<Form.Control type='text' placeholder="/var/www/html/tvshow"
value={this.state.tvshowpath}
onChange={(e) => this.setState({tvshowpath: e.target.value})}/>
</Form.Group>
</Form.Row>
@@ -49,21 +60,24 @@ class GeneralSettings extends React.Component {
type="switch"
id="custom-switch"
label="Enable Password support"
checked={this.state.passwordsupport}
onChange={() => {
this.setState({tvshowsupport: !this.state.tvshowsupport})
this.setState({passwordsupport: !this.state.passwordsupport})
}}
/>
{this.state.tvshowsupport ?
{this.state.passwordsupport ?
<Form.Group controlId="passwordfield">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="**********"/>
<Form.Control type="password" placeholder="**********" value={this.state.password}
onChange={(e) => this.setState({password: e.target.value})}/>
</Form.Group> : null
}
<Form.Group className={style.mediacenternameform} controlId="passwordfield">
<Form.Group className={style.mediacenternameform} controlId="nameform">
<Form.Label>The name of the Mediacenter</Form.Label>
<Form.Control type="text" placeholder="Mediacentername"/>
<Form.Control type="text" placeholder="Mediacentername" value={this.state.mediacentername}
onChange={(e) => this.setState({mediacentername: e.target.value})}/>
</Form.Group>
<Button variant="primary" type="submit">