dark theme is stored in user settings now

src/app/components/main-navigation/main-navigation.component.html

@@ -58,7 +58,7 @@
         </div>
       </nav>
       <div id="menu-button-box">
-        <span class="mat-button" [hidden]="!loggedIn" fxShow="true" fxHide.lt-md="true" routerLink={{profileUrl}}>Hello, {{user.username}}</span>
+        <span class="mat-button" *ngIf="loggedIn" fxShow="true" fxHide.lt-md="true" routerLink={{profileUrl}}>Hello, {{user.username}}</span>
         <button mat-icon-button [matMenuTriggerFor]="requestMenu" [disabled]="!loggedIn" id="menu-button">
           <mat-icon [matBadge]="user.receivedRequests.length" [matBadgeHidden]="!(user.receivedRequests.length > 0)" matBadgeColor="accent">notifications</mat-icon>
         </button>
@@ -84,11 +84,12 @@
           <mat-slide-toggle
             color="primary"
             class="theme-button"
-            (change)="toggleTheme()">
+            (change)="toggleTheme()"
+            [checked]="darkModeButtonChecked">
             dark mode
           </mat-slide-toggle>
         </button>
-        <div  [hidden]="!loggedIn">
+        <div [hidden]="!loggedIn">
           <button mat-menu-item (click)="logout()" >
             <mat-icon>exit_to_app</mat-icon>
             <span>log out</span>

src/app/components/main-navigation/main-navigation.component.ts

@@ -5,6 +5,7 @@ import { map, shareReplay } from 'rxjs/operators';
 import { DatasharingService } from '../../services/datasharing.service';
 import { SelfService } from '../../services/selfservice/self.service';
 import { RequestService } from '../../services/request/request.service';
+import { SettingsService } from '../../services/settings/settings.service';
 import { environment } from 'src/environments/environment';
 import { Levellist } from 'src/app/models/levellist';
 import { Http } from '@angular/http';
@@ -23,6 +24,7 @@ export class MainNavigationComponent implements OnInit {
     public overlayContainer: OverlayContainer,
     private data: DatasharingService,
     private selfservice: SelfService,
+    private settingsService: SettingsService,
     private requestservice: RequestService,
     private breakpointObserver: BreakpointObserver,
     private http: Http, private router: Router
@@ -38,6 +40,7 @@ export class MainNavigationComponent implements OnInit {
   points: number;
   profileUrl = '/profile/1';
 
+  darkModeButtonChecked = false;
   lighttheme = true;
   overlay;
 
@@ -69,6 +72,10 @@ export class MainNavigationComponent implements OnInit {
       this.level = this.levellist.getLevelName(user.level);
       this.points = user.points;
       this.profileUrl = '/profile/' + this.userId;
+      if (this.user.darkmode === true && this.lighttheme) {
+        this.toggleTheme();
+        this.darkModeButtonChecked = true;
+      }
       this.updateLinks();
     });
   }
@@ -78,15 +85,31 @@ export class MainNavigationComponent implements OnInit {
         this.overlay.classList.remove('dark-theme');
         this.overlay.classList.add('light-theme');
         this.onSetTheme('light-theme');
+        this.lighttheme = true;
+        this.setDarkModeActive(false);
     } else if (this.overlay.classList.contains('light-theme')) {
         this.overlay.classList.remove('light-theme');
         this.overlay.classList.add('dark-theme');
         this.onSetTheme('dark-theme');
+        this.lighttheme = false;
+        this.setDarkModeActive(true);
     } else {
         this.overlay.classList.add('dark-theme');
         this.onSetTheme('dark-theme');
+        this.lighttheme = false;
+        this.setDarkModeActive(true);
     }
   }
+
+  setDarkModeActive(active: boolean) {
+    const url = environment.graphQLUrl;
+    const headers = new Headers();
+    headers.set('Content-Type', 'application/json');
+    const body = this.settingsService.buildJsonDarkMode('darkmode: ' + '\'' + active + '\'');
+    this.http.post(url, body).subscribe(response => {
+        console.log(response.text()); });
+  }
+
   updateLinks() {
     this.navLinksLoggedIn = [
       { path: '', label: 'Home' },

src/app/components/social/friends/friends.component.sass

@@ -10,7 +10,6 @@
   width: 100%
   margin-top: 0.5em
   cursor: pointer
-
   .mat-card-subtitle
     margin: 0
 

src/app/models/user.ts

@@ -11,6 +11,8 @@ export class User {
   level: number;
   profilePicture: string;
 
+  darkmode = false;
+
   friends: FriendInfo[] = new Array();
   groupIDs: number[];
   chatIDs: number[];

src/app/services/login/login.service.ts

@@ -61,7 +61,9 @@ export class LoginService {
       friendRequest.senderHandle = request.sender.handle;
       user.receivedRequests.push(friendRequest);
     }
-    console.log(user.friends);
+    if (JSON.parse(response.data.login.settings).darkmode === 'true') {
+      user.darkmode = true;
+    }
     this.data.changeUserInfo(user);
   }
 
@@ -87,7 +89,8 @@ export class LoginService {
           },
           chats{
             id
-          }
+          },
+          settings
         }
       }`
       , variables: {

src/app/services/register/register.service.ts

@@ -64,6 +64,9 @@ export class RegisterService {
       friendRequest.senderHandle = request.sender.handle;
       user.receivedRequests.push(friendRequest);
     }
+    if (JSON.parse(response.data.login.settings).darkmode === 'true') {
+      user.darkmode = true;
+    }
     this.data.changeUserInfo(user);
 
   }
@@ -84,7 +87,8 @@ export class RegisterService {
           level
          },
         groups{id},
-        chats{id}
+        chats{id},
+        settings
        }
     }`, variables: {
         email: registration.email,

src/app/services/selfservice/self.service.ts

@@ -69,6 +69,9 @@ export class SelfService {
       friendRequest.senderHandle = request.sender.handle;
       user.receivedRequests.push(friendRequest);
     }
+    if (JSON.parse(response.data.login.settings).darkmode === 'true') {
+      user.darkmode = true;
+    }
     this.data.changeUserInfo(user);
   }
   public fakeLogin() {
@@ -114,7 +117,8 @@ export class SelfService {
         },
         chats{
           id
-        }
+        },
+        settings
       }
     }`, variables: {
       }};

src/app/services/settings/settings.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SettingsService } from './settings.service';
+
+describe('SettingsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: SettingsService = TestBed.get(SettingsService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/settings/settings.service.ts

@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+import {Http} from '@angular/http';
+import { User } from 'src/app/models/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+
+  users:  Array<User>;
+  constructor(private http: Http) {
+  }
+
+  public buildJsonDarkMode(setting_: string): any {
+    const body = {
+      query: `mutation($setting: String!) {
+        setUserSettings(settings: $setting)
+      }`
+      , variables: {
+        setting: setting_
+      }
+    };
+    return body;
+  }
+}