diff options
Diffstat (limited to 'ufund-ui/src/app/components/funding-basket')
3 files changed, 25 insertions, 5 deletions
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 7158194..50d6abe 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 78ce958..8d23d7b 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") } |