diff options
3 files changed, 34 insertions, 2 deletions
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 7f357db..83aeb5c 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 @@ -70,3 +70,18 @@ /* padding: 20px;*/ /* box-shadow: 0 0 100px black;*/ /*}*/ + +.accountWarn { + div { + display: flex; + flex-direction: row; + gap: 10px; + } + + background-color: var(--tertiary-color); + border-radius: 10px; + padding: 15px; + border-color: var(--secondary-color); + border-width: 1px; + border-style: solid; +} 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 8263c04..1ef4598 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,5 +1,17 @@ -<div id="box"> +<ng-template #warn> + <div *ngIf="!this.warned" class="accountWarn"> + <h1>Not Logged in!</h1> + <p>To contribute to needs you must be logged in!</p> + <div> + <button (click)="modalService.hideModal(); this.router.navigate(['/login'], {queryParams: {redir: this.router.url}});">Log In</button> + <button (click) = "modalService.hideModal(); warned = true">Continue Anyway</button> + </div> + </div> +</ng-template> + +<div id="box" (mouseenter)="!warned && (!usersService.isHelper() && !usersService.isManager()) ? modalService.showModal(warn) : null"> @if (need) { + <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/> <h1>{{need.name}}</h1> <span class="needType">{{need.type}} GOAL</span> 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 17e330c..67dae83 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 @@ -14,18 +14,21 @@ import {ModalService} from '../../services/modal.service'; templateUrl: './need-page.component.html', styleUrl: './need-page.component.css' }) + export class NeedPageComponent implements OnInit { + constructor( private route: ActivatedRoute, private cupboardService: CupboardService, private authService: AuthService, protected usersService: UsersService, private toastService: ToastsService, - private router: Router, + protected router: Router, protected modalService: ModalService ) {} @Input() need!: Need; + warned: boolean = false; ngOnInit(): void { const id = Number(this.route.snapshot.paramMap.get('id')); @@ -44,6 +47,8 @@ export class NeedPageComponent implements OnInit { return of(); })) .subscribe(() => { + let action = {label: "View Basket", onAction: () => this.router.navigate(['/basket'])} + this.toastService.sendToast(ToastType.INFO, `"${need.name}" Added to basket`, action) this.usersService.refreshBasket(); }); } else { |