diff options
Diffstat (limited to '')
30 files changed, 408 insertions, 174 deletions
diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index 8b6b28a..6841606 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -49,12 +49,8 @@ gap: 20px; } - /*div:has(a:hover) a {*/ - /* color: light-dark(black, rgba(255, 255, 255, 0.5));*/ - /*}*/ - a { - color: light-dark(black, white); + color: var(--foreground-color); text-decoration: none; } @@ -62,29 +58,12 @@ text-decoration: underline; } - /*a {*/ - /* display: block;*/ - /* position: relative;*/ - /* padding: 0.1em 0;*/ - /*}*/ - - /*a::after {*/ - /* content: '';*/ - /* position: absolute;*/ - /* bottom: 4px;*/ - /* left: 0;*/ - /* width: 100%;*/ - /* height: 0.03em;*/ - /* background-color: white;*/ - /* opacity: 0;*/ - /* transition: opacity 300ms, transform 300ms;*/ - /*}*/ - - /*a:hover::after,*/ - /*a:focus::after {*/ - /* opacity: 1;*/ - /* transform: translate3d(0, 0.2em, 0);*/ - /*}*/ +} +.current { + text-decoration: underline !important; +} +#darkMode:hover { + text-decoration: none !important; } diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html index 30a5347..03c6338 100644 --- a/ufund-ui/src/app/app.component.html +++ b/ufund-ui/src/app/app.component.html @@ -6,12 +6,12 @@ </a> </div> <div> - <a *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a> - <a routerLink="/cupboard">Cupboard</a> - <a *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a> - <!-- <span>{{currentUser$ | async}}</span>--> + <a [class]="location.path() == '/dashboard' ? 'current' : ''" *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a> + <a [class]="location.path() == '/cupboard' ? 'current' : ''" routerLink="/cupboard">Cupboard</a> + <a [class]="location.path() == '/basket' ? 'current' : ''" *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a> <button *ngIf="currentUser | async" (click)="logout()">Log Out</button> <button *ngIf="!(currentUser | async)" (click)="login()">Log In</button> + <a class="icon" id="darkMode" href="#" (click)="$event.preventDefault(); toggleColorScheme()">brightness_7</a> </div> </div> diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts index 615397f..fafffef 100644 --- a/ufund-ui/src/app/app.component.ts +++ b/ufund-ui/src/app/app.component.ts @@ -1,10 +1,10 @@ import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core'; import {BehaviorSubject} from 'rxjs'; -import { DOCUMENT } from '@angular/common'; +import {DOCUMENT, Location} from '@angular/common'; import {AuthService} from './services/auth.service'; import {ToastsService} from './services/toasts.service'; import {User, userType} from './models/User'; -import {ActivatedRoute, Router} from '@angular/router'; +import {Router} from '@angular/router'; import {ModalService} from './services/modal.service'; @Component({ @@ -20,10 +20,10 @@ export class AppComponent implements OnInit { constructor( private authService: AuthService, private router: Router, - private route: ActivatedRoute, protected toastService: ToastsService, private viewContainerRef: ViewContainerRef, protected modalService: ModalService, + protected location: Location, @Inject(DOCUMENT) private document: Document ) {} @@ -40,6 +40,21 @@ export class AppComponent implements OnInit { this.authService.restoreLogin(dataParsed.username, dataParsed.key) console.log("Key found", dataParsed.key) } + + if (this.location.path() == '/cupboard') { + console.log("work") + } else { + console.log(this.location.path()) + } + + let theme = localStorage.getItem("theme") + if(!theme) { + // if no color scheme is set, get the system settings + let preferredTheme = this.document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark"; + localStorage.setItem("theme",preferredTheme); + theme = preferredTheme; + } + this.document.body.parentElement!.setAttribute("theme",theme); } login() { @@ -51,5 +66,17 @@ export class AppComponent implements OnInit { location.reload() } + toggleColorScheme() { + let theme = localStorage.getItem("theme"); + // fallback + if (!theme) { + theme = "light"; + } + let newTheme = theme == "light" ? "dark" : "light"; + this.document.body.parentElement!.setAttribute("theme",newTheme); + localStorage.setItem("theme", newTheme); + console.log(newTheme, this.document.body.parentElement); + } + protected readonly userType = userType; } diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index 4eebc2d..2d3fa7c 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -9,14 +9,14 @@ <div id="header2"> <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> + <form id="search-form"> + <input type="text" name="search" class="wide-input sort-scheme" placeholder="Search in {{needs.length}} needs..." (input)="search(searchForm.value)" #searchForm> <input type="reset" value="Clear" (click)="search(null)"> <br> </form> </div> <div id="sortArea"> <label for="sort">Sort by: </label> - <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input" (change)="search(searchForm.value)" [value]="currentSortAlgo"> + <select id='sort' [(ngModel)] = "currentSortAlgo" class="wide-input sort-scheme" (change)="search(searchForm.value)" [value]="currentSortAlgo"> <option *ngFor="let algorithm of Object.keys(SortingAlgorithms)" [value]="algorithm"> {{SortingAlgorithms[algorithm].display[sortMode === 'Ascending' ? 0 : 1]}} </option> @@ -25,7 +25,7 @@ <span class="icon">{{sortMode === 'Ascending' ? 'arrow_upward': 'arrow_downward'}}</span> </button> <label>Needs per page: </label> - <input type ="number" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}"> + <input type ="number" class="sort-scheme" [(ngModel)]="itemsPerPage" (change)="editItemsPerPage()" min="1" max="{{searchResults.length}}"> </div> </div> <h2 *ngIf="searchResults.length < needs.length && searchResults.length != 0"> Search Results({{needs.length - searchResults.length}} needs filtered): </h2> diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index f571566..42d920c 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {CupboardService} from '../../services/cupboard.service'; import {Need} from '../../models/Need'; import {catchError, of} from 'rxjs'; @@ -18,16 +18,16 @@ import {ModalService} from '../../services/modal.service'; }) export class CupboardComponent implements OnInit { - // selectedForm?: string = undefined; - // needs: any; + @ViewChild("needList") needList?: NeedListComponent + @ViewChild("searchForm") searchForm!: ElementRef<HTMLInputElement> private searchDelay: any; needs: Need[] = []; searchResults: Need[] = []; - sortMode: 'Ascending' | 'Descending' = 'Ascending' + sortMode = localStorage.getItem('sortMode') as 'Ascending' | 'Descending' ?? 'Ascending'; itemsPerPage = parseInt(localStorage.getItem('itemsPerPage') ?? '5') ?? 5; - currentSortAlgo = 'sortByPriority'; + currentSortAlgo = localStorage.getItem('sortAlgo') ?? 'sortByPriority'; constructor( private cupboardService: CupboardService, @@ -39,52 +39,30 @@ export class CupboardComponent implements OnInit { ) {} ngOnInit(): void { - this.cupboardService.getNeeds().subscribe(n => { - this.needs = n; - // this.refresh() - this.search(null) - }); - this.authService.getCurrentUserSubject().subscribe( - () => this.usersService.refreshBasket()) + this.refresh() } refresh() { this.cupboardService.getNeeds().subscribe(n => { - if (this.sortMode == 'Ascending') { - this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func); - } else { - this.needs = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse(); - } - this.searchResults = this.needs; - // this.updateVisibleNeeds(); + this.needs = n; + this.searchResults = this.sortNeeds(this.needs); }); - - const form = document.getElementById('search-form') as HTMLFormElement; - form.reset(); - this.search(null); + this.searchForm.nativeElement.form?.reset() } - async search(form: any) { - console.log(this.currentSortAlgo) + async search(search: any) { //wait .25 seconds before searching but cancel if another search is made during the wait to prevent too many api calls //remove previous search if it exists if (this.searchDelay) { clearTimeout(this.searchDelay); } - if (form) { + if (search) { this.searchDelay = setTimeout(() => { - - if (form) { - - const currentSearchValue = form.search; //latest value of the search - this.cupboardService.searchNeeds(currentSearchValue).subscribe((n) => { - if (this.sortMode == 'Ascending') { - this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func); - } else { - this.searchResults = n.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse(); - } - // this.updateVisibleNeeds(); + if (search) { + console.log("IF BLOCK") + this.cupboardService.searchNeeds(search).subscribe((n) => { + this.searchResults = this.sortNeeds(n); }); } }, 250); @@ -92,10 +70,25 @@ export class CupboardComponent implements OnInit { //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; + this.searchResults = this.sortNeeds(this.needs); + } + } + + sortNeeds(needs: Need[]) { + this.saveSortOptions() + needs = [...needs] // deep copy + if (this.sortMode == 'Ascending') { + return needs.sort(SortingAlgoArrays[this.currentSortAlgo].func); + } else { + return needs.sort(SortingAlgoArrays[this.currentSortAlgo].func).reverse(); } } + saveSortOptions() { + localStorage.setItem('sortMode', this.sortMode); + localStorage.setItem('sortAlgo', this.currentSortAlgo); + } + toggleSortMode(form : any) { if (this.sortMode == 'Ascending'){ this.sortMode = 'Descending' diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index 54f362b..cb4ad74 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.css +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css @@ -17,7 +17,7 @@ } .card { - background-color: #2e2e2e; + background-color: var(--tertiary-color); width: 400px; height: 130px; border-radius: 5px; @@ -34,7 +34,7 @@ .listCard { display: flex; flex-direction: column; - background-color: #2e2e2e; + background-color: var(--tertiary-color); border-radius: 5px; padding: 10px; gap: 10px; diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html index 233096a..20e1676 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.html +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html @@ -21,6 +21,12 @@ <span>Most fulfilled needs</span> <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list> </div> + <div class="listCard"> + <span>Total physical contributions</span> + <ul> + <li id="physicalContent" *ngFor="let need of physicalTotal">{{need}} </li> + </ul> + </div> } @else { <h1>Unauthorized</h1> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index 2ab4db2..b73be44 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -16,10 +16,11 @@ import {userType} from '../../models/User'; export class DashboardComponent implements OnInit{ protected count = new BehaviorSubject<number | undefined>(undefined) - protected totalDonations = new BehaviorSubject<number | undefined>(undefined) + protected totalDonations = new BehaviorSubject<String | undefined>(undefined) protected totalNeeds = new BehaviorSubject<number | undefined>(undefined) protected fulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) protected mostFulfilledNeeds = new BehaviorSubject<Need[] | undefined>(undefined) + protected physicalTotal: string[] = [] constructor( protected authService: AuthService, @@ -30,15 +31,20 @@ export class DashboardComponent implements OnInit{ ngOnInit() { this.userService.getCount().subscribe(count => this.count.next(count)) + this.physicalTotal = [] 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.totalDonations.next(totalValue.toLocaleString()) + } else { + this.physicalTotal.push(need.name + ": " + need.current) } } + + this.physicalTotal.sort((a, b) => a < b ? -1 : 1); this.fulfilledNeeds.next(needs.filter(a => ((a.current / a.maxGoal)) >= 1)) needs.sort((a, b) => b.current/b.maxGoal - a.current/a.maxGoal) 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 a1485a0..cff2bbe 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 @@ -11,7 +11,7 @@ } .needEntry { - background-color: #2e2e2e; + background-color: var(--tertiary-color); display: flex; flex-direction: column; border-radius: 5px; @@ -66,13 +66,13 @@ .clickable { padding: 10px; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; } .clickable:hover { - background-color: #444444; + background-color: var(--tertiary-color); } .actionArea { @@ -84,7 +84,12 @@ #footer { display: flex; flex-direction: row; - align-items: center; + align-items: start; gap: 20px; margin-bottom: 10px; } + +#totals { + display: flex; + flex-direction: column; +} 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 7158194..fa17b10 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,16 +3,21 @@ <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)="resetColor($event)"> + <input type="number" placeholder="Quantity" min="1" [id]="need?.id" class="contribution" (input)="onInput($event)"> <button class="removeNeed" (click)="this.usersService.removeNeed(need.id)"> <span class="icon">delete</span>Remove from Basket </button> </ng-template> - <app-need-list [uid]="1" [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/> + <app-need-list [itemsPerPage]="Infinity" [uid]="1" [actionArea]="NLActions" [needs]="(usersService.getBasket() | async)!"/> <br> <div id="footer"> <button class="button2" title="checkout" (click)="checkout()">Checkout</button> - <span id="running-total">Your current running total is: ${{runningTotal | async}}</span> + <div id="totals"> + <ul> + <li id="running-total">Your current running total is: ${{runningTotal | async}}</li> + <li id="physicalNeeds" *ngFor="let need of physicalTotal">{{need}}</li> + </ul> + </div> </div> </ng-template> <div *ngIf="!usersService.getBasket().getValue().length"> 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 78ce958..920a7ef 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,7 +24,8 @@ export class FundingBasketComponent implements OnInit { private toastService: ToastsService ) {} - public runningTotal = new BehaviorSubject(0) + protected runningTotal = new BehaviorSubject(0) + protected physicalTotal: string[] = [] @ViewChild("contribution") contribution?: Input; ngOnInit(): void { @@ -36,6 +37,9 @@ export class FundingBasketComponent implements OnInit { let order: { needID: number, quantity: number }[] = [] let isNotValid = false + this.runningTotal.next(0); + this.physicalTotal = [] + for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) { if (contribution.value == '' || contribution.valueAsNumber <= 0) { isNotValid = true @@ -60,21 +64,28 @@ export class FundingBasketComponent implements OnInit { this.toastService.sendToast(ToastType.INFO, "Checkout successful"); } - resetColor(ev: any) { + onInput(ev: any) { let total = 0 this.runningTotal.next(total); + this.physicalTotal = [] for (let contribution of document.querySelectorAll<HTMLInputElement>('.contribution')!) { this.cupboardService.getNeed(+contribution.id).subscribe(need => { if (contribution.value != '' && need.type != GoalType.PHYSICAL) { total += contribution.valueAsNumber + } else if (contribution.value != '' && need.type == GoalType.PHYSICAL) { + this.physicalTotal.push(need.name + ": " + contribution.value) } this.runningTotal.next(total); + }) } + this.physicalTotal.sort((a, b) => a < b ? -1 : 1); + (ev.target as HTMLInputElement).setAttribute("style", "border-color: unset") } protected readonly of = of; protected readonly userType = userType; + protected readonly Infinity = Infinity; } 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 b64be18..c345a0b 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 @@ -6,7 +6,6 @@ justify-content: center; overflow: clip; } - #hero { display: flex; /*flex-direction: column;*/ @@ -19,12 +18,20 @@ h1 { max-width: 1200px; } +#cr { + opacity: var(--opacity-cr); +} + #jf { - /*position: absolute;*/ + opacity: var(--opacity-jf); +} + +.text-highlight { + color: var(--highlight-color); } #right { - max-width: 500px; + max-width: 450px; max-height: 500px; display: flex; justify-content: center; @@ -33,6 +40,6 @@ h1 { } #left { - max-width: 500px; + max-width: 550px; 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 7a7ff96..051132e 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,10 +1,14 @@ <div id="hero"> <div id="left"> - <h1>Helping fund coral reef and marine life conservation</h1> + <h1>Helping fund <span class="text-highlight">coral reef</span> and + <span class="text-highlight">marine life</span> conservation.</h1> <p>View our online cupboard holding all needs related to sea life preservation</p> - <button class="button2" routerLink="/cupboard">View needs</button> + <button class="button2" routerLink="/cupboard">View Needs</button> </div> <div id="right"> - <img id="jf" src="jf.png" height="1024" width="1024"/> + <!-- <img id="jf" src="jf.png" height="1024" width="1024"/> --> + <div style="width: 500px; height: 500px;"></div> + <img style="position: absolute;" id="cr" src="cr.png" height="700" width="700"/> + <img style="position: absolute;" id="jf" src="jf.png" height="700" width="700"/> </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 95e8962..71c2549 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,4 +1,5 @@ -import {Component} from '@angular/core'; +import {Component, Inject, OnInit} from '@angular/core'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-home-page', @@ -6,6 +7,17 @@ import {Component} from '@angular/core'; templateUrl: './home-page.component.html', styleUrl: './home-page.component.css' }) -export class HomePageComponent { +export class HomePageComponent implements OnInit { + + constructor( + @Inject(DOCUMENT) private document: Document + ) {} + ngOnInit(): void { + console.log(this.document.documentElement); + } + + + + } diff --git a/ufund-ui/src/app/components/login/login.component.css b/ufund-ui/src/app/components/login/login.component.css index b56b4eb..810d924 100644 --- a/ufund-ui/src/app/components/login/login.component.css +++ b/ufund-ui/src/app/components/login/login.component.css @@ -2,29 +2,66 @@ 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"); + width: 100vw; + height: 150vh; + overflow: hidden; + background-color: transparent; background-blend-mode: darken; - margin-top: -66px + margin-top: -66px; +} + +#bg-cr { + position: absolute; + margin-top: -150px; + top:0; + width: 100vw; + height: calc(100vh + 150px); + background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg"); + background-size: cover; + opacity: calc(var(--opacity-cr)); + z-index: 1; +} +#bg-jf { + position: absolute; + top:0; + width: 100vw; + height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg"); + /*backdrop-filter: brightness(1%);*/ + background-size: cover; + opacity: var(--opacity-jf); + z-index: 1; } #box { + animation: ease-in-out fadeIn .1s; display: flex; flex-direction: column; - max-width: 350px; + /*align-items: center;*/ + aspect-ratio: 4/5; + min-height: 50vh; + /*margin-top: 15vh;*/ gap: 10px; + background-color: color-mix(in srgb, var(--background-color), transparent 50%); 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-color: var(--highlight-color); + z-index: 2; + justify-content: center; } +#greeting { + color: var(--highlight-color); + padding: 0; + margin: 0; + /*font-size: 32px;*/ + /* text-decoration: underline; + text-decoration-color: var(--highlight-color); */ +} .border { border-style: solid; border-width: 1px; @@ -34,3 +71,28 @@ background-color: white; box-shadow: 0 0 10px 10px black; } + +#signup { + color: var(--highlight-color); + text-decoration: underline; + text-decoration-thickness: 1px; + text-decoration-color: var(--highlight-color); +} + +input { + width: 100%; +} + +h1 { + margin-top: 0; +} + +@keyframes fadeIn { + from { + transform: translateY(-20px); + opacity: 0 + } + to { + opacity: 1 + } +} diff --git a/ufund-ui/src/app/components/login/login.component.html b/ufund-ui/src/app/components/login/login.component.html index 1017d0f..8b8f5b3 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -1,9 +1,11 @@ <div id="box"> + <h2 id="greeting">Welcome back,</h2> <h1>Login</h1> - <input placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)"> - <input placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)"> + <input class="form-input" placeholder="Username" type="text" #username (keydown.enter)="login(username.value, password.value)"> + <input class="form-input" placeholder="Password" type="password" #password (keydown.enter)="login(username.value, password.value)"> <button type="button" (click)="login(username.value, password.value)">Login</button> - <div> - New? <a routerLink="/signup">Create an account</a> - </div> + <span>New? <a routerLink="/signup">Create an account.</a></span> </div> +<div id="bg-cr"></div> +<div id="bg-jf"></div> + 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 6dceee1..3bc8127 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 @@ -9,7 +9,7 @@ height: 175px; display: flex; align-items: center; - color: #878787; + color: gray; } #needList { @@ -18,14 +18,15 @@ /*padding: 10px;*/ gap: 10px; justify-content: start; - overflow: auto; + overflow-x: auto; + overflow-y: clip; } .needEntry { padding: 10px; display: flex; flex-direction: column; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; height: 175px; width: 200px; @@ -41,7 +42,7 @@ } .needEntry:hover { - background-color: #444444; + background-color: var(--hover-color); } .needName { 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 index b06e061..211ee17 100644 --- a/ufund-ui/src/app/components/need-edit/need-edit.component.css +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.css @@ -11,8 +11,8 @@ padding: 10px; border-style: solid; border-width: 1px; - border-color: #6c6c6c; - background-color: #2e2e2e; + border-color: var(--secondary-color); + background-color: var(--tertiary-color); border-radius: 5px; position: relative; width: 500px; @@ -49,3 +49,8 @@ textarea { label { padding: 3px; } + + +.red { + color: red; +} 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 index ed4bfb3..f7eec63 100644 --- a/ufund-ui/src/app/components/need-edit/need-edit.component.html +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.html @@ -3,23 +3,23 @@ <h2>{{this.mode}} Need</h2> <form #updateForm="ngForm" id="update-form" (ngSubmit)="submit(updateForm.value)"> <div> - <span>Name:</span> + <span>Name <span class="red">*Required</span></span> <input type="text" name="name" [(ngModel)]="needCopy.name"> </div> <div> - <span>Image:</span> + <span>Image</span> <input type="text" name="image" [(ngModel)]="needCopy.image"> </div> <div> - <span>Location:</span> + <span>Location</span> <input type="text" name="location" [(ngModel)]="needCopy.location"> </div> <div> - <span>Max Goal:</span> + <span>Max Goal <span class="red">*Required</span></span> <input type="number" name="maxGoal" [(ngModel)]="needCopy.maxGoal"> </div> <div> - <span>Type:</span> + <span>Type <span class="red">*Required</span></span> <label> <input type="radio" name="type" value="MONETARY" [(ngModel)]="needCopy.type"> Monetary @@ -30,14 +30,14 @@ </label> </div> <div> - <span>Urgency:</span> + <span>Urgency</span> <label> <input type="checkbox" name="urgent" [(ngModel)]="needCopy.urgent"> Urgent </label> </div> <div> - <span>Description:</span> + <span>Description</span> <textarea name="description" [(ngModel)]="needCopy.description"></textarea> </div> <input type="submit" value="Submit"> 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 index abfa543..3c42c34 100644 --- a/ufund-ui/src/app/components/need-edit/need-edit.component.ts +++ b/ufund-ui/src/app/components/need-edit/need-edit.component.ts @@ -39,7 +39,7 @@ export class NeedEditComponent implements OnChanges { id: this.needCopy.id, //system will control this maxGoal: form.maxGoal, type: GoalType[form.type as keyof typeof GoalType], - urgent: form.urgent, + urgent: form.urgent ?? false, filterAttributes: [], current: 0, description: form.description @@ -53,15 +53,10 @@ export class NeedEditComponent implements OnChanges { } updateNeed(need: Need) { + need.current = this.need?.current ?? 0 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"); - } + this.toastService.sendToast(ToastType.ERROR, ex.error); return of() })) .subscribe( @@ -82,13 +77,7 @@ export class NeedEditComponent implements OnChanges { createNeed(need: Need) { this.cupboardService.createNeed(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"); - } + this.toastService.sendToast(ToastType.ERROR, ex.error); return of() })) .subscribe( 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 60af7bb..38ed4df 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,5 +1,5 @@ .needEntry { - background-color: #2e2e2e; + background-color: var(--tertiary-color); display: flex; flex-direction: column; border-radius: 5px; @@ -8,7 +8,7 @@ #needList { display: flex; flex-direction: column; - gap: 15px + gap: 10px } .needName { @@ -72,7 +72,7 @@ .urgent { font-size: 11pt; background-color: rgba(255, 165, 0, 0.27); - color: rgba(255, 165, 0, 1); + color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1)); padding: 2px; border-radius: 5px; } @@ -88,7 +88,7 @@ .clickable { padding: 10px; - background-color: #3a3a3a; + background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; height: 130px; @@ -98,7 +98,7 @@ } .clickable:hover { - background-color: #444444; + background-color: var(--hover-color); } .actionArea { 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 1410ce6..99c9f97 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 @@ -2,12 +2,12 @@ <div id="needList"> <div *ngFor="let need of visibleNeeds" class="needEntry"> <div [routerLink]="'/need/' + need.id" class="clickable"> - + <div class="split"> <div class="left"> <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/> </div> - + <div class="middle"> <span class="needName">{{need.name}}</span> <span class="needType">{{need.type}}</span> @@ -21,18 +21,18 @@ <div class="prog"> <span id="hover-status-label-{{need.id}}"> </span> - <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}/{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> + <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}} / {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal.toLocaleString()}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span> <progress [value]="need.current" [max]="need.maxGoal"></progress> </div> </div> - + <div *ngIf="actionArea" class="actionArea"> <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/> </div> </div> </div> -<div id="page-selector"> +<div *ngIf="itemsPerPage !== Infinity" id="page-selector"> <button [disabled]="!(currentPage !== 0)" (click)="firstPage()"><span class="icon">first_page</span></button> <button [disabled]="!(currentPage > 0)" (click)="decrementPage()"><span class="icon">arrow_back_ios_new</span></button> <span>Page {{currentPage + 1}} of {{totalPages}}</span> 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 7ca0ae7..b0a012f 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 @@ -19,8 +19,8 @@ export class NeedListComponent implements OnChanges { totalPages: number = 0; ngOnChanges() { - this.updateVisibleNeeds() this.currentPage = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0; + this.updateVisibleNeeds() } getPrefix(need: Need) { @@ -59,5 +59,6 @@ export class NeedListComponent implements OnChanges { } protected readonly GoalType = GoalType; + protected readonly Infinity = Infinity; } 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 6ca1350..7f357db 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 @@ -42,7 +42,7 @@ .urgent { font-size: 11pt; background-color: rgba(255, 165, 0, 0.27); - color: rgba(255, 165, 0, 1); + color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1)); padding: 2px; border-radius: 5px; } 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 b03e25f..8588852 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 @@ -19,9 +19,9 @@ <span>This goal is <strong>{{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}%</strong> complete!</span> </div> - <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}}</span> + <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal.toLocaleString()}}</span> - <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}</span> + <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}}</span> <span><strong>Location:</strong> {{need.location}}</span> diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index aa90e04..4073931 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -11,18 +11,19 @@ } #box { + animation: ease-in-out fadeIn .1s; display: flex; flex-direction: column; max-width: 500px; gap: 10px; - backdrop-filter: blur(25px); - background-color: rgba(0, 0, 0, 0.1); - padding: 30px; - color: white; + backdrop-filter: blur(10px); + background-color: color-mix(in srgb, var(--background-color), transparent 50%); + padding: 90px 30px; border-radius: 5px; border-style: solid; border-width: 1px; - border-color: rgb(140, 140, 255); + border-color: var(--highlight-color); + z-index: 2; & > div { display: flex; @@ -86,3 +87,41 @@ } } +h1 { + margin-top: 0; +} + +#bg-cr { + position: absolute; + margin-top: -150px; + top:0; + width: 100vw; + height: calc(100vh + 150px); + background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)), url("/login-cr.jpg"); + background-size: cover; + opacity: calc(var(--opacity-cr)); + z-index: 1; +} + +#bg-jf { + position: absolute; + top:0; + width: 100vw; + height: 100vh; + background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/login-jf.jpg"); + /*backdrop-filter: brightness(1%);*/ + background-size: cover; + opacity: var(--opacity-jf); + z-index: 1; +} + +@keyframes fadeIn { + from { + transform: translateY(-20px); + opacity: 0 + } + to { + opacity: 1 + } +} + diff --git a/ufund-ui/src/app/components/signup/signup.component.html b/ufund-ui/src/app/components/signup/signup.component.html index ef2fc27..78f5099 100644 --- a/ufund-ui/src/app/components/signup/signup.component.html +++ b/ufund-ui/src/app/components/signup/signup.component.html @@ -26,3 +26,5 @@ </div> <span>Already have an account? <a routerLink="/login">Log in</a></span> </div> +<div id="bg-cr"></div> +<div id="bg-jf"></div> diff --git a/ufund-ui/src/app/components/toast/toast.component.css b/ufund-ui/src/app/components/toast/toast.component.css index 82e2ff3..5d2a7df 100644 --- a/ufund-ui/src/app/components/toast/toast.component.css +++ b/ufund-ui/src/app/components/toast/toast.component.css @@ -20,7 +20,8 @@ display: flex; flex-direction: row; padding: 3px 15px; - background-color: #3a3a3a; + color: var(--foreground-color); + background-color: var(--secondary-color); border-radius: 100000px; gap: 10px; align-items: center; @@ -54,4 +55,5 @@ .toast.error { background-color: #d81a1a; + color: white; } diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html index b6ae1a2..34b631c 100644 --- a/ufund-ui/src/index.html +++ b/ufund-ui/src/index.html @@ -1,5 +1,5 @@ <!doctype html> -<html lang="en"> +<html lang="en" theme="light"> <head> <meta charset="utf-8"> <title>UfundUi</title> diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 527408a..c3e2c99 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -1,17 +1,54 @@ /* You can add global styles to this file, and also import other style files */ -:root { - color-scheme: /*light*/ dark; -} - * { box-sizing: border-box; + transition: color, background-color ease-in-out .1s; +} + +[theme="light"] { + color-scheme: light; + --background-color: #e6e4df; + --secondary-color: #d7d1c7; + --tertiary-color: #e0dcd4; + --foreground-color: #000000; + --highlight-color: #cf9451; + --dark-highlight-clor: #582f00; + --hover-color: #d8cdc0; + --opacity-cr: 1; + --opacity-jf: 0; +} + +[theme="dark"] { + color-scheme: dark; + --background-color: #000715; + --secondary-color: #3a3a3a; /* color of cards and buttons*/ + --tertiary-color: #2e2e2e; /* color of dark cards */ + --foreground-color: #ffffff; /* used on text */ + --highlight-color: #60a9f3; /* accent color */ + --dark-highlight-clor: #002846; /* not used currently */ + --hover-color: #323c4e; /* hover color for cards and buttons*/ + --opacity-cr: 0; + --opacity-jf: 1; + + /* Experimental blue dark theme: + --secondary-color: #19212e; + --tertiary-color: #121722; + --foreground-color: #ffffff; + --highlight-color: #6091e8; + --dark-highlight-clor: #002846; + --hover-color: #192940; + */ +} + +:root { + --background-hover: color-mix(in oklch, var(--background-color) 60%, var(--hover-color) 40%); } html, body { margin: 0; height: 100%; - background-color: light-dark(white, #000715); + background-color: var(--background-color); + color: var(--foreground-color); } body { @@ -19,7 +56,7 @@ body { font-optical-sizing: auto; } -input, textarea { +input, textarea, select { resize: none; font-family: Inter, sans-serif; font-size: 14pt; @@ -27,10 +64,19 @@ input, textarea { border-radius: 5px; border-style: solid; border-width: 1px; - background-color: light-dark(#ebebeb, #3a3a3a); + background-color: var(--secondary-color); &:hover { - background-color: light-dark(#e1e1e1, #444444); + background-color: var(--hover-color); + } + + &.sort-scheme { + background-color: transparent; + border-color: var(--secondary-color); + + &:hover { + background-color: var(--background-hover); + } } } @@ -39,26 +85,45 @@ button, input[type=button], input[type=reset], input[type=submit], .button { padding: 6px 16px; border-radius: 9999px; border-style: none; - background-color: light-dark(#ebebeb, #3a3a3a); + /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/ + background-color: var(--secondary-color); display: flex; gap: 5px; text-align: center; justify-content: center; align-items: center; + cursor: pointer; + + &:disabled { + pointer-events: none; + } &:hover { - background-color: light-dark(#e1e1e1, #444444); + background-color: var(--hover-color); + } + + &.sort-scheme { + background-color: transparent; + + &:hover { + background-color: var(--background-hover); + } } } .button2 { text-transform: uppercase; - border: 1px solid #5cdbff; + border: 1px solid var(--highlight-color); padding: 10px 25px; + /*font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/ font-size: 12pt; - font-weight: 600; + font-weight: 700; background-color: transparent; - text-shadow: #5cdbff 0 0 50px; + text-shadow: var(--highlight-color) 0 0 50px; + + &:hover { + background-color: var(--background-hover) !important; + } } .icon { @@ -72,3 +137,14 @@ h1 { progress { min-width: 100%; } + +a { + color: var(--highlight-color); +} + +ul { + display: flex; + flex-direction: column; + gap: 5px; + margin: 0; +} |