SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 64 Wiki Activity Actions

feat(navbar): update balance display and use signal for state

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-03-05 12:07:20 +01:00
parent 564601f7bc
commit 454e99f812
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
2 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/app/shared/components/navbar/navbar.component.html
View file

@ -10,10 +10,11 @@
</div> </div>
</div> </div>
<div class="hidden md:flex items-center space-x-4"> <div class="hidden md:flex items-center space-x-4">
<div class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"> <div
{{ balance | currency : 'EUR' : 'symbol' : '1.2-2' }} class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
>
<span>Balance: {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
</div> </div>
@if (!isLoggedIn) { @if (!isLoggedIn) {
<button (click)="login()" class="button-base px-4 py-1.5">Anmelden</button> <button (click)="login()" class="button-base px-4 py-1.5">Anmelden</button>

18
frontend/src/app/shared/components/navbar/navbar.component.ts
View file

@ -1,10 +1,9 @@
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { KeycloakService } from 'keycloak-angular'; import { KeycloakService } from 'keycloak-angular';
import { UserService } from '../../../service/user.service'; import { UserService } from '../../../service/user.service';
import { firstValueFrom } from 'rxjs';
import { CurrencyPipe } from '@angular/common';
import { CurrencyPipe } from '@angular/common';
@Component({ @Component({
selector: 'app-navbar', selector: 'app-navbar',
templateUrl: './navbar.component.html', templateUrl: './navbar.component.html',
@ -12,21 +11,22 @@ import { CurrencyPipe } from '@angular/common';
imports: [RouterModule, CurrencyPipe], imports: [RouterModule, CurrencyPipe],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class NavbarComponent { export class NavbarComponent implements OnInit {
isMenuOpen = false; isMenuOpen = false;
private keycloakService: KeycloakService = inject(KeycloakService); private keycloakService: KeycloakService = inject(KeycloakService);
isLoggedIn = this.keycloakService.isLoggedIn(); isLoggedIn = this.keycloakService.isLoggedIn();
private userService = inject(UserService); private userService = inject(UserService);
private user = this.userService.getCurrentUser(); private user = this.userService.getCurrentUser();
balance = 0;
public balance = signal(0);
async ngOnInit() { ngOnInit() {
const user = await firstValueFrom(this.user); this.user.subscribe((user) => {
this.balance = user?.balance ?? 0; this.balance.set(user?.balance ?? 0);
});
} }
login() { login() {
try { try {
const baseUrl = window.location.origin; const baseUrl = window.location.origin;