diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index 2cdb39b..5064d61 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -2,20 +2,25 @@
Chärtli
- 1/420
+
+ {{ (this.dashboardData$ | async)?.myUniqueCardsCount }} /
+ {{ (this.dashboardData$ | async)?.allCardsCount }}
+
Rang
- 69
+ {{ this.myRank }}
Top 5
- - Big P
- - Stefan Hüsemann
- - Larissa Zollinger
- - Christoph Weber
- - Kevin Duss
+ -
+ {{ ranking.displayName }}
+
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index 3a34657..e168209 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,7 +1,39 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable, zip } from 'rxjs';
+import { Dashboard } from 'src/app/models/dashboard.model';
+import { DashboardService } from 'src/app/services/dashboard.service';
+import { selectProfile } from 'src/app/state/profile/profile.selectors';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
})
-export class DashboardComponent {}
+export class DashboardComponent implements OnInit {
+ dashboardData$?: Observable;
+ myRank?: number;
+
+ constructor(
+ private readonly dashboardService: DashboardService,
+ private readonly store: Store,
+ ) {}
+
+ ngOnInit(): void {
+ this.dashboardData$ = this.dashboardService.getDashboardData(
+ this.store.select(selectProfile),
+ );
+
+ zip([this.dashboardData$, this.store.select(selectProfile)]).subscribe(
+ ([dashboardData, user]) => {
+ if (!user) {
+ this.myRank = undefined;
+ } else {
+ this.myRank = this.dashboardService.getRankOf(
+ user.userPrincipalName,
+ dashboardData.rankingList,
+ );
+ }
+ },
+ );
+ }
+}
diff --git a/src/app/models/dashboard.model.ts b/src/app/models/dashboard.model.ts
new file mode 100644
index 0000000..d63bfc5
--- /dev/null
+++ b/src/app/models/dashboard.model.ts
@@ -0,0 +1,14 @@
+export interface Dashboard {
+ myCardsCount: number;
+ myUniqueCardsCount: number;
+ allCardsCount: number;
+ duplicateCardsCount: number;
+ rankingList: Ranking[];
+}
+
+export interface Ranking {
+ rank: number;
+ cardsCount: number;
+ displayName: string;
+ userEmail: string;
+}
diff --git a/src/app/services/dashboard.service.ts b/src/app/services/dashboard.service.ts
new file mode 100644
index 0000000..7e20062
--- /dev/null
+++ b/src/app/services/dashboard.service.ts
@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Dashboard, Ranking } from '../models/dashboard.model';
+import { environment } from 'src/environments/environment';
+import { Profile } from '../models/profile.model';
+import { Observable, of, switchMap, defaultIfEmpty } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class DashboardService {
+ constructor(private readonly http: HttpClient) {}
+
+ getDashboardData(user: Observable): Observable {
+ return user.pipe(
+ switchMap((user) => {
+ // Return empty dashboard if no user is found
+ if (user === null) {
+ return of({
+ myCardsCount: 0,
+ myUniqueCardsCount: 0,
+ allCardsCount: 0,
+ duplicateCardsCount: 0,
+ rankingList: [],
+ });
+ }
+
+ return this.http.get(`${environment.backendUri}/overview`);
+ }),
+ );
+ }
+
+ getRankOf(userEmail: string, rankingList: Ranking[]): number {
+ return (
+ rankingList.find((ranking) => ranking.userEmail === userEmail)?.rank ?? 0
+ );
+ }
+}