added php code to get settings from database to react state

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

26
api/Settings.php Normal file
View File

@ -0,0 +1,26 @@
<?php
require 'Database.php';
$conn = Database::getInstance()->getConnection();
if (isset($_POST['action'])) {
$action = $_POST['action'];
switch ($action) {
case "loadGeneralSettings":
$query = "SELECT * from settings";
$result = $conn->query($query);
if ($result->num_rows > 1) {
// todo throw error
}
$r = mysqli_fetch_assoc($result);
if ($r['password'] != "-1") {
$r['passwordEnabled'] = true;
} else {
$r['passwordEnabled'] = true;
}
echo json_encode($r);
break;
}
}

View File

@ -7,9 +7,12 @@ class GeneralSettings extends React.Component {
super(props); super(props);
this.state = { this.state = {
tvshowsupport: false, passwordsupport: false,
videopath: "", videopath: "",
tvshowpath: "" tvshowpath: "",
mediacentername: "",
password: ""
}; };
} }
@ -17,11 +20,16 @@ class GeneralSettings extends React.Component {
const updateRequest = new FormData(); const updateRequest = new FormData();
updateRequest.append('action', 'loadGeneralSettings'); 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((response) => response.json()
.then((result) => { .then((result) => {
// todo 2020-07-3: set state here this.setState({
// todo 2020-07-4: php and test code 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.Row>
<Form.Group as={Col} controlId="formGridEmail"> <Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Video Path</Form.Label> <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>
<Form.Group as={Col} controlId="formGridPassword"> <Form.Group as={Col} controlId="formGridPassword">
<Form.Label>TV Show Path</Form.Label> <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.Group>
</Form.Row> </Form.Row>
@ -49,21 +60,24 @@ class GeneralSettings extends React.Component {
type="switch" type="switch"
id="custom-switch" id="custom-switch"
label="Enable Password support" label="Enable Password support"
checked={this.state.passwordsupport}
onChange={() => { onChange={() => {
this.setState({tvshowsupport: !this.state.tvshowsupport}) this.setState({passwordsupport: !this.state.passwordsupport})
}} }}
/> />
{this.state.tvshowsupport ? {this.state.passwordsupport ?
<Form.Group controlId="passwordfield"> <Form.Group controlId="passwordfield">
<Form.Label>Password</Form.Label> <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> : 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.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> </Form.Group>
<Button variant="primary" type="submit"> <Button variant="primary" type="submit">