new database entry for theme

new settings switcher

api/Settings.php

@@ -59,6 +59,8 @@ if (isset($_POST['action'])) {
                 $r['passwordEnabled'] = false;
             }
             unset($r['password']);
+
+            $r['DarkMode'] = ($r['DarkMode'] != '0');
             echo json_encode($r);
             break;
     }

database.sql

@@ -36,6 +36,8 @@ create table settings
     episode_path     varchar(255)                          null,
     password         varchar(32) default '-1'              null,
     mediacenter_name varchar(32) default 'OpenMediaCenter' null,
+    TMDB_grabbing    tinyint           null,
+    DarkMode         tinyint default 0 null
     PRIMARY KEY (id)
 );
 

src/App.js

@@ -34,13 +34,14 @@ class App extends React.Component {
         fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    console.log(result);
+                    // set theme
+                    StaticInfos.enableDarkTheme(result.DarkMode);
+
                     this.setState({
                         generalSettingsLoaded: true,
                         passwordsupport: result.passwordEnabled,
                         mediacentername: result.mediacenter_name
                     });
-                    console.log(this.state);
                 }));
     }
 
@@ -84,7 +85,7 @@ class App extends React.Component {
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         // add the main theme to the page body
-        document.body.className += ' ' + themeStyle.backgroundcolor;
+        document.body.className = themeStyle.backgroundcolor;
         return (
             <div className="App">
                 <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>

src/GlobalInfos.js

@@ -1,5 +1,5 @@
 class GlobalInfos {
-    #darktheme = false;
+    #darktheme = true;
 
     isDarkTheme() {
         return this.#darktheme;
@@ -11,6 +11,6 @@ class GlobalInfos {
 }
 
 const StaticInfos = new GlobalInfos();
-Object.freeze(StaticInfos);
+//Object.freeze(StaticInfos);
 
 export default StaticInfos;

src/index.css

@@ -1,8 +0,0 @@
-body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}

src/pages/Player/Player.module.css

@@ -13,7 +13,7 @@
     display: block;
     float: left;
     width: 60%;
-    margin-top: 25px;
+    margin-top: 20px;
 }
 
 .videoactions {

src/pages/SettingsPage/GeneralSettings.js

@@ -74,6 +74,14 @@ class GeneralSettings extends React.Component {
                             }}
                         />
 
+                        {this.state.passwordsupport ?
+                            <Form.Group data-testid="passwordfield">
+                                <Form.Label>Password</Form.Label>
+                                <Form.Control type="password" placeholder="**********" value={this.state.password}
+                                              onChange={(e) => this.setState({password: e.target.value})}/>
+                            </Form.Group> : null
+                        }
+
                         <Form.Check
                             type="switch"
                             id="custom-switch-2"
@@ -85,13 +93,18 @@ class GeneralSettings extends React.Component {
                             }}
                         />
 
-                        {this.state.passwordsupport ?
+                        <Form.Check
-                            <Form.Group data-testid="passwordfield">
+                            type="switch"
-                                <Form.Label>Password</Form.Label>
+                            id="custom-switch-3"
-                                <Form.Control type="password" placeholder="**********" value={this.state.password}
+                            data-testid='darktheme-switch'
-                                              onChange={(e) => this.setState({password: e.target.value})}/>
+                            label="Enable Dark-Theme"
-                            </Form.Group> : null
+                            checked={StaticInfos.isDarkTheme()}
-                        }
+                            onChange={() => {
+                                StaticInfos.enableDarkTheme(!StaticInfos.isDarkTheme());
+                                this.forceUpdate();
+                                // todo initiate rerender
+                            }}
+                        />
 
                         <Form.Group className={style.mediacenternameform} data-testid="nameform">
                             <Form.Label>The name of the Mediacenter</Form.Label>