diff options
Diffstat (limited to 'ufund-ui/src/app/components')
33 files changed, 1648 insertions, 485 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index fe4971a..e45d929 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -1,21 +1,54 @@ :host { - display: block; - border: 2px solid #000; - border-radius: 5px; - padding: 10px 20px; + display: flex; + justify-content: center; } -#menu, #create-form, #delete-form, #update-form { - background-color: #d9d9d9; +#box { + width: 800px; + display: flex; + flex-direction: column; +} + +#menu { + display: flex; + + margin: 10px; + +} + +.tab, .selected-tab { + background-color: lightgray; + border: 3px solid #000; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + margin-right: 5px; + border-bottom: 0; +} + +.selected-tab { + background-color: white; +} + +#create-form, #delete-form, #update-form { + background-color: #3a3a3a; padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; - width: 20%; + border-radius: 5px; visibility: visible; - + /*position: absolute;*/ } -#create-button { - padding: 10px 20px; - -}
\ No newline at end of file +#header { + display: flex; + gap: 20px; + align-items: center; + + h1 { + display: inline; + width: min-content; + } + + button { + margin-top: 3px; + } +} diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index 0d64475..37954bb 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -1,50 +1,38 @@ -<h1> Cupboard </h1> -<h2 *ngIf="isManager()" > Admin View </h2> -<div id="menu" *ngIf="isManager()"> - <button (click)="opencreate()">Create new Need</button> - <button (click)="openupdate()">Update existing Need</button> +<div id="box"> + <div id="header"> + <h1> Cupboard </h1> + <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button> + </div> + <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list> </div> -<div id="create-form"> - <h1> Create a new need </h1> - <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)"> - <label>Name:</label><br> - <input type="text" name="name" ngModel><br> - <label>Max Goal:</label><br> - <input type="number" name="maxGoal" ngModel><br> - <label>Type</label><br> - <input type="radio" name="type" value="MONETARY" ngModel> - <label>Monetary</label><br> - <input type="radio" name="type" value="PHYSICAL" ngModel> - <label>Physical</label><br> - <input type="submit" value="Submit"> - </form> - <button (click)="back()">Close</button> - <span *ngIf="statusText">‼️{{statusText | async}}</span> +<ng-template [ngIf]="isManager()" > +<div> + <app-need-edit *ngIf="selectedForm === 'update'" [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit> + <div> + <div id="create-form" *ngIf="selectedForm === 'create'"> + <h1> Create Need </h1> + <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)"> + <label>Name:</label><br> + <input type="text" name="name" ngModel><br> + <label>Image:</label><br> + <input type="text" name="image" ngModel><br> + <label>Location:</label><br> + <input type="text" name="location" ngModel><br> + <label>Max Goal:</label><br> + <input type="number" name="maxGoal" ngModel><br> + <label>Type</label><br> + <input type="radio" name="type" value="MONETARY" ngModel> + <label>Monetary</label><br> + <input type="radio" name="type" value="PHYSICAL" ngModel> + <label>Physical</label><br> + <input type="checkbox" name="urgent" value="false" ngModel> + <label>Urgent</label><br> + <label>Description</label><br> + <textarea name="description"></textarea><br> + <input type="submit" value="Submit"> + </form> + </div> + </div> </div> -<div id="update-form"> - <h1> Update a need </h1> - <label>Needs:</label><br> - <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)"> - <div *ngFor="let need of needs"> - - <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)"> - <label name="template">{{need.name}}</label><br> - </div> - <label>Name:</label><br> - <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br> - <label>Max Goal:</label><br> - <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br> - <label>Type</label><br> - <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type"> - <label>Monetary</label><br> - <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type"> - <label>Physical</label><br> - <input type="submit" value="Submit"> - </form> - <button (click)="back()">Close</button> - <span *ngIf="statusText">{{statusText | async}}</span> - -</div> -<hr> -<app-need-list #needList></app-need-list> +</ng-template> diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index 24b3e2d..2230cd3 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -1,10 +1,11 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import { CupboardService } from '../../services/cupboard.service'; -import { UsersService } from '../../services/users.service'; import { Need, GoalType } from '../../models/Need'; import { userType } from '../../models/User'; -import { BehaviorSubject, catchError, of } from 'rxjs'; +import { catchError, of } from 'rxjs'; import { NeedListComponent } from '../need-list/need-list.component'; +import {AuthService} from '../../services/auth.service'; +import {ToastsService, ToastType} from '../../services/toasts.service'; @Component({ selector: 'app-cupboard', @@ -15,18 +16,18 @@ import { NeedListComponent } from '../need-list/need-list.component'; export class CupboardComponent implements OnInit { - protected statusText = new BehaviorSubject("") - + selectedForm?: string = undefined; needs: any; @ViewChild("needList") needList?: NeedListComponent - constructor(private cupboardService: CupboardService, private usersService: UsersService) { } + constructor( + private cupboardService: CupboardService, + private authService: AuthService, + private toastService: ToastsService + ) {} ngOnInit(): void { this.cupboardService.getNeeds().subscribe(n => this.needs = n); - this.close(); - this.openmenu(); - if (this.isManager()) { console.log("Admin view of Cupboard"); } else { @@ -36,117 +37,74 @@ export class CupboardComponent implements OnInit { selectedNeed: any = { name: '', + location:'', id: null, maxGoal: null, - type: '' + type: '', + urgent: false }; selectedNeedId: number | null = null; + searchResults: any[] = []; - private hideElement(element: any) { - if (element) { - element.style.visibility = 'hidden'; - element.style.position = 'absolute'; + selectForm(name: string) { + //get search results from the need list + if (this.needList) { + this.searchResults = this.needList.searchResults; } - } + console.log(this.searchResults) + this.selectedForm = name; + if (name == 'update') { + if (this.searchResults) { + this.searchResults.forEach((element: any) => { + console.log(element) + }); + } - private showElement(element: any) { - if (element) { - element.style.visibility = 'visible'; - element.style.position = 'relative'; } } - openmenu() { - const menuElement = document.getElementById('menu'); - this.showElement(menuElement); - } - - opencreate() { - this.close(); - this.showElement(document.getElementById('create-form')); - } - - openupdate() { - this.close(); - this.showElement(document.getElementById('update-form')); - } - - back() { - this.close(); - this.openmenu(); - } - - close() { - this.hideElement(document.getElementById('create-form')); - this.hideElement(document.getElementById('destroy-form')); - this.hideElement(document.getElementById('menu')); - this.hideElement(document.getElementById('update-form')); + async updateSearchResults() { + if (this.needList) { + while (this.selectedForm == 'update') { + this.searchResults = this.needList.searchResults + await new Promise(resolve => setTimeout(resolve, 100)); + } + } } populateForm(need: any): void { + this.selectForm('update'); this.selectedNeed = { ...need }; } isManager() { - const type = this.usersService.getCurrentUser()?.type; + const type = this.authService.getCurrentUser()?.type; return type === ("MANAGER" as unknown as userType); } - update(form: any) { - console.log(form); - const need: Need = { - name: form.name, - id: form.id, //system will control this - maxGoal: form.maxGoal, - type: GoalType[form.type as keyof typeof GoalType], - filterAttributes: [], - current: 0 - }; - console.log("need:", need); - console.log(need.id, need, "need updated"); - 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 of() - })) - .subscribe( - (result) => { - if (result) { - console.log("need updated successfully"); - this.needList?.refresh() - } else { - console.log("need update failed"); - } - } - - ); - } - submit(form: any) { const need: Need = { name: form.name, + image: form.image, + location: form.location, id: 0, maxGoal: form.maxGoal, type: form.type, + urgent: form.urgent ? true : false, filterAttributes: [], - current: 0 + current: 0, + description: form.description }; console.log("need:", need); console.log("form submitted. creating need: ", need); this.cupboardService.createNeed(need) - .pipe(catchError((ex, r) => { + .pipe(catchError((ex, _) => { if (ex.status == 500) { - this.statusText.next("Fields cannot be blank"); + this.toastService.sendToast(ToastType.ERROR, "Fields cannot be blank"); } else if (ex.status == 400) { - this.statusText.next("Goal must be greater than 0"); + this.toastService.sendToast(ToastType.ERROR, ex.error); } else { - this.statusText.next("Error on creating need"); + this.toastService.sendToast(ToastType.ERROR, "Error on creating need"); } return of() })) @@ -167,48 +125,3 @@ export class CupboardComponent implements OnInit { } } - -let friendlyHttpStatus: { [key: number]: string } = { - 200: 'OK', - 201: 'Created', - 202: 'Accepted', - 203: 'Non-Authoritative Information', - 204: 'No Content', - 205: 'Reset Content', - 206: 'Partial Content', - 300: 'Multiple Choices', - 301: 'Moved Permanently', - 302: 'Found', - 303: 'See Other', - 304: 'Not Modified', - 305: 'Use Proxy', - 306: 'Unused', - 307: 'Temporary Redirect', - 400: 'Bad Request', - 401: 'Unauthorized', - 402: 'Payment Required', - 403: 'Forbidden', - 404: 'Not Found', - 405: 'Method Not Allowed', - 406: 'Not Acceptable', - 407: 'Proxy Authentication Required', - 408: 'Request Timeout', - 409: 'Conflict', - 410: 'Gone', - 411: 'Length Required', - 412: 'Precondition Required', - 413: 'Request Entry Too Large', - 414: 'Request-URI Too Long', - 415: 'Unsupported Media Type', - 416: 'Requested Range Not Satisfiable', - 417: 'Expectation Failed', - 418: 'I\'m a teapot', - 422: 'Unprocessable Entity', - 429: 'Too Many Requests', - 500: 'Internal Server Error', - 501: 'Not Implemented', - 502: 'Bad Gateway', - 503: 'Service Unavailable', - 504: 'Gateway Timeout', - 505: 'HTTP Version Not Supported', -}; diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index e69de29..78a69ba 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.css +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css @@ -0,0 +1,7 @@ +:host { + display: flex; + flex-direction: column; + width: 1000px; + align-self: center; + gap: 20px +} diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index a1151b7..6a95ecd 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -1,4 +1,5 @@ -<h1>Dashboard</h1> -<app-cupboard></app-cupboard> -<app-funding-basket *ngIf="!isManager()"></app-funding-basket>
\ No newline at end of file +<h1>Your Dashboard</h1> +<app-mini-need-list [needList]="topNeeds" jtitle="Top needs" url="/cupboard"/> +<app-mini-need-list [needList]="almostThere" jtitle="Almost there" url="/cupboard"/> +<app-mini-need-list [needList]="inBasket" jtitle="In your basket" url="/basket"/> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index b9faefa..c94b5c6 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,21 +1,45 @@ -import { Component } from '@angular/core'; -import { UsersService } from '../../services/users.service'; -import { userType } from '../../models/User'; +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'; @Component({ - selector: 'app-dashboard', - standalone: false, - templateUrl: './dashboard.component.html', - styleUrl: './dashboard.component.css' + selector: 'app-dashboard', + standalone: false, + templateUrl: './dashboard.component.html', + styleUrl: './dashboard.component.css' }) -export class DashboardComponent { +export class DashboardComponent implements OnInit{ + + topNeeds?: Need[] + almostThere?: Need[] + inBasket?: Need[] + constructor( - protected usersService: UsersService, + protected authService: AuthService, + protected router: Router, + protected cupboardService: CupboardService, + protected userService: UsersService ) {} - isManager() { - const type = this.usersService.getCurrentUser()?.type; - return type === ("MANAGER" as unknown as userType); - } + ngOnInit() { + let user = this.authService.getCurrentUser() + if(!localStorage.getItem("credential") && !user) { + this.router.navigate(['/login']) + 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.getBasket().subscribe(r => { + this.inBasket = r; + }) + } } 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"); + }); + } + } + } } diff --git a/ufund-ui/src/app/components/home-page/home-page.component.css b/ufund-ui/src/app/components/home-page/home-page.component.css index e69de29..a10377f 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.css +++ b/ufund-ui/src/app/components/home-page/home-page.component.css @@ -0,0 +1,38 @@ +:host { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: clip; +} + +#hero { + display: flex; + /*flex-direction: column;*/ + /*align-items: start;*/ + /*justify-content: center;*/ +} + +h1 { + font-size: 50px; + max-width: 1200px; +} + +#jf { + /*position: absolute;*/ +} + +#right { + max-width: 500px; + max-height: 500px; + display: flex; + justify-content: center; + align-items: center; + /*z-index: -0.5;*/ +} + +#left { + max-width: 500px; + z-index: 1; +} diff --git a/ufund-ui/src/app/components/home-page/home-page.component.html b/ufund-ui/src/app/components/home-page/home-page.component.html index d41e670..7a7ff96 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.html +++ b/ufund-ui/src/app/components/home-page/home-page.component.html @@ -1,3 +1,10 @@ -<a routerLink="/login"> - Login/Sign Up -</a>
\ No newline at end of file +<div id="hero"> + <div id="left"> + <h1>Helping fund coral reef and marine life conservation</h1> + <p>View our online cupboard holding all needs related to sea life preservation</p> + <button class="button2" routerLink="/cupboard">View needs</button> + </div> + <div id="right"> + <img id="jf" src="jf.png" height="1024" width="1024"/> + </div> +</div> diff --git a/ufund-ui/src/app/components/home-page/home-page.component.ts b/ufund-ui/src/app/components/home-page/home-page.component.ts index 5b2277c..95e8962 100644 --- a/ufund-ui/src/app/components/home-page/home-page.component.ts +++ b/ufund-ui/src/app/components/home-page/home-page.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ - selector: 'app-home-page', - standalone: false, - templateUrl: './home-page.component.html', - styleUrl: './home-page.component.css' + selector: 'app-home-page', + standalone: false, + templateUrl: './home-page.component.html', + styleUrl: './home-page.component.css' }) export class HomePageComponent { diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css index 435cc87..b56b4eb 100644 --- a/ufund-ui/src/app/components/login/login.component.css +++ b/ufund-ui/src/app/components/login/login.component.css @@ -1,8 +1,28 @@ -:host, .border { - display: flex; - flex-direction: column; - max-width: 300px; - gap: 5px +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + /*background-image: url("https://www.fineshare.com/background/jellyfish-under-fluorescent-illumination.jpg");*/ + background: rgba(0, 0, 0, .65) url("https://4kwallpapers.com/images/wallpapers/blue-jellyfish-aquarium-underwater-glowing-marine-life-1920x1080-3546.jpg"); + background-blend-mode: darken; + margin-top: -66px + +} + +#box { + display: flex; + flex-direction: column; + max-width: 350px; + gap: 10px; + backdrop-filter: blur(10px); + 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); } .border { diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html index 2cdb6d0..c67b903 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -1,7 +1,9 @@ -<span *ngIf="next" style="color: red">You must be logged in to view this page</span> -<p>Login:</p> -<input placeholder="Username" type="text" #username> -<input placeholder="Password" type="password" #password> -<button type="button" (click)="login(username.value, password.value)">Login</button> -<button type="button" (click)="signup(username.value, password.value)">Create Account</button> -<span *ngIf="statusText">{{statusText | async}}</span> +<div id="box"> + <h1>Login</h1> + <input placeholder="Username" type="text" #username> + <input placeholder="Password" type="password" #password> + <button type="button" (click)="login(username.value, password.value)">Login</button> + <div> + New? <a routerLink="/signup">Create an account</a> + </div> +</div> diff --git a/ufund-ui/src/app/components/login/login.component.ts b/ufund-ui/src/app/components/login/login.component.ts index 9d806f5..0177f67 100644 --- a/ufund-ui/src/app/components/login/login.component.ts +++ b/ufund-ui/src/app/components/login/login.component.ts @@ -1,23 +1,25 @@ import {Component, OnInit} from '@angular/core' import {UsersService} from '../../services/users.service'; import {ActivatedRoute, Router} from '@angular/router'; -import {BehaviorSubject} from 'rxjs'; +import {AuthService} from '../../services/auth.service'; +import {ToastsService, ToastType} from '../../services/toasts.service'; @Component({ - selector: 'app-login', - standalone: false, - templateUrl: './login.component.html', - styleUrl: './login.component.css' + selector: 'app-login', + standalone: false, + templateUrl: './login.component.html', + styleUrl: './login.component.css' }) export class LoginComponent implements OnInit { protected next?: string | null; - protected statusText = new BehaviorSubject("") constructor( protected usersService: UsersService, protected router: Router, - private route: ActivatedRoute + private route: ActivatedRoute, + private authService: AuthService, + private toastService: ToastsService ) {} ngOnInit() { @@ -31,10 +33,12 @@ export class LoginComponent implements OnInit { return; } - this.usersService.login(username, password).then(() => { + this.authService.login(username, password).then(() => { this.router.navigate([next]); + let key = this.authService.getApiKey() + localStorage.setItem("credential", JSON.stringify({username: username, key: key})) }).catch(ex => { - this.statusText.next("Unable to login: " + friendlyHttpStatus[ex.status]) + this.toastService.sendToast(ToastType.ERROR, "Unable to login: " + friendlyHttpStatus[ex.status]) console.log(ex) }) } @@ -46,9 +50,9 @@ export class LoginComponent implements OnInit { } this.usersService.createUser(username, password).then(() => { - this.statusText.next("Account created, click login.") + this.toastService.sendToast(ToastType.INFO, "Account created, click login.") }).catch(ex => { - this.statusText.next("Unable to create account: " + friendlyHttpStatus[ex.status]) + this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status]) console.log(ex) }) } 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 new file mode 100644 index 0000000..ac456ab --- /dev/null +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css @@ -0,0 +1,56 @@ +:host { + display: flex; + flex-direction: column; + border: solid rgba(255, 255, 255, 0.5) 1px; + border-radius: 5px; +} + +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: solid rgba(255, 255, 255, 0.5) 1px; + padding: 10px; + + a { + display: flex; + } +} + +#needList { + display: flex; + flex-direction: row; + padding: 10px; + gap: 10px; + justify-content: start; + overflow: clip; +} + +.needEntry { + padding: 10px; + display: flex; + flex-direction: column; + background-color: #3a3a3a; + border-radius: 5px; + height: 175px; + width: 200px; + justify-content: space-between; + + div { + display: flex; + flex-direction: column; + } + + user-select: none; + cursor: pointer; +} + +.needName { + font-weight: bold; +} + +.needType { + text-transform: uppercase; + /*font-weight: 300;*/ + font-size: 10pt; +} 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 new file mode 100644 index 0000000..a2de9e5 --- /dev/null +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.html @@ -0,0 +1,17 @@ +<div id="header"> + <span>{{jtitle}}</span> + <a [routerLink]="url">Show All<span class="icon">arrow_forward_ios</span></a> +</div> + +<div id="needList"> + <div class="needEntry" *ngFor="let need of needList" [routerLink]="'/need/'+need.id"> + <div> + <span class="needName">{{need.name}}</span> + <span class="needType">{{need.type}}</span> + </div> + <div> + <span>{{need.current}}/{{need.maxGoal}}</span> + <progress [max]="need.maxGoal" [value]="need.current"></progress> + </div> + </div> +</div> diff --git a/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts new file mode 100644 index 0000000..c909ae6 --- /dev/null +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.ts @@ -0,0 +1,19 @@ +import {Component, Input} from '@angular/core'; +import {Need} from '../../models/Need'; + +@Component({ + selector: 'app-mini-need-list', + standalone: false, + templateUrl: './mini-need-list.component.html', + styleUrl: './mini-need-list.component.css' +}) +export class MiniNeedListComponent { + + @Input() needList?: Need[] + @Input() jtitle?: string + @Input() url?: string + + constructor( + + ) {} +} diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.css b/ufund-ui/src/app/components/need-edit/need-edit.component.css new file mode 100644 index 0000000..17605c2 --- /dev/null +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css @@ -0,0 +1,21 @@ +:host { + /*position: absolute;*/ + /*background-color: rgba(0, 0, 0, 0.5);*/ + /*display: flex;*/ + /*height: 100%;*/ + /*top: 0;*/ + /*left: 0;*/ + /*right: 0;*/ + /*z-index: 5;*/ + /*justify-content: center;*/ +} + +#create-form, #delete-form, #update-form { + margin-top: 50px; + background-color: #3a3a3a; + padding: 10px 20px 20px 20px; + border: 2px solid #000; + border-radius: 5px; + /*visibility: visible;*/ + /*position: absolute;*/ +} diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.html b/ufund-ui/src/app/components/need-edit/need-edit.component.html new file mode 100644 index 0000000..e776415 --- /dev/null +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html @@ -0,0 +1,24 @@ +<div id="update-form"> + <h1> Update Need </h1> + <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)"> + <label>Name:</label><br> + <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br> + <label>Image:</label><br> + <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br> + <label>Location:</label><br> + <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br> + <label>Max Goal:</label><br> + <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br> + <label>Type</label><br> + <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type"> + <label>Monetary</label><br> + <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type"> + <label>Physical</label><br> + <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent"> + <label>Urgent</label> <br> + <label>Description</label> <br> + <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br> + <input type="submit" value="Submit"> + + </form> +</div> diff --git a/ufund-ui/src/app/components/need-edit/need-edit.component.ts b/ufund-ui/src/app/components/need-edit/need-edit.component.ts new file mode 100644 index 0000000..2462534 --- /dev/null +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts @@ -0,0 +1,61 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Need, GoalType } from '../../models/Need'; +import { CupboardService } from '../../services/cupboard.service'; +import { catchError, of } from 'rxjs'; +import { ToastsService, ToastType } from '../../services/toasts.service'; + +@Component({ + selector: 'app-need-edit', + standalone: false, + templateUrl: './need-edit.component.html', + styleUrl: './need-edit.component.css' +}) +export class NeedEditComponent { + constructor( + private cupboardService: CupboardService, + private toastService: ToastsService + + ) {} + + @Input() selectedNeed!: Need; + @Output() refreshNeedList = new EventEmitter<void>(); + + update(form: any) { + console.log(form); + const need: Need = { + name: form.name, + image: form.image, + location: form.location, + id: this.selectedNeed.id, //system will control this + maxGoal: form.maxGoal, + type: GoalType[form.type as keyof typeof GoalType], + urgent: form.urgent, + filterAttributes: [], + current: 0, + description: form.description + }; + + this.cupboardService.updateNeed(need.id, need) + .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 of() + })) + .subscribe( + (result) => { + if (result) { + console.log("need updated successfully"); + this.refreshNeedList.emit(); + } else { + console.log("need update failed"); + } + } + + ); + } +}
\ No newline at end of file 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 bbc3f2c..5f2e5e1 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 @@ -1,24 +1,110 @@ -:host { - list-style-type:circle; - border: 2px solid #000; - display: block; - width: 30%; - border-radius: 5px; - +#header { + display: flex; + flex-direction: column; + gap: 10px } -li, div { - border: 2px solid #000; +.needEntry { + background-color: #2e2e2e; + display: flex; + flex-direction: column; border-radius: 5px; +} + +#needList { + display: flex; + flex-direction: column; + gap: 15px +} + +select { + font-size: 14pt; padding: 5px; - margin: 5px; +} + +#searchArea { + display: flex; + form { + display: flex; + width: 100%; + gap: 10px; + } + + input[type=text] { + display: flex; + width: 100%; + } } -#search-form { - background-color: #d9d9d9; - padding: 10px 20px 20px 20px; - border: 2px solid #000; - border-radius: 5px; - visibility: visible; - }
\ No newline at end of file +#sortArea { + display: flex; + flex-direction: row; + gap: 10px; + align-items: center; +} + +.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; + } + + .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; +} + +#page-selector { + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + gap: 10px +} 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 36c12d0..c0501ba 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 @@ -1,28 +1,71 @@ -<h1>Needs List</h1> -<input id="search-button" type="button" value="Search" (click)="open()"> -<div id="search-form"> - <form #searchForm="ngForm"> - <label>Search:</label><br> - <input type="text" name="search" (input)="search(searchForm.value)" ngModel> - <input type="button" value="Clear" (click)="searchForm.reset()"> <br> - </form> - <button (click)="close()">Close</button> - <div> - <h2 id="search-status">Search Results:</h2> - <div *ngFor="let need of searchResults"> - <a routerLink="/need/{{need.id}}"> - {{need.name}} - </a> - <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button> - <!-- <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> --> +<div id="header"> + <div id="searchArea"> + <form id="search-form" #searchForm="ngForm"> + <input type="text" name="search" class="wide-input" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" ngModel> + <input type="reset" value="Clear" (click)="search(null)"> <br> + </form> + </div> + <div id="sortArea"> + <label for="sort">Sort by: </label> + <select id='sort' [(ngModel)] = "sortSelection" class="wide-input" (change)="search(searchForm.value)" [value]="sortSelection"> + <option *ngFor="let algorithm of SortingAlgoArrays" value="{{algorithm.name}}"> + {{algorithm.display[sortMode === 'Ascending' ? 0 : 1]}} + </option> + </select> + <button (click)="changeSortMode(searchForm.value)"> + <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span> + </button> + <label>Needs per page: </label> + <input type ="number" [(ngModel)]="itemsPerPage" (change)="resetVisibleNeeds()" min="1" max="{{searchResults.length}}"> + </div> + <!--<button (click)="close()">Close</button>--> +</div> + +<!-- display for when results are present and filtered--> +<h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2> +<h2 *ngIf="searchResults.length == needs.length"> All Needs </h2> +<h2 *ngIf="searchResults.length == 0"> No Results Found </h2> +<div id="needList"> + <div *ngFor="let need of visibleNeeds" 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> + + <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> + + <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>Edit Need + </button> + <button *ngIf="isManager()" (click)="delete(need.id)" > + <span class="icon">delete</span>Delete Need + </button> </div> </div> </div> -<li *ngFor="let need of needs"> - <a routerLink="/need/{{need.id}}"> - {{need.name}} - </a> - <button (click)="delete(need.id)" *ngIf="isManager()">Delete</button> - <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button> -</li> +<div id="page-selector"> + <button *ngIf="currentPage > 0" (click)="decrementPage()"><span class="icon">arrow_back_ios</span></button> + <span>Page {{currentPage + 1}} of {{totalPages}}</span> + <button *ngIf="currentPage < totalPages - 1" (click)="incrementPage()"><span class="icon">arrow_forward_ios</span></button> +</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 25f05d6..cd3d9bd 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,8 +1,61 @@ -import { Component } from '@angular/core'; +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; +} + +// sort functions +const sortByName: sortAlgo = (a: Need, b: Need): number => { + if(a.name.toLocaleLowerCase() < b.name.toLocaleLowerCase()) { + return -1; + } + return 1; +} + +const sortByGoal: sortAlgo = (a: Need, b: Need): number => { + if(a.maxGoal == b.maxGoal) { + return sortByName(a,b); + } + else if(a.maxGoal > b.maxGoal) { + return -1; + } + return 1; +} + +const sortByCompletion: sortAlgo = (a: Need, b: Need): number => { + if(a.current == b.current) { + return sortByGoal(a,b); + } + else if(a.current > b.current) { + return -1; + } + return 1; +} + +const sortByPriority: sortAlgo = (a: Need, b: Need): number => { + if(a.urgent == b.urgent) { + return sortByGoal(a,b); + } + else if(a.urgent && !b.urgent) { + return -1; + } + return 1; +} + +const sortByLocation: sortAlgo = (a: Need, b: Need): number => { + if(a.location.toLocaleLowerCase() < b.location.toLocaleLowerCase()) { + return -1; + } + return 1; +} + @Component({ selector: 'app-need-list', standalone: false, @@ -10,54 +63,88 @@ import { userType } from '../../models/User'; styleUrl: './need-list.component.css' }) export class NeedListComponent { + selectedNeed: Need | null = null; needs: Need[] = []; searchResults: Need[] = []; + visibleNeeds: Need[] = []; + sortMode: 'Ascending' | 'Descending' = 'Ascending' + currentPage: number = 0; + itemsPerPage: number = 5; + totalPages: number = Math.ceil(this.needs.length / this.itemsPerPage); + + decrementPage() { + this.currentPage--; + this.updateVisibleNeeds(); + } + + incrementPage() { + this.currentPage++; + this.updateVisibleNeeds(); + } + + editNeedsPerPage(amount: number) { + this.itemsPerPage = amount; + this.updateVisibleNeeds(); + } + + updateVisibleNeeds() { + this.totalPages = Math.ceil(this.searchResults.length / this.itemsPerPage); + this.visibleNeeds = this.searchResults.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage); + } + + resetVisibleNeeds() { + this.currentPage = 0; + this.updateVisibleNeeds(); + } + + currentSortAlgo: sortAlgo = sortByPriority; + sortSelection: string = 'sortByPriority'; + + SortingAlgoArrays: {func:sortAlgo,name:string, display:string[]}[] = [ + {func:sortByPriority,name:"sortByPriority", display:["Highest Priority", "Lowest Priority"]}, + {func:sortByName,name:"sortByName", display:["Name (A to Z)", "Name (Z to A)"]}, + {func:sortByLocation,name:"sortByLocation", display:["Location (A to Z)", "Location (Z to A)"]}, + {func:sortByCompletion,name:"sortByCompletion", display:["Most Completed", "Least Completed"]}, + {func:sortByGoal,name:"sortByGoal", display:["Largest Maximum Goal", "Smallest Maximum Goal"]}, + ]; + + @Output() currentNeed = new EventEmitter<Need>(); constructor( private cupboardService: CupboardService, - private usersService: UsersService + private usersService: UsersService, + private authService: AuthService, + private toastService: ToastsService ) {} refresh() { - this.cupboardService.getNeeds().subscribe(n => this.needs = n) + this.cupboardService.getNeeds().subscribe(n => { + if (this.sortMode == 'Ascending') { + this.needs = n.sort(this.currentSortAlgo); + } else { + this.needs = n.sort(this.currentSortAlgo).reverse(); + } + this.searchResults = this.needs; + this.updateVisibleNeeds(); + }); + + const form = document.getElementById('search-form') as HTMLFormElement; + form.reset(); + this.search(null); } ngOnInit(): void { this.refresh() - this.close(); - } - - private showElement(element: any) { - if (element){ - element.style.visibility = 'visible'; - element.style.position = 'relative'; - } - } - - private hideElement(element: any) { - if (element){ - element.style.visibility = 'hidden'; - element.style.position = 'absolute'; - } } - private updateSearchStatus(text: string) { - let element = document.getElementById('search-status'); - if (element) { - element.innerHTML = text; + changeSortMode(form : any) { + if (this.sortMode == 'Ascending'){ + this.sortMode = 'Descending' + } else { + this.sortMode = 'Ascending' } - } - - open() { - this.hideElement(document.getElementById('search-button')); - this.showElement(document.getElementById('search-form')); - } - - close() { - this.hideElement(document.getElementById('search-form')); - this.showElement(document.getElementById('search-button')); - this.hideElement(document.getElementById('search-status')); + this.search(form) } private searchDelay: any; @@ -69,64 +156,120 @@ export class NeedListComponent { if (this.searchDelay) { clearTimeout(this.searchDelay); } + if (form) { + this.searchDelay = setTimeout(() => { - this.searchDelay = setTimeout(() => { - const currentSearchValue = form.search; //latest value of the search - this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - this.searchResults = n; - console.log(currentSearchValue, this.searchResults); - this.showElement(document.getElementById('search-results')); - this.showElement(document.getElementById('search-status')); - if (this.searchResults.length === this.needs.length) { - this.updateSearchStatus("Please refine your search"); - this.searchResults = []; - } else if (this.searchResults.length === 0) { - this.updateSearchStatus("No results found"); - } else { - this.updateSearchStatus("Search results:"); - } - }); - }, 250); + if (form) { + //sorting based on algo selected + this.SortingAlgoArrays.forEach(algo => { + if(algo.name === this.sortSelection) { + this.currentSortAlgo = algo.func; + console.log("changed sorting algorithm to: ", algo.name + this.sortMode) + return + } + }); + + const currentSearchValue = form.search; //latest value of the search + this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { + if (this.sortMode == 'Ascending') { + this.searchResults = n.sort(this.currentSortAlgo); + } else { + this.searchResults = n.sort(this.currentSortAlgo).reverse(); + } + this.updateVisibleNeeds(); + }); + } + }, 250); + } else { + //user has cleared the search bar, we can skip the timeout for a 1/4 second faster response + //clear timeout to stop pending search + clearTimeout(this.searchDelay); + this.searchResults = this.needs; + } } delete(id : number) { this.cupboardService.deleteNeed(id).subscribe(() => { + this.toastService.sendToast(ToastType.INFO, "Need deleted.") this.needs = this.needs.filter(n => n.id !== id) }) + this.refresh(); } isManager() { - const type = this.usersService.getCurrentUser()?.type; + const type = this.authService.getCurrentUser()?.type; return type === ("MANAGER" as unknown as userType); } isHelper() { - const type = this.usersService.getCurrentUser()?.type; + const type = this.authService.getCurrentUser()?.type; return type === ("HELPER" as unknown as userType); } + changeText(id : number, text : string) { + const span = document.getElementById('hover-status-label-' + id); + if (span) { + span.innerHTML = ' ' + text; + } + } + add(need: Need) { - const currentUser = this.usersService.getCurrentUser(); + const currentUser = this.authService.getCurrentUser(); //console.log("get current user in angular:", currentUser) if (currentUser) { if (!currentUser.basket.includes(need.id)) { currentUser.basket.push(need.id); - this.usersService.updateUser(currentUser).subscribe(() => { - this.usersService.refreshBasket(); - error: (err: any) => { - console.error(err); - } - }); + this.usersService.updateUser(currentUser) + .pipe(catchError((err, _) => { + console.error(err); + return of(); + })) + .subscribe(() => { + 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!") } - - } - } back() { - this.searchResults = []; + this.searchResults = this.needs; + } + + select(need : Need) { + //emit value + this.currentNeed.emit(need); + if (this.selectedNeed) { + //revert already selected need to previous style + console.log(need.id); + let button = document.getElementById('need-button-' + this.selectedNeed.id); + if (button) { + console.log(button) + button.style.background = 'lightgray'; + button.style.marginLeft = '0%'; + button.style.width = '98%'; + } + button = document.getElementById('need-edit-button-' + this.selectedNeed.id); + if (button) { + button.style.visibility = 'visible'; + } + } + //change selected need to selected style + this.selectedNeed = need; + let button = document.getElementById('need-button-' + need.id); + if (button) { + button.style.background = 'white'; + button.style.marginLeft = '4%'; + button.style.width = '100%'; + } + button = document.getElementById('need-edit-button-' + need.id); + if (button) { + button.style.visibility = 'hidden'; + } } } +function not(location: string) { + throw new Error('Function not implemented.'); +} + 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 e69de29..844410f 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 @@ -0,0 +1,73 @@ +:host { + display: flex; + justify-content: center; +} + +#box { + display: flex; + flex-direction: column; + width: 800px; + justify-content: start; + gap: 10px; +} + +.needName { + font-weight: bold; +} + +.needType { + text-transform: uppercase; + /*font-size: 10pt;*/ + margin-top: -20px; + /*margin-bottom: 20px;*/ +} + +.split { + display: flex; + flex-direction: row; + justify-content: space-between; + + + .left { + display: flex; + flex-direction: column; + } + + .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; + margin-bottom: 15px; +} + +.actionArea { + display: flex; + padding: 5px; + gap: 5px; + margin-top: 10px; +} + +/*#editor {*/ +/* position: absolute;*/ +/* background-color: #4a4a4a;*/ +/* display: flex;*/ +/* flex-direction: column;*/ +/* justify-self: center;*/ +/* align-self: center;*/ +/* padding: 20px;*/ +/* box-shadow: 0 0 100px black;*/ +/*}*/ 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 e9c23bd..958dfa6 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 @@ -1,21 +1,45 @@ -<input type="button" value="Back" (click)="back()"> -<h1>Viewing Need: {{need?.name}}</h1> -<div style="display: flex; column-gap: 6px;"> - <h3>Looking for</h3> - <h3><u>{{need?.type}}</u></h3> - <h3>Donations.</h3> -</div> -<div *ngIf="need?.filterAttributes != null"> - <p>Tags:</p> - <ul style="display: flex; column-gap: 24px;"> - <li *ngFor="let tag of need?.filterAttributes"> - <p>{{tag}}</p> - </li> - </ul> -</div> +<div id="box"> + <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"> +<!-- <span>{{need?.current}} / {{need?.maxGoal}}</span>--> + <progress [value]="need?.current" [max]="need?.maxGoal"></progress> + <span>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</span> + </div> + + <span><strong>Target Goal:</strong> {{need.maxGoal}}</span> -<hr> + <span><strong>Amount Currently Collected:</strong> {{need.current}}</span> -<p>Goal: {{need?.maxGoal}}</p> -<p>Current: {{need?.current}}</p> -<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file + <span><strong>Location:</strong> {{need.location}}</span> + + <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 > 0"> + <strong>Tags:</strong> + <ul style="display: flex; column-gap: 24px;"> + <li *ngFor="let tag of need?.filterAttributes"> + <p>{{tag}}</p> + </li> + </ul> + </div> + + <div class="actionArea"> + <button *ngIf="isHelper()" (click)="add(need!)"> + <span class="icon">add</span>Add To Basket + </button> +<!-- <button *ngIf="isManager()" (click)="edit(need!)">--> +<!-- <span class="icon">edit</span>Edit Need--> +<!-- </button>--> + <button *ngIf="isManager()" (click)="delete(need!.id)" > + <span class="icon">delete</span>Delete Need + </button> + </div> +</div> diff --git a/ufund-ui/src/app/components/need-page/need-page.component.ts b/ufund-ui/src/app/components/need-page/need-page.component.ts index 597d0e0..ad4cacf 100644 --- a/ufund-ui/src/app/components/need-page/need-page.component.ts +++ b/ufund-ui/src/app/components/need-page/need-page.component.ts @@ -1,31 +1,87 @@ import {Component, Input} from '@angular/core'; import {GoalType, Need} from '../../models/Need'; -import {ActivatedRoute} from "@angular/router"; +import {ActivatedRoute, Router} from "@angular/router"; import {CupboardService} from "../../services/cupboard.service"; -import { NgFor } from '@angular/common'; +import {userType} from '../../models/User'; +import {AuthService} from '../../services/auth.service'; +import {catchError, of} from 'rxjs'; +import {ToastsService, ToastType} from '../../services/toasts.service'; +import {UsersService} from '../../services/users.service'; @Component({ - selector: 'app-need-page', - standalone: false, - templateUrl: './need-page.component.html', - styleUrl: './need-page.component.css' + selector: 'app-need-page', + standalone: false, + templateUrl: './need-page.component.html', + styleUrl: './need-page.component.css' }) export class NeedPageComponent { - constructor( - private route: ActivatedRoute, - private cupboardService: CupboardService, - ) {} + constructor( + private route: ActivatedRoute, + private cupboardService: CupboardService, + private authService: AuthService, + private usersService: UsersService, + private toastService: ToastsService, + private router: Router + ) {} - public GoalType = GoalType; + public GoalType = GoalType; - @Input() need?: Need; + @Input() need!: Need; - ngOnInit(): void { - const id = Number(this.route.snapshot.paramMap.get('id')); - this.cupboardService.getNeed(id).subscribe(n => this.need = n); - } + ngOnInit(): void { + const id = Number(this.route.snapshot.paramMap.get('id')); + this.cupboardService.getNeed(id).subscribe(n => this.need = n); + } - back() { - window.history.back(); - } -}
\ No newline at end of file + back() { + window.history.back(); + } + + isManager() { + const type = this.authService.getCurrentUser()?.type; + return type === ("MANAGER" as unknown as userType); + } + + isHelper() { + const type = this.authService.getCurrentUser()?.type; + return type === ("HELPER" as unknown as userType); + } + + add(need: Need) { + const currentUser = this.authService.getCurrentUser(); + //console.log("get current user in angular:", currentUser) + if (currentUser) { + if (!currentUser.basket.includes(need.id)) { + currentUser.basket.push(need.id); + this.usersService.updateUser(currentUser) + .pipe(catchError((err, _) => { + console.error(err); + return of(); + })) + .subscribe(() => { + this.usersService.refreshBasket(); + }); + } else { + this.toastService.sendToast(ToastType.ERROR, "This need is already in your basket!") + } + } + } + + delete(id : number) { + this.cupboardService.deleteNeed(id) + .pipe(catchError((ex, r) => { + this.toastService.sendToast(ToastType.ERROR, ex.error) + return of() + })) + .subscribe(() => { + // this.needs = this.needs.filter(n => n.id !== id) + this.toastService.sendToast(ToastType.INFO, "Need deleted") + this.router.navigate(['/']) + }) + // this.refresh(); + } + + edit(need: Need) { + + } +} diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css new file mode 100644 index 0000000..429bc42 --- /dev/null +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -0,0 +1,73 @@ +:host { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + margin-top: -66px + +} + +#box { + display: flex; + flex-direction: column; + /*max-width: 300px;*/ + gap: 10px; + + & > div { + display: flex; + flex-direction: column; + } +} + +.border { + border-style: solid; + border-width: 1px; + padding: 10px; + margin: 10px; + position: absolute; + background-color: white; + box-shadow: 0 0 10px 10px black; +} + +#bar { + height: 5px; + width: 100%; + appearance: none; + overflow: hidden; + /*margin-top: -5px;*/ +} + +#bar::-webkit-progress-bar { + background-color: lightgray; + transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; +} + +.color0::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color1::-webkit-progress-value { background: rgba(255, 0 ,0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color2::-webkit-progress-value { background: rgba(255, 165, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color3::-webkit-progress-value { background: rgba(255, 255, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color4::-webkit-progress-value { background: rgba(173, 255, 47, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color5::-webkit-progress-value { background: rgba(50, 205, 50, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } +.color6::-webkit-progress-value { background: rgba(0, 128, 0, 1); transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out; } + +#requirement2, #statusText, #passwordStatusText, #usernameStatusText { + color: red; +} + +#passReq { + display: flex; + flex-direction: column; +} + +#box > div { + display: flex; + flex-direction: row; + align-items: start; + gap: 20px; + + div { + display: flex; + flex-direction: column; + } +} + diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html new file mode 100644 index 0000000..bc3aaf0 --- /dev/null +++ b/ufund-ui/src/app/components/signup/signup.component.html @@ -0,0 +1,31 @@ +<div id="box"> + <h1>Create an account</h1> + <div> + <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username> + <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span> + </div> + + <div> + <div> + <input placeholder="Password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #password> + <progress [ngClass]="'color' + strength.getValue()" id="bar" [value]="strength | async" max="6"> </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> + </div> + + <div> + <input placeholder="Confirm password" type="password" (input)="validate(username.value, confirmPass.value, password.value)" #confirmPass> + <span [style.color]="(passwordsMatch|async) ? 'green' : 'red'" *ngIf="passwordsMatch"><span class="icon">{{(passwordsMatch|async)?"check":"close"}}</span> Passwords match</span> + </div> + + <div> + <button [disabled]="!(ableToCreateAccount | async)" (click)="signup(username.value, password.value)">Create Account</button> + <span *ngIf="showSuccessMessage | async">Account created <a routerLink="/login">Proceed to login</a></span> + <span *ngIf="statusText | async">{{statusText | async}}</span> + </div> + <span>Already have an account? <a routerLink="/login">Log in</a></span> +</div> diff --git a/ufund-ui/src/app/components/signup/signup.component.ts b/ufund-ui/src/app/components/signup/signup.component.ts new file mode 100644 index 0000000..a20d828 --- /dev/null +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -0,0 +1,167 @@ +import {Component} from '@angular/core'; +import {UsersService} from '../../services/users.service'; +import {Router} from '@angular/router'; +import {BehaviorSubject} from 'rxjs'; +import {ToastsService, ToastType} from '../../services/toasts.service'; + +class PasswordRequirements { + sixLong: {title: string, value: boolean} = {title: 'Is 6 characters or longer' , value: false} + twelveLong: {title: string, value: boolean} = {title: 'Is 12 characters or longer', value: false} + lowercase: {title: string, value: boolean} = {title: 'Includes lowercase letter' , value: false} + uppercase: {title: string, value: boolean} = {title: 'Includes uppercase letter' , value: false} + number: {title: string, value: boolean} = {title: 'Includes number' , value: false} + symbol: {title: string, value: boolean} = {title: 'Includes symbol' , value: false} +} + +@Component({ + selector: 'app-signup', + standalone: false, + templateUrl: './signup.component.html', + styleUrl: './signup.component.css' +}) + +export class SignupComponent { + + protected passwordStatusText = new BehaviorSubject("") + protected passwordsMatch = new BehaviorSubject(false) + protected usernameStatusText = new BehaviorSubject("") + protected showSuccessMessage = new BehaviorSubject(false) + protected passwordStrongEnough = new BehaviorSubject(false) + protected ableToCreateAccount = new BehaviorSubject(false) + protected passwordRequirements: PasswordRequirements = new PasswordRequirements() + protected strength = new BehaviorSubject(0) + protected statusText = new BehaviorSubject(""); + + constructor( + protected usersService: UsersService, + protected router: Router, + protected toastService: ToastsService + ) {} + + signup(username: string | null, password: string | null) { + console.log(`attempting to sign up with ${username} ${password}`) + if (!username || !password) { + return; + } + + this.usersService.createUser(username, password).then(() => { + this.showSuccessMessage.next(true); + }).catch(ex => { + this.toastService.sendToast(ToastType.ERROR, "Unable to create account: " + friendlyHttpStatus[ex.status]) + console.log(ex) + }) + } + + validate(username: string, passConfirm:string, password: string) { + this.passwordsMatch.next(false) + this.usernameStatusText.next("") + this.checkPasswordStrength(password); + + if (username === "") { + this.usernameStatusText.next("Username field can't be blank") + } + + if (passConfirm && password === passConfirm) { + this.passwordsMatch.next(true) + } + this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username) + } + + checkPasswordStrength(password: string) { + this.strength.next(0) + this.passwordRequirements = new PasswordRequirements() + this.passwordStrongEnough.next(false) + + if (password.match(/[^!-~]/g)) { + this.passwordStatusText.next("Invalid characters") + + return + } + + if (password.length > 6) { + this.passwordRequirements.sixLong.value = true + } + if (password.length > 12) { + this.passwordRequirements.twelveLong.value = true + } + if (password.match(/[a-z]/g)) { + this.passwordRequirements.lowercase.value = true + } + if (password.match(/[A-Z]/g)) { + this.passwordRequirements.uppercase.value = true + } + if (password.match(/[0-9]/g)) { + this.passwordRequirements.number.value = true + } + if (password.match(/[^A-Za-z0-9]/g)) { + this.passwordRequirements.symbol.value = true + } + + let strength = 0 + Object.values(this.passwordRequirements).forEach(k => { + k.value && strength++ + }) + + if (strength >= 5) { + this.passwordStrongEnough.next(true) + this.passwordStatusText.next("") + } else if (strength == 0) { + this.passwordStatusText.next("") + } else { + this.passwordStatusText.next("5/6 checks required") + } + + this.strength.next(strength) + } + + getColor() { + return `rgba(${(this.strength.getValue()/7) * 255}, ${255 - (this.strength.getValue()/7) * 255}, 0)` + } + + protected readonly length = length; + protected readonly Object = Object; +} + +let friendlyHttpStatus: {[key: number]: string} = { + 200: 'OK', + 201: 'Created', + 202: 'Accepted', + 203: 'Non-Authoritative Information', + 204: 'No Content', + 205: 'Reset Content', + 206: 'Partial Content', + 300: 'Multiple Choices', + 301: 'Moved Permanently', + 302: 'Found', + 303: 'See Other', + 304: 'Not Modified', + 305: 'Use Proxy', + 306: 'Unused', + 307: 'Temporary Redirect', + 400: 'Bad Request', + 401: 'Unauthorized', + 402: 'Payment Required', + 403: 'Forbidden', + 404: 'Not Found', + 405: 'Method Not Allowed', + 406: 'Not Acceptable', + 407: 'Proxy Authentication Required', + 408: 'Request Timeout', + 409: 'Conflict', + 410: 'Gone', + 411: 'Length Required', + 412: 'Precondition Required', + 413: 'Request Entry Too Large', + 414: 'Request-URI Too Long', + 415: 'Unsupported Media Type', + 416: 'Requested Range Not Satisfiable', + 417: 'Expectation Failed', + 418: 'I\'m a teapot', + 429: 'Too Many Requests', + 500: 'Internal Server Error', + 501: 'Not Implemented', + 502: 'Bad Gateway', + 503: 'Service Unavailable', + 504: 'Gateway Timeout', + 505: 'HTTP Version Not Supported', +}; diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css new file mode 100644 index 0000000..4cd81fe --- /dev/null +++ b/ufund-ui/src/app/components/toast/toast.component.css @@ -0,0 +1,57 @@ +:host { + display: flex; + align-items: center; + justify-content: center; +} + +@keyframes slideDown { + from {transform: translateY(-90px);} + to {transform: translateY(0);} +} + +.toast { + /*transform: translateY(-90px);*/ + animation: slideDown .5s ease-in-out; + transition: transform .5s; + align-self: center; + z-index: 3; + position: absolute; + top: 15px; + display: flex; + flex-direction: row; + padding: 3px 15px; + background-color: #3a3a3a; + border-radius: 100000px; + gap: 10px; + align-items: center; + + button { + aspect-ratio: 1/1; + margin-right: -11px; + padding: 8px; + display: flex; + align-items: center; + background-color: transparent; + } + + button:hover { + background-color: rgba(255, 255, 255, 0.1); + } +} + +.toast.hide { + transform: translateY(-90px); +} + +.toast.warning { + background-color: #ffc500; + color: black; + + button { + color: black; + } +} + +.toast.error { + background-color: #d81a1a; +} diff --git a/ufund-ui/src/app/components/toast/toast.component.html b/ufund-ui/src/app/components/toast/toast.component.html new file mode 100644 index 0000000..dccf869 --- /dev/null +++ b/ufund-ui/src/app/components/toast/toast.component.html @@ -0,0 +1,7 @@ +<div class="toast" [ngClass]="ToastType[type].toLowerCase()" #toastDiv> + <span>{{this.message}}</span> + <a *ngIf="this.action" (click)="this.action.onAction()">{{this.action.label}}</a> + <button (click)="hide()"> + <span class="icon">close</span> + </button> +</div> diff --git a/ufund-ui/src/app/components/toast/toast.component.ts b/ufund-ui/src/app/components/toast/toast.component.ts new file mode 100644 index 0000000..47fd7ff --- /dev/null +++ b/ufund-ui/src/app/components/toast/toast.component.ts @@ -0,0 +1,37 @@ +import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core'; +import {ToastType} from '../../services/toasts.service'; + +@Component({ + selector: 'app-toast', + standalone: false, + templateUrl: './toast.component.html', + styleUrl: './toast.component.css' +}) +export class ToastComponent implements OnInit{ + @Input() type!: ToastType + @Input() message!: string + @Input() action?: {label: string, onAction: () => void} + + @ViewChild("toastDiv") toastDiv!: ElementRef<HTMLDivElement> + + ngOnInit() { + setTimeout(() => { + this.hide(); + }, 3000) + } + + hide() { + console.log(this.toastDiv, typeof this.toastDiv) + this.toastDiv.nativeElement.classList.add('hide') + } + + getColor() { + switch (this.type) { + case ToastType.ERROR: return "red"; + case ToastType.INFO: return ""; + case ToastType.WARNING: return "yellow"; + } + } + + protected readonly ToastType = ToastType; +} |