diff options
Diffstat (limited to '')
3 files changed, 27 insertions, 6 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 4764b0f..cff2bbe 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..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,16 +3,21 @@ <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> </ng-template> - <app-need-list [uid]="1" [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/> + <app-need-list [itemsPerPage]="Infinity" [uid]="1" [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/> <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..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,21 +64,28 @@ 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") } protected readonly of = of; protected readonly userType = userType; + protected readonly Infinity = Infinity; } |