From 8c4b1a836a4855ae2e3dcf9b79eb4f0f8052e9fd Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Tue, 28 Jul 2020 18:17:17 +0200
Subject: [PATCH] new database entry for theme new settings switcher

---
 api/Settings.php                          |  2 ++
 database.sql                              |  2 ++
 src/App.js                                |  7 +++---
 src/GlobalInfos.js                        |  4 ++--
 src/index.css                             |  8 -------
 src/pages/Player/Player.module.css        |  2 +-
 src/pages/SettingsPage/GeneralSettings.js | 27 +++++++++++++++++------
 7 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/api/Settings.php b/api/Settings.php
index 273446e..6ccf284 100644
--- a/api/Settings.php
+++ b/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;
     }
diff --git a/database.sql b/database.sql
index ba71abd..b83c0fe 100644
--- a/database.sql
+++ b/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)
 );
 
diff --git a/src/App.js b/src/App.js
index cc76a36..067e9f4 100644
--- a/src/App.js
+++ b/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(' ')}>
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index 0be8b80..fa10022 100644
--- a/src/GlobalInfos.js
+++ b/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;
diff --git a/src/index.css b/src/index.css
index cd1a456..e69de29 100644
--- a/src/index.css
+++ b/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;
-}
diff --git a/src/pages/Player/Player.module.css b/src/pages/Player/Player.module.css
index a313388..4a9322a 100644
--- a/src/pages/Player/Player.module.css
+++ b/src/pages/Player/Player.module.css
@@ -13,7 +13,7 @@
     display: block;
     float: left;
     width: 60%;
-    margin-top: 25px;
+    margin-top: 20px;
 }
 
 .videoactions {
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index c84e0b5..3bea177 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/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.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-3"
+                            data-testid='darktheme-switch'
+                            label="Enable Dark-Theme"
+                            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>