From 288bdb395674c741e1ec5fb5539cfeee3aa351a2 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Sat, 3 Apr 2021 13:38:25 +0200
Subject: [PATCH] store locale + theme in profile, add theme switch

---
 src/app/app.component.html                    | 11 +++-
 src/app/app.component.ts                      | 64 ++++++++++++++++++-
 src/app/auth/auth.guard.ts                    |  2 +-
 src/app/pages/user/user.component.ts          |  2 +-
 src/app/services/profile.service.ts           | 12 ++--
 .../profilefields/profilefields.component.ts  |  4 +-
 6 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1d2e6a9..1fbad5e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -9,13 +9,18 @@
   <span class="spacer"></span>
   <ng-container>
 
-    <button *ngIf="locales.length > 1" mat-button [matMenuTriggerFor]="menu">
-      <mat-icon>language</mat-icon>
+    <button mat-button [matMenuTriggerFor]="menu">
+      <mat-icon>settings</mat-icon>
       <mat-icon>arrow_drop_down</mat-icon>
     </button>
     <mat-menu #menu="matMenu">
       <a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">{{'locale.' + locale + '.long' |
-        i18n}} <mat-icon  inline=true  *ngIf="locale == currentLocale">done</mat-icon></a>
+        i18n}} <mat-icon inline=true *ngIf="locale == currentLocale">done</mat-icon></a>
+      <a mat-menu-item>
+        <mat-slide-toggle (change)="darkThemeChange($event)" [checked]="darkTheme  == 'true'">
+          {{'profileField.name.darkTheme' | i18n}}
+        </mat-slide-toggle>
+      </a>
     </mat-menu>
   </ng-container>
 </mat-toolbar>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4adef26..a2218b1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,6 +2,7 @@ import {Component, HostListener} from '@angular/core';
 
 import {AuthService} from './services/auth.service';
 import {I18nService} from './services/i18n.service';
+import {ProfileService} from './services/profile.service';
 import {Router} from '@angular/router';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry} from '@angular/material/icon';
@@ -15,12 +16,20 @@ import {DateAdapter} from '@angular/material/core';
 
 export class AppComponent {
   opened = true;
+  darkTheme = "false";
   title = 'we.bstly';
   currentLocale: String;
   locales;
   auth;
 
-  constructor(private i18n: I18nService, private authService: AuthService, private router: Router, private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer, private _adapter: DateAdapter<any>) {
+  constructor(
+    private i18n: I18nService,
+    private authService: AuthService,
+    private profileService: ProfileService,
+    private router: Router,
+    private iconRegistry: MatIconRegistry,
+    private sanitizer: DomSanitizer,
+    private _adapter: DateAdapter<any>) {
     iconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/logo.svg'));
   }
 
@@ -42,13 +51,64 @@ export class AppComponent {
     }
 
     if(localStorage.getItem("bstly.darkTheme") == "true") {
+      this.darkTheme = "true";
       window.document.body.classList.add("dark-theme");
     }
   }
 
   setLocale(locale) {
     localStorage.setItem("bstly.locale", locale);
-    window.location.reload();
+
+    if(this.auth && this.auth.authenticated) {
+      this.profileService.getField("locale").subscribe((profileField: any) => {
+
+        if(profileField == null) {
+          profileField = {
+            "name": "locale",
+            "type": "TEXT",
+            "visibility": "PRIVATE"
+          }
+        }
+
+        profileField.value = locale;
+        this.profileService.createOrUpdate(profileField).subscribe((response) => {
+          window.location.reload();
+        })
+      })
+    } else {
+      window.location.reload();
+    }
+  }
+
+  darkThemeChange($event) {
+    if($event.checked) {
+      this.darkTheme = "true";
+    } else {
+      this.darkTheme = "false";
+    }
+
+    localStorage.setItem("bstly.darkTheme", this.darkTheme);
+
+    if(this.auth && this.auth.authenticated) {
+      this.profileService.getField("darkTheme").subscribe((profileField: any) => {
+
+        if(profileField == null) {
+          profileField = {
+            "name": "darkTheme",
+            "type": "BOOL",
+            "visibility": "PRIVATE"
+          }
+        }
+
+        profileField.value = this.darkTheme;
+        this.profileService.createOrUpdate(profileField).subscribe((response) => {
+          window.location.reload();
+        })
+      })
+    } else {
+      window.location.reload();
+    }
+
   }
 
   logout() {
diff --git a/src/app/auth/auth.guard.ts b/src/app/auth/auth.guard.ts
index 947383d..a7c48bc 100644
--- a/src/app/auth/auth.guard.ts
+++ b/src/app/auth/auth.guard.ts
@@ -49,7 +49,7 @@ export class AuthenticatedGuard implements CanActivate {
             }
 
 
-            this.profileService.getAll(["locale", "darkTheme"]).subscribe((profileFields: any) => {
+            this.profileService.get(["locale", "darkTheme"]).subscribe((profileFields: any) => {
                 let updateLocale = false;
                 let darktheme = 'false';
                 let updateTheme = false;
diff --git a/src/app/pages/user/user.component.ts b/src/app/pages/user/user.component.ts
index 3b672df..67db0c5 100644
--- a/src/app/pages/user/user.component.ts
+++ b/src/app/pages/user/user.component.ts
@@ -21,7 +21,7 @@ export class UserComponent implements OnInit {
 
   async ngOnInit() {
     this.username = this.route.snapshot.paramMap.get('username');
-    this.profileService.getAllForUser(this.username).subscribe((data: any) => {
+    this.profileService.getForUser(this.username).subscribe((data: any) => {
       this.success = true;
       this.model = data;
     }, error => {
diff --git a/src/app/services/profile.service.ts b/src/app/services/profile.service.ts
index da30847..8f19b33 100644
--- a/src/app/services/profile.service.ts
+++ b/src/app/services/profile.service.ts
@@ -11,16 +11,20 @@ export class ProfileService {
     constructor(private http: HttpClient) {
     }
 
-    getAll(filter?: any[]) {
+    get(filter?: any[]) {
         return this.http.get(environment.apiUrl + "/profiles" + (filter ? "?filter=" + filter.join(",") : ""));
     }
 
-    getAllForUser(username) {
+    getField(name) {
+        return this.http.get(environment.apiUrl + "/profiles/field/" + name);
+    }
+
+    getForUser(username) {
         return this.http.get(environment.apiUrl + "/profiles/" + username);
     }
 
-    getForUser(username, name) {
-        return this.http.get(environment.apiUrl + "/profiles/" + username + "/" + name);
+    getFieldForUser(username, name) {
+        return this.http.get(environment.apiUrl + "/profiles/" + username + "/field/" + name);
     }
 
     createOrUpdate(profileModel) {
diff --git a/src/app/ui/profilefields/profilefields.component.ts b/src/app/ui/profilefields/profilefields.component.ts
index b8e3d57..1e007c7 100644
--- a/src/app/ui/profilefields/profilefields.component.ts
+++ b/src/app/ui/profilefields/profilefields.component.ts
@@ -32,11 +32,11 @@ export class ProfileFieldsComponent implements OnInit {
 
   update() {
     if(this.username) {
-      this.profileService.getAllForUser(this.username).subscribe((data: any) => {
+      this.profileService.getForUser(this.username).subscribe((data: any) => {
         this.profileFields = data.profileFields;
       })
     } else {
-      this.profileService.getAll().subscribe((data: any) => {
+      this.profileService.get().subscribe((data: any) => {
         this.profileFields = data;
       })
     }