generated from flo/template-frontend
97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
import { Component, OnInit } from "@angular/core";
|
|
import { initFlowbite } from "flowbite";
|
|
import { AuthService } from "../../services/auth.service";
|
|
import { UserStateResponse } from "../../models/user-state-request.model";
|
|
import { Router } from "@angular/router";
|
|
import { filter, map } from "rxjs";
|
|
import { AppService } from "../../services/app.service";
|
|
|
|
interface NavigationLink {
|
|
label: string;
|
|
routerLink: string;
|
|
}
|
|
|
|
interface UserMenuButton {
|
|
label: Function | string;
|
|
routerLink: string | undefined;
|
|
clickCallback: Function | undefined;
|
|
}
|
|
|
|
@Component({
|
|
selector: "app-navigation",
|
|
templateUrl: "./navigation.component.html",
|
|
styleUrls: ["./navigation.component.scss"],
|
|
})
|
|
export class NavigationComponent implements OnInit {
|
|
navigationLinks: NavigationLink[] = [
|
|
{ routerLink: "/", label: "Startseite" },
|
|
{ routerLink: "/settings", label: "Völker" },
|
|
];
|
|
|
|
usermenuButtons: UserMenuButton[] = [
|
|
{
|
|
label: "Einstellungen",
|
|
routerLink: "/settings",
|
|
clickCallback: undefined,
|
|
},
|
|
{
|
|
label: () => (this.darkMode ? "Hell" : "Dunkel"),
|
|
routerLink: undefined,
|
|
clickCallback: () => {
|
|
this.toggleDarkmode();
|
|
},
|
|
},
|
|
{
|
|
label: "Ausloggen",
|
|
routerLink: undefined,
|
|
clickCallback: () => {
|
|
this.logout();
|
|
},
|
|
},
|
|
];
|
|
|
|
state: UserStateResponse | undefined | null;
|
|
darkMode: boolean;
|
|
|
|
constructor(
|
|
private authService: AuthService,
|
|
private appService: AppService,
|
|
private router: Router
|
|
) {
|
|
this.darkMode = this.appService.darkMode;
|
|
this.state = this.authService.currentState$.value;
|
|
this.authService.currentState$
|
|
.pipe(filter((state) => state === undefined))
|
|
.subscribe((state) => {
|
|
this.router.navigateByUrl("/auth/login");
|
|
});
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
initFlowbite();
|
|
}
|
|
|
|
logout(): void {
|
|
this.authService.logout();
|
|
}
|
|
|
|
toggleDarkmode() {
|
|
this.appService.toggleDarkMode();
|
|
this.darkMode = this.appService.darkMode;
|
|
}
|
|
|
|
clickUserMenuButtonLabel(button: UserMenuButton) {
|
|
if (button.clickCallback !== undefined) {
|
|
button.clickCallback();
|
|
}
|
|
}
|
|
|
|
getUserMenuButtonLabel(button: UserMenuButton) {
|
|
if (typeof button.label === "function") {
|
|
return button.label();
|
|
} else {
|
|
return button.label;
|
|
}
|
|
}
|
|
}
|