diff options
Diffstat (limited to 'ufund-ui/src/app')
20 files changed, 353 insertions, 70 deletions
diff --git a/ufund-ui/src/app/app-routing.module.ts b/ufund-ui/src/app/app-routing.module.ts index a6ea806..89b6f67 100644 --- a/ufund-ui/src/app/app-routing.module.ts +++ b/ufund-ui/src/app/app-routing.module.ts @@ -9,13 +9,13 @@ import {NeedPageComponent} from './components/need-page/need-page.component'; import {SignupComponent} from './components/signup/signup.component'; const routes: Routes = [ - {path: '', component: HomePageComponent}, - {path: 'login', component: LoginComponent}, - {path: 'cupboard', component: CupboardComponent}, - {path: 'dashboard', component: DashboardComponent}, - {path: 'basket', component: FundingBasketComponent}, - {path: 'need/:id', component: NeedPageComponent}, - {path: 'signup', component: SignupComponent}, + { path: '', component: HomePageComponent, title: "Home | JS" }, + { path: 'login', component: LoginComponent, title: "Login | JS" }, + { path: 'cupboard', component: CupboardComponent, title: "Cupboard | JS" }, + { path: 'dashboard', component: DashboardComponent, title: "Dashboard | JS" }, + { path: 'basket', component: FundingBasketComponent, title: "Basket | JS" }, + { path: 'need/:id', component: NeedPageComponent, title: "Need | JS" }, + { path: 'signup', component: SignupComponent, title: "Signup | JS" }, ]; @NgModule({ diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css index e69de29..5596cf8 100644 --- a/ufund-ui/src/app/app.component.css +++ b/ufund-ui/src/app/app.component.css @@ -0,0 +1,45 @@ +:host { + display: flex; + flex-direction: column; + height: 100%; +} + +#header { + display: flex; + flex-direction: row; + justify-content: space-between; + /*border-bottom: light-dark(#d3d3d3, black) solid 1px;*/ + padding: 15px 20px; + /*background-color: light-dark(#f5f5f5, #2e2e2e);*/ + z-index: 2; + + h1 { + padding: 0; + margin: 0; + font-weight: 500; + /*text-decoration: none;*/ + text-transform: uppercase; + font-size: 16pt; + letter-spacing: .5px; + } + + div { + display: flex; + align-items: center; + gap: 20px; + } + + /*div:has(a:hover) a {*/ + /* color: light-dark(black, rgba(255, 255, 255, 0.5));*/ + /*}*/ + + a { + color: light-dark(black, white); + text-decoration: none; + } + + a:hover { + /*color: light-dark(black, white)*/ + text-decoration: underline; + } +} diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html index a490237..b0ee329 100644 --- a/ufund-ui/src/app/app.component.html +++ b/ufund-ui/src/app/app.component.html @@ -1,6 +1,17 @@ - -<h1>jelly solutions</h1> -<span>{{currentUser$ | async}}</span> <br> <button *ngIf="currentUser$.value != 'Logged out.'" (click)="reloadPage()"> Log Out</button> -<hr> +<div id="header"> + <div> + <a routerLink="/"> + <h1>Jelly Solutions</h1> + </a> + </div> + <div> + <a routerLink="/dashboard">Dashboard</a> + <a routerLink="/cupboard">Cupboard</a> + <a routerLink="/basket">Basket</a> +<!-- <span>{{currentUser$ | async}}</span>--> + <button *ngIf="currentUser$.value != 'Logged out.'" onclick="location.href='/';"> Log Out</button> + <button *ngIf="currentUser$.value == 'Logged out.'" routerLink="/login"> Log In</button> + </div> +</div> <router-outlet /> diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts index 156ef5f..ea7e6ad 100644 --- a/ufund-ui/src/app/app.module.ts +++ b/ufund-ui/src/app/app.module.ts @@ -14,6 +14,7 @@ import {RouterLink, RouterLinkActive, RouterOutlet} from '@angular/router'; import {DashboardComponent} from './components/dashboard/dashboard.component'; import {CommonModule} from '@angular/common'; import {LoginComponent} from './components/login/login.component'; +import { MiniNeedListComponent } from './components/mini-need-list/mini-need-list.component'; import { SignupComponent } from './components/signup/signup.component'; @NgModule({ @@ -27,6 +28,7 @@ import { SignupComponent } from './components/signup/signup.component'; DashboardComponent, LoginComponent, SignupComponent, + MiniNeedListComponent, ], imports: [ BrowserModule, diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index 6e70951..f4b6828 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -12,9 +12,9 @@ #menu { display: flex; - + margin: 10px; - + } .tab, .selected-tab { @@ -34,10 +34,10 @@ background-color: #d9d9d9; padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; + border-radius: 5px; visibility: visible; } #create-button { padding: 10px 20px; -}
\ No newline at end of file +} diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css index e69de29..9db015e 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: 1200px; + 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..330d1f3 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="/cupboard"/> diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.ts b/ufund-ui/src/app/components/dashboard/dashboard.component.ts index a0ad566..165c7ba 100644 --- a/ufund-ui/src/app/components/dashboard/dashboard.component.ts +++ b/ufund-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,6 +1,11 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {userType} from '../../models/User'; import {AuthService} from '../../services/auth.service'; +import {Router} from '@angular/router'; +import {Need} from '../../models/Need'; +import {CupboardService} from '../../services/cupboard.service'; +import {UsersService} from '../../services/users.service'; +import {firstValueFrom} from 'rxjs'; @Component({ selector: 'app-dashboard', @@ -8,14 +13,30 @@ import {AuthService} from '../../services/auth.service'; templateUrl: './dashboard.component.html', styleUrl: './dashboard.component.css' }) -export class DashboardComponent { +export class DashboardComponent implements OnInit{ + + topNeeds?: Need[] + almostThere?: Need[] + inBasket?: Need[] + constructor( protected authService: AuthService, + protected router: Router, + protected cupboardService: CupboardService ) {} - isManager() { - const type = this.authService.getCurrentUser()?.type; - return type === ("MANAGER" as unknown as userType); + ngOnInit() { + let user = this.authService.getCurrentUser() + if(!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.inBasket = r.filter(n => n.id in user?.basket) + }) } } 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..16f3140 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,37 @@ +:host { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +#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/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 a6441f4..743b1b3 100644 --- a/ufund-ui/src/app/components/login/login.component.html +++ b/ufund-ui/src/app/components/login/login.component.html @@ -1,7 +1,11 @@ -<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" routerLink="/signup">Create Account...</button> -<span *ngIf="statusText">{{statusText | async}}</span> +<div id="box"> + <span *ngIf="next" style="color: red">You must be logged in to view this page</span> + <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> + <span *ngIf="statusText">{{statusText | async}}</span> +</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 new file mode 100644 index 0000000..8a3b6a7 --- /dev/null +++ b/ufund-ui/src/app/components/mini-need-list/mini-need-list.component.css @@ -0,0 +1,55 @@ +: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; +} + +.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-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css index 345326f..5e07856 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 @@ -4,6 +4,7 @@ border: 2px solid #000; display: block; border-radius: 5px; + } div { @@ -27,7 +28,7 @@ li { font-weight: bold; border: 2px solid #000; border-radius: 5px; - margin: 5px; + margin: 5px; > button { background-color: transparent; width: 88%; @@ -40,7 +41,7 @@ li { width: 100%; flex: none; display: inline-block; - background-color: magenta; + background-color: magenta; > progress { width: 25%; float: none; @@ -74,9 +75,14 @@ li > button:hover p { #search-container { background-color: #d9d9d9; +#search-form { + background-color: light-dark(#d9d9d9, #1b1b1b); + padding: 10px 20px 20px 20px; border: 2px solid #000; border-radius: 5px; .wide-input { width: 60%; } - }
\ No newline at end of file + border-radius: 5px; + visibility: visible; + } 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 004f9eb..7ce7633 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,4 +1,4 @@ -<button routerLink="/dashboard">Back to dashboard</button> +<button routerLink="/cupboard">Back to cupboard</button> <h1>Viewing Need: {{need?.name}}</h1> <a>internal id: {{need?.id}}</a> <div style="display: flex; column-gap: 6px;"> @@ -20,4 +20,4 @@ <p>Goal: {{need?.maxGoal}}</p> <p>Current: {{need?.current}}</p> <p>Urgent: {{need?.urgent}}</p> -<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p>
\ No newline at end of file +<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p> diff --git a/ufund-ui/src/app/components/signup/signup.component.css b/ufund-ui/src/app/components/signup/signup.component.css index f286cf9..429bc42 100644 --- a/ufund-ui/src/app/components/signup/signup.component.css +++ b/ufund-ui/src/app/components/signup/signup.component.css @@ -1,7 +1,16 @@ :host { display: flex; + align-items: center; + justify-content: center; + height: 100%; + margin-top: -66px + +} + +#box { + display: flex; flex-direction: column; - max-width: 300px; + /*max-width: 300px;*/ gap: 10px; & > div { @@ -45,3 +54,20 @@ 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 index ebedc2a..bc3aaf0 100644 --- a/ufund-ui/src/app/components/signup/signup.component.html +++ b/ufund-ui/src/app/components/signup/signup.component.html @@ -1,26 +1,31 @@ -<p>Signup:</p> -<div> - <input placeholder="Username" type="text" (input)="validate(username.value, confirmPass.value, password.value)" #username> - <span *ngIf="usernameStatusText">{{usernameStatusText | async}}</span> -</div> +<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> - <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> + <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> - <span *ngFor="let requirement of Object.values(passwordRequirements)"> - <span *ngIf="passwordRequirements" [style.color]="requirement.value ? 'green' : 'red'"> {{requirement.title}} </span> - </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 *ngIf="confirmPassStatusText">{{confirmPassStatusText | async}}</span> -</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> + <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 index 3b43287..1ab863d 100644 --- a/ufund-ui/src/app/components/signup/signup.component.ts +++ b/ufund-ui/src/app/components/signup/signup.component.ts @@ -22,7 +22,7 @@ class PasswordRequirements { export class SignupComponent { protected passwordStatusText = new BehaviorSubject("") - protected confirmPassStatusText = new BehaviorSubject("") + protected passwordsMatch = new BehaviorSubject(false) protected usernameStatusText = new BehaviorSubject("") protected showSuccessMessage = new BehaviorSubject(false) protected passwordStrongEnough = new BehaviorSubject(false) @@ -51,7 +51,7 @@ export class SignupComponent { } validate(username: string, passConfirm:string, password: string) { - this.confirmPassStatusText.next("") + this.passwordsMatch.next(false) this.usernameStatusText.next("") this.checkPasswordStrength(password); @@ -59,8 +59,8 @@ export class SignupComponent { this.usernameStatusText.next("Username field can't be blank") } - if (!(password === passConfirm) && !!passConfirm) { - this.confirmPassStatusText.next("Passwords don't match") + if (passConfirm && password === passConfirm) { + this.passwordsMatch.next(true) } this.ableToCreateAccount.next(this.passwordStrongEnough.getValue() && password === passConfirm && !!username) } @@ -106,7 +106,7 @@ export class SignupComponent { } else if (strength == 0) { this.passwordStatusText.next("") } else { - this.passwordStatusText.next("Password does not meet requirements") + this.passwordStatusText.next("5/6 checks required") } this.strength.next(strength) |