added php code to get settings from database to react state

add onchange events to change state on field change

api/Settings.php

@@ -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;
+    }
+}

src/pages/SettingsPage/GeneralSettings.js

@@ -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
+                    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.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">