diff options
Diffstat (limited to '')
17 files changed, 143 insertions, 102 deletions
diff --git a/ufund-ui/public/placeholder.png b/ufund-ui/public/placeholder.png Binary files differnew file mode 100644 index 0000000..5b86fb7 --- /dev/null +++ b/ufund-ui/public/placeholder.png diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index 2d7b4c3..2af467c 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -4,7 +4,11 @@ <!--<app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/>--> <!--<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/basket"/>--> <span>_ Registered users</span> -<span>_ Needs with overflow</span> -<span>_ Needs in peoples baskets</span> +<span *ngIf="count"> {{count | async}} </span> +<span>_ Fulfilled needs</span> +<app-mini-need-list [needList]="fulfilledNeeds.getValue()" jtitle="Fulfilled needs"> </app-mini-need-list> +<span>_ Most fulfilled needs</span> +<app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" jtitle="Most fulfilled"> </app-mini-need-list> <span>_ Total monetary contributions</span> +<span *ngIf="totalDonations">${{totalDonations | async}} </span> <span>_ </span> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index c94b5c6..9bf7627 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,10 +1,10 @@ import {Component, OnInit} from '@angular/core'; import {AuthService} from '../../services/auth.service'; import {Router} from '@angular/router'; -import {Need} from '../../models/Need'; import {CupboardService} from '../../services/cupboard.service'; -import {firstValueFrom} from 'rxjs'; import {UsersService} from '../../services/users.service'; +import {BehaviorSubject} from 'rxjs'; +import {GoalType, Need} from '../../models/Need'; @Component({ selector: 'app-dashboard', @@ -14,9 +14,11 @@ import {UsersService} from '../../services/users.service'; }) export class DashboardComponent implements OnInit{ - topNeeds?: Need[] - almostThere?: Need[] - inBasket?: Need[] + protected count = new BehaviorSubject<number | undefined>(undefined) + protected totalDonations = new BehaviorSubject<number | undefined>(undefined) + protected totalNeeds = new BehaviorSubject<number | undefined>(undefined) + protected fulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) + protected mostFulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) constructor( protected authService: AuthService, @@ -32,14 +34,25 @@ export class DashboardComponent implements OnInit{ return } - firstValueFrom(this.cupboardService.getNeeds()).then(r => { - this.topNeeds = r.sort((a, b) => b.current - a.current) - this.almostThere = r.sort((a, b) => a.current/a.maxGoal - b.current/b.maxGoal) - }) + this.userService.getCount().subscribe(count => this.count.next(count)) + this.cupboardService.getNeeds().subscribe(needs => { + let totalValue = 0 + for (let need of needs) { + if (need.type === GoalType.MONETARY) { + totalValue += need.current + this.totalDonations.next(totalValue) + } + + } + this.fulfilledNeeds.next(needs.filter(a => ((a.current / a.maxGoal)) >= 1)) + needs.sort((a, b) => b.current/b.maxGoal - a.current/a.maxGoal) - this.userService.getBasket().subscribe(r => { - this.inBasket = r; + needs = needs.filter(a => a.current != 0) + this.totalNeeds.next(needs.length) + this.mostFulfilledNeeds.next(needs.slice(0, 5)) }) + + } } 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 fcd5437..3f840e1 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 @@ -3,7 +3,7 @@ <h1>Funding Basket</h1> <ng-template [ngIf]="(usersService.getBasket() | async)?.length"> <ng-template let-need #NLActions> - <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution"> + <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution" (input)="resetColor($event)"> <button class="removeNeed" (click)="this.usersService.removeNeed(need.id)"> <span class="icon">delete</span>Remove from Basket </button> 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 767327e..c807271 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 @@ -24,68 +24,44 @@ export class FundingBasketComponent implements OnInit { ) {} @ViewChild("contribution") contribution?: Input; - @Input() isValid: boolean = true; ngOnInit(): void { 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; + let order: { needID: number, quantity: number }[] = [] + let isNotValid = false + for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) { + if (contribution.value == '' || contribution.valueAsNumber <= 0) { + isNotValid = true contribution.setAttribute("style", "border-color: #ff0000"); - this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") - - setTimeout(() => { - contribution.setAttribute("style", "border-color: #ffffff"); - }, 3000); } + order.push({needID: +contribution.id, quantity: contribution.valueAsNumber}); } - // 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.ERROR, 'Fields cannot be blank'); - } else if (ex.status == 400) { - this.toastService.sendToast(ToastType.ERROR, ex.error); - } else { - this.toastService.sendToast(ToastType.ERROR, '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"); - }); - } + + if (isNotValid) { + this.toastService.sendToast(ToastType.ERROR, "Invalid input in funding basket!") + return; } + + try { + await firstValueFrom(this.cupboardService.checkoutNeed(order)) + } catch (ex:any) { + this.toastService.sendToast(ToastType.ERROR, ex.error); + return + } + + order.forEach(contribution => this.usersService.removeNeed(contribution.needID)) + this.toastService.sendToast(ToastType.INFO, "Checkout successful"); } + resetColor(ev: any) { + // for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) {} + (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset") + } protected readonly of = of; protected readonly userType = userType; diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css index ac456ab..090bea9 100644 --- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css @@ -23,7 +23,7 @@ padding: 10px; gap: 10px; justify-content: start; - overflow: clip; + overflow: auto; } .needEntry { diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html index a2de9e5..9febfa5 100644 --- a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html @@ -1,6 +1,6 @@ <div id="header"> <span>{{jtitle}}</span> - <a [routerLink]="url">Show All<span class="icon">arrow_forward_ios</span></a> + <a *ngIf="url" [routerLink]="url">Show All<span class="icon">arrow_forward_ios</span></a> </div> <div id="needList"> 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 ffed91d..406bfa0 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 @@ -16,7 +16,8 @@ <div class="prog"> <span id="hover-status-label-{{need.id}}"> </span> - <span>{{need.current}}/{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> + + <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}/{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> <progress [value]="need.current" [max]="need.maxGoal"></progress> </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 7e5c3f4..40af9f5 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,5 +1,5 @@ import {Component, Input, OnChanges, TemplateRef} from '@angular/core'; -import {Need} from '../../models/Need'; +import {GoalType, Need} from '../../models/Need'; @Component({ selector: 'app-need-list', @@ -25,6 +25,10 @@ export class NeedListComponent implements OnChanges { this.updateVisibleNeeds() } + getPrefix(need: Need) { + return (need.type === GoalType.MONETARY) ? "$" : ""; + } + decrementPage() { this.currentPage--; this.updateVisibleNeeds(); @@ -49,5 +53,7 @@ export class NeedListComponent implements OnChanges { this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage); this.visibleNeeds = this.needs.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); } + + protected readonly GoalType = GoalType; } diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css index 5a92ee9..f1b7f1f 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.css +++ b/ufund-ui/src/app/components/need-page/need-page.component.css @@ -31,6 +31,7 @@ .left { display: flex; flex-direction: column; + width : 50%; } .right { @@ -40,6 +41,15 @@ } } +.need-image { + width: 400px; + height: auto; + aspect-ratio: 16/9; + object-fit: cover; + border-radius: 10px; + box-shadow: rgb(0, 40, 70) 0 0 50px; +} + .urgent { font-size: 11pt; background-color: rgba(255, 165, 0, 0.27); diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html index 592a71e..ff5990f 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.html +++ b/ufund-ui/src/app/components/need-page/need-page.component.html @@ -2,35 +2,41 @@ @if (need) { <h1>{{need.name}}</h1> <span class="needType">{{need.type}} GOAL</span> - - <img *ngIf="need.image" alt="Need image" [src]="need.image"/> - <p>{{need.description}}</p> <div class="prog"> <progress [value]="need.current" [max]="need.maxGoal"></progress> <span>This goal is <strong>{{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}%</strong> complete!</span> </div> - <span><strong>Target Goal:</strong> {{need.maxGoal}}</span> - <span><strong>Amount Currently Collected:</strong> {{need.current}}</span> + <div class="split"> + <div class="left"> + <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}}</span> - <span><strong>Location:</strong> {{need.location}}</span> + <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}</span> - <span><strong>Urgency: </strong> - <span *ngIf="!need.urgent">Not urgent</span> - <span *ngIf="need.urgent" class="urgent">URGENT</span> - </span> + <span><strong>Location:</strong> {{need.location}}</span> - <div *ngIf="need.filterAttributes?.length"> - <strong>Tags:</strong> - <ul style="display: flex; column-gap: 24px;"> - <li *ngFor="let tag of need?.filterAttributes"> - <p>{{tag}}</p> - </li> - </ul> + <span><strong>Urgency: </strong> + <span *ngIf="!need.urgent">Not urgent</span> + <span *ngIf="need.urgent" class="urgent">URGENT</span> + </span> + + <div *ngIf="need.filterAttributes?.length"> + <strong>Tags:</strong> + <ul style="display: flex; column-gap: 24px;"> + <li *ngFor="let tag of need?.filterAttributes"> + <p>{{tag}}</p> + </li> + </ul> + </div> + </div> + <div class="right"> + <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/> + </div> </div> + <div class="actionArea"> <button *ngIf="usersService.isHelper()" (click)="add(need)" [disabled]="usersService.inBasket(usersService.getBasket() | async, need)"> <span class="icon">{{usersService.inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index 429bc42..aa90e04 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -3,15 +3,26 @@ align-items: center; justify-content: center; height: 100%; - margin-top: -66px + margin-top: -66px; + background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/walls/thumbs_2t/13136.png"); + background-blend-mode: darken; + background-size: cover; } #box { display: flex; flex-direction: column; - /*max-width: 300px;*/ + max-width: 500px; gap: 10px; + backdrop-filter: blur(25px); + background-color: rgba(0, 0, 0, 0.1); + padding: 30px; + color: white; + border-radius: 5px; + border-style: solid; + border-width: 1px; + border-color: rgb(140, 140, 255); & > div { display: flex; @@ -19,6 +30,11 @@ } } +#password { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + .border { border-style: solid; border-width: 1px; @@ -34,6 +50,8 @@ width: 100%; appearance: none; overflow: hidden; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; /*margin-top: -5px;*/ } @@ -57,13 +75,10 @@ #passReq { display: flex; flex-direction: column; + margin-top: 10px; } #box > div { - display: flex; - flex-direction: row; - align-items: start; - gap: 20px; div { display: flex; diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html index 84f15e4..ef2fc27 100644 --- a/ufund-ui/src/app/components/signup/signup.component.html +++ b/ufund-ui/src/app/components/signup/signup.component.html @@ -7,13 +7,12 @@ <div> <div> - <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password> + <input id="password" placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password> <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="5"> </progress> <span *ngIf="passwordStatusText">{{passwordStatusText | async}}</span> - </div> - - <div id="passReq"> - <span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span> + <div id="passReq"> + <span *ngFor="let requirement of Object.values(passwordRequirements)" [style.color]="requirement.value ? 'green' : 'red'"><span class="icon">{{requirement.value?"check":"close"}}</span> {{requirement.title}}</span> + </div> </div> </div> diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts index 9c37211..2762d03 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, ElementRef, ViewChild} from '@angular/core'; import {UsersService} from '../../services/users.service'; import {Router} from '@angular/router'; import {BehaviorSubject} from 'rxjs'; @@ -29,6 +29,7 @@ export class SignupComponent { protected ableToCreateAccount = new BehaviorSubject(false) protected passwordRequirements: PasswordRequirements = new PasswordRequirements() protected strength = new BehaviorSubject(0) + @ViewChild("username") usernameInput!: ElementRef<HTMLInputElement> constructor( protected usersService: UsersService, @@ -56,11 +57,11 @@ export class SignupComponent { validate(username: string, passConfirm:string, password: string) { this.passwordsMatch.next(false) - this.usernameStatusText.next("") + this.usernameInput.nativeElement.setAttribute("style", "") this.checkPasswordStrength(password); if (username === "") { - this.usernameStatusText.next("Username field can't be blank") + this.usernameInput.nativeElement.setAttribute("style", "border-color: #ff0000") } if (passConfirm && password === passConfirm) { @@ -105,8 +106,6 @@ export class SignupComponent { this.passwordStatusText.next("") } else if (strength == 0) { this.passwordStatusText.next("") - } else { - this.passwordStatusText.next("Password must meet requirements") } this.strength.next(strength) diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts index 47fd7ff..6bbae34 100644 --- a/ufund-ui/src/app/components/toast/toast.component.ts +++ b/ufund-ui/src/app/components/toast/toast.component.ts @@ -21,7 +21,6 @@ export class ToastComponent implements OnInit{ } hide() { - console.log(this.toastDiv, typeof this.toastDiv) this.toastDiv.nativeElement.classList.add('hide') } diff --git a/ufund-ui/src/app/services/cupboard.service.ts b/ufund-ui/src/app/services/cupboard.service.ts index 694bb94..a87dee2 100644 --- a/ufund-ui/src/app/services/cupboard.service.ts +++ b/ufund-ui/src/app/services/cupboard.service.ts @@ -47,7 +47,7 @@ export class CupboardService { return this.http.delete<boolean>(`${this.url}/${id}`, this.httpOptions()) } - checkoutNeed(id: number, quantity: number) { - return this.http.put(`${this.url}/checkout`, {needID: id, amount: quantity}, this.httpOptions()) + checkoutNeed(data: {needID: number, quantity: number}[]) { + return this.http.put(`${this.url}/checkout`, data, this.httpOptions()) } } diff --git a/ufund-ui/src/app/services/users.service.ts b/ufund-ui/src/app/services/users.service.ts index d23b59b..35d080d 100644 --- a/ufund-ui/src/app/services/users.service.ts +++ b/ufund-ui/src/app/services/users.service.ts @@ -21,6 +21,15 @@ export class UsersService { }) }); + httpOptions2 = () => ({ + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + "jelly-api-key": this.authService.getApiKey() + }), + responseType: "text" as "json" // don't ask me how or why this works, bc i have no clue... + // see the relevant angular bug report https://github.com/angular/angular/issues/18586 + }); + constructor( private http: HttpClient, private cupboardService: CupboardService, @@ -37,6 +46,10 @@ export class UsersService { return this.http.get<User>(`${this.url}/${id}`, this.httpOptions()) } + getCount(): Observable<number> { + return this.http.get<number>(`${this.url}/count`, this.httpOptions2()) + } + updateUser(user: User): Observable<User> { console.log(`${this.url}/${user.username}`, user, this.httpOptions) return this.http.put<User>(`${this.url}/${user.username}`, user, this.httpOptions()) |
