Added running total to checkout

3 files changed, 21 insertions, 2 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 c46ef57..a1485a0 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
@@ -80,3 +80,11 @@
     padding: 5px;
     gap: 5px;
 }
+
+#footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 10px;
+}
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 bba66a3..67e1083 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
@@ -36,6 +36,7 @@
         <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>
     </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 a39b4f3..a0ba609 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
@@ -2,9 +2,10 @@ import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {UsersService} from '../../services/users.service';
 import {Router} from '@angular/router';
 import {CupboardService} from '../../services/cupboard.service';
-import {firstValueFrom} from 'rxjs';
+import {BehaviorSubject, firstValueFrom} from 'rxjs';
 import {AuthService} from '../../services/auth.service';
 import {ToastsService, ToastType} from '../../services/toasts.service';
+import {GoalType} from '../../models/Need';
 
 @Component({
     selector: 'app-funding-basket',
@@ -22,6 +23,7 @@ export class FundingBasketComponent implements OnInit {
         private toastService: ToastsService
     ) {}
 
+    public runningTotal = new BehaviorSubject(0)
     @ViewChild("contribution") contribution?: Input;
 
     // this is for login rerouting
@@ -63,9 +65,17 @@ export class FundingBasketComponent implements OnInit {
     }
 
     resetColor(ev: any) {
+        let total = 0
+        this.runningTotal.next(total);
         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
+                }
+                this.runningTotal.next(total);
+            })
         }
+
         (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset")
     }
 }