From 994d59a75e80af40dfe1efa9c882582bbbd48f6b Mon Sep 17 00:00:00 2001
From: Per-Arne Andersen <per@sysx.no>
Date: Sun, 19 Jul 2020 19:49:54 +0200
Subject: [PATCH] * Fixes #18 "dark theme slider"

---
 .../src/app/layout/layout.module.ts           | 28 ++++++++++---------
 .../app/layout/layout/layout.component.html   |  7 +++--
 .../src/app/layout/layout/layout.component.ts | 14 +++++-----
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/wg_dashboard_frontend/src/app/layout/layout.module.ts b/wg_dashboard_frontend/src/app/layout/layout.module.ts
index 8cce19f..bf56d15 100644
--- a/wg_dashboard_frontend/src/app/layout/layout.module.ts
+++ b/wg_dashboard_frontend/src/app/layout/layout.module.ts
@@ -12,22 +12,24 @@ import { RouterModule } from '@angular/router';
 import { MatMenuModule } from '@angular/material/menu';
 import {MatSlideToggleModule} from "@angular/material/slide-toggle";
 import {NotifierModule} from "angular-notifier";
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [LayoutComponent],
-  imports: [
-    CommonModule,
-    MatSidenavModule,
-    MatToolbarModule,
-    MatListModule,
-    MatIconModule,
-    MatButtonModule,
-    FlexLayoutModule,
-    RouterModule,
-    MatMenuModule,
-    MatSlideToggleModule,
-    NotifierModule,
-  ],
+    imports: [
+        CommonModule,
+        MatSidenavModule,
+        MatToolbarModule,
+        MatListModule,
+        MatIconModule,
+        MatButtonModule,
+        FlexLayoutModule,
+        RouterModule,
+        MatMenuModule,
+        MatSlideToggleModule,
+        NotifierModule,
+        FormsModule,
+    ],
   exports: [
 
   ],
diff --git a/wg_dashboard_frontend/src/app/layout/layout/layout.component.html b/wg_dashboard_frontend/src/app/layout/layout/layout.component.html
index d156832..048b281 100644
--- a/wg_dashboard_frontend/src/app/layout/layout/layout.component.html
+++ b/wg_dashboard_frontend/src/app/layout/layout/layout.component.html
@@ -36,10 +36,11 @@
         <mat-menu #themeMenu="matMenu">
           <button mat-menu-item *ngFor="let theme of themes" (click)="setCurrentTheme(theme)">{{theme.name}}</button>
           <mat-slide-toggle
-            style="margin-top: 10px;"
+            style="margin-top: 10px; padding: 0 16px;"
             color="primary"
-            (click)="toggleDarkMode($event);"
-            [checked]="darkMode">
+            [(ngModel)]="darkMode"
+            (change)="toggleDarkMode()"
+            (click)="$event.stopPropagation();">
             Dark
           </mat-slide-toggle>
         </mat-menu>
diff --git a/wg_dashboard_frontend/src/app/layout/layout/layout.component.ts b/wg_dashboard_frontend/src/app/layout/layout/layout.component.ts
index 07d0761..1b5edec 100644
--- a/wg_dashboard_frontend/src/app/layout/layout/layout.component.ts
+++ b/wg_dashboard_frontend/src/app/layout/layout/layout.component.ts
@@ -40,22 +40,22 @@ export class LayoutComponent implements OnInit {
     public auth: AuthService,
     private comm: DataService,
     private cookieService: CookieService
-  ) {}
-  ngOnInit(): void {
-    console.log('Layout');
+  ) {
+    this.darkMode = (this.cookieService.get("darkMode") === 'true');
 
     if(this.cookieService.check("currentTheme")){
       this.currentTheme = JSON.parse(this.cookieService.get("currentTheme"));
-      this.darkMode = (this.cookieService.get("darkMode") === 'true');
     }else {
       this.currentTheme = { ... this.themes[0]}
     }
+    this.sendData()
 
   }
+  ngOnInit(): void {
+    console.log('Layout');
+  }
 
-  toggleDarkMode($event){
-    $event.stopPropagation();
-    this.darkMode = !this.darkMode;
+  toggleDarkMode(){
     this.cookieService.set("darkMode", String(this.darkMode));
     this.sendData();
   }