diff options
Diffstat (limited to 'ufund-ui/src/app')
7 files changed, 130 insertions, 8 deletions
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts index 9f525fe..f1d6184 100644 --- a/ufund-ui/src/app/app.module.ts +++ b/ufund-ui/src/app/app.module.ts @@ -14,6 +14,7 @@ import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; import {DashboardComponent} from './components/dashboard/dashboard.component'; import {CommonModule} from '@angular/common'; import {LoginComponent} from './components/login/login.component'; +import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component'; @NgModule({ declarations: [ @@ -25,6 +26,7 @@ import {LoginComponent} from './components/login/login.component'; NeedListComponent, DashboardComponent, LoginComponent, + MiniNeedListComponent, ], imports: [ BrowserModule, diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index e69de29..9db015e 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.css +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css @@ -0,0 +1,7 @@ +:host { + display: flex; + flex-direction: column; + width: 1200px; + align-self: center; + gap: 20px +} diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index a1151b7..330d1f3 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -1,4 +1,5 @@ -<h1>Dashboard</h1> -<app-cupboard></app-cupboard> -<app-funding-basket *ngIf="!isManager()"></app-funding-basket>
\ No newline at end of file +<h1>Your 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="/cupboard"/> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index a0ad566..165c7ba 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,6 +1,11 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {userType} from '../../models/User'; import {AuthService} from '../../services/auth.service'; +import {Router} from '@angular/router'; +import {Need} from '../../models/Need'; +import {CupboardService} from '../../services/cupboard.service'; +import {UsersService} from '../../services/users.service'; +import {firstValueFrom} from 'rxjs'; @Component({ selector: 'app-dashboard', @@ -8,14 +13,30 @@ import {AuthService} from '../../services/auth.service'; templateUrl: './dashboard.component.html', styleUrl: './dashboard.component.css' }) -export class DashboardComponent { +export class DashboardComponent implements OnInit{ + + topNeeds?: Need[] + almostThere?: Need[] + inBasket?: Need[] + constructor( protected authService: AuthService, + protected router: Router, + protected cupboardService: CupboardService ) {} - isManager() { - const type = this.authService.getCurrentUser()?.type; - return type === ("MANAGER" as unknown as userType); + ngOnInit() { + let user = this.authService.getCurrentUser() + if(!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.inBasket = r.filter(n => n.id in user?.basket) + }) } } diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css new file mode 100644 index 0000000..8a3b6a7 --- /dev/null +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css @@ -0,0 +1,55 @@ +:host { + display: flex; + flex-direction: column; + border: solid rgba(255, 255, 255, 0.5) 1px; + border-radius: 5px; +} + +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: solid rgba(255, 255, 255, 0.5) 1px; + padding: 10px; + + a { + display: flex; + } +} + +#needList { + display: flex; + flex-direction: row; + padding: 10px; + gap: 10px; + justify-content: start; +} + +.needEntry { + padding: 10px; + display: flex; + flex-direction: column; + background-color: #3a3a3a; + border-radius: 5px; + height: 175px; + width: 200px; + justify-content: space-between; + + div { + display: flex; + flex-direction: column; + } + + user-select: none; + cursor: pointer; +} + +.needName { + font-weight: bold; +} + +.needType { + text-transform: uppercase; + /*font-weight: 300;*/ + font-size: 10pt; +} diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html new file mode 100644 index 0000000..a2de9e5 --- /dev/null +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html @@ -0,0 +1,17 @@ +<div id="header"> + <span>{{jtitle}}</span> + <a [routerLink]="url">Show All<span class="icon">arrow_forward_ios</span></a> +</div> + +<div id="needList"> + <div class="needEntry" *ngFor="let need of needList" [routerLink]="'/need/'+need.id"> + <div> + <span class="needName">{{need.name}}</span> + <span class="needType">{{need.type}}</span> + </div> + <div> + <span>{{need.current}}/{{need.maxGoal}}</span> + <progress [max]="need.maxGoal" [value]="need.current"></progress> + </div> + </div> +</div> diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts new file mode 100644 index 0000000..c909ae6 --- /dev/null +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts @@ -0,0 +1,19 @@ +import {Component, Input} from '@angular/core'; +import {Need} from '../../models/Need'; + +@Component({ + selector: 'app-mini-need-list', + standalone: false, + templateUrl: './mini-need-list.component.html', + styleUrl: './mini-need-list.component.css' +}) +export class MiniNeedListComponent { + + @Input() needList?: Need[] + @Input() jtitle?: string + @Input() url?: string + + constructor( + + ) {} +} |