diff options
Diffstat (limited to 'ufund-ui')
7 files changed, 202 insertions, 62 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..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 @@ -<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 54ae720..b3826be 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) { @@ -63,7 +63,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; @@ -81,11 +81,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"); }); } } diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css index 1936b38..d4be5fa 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.css +++ b/ufund-ui/src/app/components/need-list/need-list.component.css @@ -5,11 +5,10 @@ } .needEntry { - background-color: #3a3a3a; + background-color: #2e2e2e; display: flex; flex-direction: column; border-radius: 5px; - padding: 10px; } #needList { @@ -59,6 +58,7 @@ select { flex-direction: row; justify-content: space-between; + .left { display: flex; flex-direction: column; @@ -83,3 +83,20 @@ select { 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/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html index c325320..84f83d6 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.html +++ b/ufund-ui/src/app/components/need-list/need-list.component.html @@ -26,37 +26,38 @@ <div id="needList"> <div *ngFor="let need of searchResults" class="needEntry"> - <div [routerLink]="'/need/' + need.id"> + <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> + <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> - <button *ngIf="isHelper()" (click)="add(need)">Add To Basket</button> + + <div class="actionArea"> + <button *ngIf="isHelper()" (click)="add(need)"> + <span class="icon">add</span>Add To Basket + </button> <button *ngIf="isManager()" (click)="select(need)"> - <span class="icon">edit</span> + <span class="icon">edit</span>Delete Need </button> <button *ngIf="isManager()" (click)="delete(need.id)" > - <span class="icon">delete</span> + <span class="icon">delete</span>Edit Need </button> </div> </div> diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts index 47114c3..7a9d647 100644 --- a/ufund-ui/src/app/components/need-list/need-list.component.ts +++ b/ufund-ui/src/app/components/need-list/need-list.component.ts @@ -1,11 +1,11 @@ -import {Component , Output, EventEmitter} from '@angular/core'; -import { NgForm } from '@angular/forms'; +import {Component, EventEmitter, Output} from '@angular/core'; import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; -import { UsersService } from '../../services/users.service'; -import { userType } from '../../models/User'; +import {UsersService} from '../../services/users.service'; +import {userType} from '../../models/User'; import {AuthService} from '../../services/auth.service'; import {catchError, of} from 'rxjs'; +import {ToastsService, ToastType} from '../../services/toasts.service'; interface sortAlgo { (a: Need,b: Need): number; @@ -84,7 +84,8 @@ export class NeedListComponent { constructor( private cupboardService: CupboardService, private usersService: UsersService, - private authService: AuthService + private authService: AuthService, + private toastService: ToastsService ) {} refresh() { @@ -196,7 +197,7 @@ export class NeedListComponent { this.usersService.refreshBasket(); }); } else { - window.alert("This need is already in your basket!") + this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") } diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index b152e61..f515154 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -38,6 +38,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button { border-radius: 9999px; border-style: none; background-color: light-dark(#ebebeb, #3a3a3a); + display: flex; + gap: 5px; + text-align: center; + justify-content: center; &:hover { background-color: light-dark(#e1e1e1, #444444); |