diff options
Diffstat (limited to 'ufund-ui')
20 files changed, 358 insertions, 50 deletions
diff --git a/ufund-ui/public/jf.png b/ufund-ui/public/jf.png Binary files differnew file mode 100644 index 0000000..bbf95d5 --- /dev/null +++ b/ufund-ui/public/jf.png 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 fe4971a..c8add60 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -1,6 +1,6 @@ :host { display: block; - border: 2px solid #000; + /*border: 2px solid #000;*/ border-radius: 5px; padding: 10px 20px; } @@ -9,7 +9,7 @@ background-color: #d9d9d9; padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; + border-radius: 5px; width: 20%; visibility: visible; @@ -17,5 +17,5 @@ #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 bbc3f2c..fa3ed4f 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,7 +4,7 @@ display: block; width: 30%; border-radius: 5px; - + } li, div { @@ -16,9 +16,9 @@ li, div { } #search-form { - background-color: #d9d9d9; + background-color: light-dark(#d9d9d9, #1b1b1b); padding: 10px 20px 20px 20px; border: 2px solid #000; - border-radius: 5px; + border-radius: 5px; visibility: visible; - }
\ No newline at end of file + } 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 90fd459..b2579c9 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;"> @@ -19,4 +19,4 @@ <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 +<p>This goal is <strong>{{(((need?.current ?? 0)*100) / (need?.maxGoal ?? 0)).toFixed(0)}}%</strong> complete!</p> diff --git a/ufund-ui/src/index.html b/ufund-ui/src/index.html index 0517d5e..b6ae1a2 100644 --- a/ufund-ui/src/index.html +++ b/ufund-ui/src/index.html @@ -1,13 +1,17 @@ <!doctype html> <html lang="en"> <head> - <meta charset="utf-8"> - <title>UfundUi</title> - <base href="/"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="icon" type="image/x-icon" href="favicon.ico"> + <meta charset="utf-8"> + <title>UfundUi</title> + <base href="/"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="icon" type="image/x-icon" href="favicon.ico"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> + <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" /> </head> <body> - <app-root></app-root> +<app-root></app-root> </body> </html> diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index 90d4ee0..e4b4e8c 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -1 +1,59 @@ /* You can add global styles to this file, and also import other style files */ + +:root { + color-scheme: light dark; +} + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + height: 100%; + background-color: light-dark(white, #000715); +} + +body { + font-family: Inter, sans-serif; + font-optical-sizing: auto; +} + +input { + font-size: 14pt; + padding: 5px; + border-radius: 5px; + border-style: solid; + border-width: 1px; + background-color: light-dark(#ebebeb, #3a3a3a); + + &:hover { + background-color: light-dark(#e1e1e1, #444444); + } +} + +button, .button { + font-size: 14pt; + padding: 6px 16px; + border-radius: 9999px; + border-style: none; + background-color: light-dark(#ebebeb, #3a3a3a); + + &:hover { + background-color: light-dark(#e1e1e1, #444444); + } +} + +.button2 { + text-transform: uppercase; + border: 1px solid #5cdbff; + padding: 10px 25px; + font-size: 12pt; + font-weight: 600; + background-color: transparent; + text-shadow: #5cdbff 0 0 50px; +} + +.icon { + font-family: 'Material Symbols Outlined' +} |
