diff options
Diffstat (limited to 'ufund-ui/src/app/components/dashboard')
3 files changed, 95 insertions, 29 deletions
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index 185fdc2..54f362b 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.css +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css @@ -1,7 +1,45 @@ :host { display: flex; - flex-direction: column; + justify-content: center; +} + +#box { + display: flex; width: 800px; - align-self: center; - gap: 20px + flex-direction: column; + gap: 10px; +} + +#stats { + display: flex; + flex-direction: row; + gap: 10px; +} + +.card { + background-color: #2e2e2e; + width: 400px; + height: 130px; + border-radius: 5px; + padding: 10px; + display: flex; + flex-direction: column; + justify-content: space-between; + + h1 { + padding: 0 10px; + } +} + +.listCard { + display: flex; + flex-direction: column; + background-color: #2e2e2e; + border-radius: 5px; + padding: 10px; + gap: 10px; +} + +.content { + align-self: end; } diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index 2d7b4c3..233096a 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -1,10 +1,29 @@ +<div id="box"> + @if ((authService.getCurrentUserSubject() | async)?.type === userType.MANAGER) { + <h1>Admin Dashboard</h1> + <div id="stats"> + <div class="card"> + <span>Registered users</span> + <h1 class="content" *ngIf="count"> {{count | async}} </h1> + </div> -<h1>Admin Dashboard</h1> -<!--<app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/>--> -<!--<app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>--> -<!--<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/basket"/>--> -<span>_ Registered users</span> -<span>_ Needs with overflow</span> -<span>_ Needs in peoples baskets</span> -<span>_ Total monetary contributions</span> -<span>_ </span> + <div class="card"> + <span>Total monetary contributions</span> + <h1 class="content" *ngIf="totalDonations"> ${{totalDonations | async}} </h1> + </div> + </div> + + <div class="listCard"> + <span>Fulfilled needs</span> + <app-mini-need-list [needList]="fulfilledNeeds.getValue()" label="Fulfilled needs"> </app-mini-need-list> + </div> + <div class="listCard"> + <span>Most fulfilled needs</span> + <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list> + </div> + + } @else { + <h1>Unauthorized</h1> + <span>This page requires you to be logged in as an admin! <a routerLink="/login">Log In</a></span> + } +</div> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index c94b5c6..2ab4db2 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,10 +1,11 @@ import {Component, OnInit} from '@angular/core'; import {AuthService} from '../../services/auth.service'; import {Router} from '@angular/router'; -import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; -import {firstValueFrom} from 'rxjs'; import {UsersService} from '../../services/users.service'; +import {BehaviorSubject} from 'rxjs'; +import {GoalType, Need} from '../../models/Need'; +import {userType} from '../../models/User'; @Component({ selector: 'app-dashboard', @@ -14,9 +15,11 @@ import {UsersService} from '../../services/users.service'; }) export class DashboardComponent implements OnInit{ - topNeeds?: Need[] - almostThere?: Need[] - inBasket?: Need[] + protected count = new BehaviorSubject<number | undefined>(undefined) + protected totalDonations = new BehaviorSubject<number | undefined>(undefined) + protected totalNeeds = new BehaviorSubject<number | undefined>(undefined) + protected fulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) + protected mostFulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) constructor( protected authService: AuthService, @@ -26,20 +29,26 @@ export class DashboardComponent implements OnInit{ ) {} ngOnInit() { - let user = this.authService.getCurrentUser() - if(!localStorage.getItem("credential") && !user) { - this.router.navigate(['/login']) - return - } - - firstValueFrom(this.cupboardService.getNeeds()).then(r => { - this.topNeeds = r.sort((a, b) => b.current - a.current) - this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal) - }) + this.userService.getCount().subscribe(count => this.count.next(count)) + this.cupboardService.getNeeds().subscribe(needs => { + let totalValue = 0 + for (let need of needs) { + if (need.type === GoalType.MONETARY) { + totalValue += need.current + this.totalDonations.next(totalValue) + } + + } + this.fulfilledNeeds.next(needs.filter(a => ((a.current / a.maxGoal)) >= 1)) + needs.sort((a, b) => b.current/b.maxGoal - a.current/a.maxGoal) - this.userService.getBasket().subscribe(r => { - this.inBasket = r; + needs = needs.filter(a => a.current != 0) + this.totalNeeds.next(needs.length) + this.mostFulfilledNeeds.next(needs.slice(0, 5)) }) + + } + protected readonly userType = userType; } |