Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

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

@@ -3,9 +3,11 @@
   <mat-sidenav #drawer class="sidenav" 
       fxShow="true" fxHide.gt-sm="true"
       fixedInViewport="false"
-      autoFocus="false"
-     >
-    <mat-toolbar>Menu</mat-toolbar>
+      autoFocus="false">
+    <mat-toolbar *ngIf="!loggedIn">Menu</mat-toolbar>
+    <mat-toolbar *ngIf="loggedIn">
+        <span>Hello, {{user.username}}</span>
+    </mat-toolbar>
     <mat-nav-list>
       <a mat-list-item routerLink="" (click)="drawer.close()">Home</a>
       <a mat-list-item *ngIf="loggedIn" routerLink={{profileUrl}} (click)="drawer.close()">Profile</a>
@@ -56,6 +58,7 @@
         </div>
       </nav>
       <div id="menu-button-box">
+        <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>
@@ -81,11 +84,12 @@
           <mat-slide-toggle
             color="primary"
             class="theme-button"
-            (change)="toggleTheme()"><!--stays white when dragged-->
+            (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.sass

@@ -19,7 +19,7 @@
   top: 0
   z-index: 1000
   .mat-tab-nav-bar
-    width: 70%
+    width: 50%
     height: 56px
   .mat-tab-links
     height: 56px

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

@@ -32,8 +32,6 @@ export class SelfService {
       }, error => {
         this.notLoggedIn();
         console.log(error.text());
-        // this.fakeLogin();
-        // console.log('user wurde übergeben');
       }
       );
   }
@@ -71,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() {
@@ -116,10 +117,11 @@ export class SelfService {
         },
         chats{
           id
-        }
+        },
+        settings
       }
     }`, variables: {
       }};
     return body;
   }
-}// add ,receivedRequests{id} later
+}

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