store locale + theme in profile, add theme switch

This commit is contained in:
_Bastler 2021-04-03 13:38:25 +02:00
parent 40ade2ca06
commit 288bdb3956
6 changed files with 82 additions and 13 deletions

View File

@ -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>

View File

@ -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() {

View File

@ -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;

View File

@ -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 => {

View File

@ -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) {

View File

@ -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;
})
}