From 564601f7bc6f724050cea01611c2e3537b69514f Mon Sep 17 00:00:00 2001
From: Jan-Marlon Leibl <jleibl@proton.me>
Date: Wed, 5 Mar 2025 12:05:46 +0100
Subject: [PATCH] feat(navbar): add current user balance display in navbar

---
 frontend/src/app/service/user.service.ts          |  4 ++++
 .../components/navbar/navbar.component.html       |  4 ++++
 .../shared/components/navbar/navbar.component.ts  | 15 ++++++++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/service/user.service.ts b/frontend/src/app/service/user.service.ts
index ba6bead..b07cb15 100644
--- a/frontend/src/app/service/user.service.ts
+++ b/frontend/src/app/service/user.service.ts
@@ -14,6 +14,10 @@ export class UserService {
     return this.http.get<User | null>(`/backend/user/${id}`).pipe(catchError(() => EMPTY));
   }
 
+  public getCurrentUser(): Observable<User | null> {
+    return this.http.get<User | null>(`/backend/user`).pipe(catchError(() => EMPTY));
+  }
+
   public createUser(id: string, username: string): Observable<User> {
     return this.http.post<User>('/backend/user', {
       keycloakId: id,
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html
index b3e3df3..81fb5c1 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.html
+++ b/frontend/src/app/shared/components/navbar/navbar.component.html
@@ -10,7 +10,11 @@
         </div>
       </div>
 
+
       <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">
+          {{ balance | currency : 'EUR' : 'symbol' : '1.2-2' }}
+        </div>
         @if (!isLoggedIn) {
           <button (click)="login()" class="button-base px-4 py-1.5">Anmelden</button>
         }
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts
index 5014fec..9365d41 100644
--- a/frontend/src/app/shared/components/navbar/navbar.component.ts
+++ b/frontend/src/app/shared/components/navbar/navbar.component.ts
@@ -1,18 +1,31 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
+import { UserService } from '../../../service/user.service';
+import { firstValueFrom } from 'rxjs';
+import { CurrencyPipe } from '@angular/common';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, CurrencyPipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent {
   isMenuOpen = false;
   private keycloakService: KeycloakService = inject(KeycloakService);
   isLoggedIn = this.keycloakService.isLoggedIn();
+  private userService = inject(UserService);
+  private user = this.userService.getCurrentUser();
+  balance = 0;
+
+
+  async ngOnInit() {
+    const user = await firstValueFrom(this.user);
+    this.balance = user?.balance ?? 0;
+  }
+
 
   login() {
     try {