diff options
Diffstat (limited to 'ufund-ui/src/app/components/funding-basket')
3 files changed, 232 insertions, 101 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 e654711..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 @@ -1,11 +1,10 @@ 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'; +import {ToastsService, ToastType} from '../../services/toasts.service'; @Component({ selector: 'app-funding-basket', @@ -14,67 +13,82 @@ import { BehaviorSubject, catchError, firstValueFrom, Observable } from 'rxjs'; styleUrl: './funding-basket.component.css' }) export class FundingBasketComponent implements OnInit { - 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, + private toastService: ToastsService + ) {} - @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 is for login rerouting + ngOnInit(): void { + if (!this.authService.getCurrentUser()) { + this.router.navigate(['/login'], {queryParams: {redir: this.router.url}}); + return; + } + + this.usersService.refreshBasket(); + // this.usersService.removeNeed(); <- call this to remove } - this.usersService.refreshBasket(); - // this.usersService.removeNeed(); <- call this to remove - } + async checkout() { + this.isValid = true; + for (let c of document.querySelectorAll('.contribution')!) { + let contribution = c as HTMLInputElement; + contribution.setAttribute("style", ""); + if (contribution.value == '' || contribution.valueAsNumber <= 0) { + this.isValid = false; - 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.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<string>(); - })) - .subscribe((result) => { - if (result) { - console.log('need updated successfully'); - //this.needList?.refresh() - } else { - console.log('need update failed'); - } - }); - } - } - } + 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.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.toastService.sendToast(ToastType.INFO, 'Fields cannot be blank'); + } else if (ex.status == 400) { + this.toastService.sendToast(ToastType.INFO, 'Goal must be greater than 0'); + } else { + this.toastService.sendToast(ToastType.INFO, 'Error on creating need'); + } + return new Observable<string>(); + })) + .subscribe((result) => { + if (result) { + //this.needList?.refresh() + } else { + console.log('need update failed'); + } + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); + }); + } + } + } } |