From ea13cf6ab3b71ff5e83fca876ec71fec1f7b00ae Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 26 Mar 2025 15:38:46 -0400 Subject: Make frontend work with the new backend checkout system --- .../funding-basket/funding-basket.component.ts | 122 ++++++++++----------- 1 file changed, 60 insertions(+), 62 deletions(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 e654711..faa7e0b 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 @@ -1,11 +1,9 @@ import {Component, Input, OnInit, ViewChild} from '@angular/core'; -import {User} from '../../models/User'; -import { UsersService } from '../../services/users.service'; -import { Need } from '../../models/Need'; -import { NeedListComponent } from '../need-list/need-list.component'; -import { Router } from '@angular/router'; -import { CupboardService } from '../../services/cupboard.service'; -import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs'; +import {UsersService} from '../../services/users.service'; +import {Router} from '@angular/router'; +import {CupboardService} from '../../services/cupboard.service'; +import {catchError, firstValueFrom, Observable} from 'rxjs'; +import {AuthService} from '../../services/auth.service'; @Component({ selector: 'app-funding-basket', @@ -14,67 +12,67 @@ import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs'; styleUrl: './funding-basket.component.css' }) export class FundingBasketComponent implements OnInit { - statusText: any; + statusText: any; - constructor( - private router: Router, - protected cupboardService: CupboardService, - protected usersService: UsersService - ) {} + constructor( + private router: Router, + protected cupboardService: CupboardService, + protected usersService: UsersService, + private authService: AuthService + ) {} - @ViewChild("contribution") contribution?: Input; - @Input() isValid: boolean = true; + @ViewChild("contribution") contribution?: Input; + @Input() isValid: boolean = true; - // this is for login rerouting - ngOnInit(): void { - if (!this.usersService.getCurrentUser()) { - this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); - return; - } - - this.usersService.refreshBasket(); - // this.usersService.removeNeed(); <- call this to remove - } + // this is for login rerouting + ngOnInit(): void { + if (!this.authService.getCurrentUser()) { + this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); + return; + } - async checkout() { - this.isValid = true; - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { - let contribution = c as HTMLInputElement; - contribution.setAttribute("style",""); - if ( contribution.value == '' || contribution.valueAsNumber <= 0) { - this.isValid = false; - contribution.setAttribute("style","color: #ff0000"); - } + this.usersService.refreshBasket(); + // this.usersService.removeNeed(); <- call this to remove } - if (this.isValid) { - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { - let contribution = c as HTMLInputElement; - let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); - need.current +=+ contribution.value; - this.usersService.removeNeed(+need.id); - this.cupboardService.updateNeed(need.id, need) - .pipe(catchError((ex, r) => { - if (ex.status == 500) { - this.statusText.next('Fields cannot be blank'); - } else if (ex.status == 400) { - this.statusText.next('Goal must be greater than 0'); - } else { - this.statusText.next('Error on creating need'); - } - return new Observable(); - })) - .subscribe((result) => { - if (result) { - console.log('need updated successfully'); - //this.needList?.refresh() - } else { - console.log('need update failed'); - } - }); - } - } - } + async checkout() { + this.isValid = true; + for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + contribution.setAttribute("style", ""); + if (contribution.value == '' || contribution.valueAsNumber <= 0) { + this.isValid = false; + contribution.setAttribute("style", "color: #ff0000"); + } + } + if (this.isValid) { + for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); + need.current += +contribution.value; + this.usersService.removeNeed(+need.id); + this.cupboardService.checkoutNeed(need.id, +contribution.value) + .pipe(catchError((ex, _) => { + if (ex.status == 500) { + this.statusText.next('Fields cannot be blank'); + } else if (ex.status == 400) { + this.statusText.next('Goal must be greater than 0'); + } else { + this.statusText.next('Error on creating need'); + } + return new Observable(); + })) + .subscribe((result) => { + if (result) { + console.log('need updated successfully'); + //this.needList?.refresh() + } else { + console.log('need update failed'); + } + }); + } + } + } } -- cgit v1.2.3 From 9f31fea81818dae21f67b23a6004a3ca369f8e0d Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Mon, 31 Mar 2025 15:09:23 -0400 Subject: Added check to prevent redirect to login page --- ufund-ui/src/app/components/funding-basket/funding-basket.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 faa7e0b..5c5776f 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 @@ -26,7 +26,7 @@ export class FundingBasketComponent implements OnInit { // this is for login rerouting ngOnInit(): void { - if (!this.authService.getCurrentUser()) { + if (!localStorage.getItem("credential") && !this.authService.getCurrentUser()) { this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); return; } -- cgit v1.2.3 From f7a0ce90b0ead17ad4002108d7e868899954c69d Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Mon, 31 Mar 2025 17:28:20 -0400 Subject: Removed login check for now --- .../app/components/funding-basket/funding-basket.component.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 5c5776f..08515c2 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 @@ -26,7 +26,7 @@ export class FundingBasketComponent implements OnInit { // this is for login rerouting ngOnInit(): void { - if (!localStorage.getItem("credential") && !this.authService.getCurrentUser()) { + if (!this.authService.getCurrentUser()) { this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); return; } @@ -45,6 +45,15 @@ export class FundingBasketComponent implements OnInit { contribution.setAttribute("style", "color: #ff0000"); } } + // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1)) + // for (let c of this.usersService.getBasket().value) { + // if (c == null) { + // this.isValid = false; + // this.statusText.next("One or more needs have been deleted") + // } else { + // this.statusText.next("test") + // } + // } if (this.isValid) { for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { let contribution = c as HTMLInputElement; -- cgit v1.2.3 From 459c716d5429c040ac25435aab93f896f2fd79c3 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 17:51:47 -0400 Subject: use toasts in funding basket --- .../components/funding-basket/funding-basket.component.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 08515c2..24e2c0b 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 @@ -4,6 +4,7 @@ import {Router} from '@angular/router'; import {CupboardService} from '../../services/cupboard.service'; import {catchError, firstValueFrom, Observable} from 'rxjs'; import {AuthService} from '../../services/auth.service'; +import {ToastsService, ToastType} from '../../services/toasts.service'; @Component({ selector: 'app-funding-basket', @@ -18,7 +19,8 @@ export class FundingBasketComponent implements OnInit { private router: Router, protected cupboardService: CupboardService, protected usersService: UsersService, - private authService: AuthService + private authService: AuthService, + private toastService: ToastsService ) {} @ViewChild("contribution") contribution?: Input; @@ -42,7 +44,9 @@ export class FundingBasketComponent implements OnInit { contribution.setAttribute("style", ""); if (contribution.value == '' || contribution.valueAsNumber <= 0) { this.isValid = false; + contribution.setAttribute("style", "color: #ff0000"); + this.toastService.sendToast(ToastType.WARNING, "Invalid input in funding basket!") } } // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1)) @@ -63,11 +67,11 @@ export class FundingBasketComponent implements OnInit { this.cupboardService.checkoutNeed(need.id, +contribution.value) .pipe(catchError((ex, _) => { if (ex.status == 500) { - this.statusText.next('Fields cannot be blank'); + this.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank'); } else if (ex.status == 400) { - this.statusText.next('Goal must be greater than 0'); + this.toastService.sendToast(ToastType.INFO, 'Goal must be greater than 0'); } else { - this.statusText.next('Error on creating need'); + this.toastService.sendToast(ToastType.INFO, 'Error on creating need'); } return new Observable(); })) -- cgit v1.2.3 From 9c9708cc846dafe33234c38c37425468b9877514 Mon Sep 17 00:00:00 2001 From: Gunther6070 Date: Mon, 31 Mar 2025 21:32:55 -0400 Subject: Updated toast's types --- .../src/app/components/funding-basket/funding-basket.component.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 24e2c0b..54ae720 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 @@ -46,7 +46,11 @@ export class FundingBasketComponent implements OnInit { this.isValid = false; contribution.setAttribute("style", "color: #ff0000"); - this.toastService.sendToast(ToastType.WARNING, "Invalid input in funding basket!") + this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") + + setTimeout(() => { + contribution.setAttribute("style", "color: #ffffff"); + }, 3000); } } // if (this.usersService.getBasket().value != await firstValueFrom(this.usersService.getUser(1)) -- cgit v1.2.3 From aef3df6f9eacfe37479046826a9ca14310b72456 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 21:54:38 -0400 Subject: Apply css to funding basket --- .../funding-basket/funding-basket.component.css | 85 +++++++++++++++- .../funding-basket/funding-basket.component.html | 112 ++++++++++++++------- .../funding-basket/funding-basket.component.ts | 6 +- 3 files changed, 160 insertions(+), 43 deletions(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 3dec496..a17f710 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 @@ -1,7 +1,82 @@ -td, p { - border: 2px solid #000; +:host { + display: flex; + justify-content: center; +} + +#box { + display: flex; + width: 1000px; + flex-direction: column; + gap: 10px; +} + +.needEntry { + background-color: #2e2e2e; + display: flex; + flex-direction: column; border-radius: 5px; - padding: 5px; - margin: 5px; +} + +#needList { + display: flex; + flex-direction: column; + gap: 10px; + max-width: 1000px; +} + +.needName { + font-weight: bold; +} + +.needType { + text-transform: uppercase; + font-size: 10pt; +} + +.split { + display: flex; + flex-direction: row; + justify-content: space-between; + + + .left { + display: flex; + flex-direction: column; + } -} \ No newline at end of file + .right { + display: flex; + flex-direction: column; + align-items: end; + } +} + +.urgent { + font-size: 11pt; + background-color: rgba(255, 165, 0, 0.27); + color: rgba(255, 165, 0, 1); + padding: 2px; + border-radius: 5px; +} + +.prog { + display: flex; + flex-direction: column; +} + +.clickable { + padding: 10px; + background-color: #3a3a3a; + border-radius: 5px; + cursor: pointer; +} + +.clickable:hover { + background-color: #444444; +} + +.actionArea { + display: flex; + padding: 5px; + gap: 5px; +} 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 504e694..52b35c1 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 @@ -1,39 +1,81 @@ -

Funding Basket

-
- - {{ this.usersService.getBasket().getValue().length }} -
+ + + + -
-

There are no needs in the basket

-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Funding Basket

+ +
+
+
+
+
+ {{need.name}} + {{need.type}} +
+ +
+ URGENT + location_on{{need.location}} +
+
+ +
- - - - - - - - - - - -
- {{need.name}} -

Goal: {{need.maxGoal}}

-

Current: {{(need.current).toFixed(2)}}

-

How much to Contribute:

-
-
- +
+ + {{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%) + +
+ + + + +
+ +
+ +
-
-
-
-

Invalid input in funding basket!

- - {{statusText | async}} -
\ No newline at end of file +
+
+
+ + +
+ There are no needs in your basket! Browse the cupboard +
+
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 24e2c0b..646ef35 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 @@ -39,7 +39,7 @@ export class FundingBasketComponent implements OnInit { async checkout() { this.isValid = true; - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + for (let c of document.querySelectorAll('.contribution')!) { let contribution = c as HTMLInputElement; contribution.setAttribute("style", ""); if (contribution.value == '' || contribution.valueAsNumber <= 0) { @@ -59,7 +59,7 @@ export class FundingBasketComponent implements OnInit { // } // } if (this.isValid) { - for (let c of document.getElementById("funding-basket")?.querySelectorAll('.contribution')!) { + for (let c of document.querySelectorAll('.contribution')!) { let contribution = c as HTMLInputElement; let need = await firstValueFrom(this.cupboardService.getNeed(+contribution.id)); need.current += +contribution.value; @@ -77,11 +77,11 @@ export class FundingBasketComponent implements OnInit { })) .subscribe((result) => { if (result) { - console.log('need updated successfully'); //this.needList?.refresh() } else { console.log('need update failed'); } + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); }); } } -- cgit v1.2.3 From 4f8ddd385924b3c7c2b36acd28daf658ecc2cb09 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 21:57:32 -0400 Subject: Tweak validation in funding basket --- .../src/app/components/funding-basket/funding-basket.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 b3826be..ecf452a 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 @@ -45,11 +45,11 @@ export class FundingBasketComponent implements OnInit { if (contribution.value == '' || contribution.valueAsNumber <= 0) { this.isValid = false; - contribution.setAttribute("style", "color: #ff0000"); + contribution.setAttribute("style", "border-color: #ff0000"); this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") setTimeout(() => { - contribution.setAttribute("style", "color: #ffffff"); + contribution.setAttribute("style", "border-color: #ffffff"); }, 3000); } } -- cgit v1.2.3 From 896e1219526a19400c7143b274193f8b818d6156 Mon Sep 17 00:00:00 2001 From: sowgro Date: Mon, 31 Mar 2025 23:37:00 -0400 Subject: Commit half working changes to move to my laptop --- ufund-ui/src/app/components/funding-basket/funding-basket.component.ts | 1 - 1 file changed, 1 deletion(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 ecf452a..dcacca1 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 @@ -13,7 +13,6 @@ import {ToastsService, ToastType} from '../../services/toasts.service'; styleUrl: './funding-basket.component.css' }) export class FundingBasketComponent implements OnInit { - statusText: any; constructor( private router: Router, -- cgit v1.2.3 From 61daadccf89b2b84820386558ac454c0123d4299 Mon Sep 17 00:00:00 2001 From: sowgro Date: Tue, 1 Apr 2025 01:16:49 -0400 Subject: More css cleanup --- ufund-ui/src/app/components/funding-basket/funding-basket.component.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 a17f710..dff6e06 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 @@ -5,7 +5,7 @@ #box { display: flex; - width: 1000px; + width: 800px; flex-direction: column; gap: 10px; } -- cgit v1.2.3 From 0e9c0803e35a23ef2e873dc7ebf224a49a92f207 Mon Sep 17 00:00:00 2001 From: sowgro Date: Tue, 1 Apr 2025 02:16:04 -0400 Subject: Get everything working enough to go in main --- ufund-ui/src/app/components/funding-basket/funding-basket.component.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ufund-ui/src/app/components/funding-basket') 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 dff6e06..c46ef57 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 @@ -20,7 +20,7 @@ #needList { display: flex; flex-direction: column; - gap: 10px; + gap: 15px; max-width: 1000px; } -- cgit v1.2.3