diff options
Diffstat (limited to 'ufund-ui/src/app/components/funding-basket')
3 files changed, 182 insertions, 49 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 3dec496..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 @@ -1,7 +1,82 @@ -td, p { - border: 2px solid #000; +:host { + display: flex; + justify-content: center; +} + +#box { + display: flex; + width: 800px; + 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: 15px; + 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 @@ -<h1>Funding Basket</h1> -<div id="needCount"> - <label for="needCount">Needs in Basket:</label> - <span>{{ this.usersService.getBasket().getValue().length }}</span> -</div> +<!--<div id="needCount">--> +<!-- <label for="needCount">Needs in Basket:</label>--> +<!-- <span>{{ this.usersService.getBasket().getValue().length }}</span>--> +<!--</div>--> -<div *ngIf="this.usersService.getBasket().getValue().length == 0"> - <h2>There are no needs in the basket</h2> -</div> +<!--<div *ngIf="this.usersService.getBasket().getValue().length == 0">--> +<!-- <h2>There are no needs in the basket</h2>--> +<!--</div>--> + +<!--<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0">--> +<!-- <thead>--> +<!-- <tr>--> +<!-- <th class="need"></th>--> +<!-- </tr>--> +<!-- </thead>--> +<!-- <tbody>--> +<!-- <tr *ngFor="let need of usersService.getBasket().getValue()">--> +<!-- <td>--> +<!-- <a routerLink="/need/{{need.id}}">{{need.name}}</a>--> +<!-- <p>Goal: {{need.maxGoal}}</p>--> +<!-- <p>Current: {{(need.current).toFixed(2)}}</p>--> +<!-- <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p>--> +<!-- <br>--> +<!-- <div>--> +<!-- <button type="button" class="removeNeed" title="delete need"--> +<!-- (click)="this.usersService.removeNeed(need.id)">Remove Need</button>--> +<!-- </div>--> +<!-- </td>--> +<!-- </tr>--> +<!-- </tbody>--> +<!--</table>--> +<!--<br>--> +<div id="box"> + <h1>Funding Basket</h1> + <ng-template [ngIf]="usersService.getBasket().getValue().length"> + <div id="needList"> + <div *ngFor="let need of usersService.getBasket().getValue()" class="needEntry"> + <div [routerLink]="'/need/' + need.id" class="clickable"> + <div class="split"> + <div class="left"> + <span class="needName">{{need.name}}</span> + <span class="needType">{{need.type}}</span> + </div> + + <div class="right"> + <span *ngIf="need.urgent" class="urgent">URGENT</span> + <span *ngIf="need.location"><span class="icon">location_on</span>{{need.location}}</span> + </div> + </div> + + <br> -<table class="needs" id="funding-basket" *ngIf="this.usersService.getBasket().getValue().length != 0"> - <thead> - <tr> - <th class="need"></th> - </tr> - </thead> - <tbody> - <tr *ngFor="let need of usersService.getBasket().getValue()"> - <td> - <a routerLink="/need/{{need.id}}">{{need.name}}</a> - <p>Goal: {{need.maxGoal}}</p> - <p>Current: {{(need.current).toFixed(2)}}</p> - <p>How much to Contribute: <input type="number" placeholder="insert value" min="1" id={{need.id}} class="contribution"></p> - <br> - <div> - <button type="button" class="removeNeed" title="delete need" - (click)="this.usersService.removeNeed(need.id)">Remove Need</button> + <div class="prog"> + <span id="hover-status-label-{{need.id}}"> </span> + <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> + <progress [value]="need.current" [max]="need.maxGoal"></progress> + </div> + + <!-- <div class="description">--> + <!-- {{need.description}}--> + <!-- </div>--> + </div> + + <div class="actionArea"> + <input type="number" placeholder="Quantity" min="1" id={{need.id}} class="contribution"> + <button class="removeNeed" title="delete need" (click)="this.usersService.removeNeed(need.id)"> + <span class="icon">delete</span> Remove from Basket + </button> </div> - </td> - </tr> - </tbody> -</table> -<br> -<div> - <p *ngIf="!isValid">Invalid input in funding basket!</p> - <button type="submit" class="checkout" title="checkout" (click)="checkout()">Checkout</button> - <span *ngIf="statusText">{{statusText | async}}</span> -</div>
\ No newline at end of file + </div> + </div> + <br> + <div id="footer"> + <button class="button2" title="checkout" (click)="checkout()">Checkout</button> + </div> + </ng-template> + <div *ngIf="!usersService.getBasket().getValue().length"> + <span>There are no needs in your basket! </span><a routerLink="/cupboard">Browse the cupboard</a> + </div> +</div> 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..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 @@ -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', @@ -12,13 +13,13 @@ import {AuthService} from '../../services/auth.service'; styleUrl: './funding-basket.component.css' }) export class FundingBasketComponent implements OnInit { - statusText: any; constructor( private router: Router, protected cupboardService: CupboardService, protected usersService: UsersService, - private authService: AuthService + private authService: AuthService, + private toastService: ToastsService ) {} @ViewChild("contribution") contribution?: Input; @@ -37,16 +38,31 @@ 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) { 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", "border-color: #ffffff"); + }, 3000); } } + // 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')!) { + 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; @@ -54,21 +70,21 @@ 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<string>(); })) .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"); }); } } |