diff options
Diffstat (limited to 'ufund-ui')
7 files changed, 48 insertions, 8 deletions
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index 233096a..20e1676 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -21,6 +21,12 @@ <span>Most fulfilled needs</span> <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list> </div> + <div class="listCard"> + <span>Total physical contributions</span> + <ul> + <li id="physicalContent" *ngFor="let need of physicalTotal">{{need}} </li> + </ul> + </div> } @else { <h1>Unauthorized</h1> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index 2ab4db2..b73be44 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -16,10 +16,11 @@ import {userType} from '../../models/User'; export class DashboardComponent implements OnInit{ protected count = new BehaviorSubject<number | undefined>(undefined) - protected totalDonations = new BehaviorSubject<number | undefined>(undefined) + protected totalDonations = new BehaviorSubject<String | undefined>(undefined) protected totalNeeds = new BehaviorSubject<number | undefined>(undefined) protected fulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) protected mostFulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) + protected physicalTotal: string[] = [] constructor( protected authService: AuthService, @@ -30,15 +31,20 @@ export class DashboardComponent implements OnInit{ ngOnInit() { this.userService.getCount().subscribe(count => this.count.next(count)) + this.physicalTotal = [] 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.totalDonations.next(totalValue.toLocaleString()) + } else { + this.physicalTotal.push(need.name + ": " + need.current) } } + + this.physicalTotal.sort((a, b) => a < b ? -1 : 1); this.fulfilledNeeds.next(needs.filter(a => ((a.current / a.maxGoal)) >= 1)) needs.sort((a, b) => b.current/b.maxGoal - a.current/a.maxGoal) diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css index a1485a0..297a63a 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.css +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.css @@ -84,7 +84,12 @@ #footer { display: flex; flex-direction: row; - align-items: center; + align-items: start; gap: 20px; margin-bottom: 10px; } + +#totals { + display: flex; + flex-direction: column; +} diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html index a5fec6f..fa17b10 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.html +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.html @@ -3,7 +3,7 @@ <h1>Funding Basket</h1> <ng-template [ngIf]="(usersService.getBasket() | async)?.length"> <ng-template let-need #NLActions> - <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution" (input)="resetColor($event)"> + <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution" (input)="onInput($event)"> <button class="removeNeed" (click)="this.usersService.removeNeed(need.id)"> <span class="icon">delete</span>Remove from Basket </button> @@ -12,7 +12,12 @@ <br> <div id="footer"> <button class="button2" title="checkout" (click)="checkout()">Checkout</button> - <span id="running-total">Your current running total is: ${{runningTotal | async}}</span> + <div id="totals"> + <ul> + <li id="running-total">Your current running total is: ${{runningTotal | async}}</li> + <li id="physicalNeeds" *ngFor="let need of physicalTotal">{{need}}</li> + </ul> + </div> </div> </ng-template> <div *ngIf="!usersService.getBasket().getValue().length"> diff --git a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts index 3921ad2..920a7ef 100644 --- a/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts +++ b/ufund-ui/src/app/components/funding-basket/funding-basket.component.ts @@ -24,7 +24,8 @@ export class FundingBasketComponent implements OnInit { private toastService: ToastsService ) {} - public runningTotal = new BehaviorSubject(0) + protected runningTotal = new BehaviorSubject(0) + protected physicalTotal: string[] = [] @ViewChild("contribution") contribution?: Input; ngOnInit(): void { @@ -36,6 +37,9 @@ export class FundingBasketComponent implements OnInit { let order: { needID: number, quantity: number }[] = [] let isNotValid = false + this.runningTotal.next(0); + this.physicalTotal = [] + for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) { if (contribution.value == '' || contribution.valueAsNumber <= 0) { isNotValid = true @@ -60,18 +64,24 @@ export class FundingBasketComponent implements OnInit { this.toastService.sendToast(ToastType.INFO, "Checkout successful"); } - resetColor(ev: any) { + onInput(ev: any) { let total = 0 this.runningTotal.next(total); + this.physicalTotal = [] for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) { this.cupboardService.getNeed(+contribution.id).subscribe(need => { if (contribution.value != '' && need.type != GoalType.PHYSICAL) { total += contribution.valueAsNumber + } else if (contribution.value != '' && need.type == GoalType.PHYSICAL) { + this.physicalTotal.push(need.name + ": " + contribution.value) } this.runningTotal.next(total); + }) } + this.physicalTotal.sort((a, b) => a < b ? -1 : 1); + (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset") } 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 index 6dceee1..fc6b5b3 100644 --- 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 @@ -18,7 +18,8 @@ /*padding: 10px;*/ gap: 10px; justify-content: start; - overflow: auto; + overflow-x: auto; + overflow-y: clip; } .needEntry { diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 527408a..83cd82d 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -72,3 +72,10 @@ h1 { progress { min-width: 100%; } + +ul { + margin: 0; + display: flex; + flex-direction: column; + gap: 5px; +} |