TOASTS

8 files changed, 118 insertions, 47 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index 5204919..0bcd658 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -64,31 +64,3 @@
 
 
 }
-
-.toast {
-    transform: translateY(-90px);
-    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;
-    }
-}
-
-.toast.active {
-    transform: translateY(0);
-}
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index 89075e1..959eada 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -1,11 +1,3 @@
-<div class="toast" #toastdiv>
-<!--    <span{{(toast | async).message}}</span>-->
-<!--    <a *ngIf="toast.action" (click)="toast.action.onAction()">{{toast.action.label}}</a>-->
-<!--    <button (click)="toastdiv.classList.remove('active')">-->
-<!--        <span class="icon">close</span>-->
-<!--    </button>-->
-</div>
-
 <div id="header">
     <div>
         <a routerLink="/">
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index df9114e..2f98334 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,15 +1,11 @@
-import {Component, OnInit, Inject} from '@angular/core';
+import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import {AuthService} from './services/auth.service';
-import {ToastType} from './services/toasts.service';
+import {ToastsService} from './services/toasts.service';
 import {User} from './models/User';
 import {ActivatedRoute, Router} from '@angular/router';
 
-interface ToastProps {
-    type: ToastType, message: string, action?: {label: string, onAction: () => void}
-}
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -19,13 +15,13 @@ interface ToastProps {
 export class AppComponent implements OnInit {
     // title = 'ufund-ui';
     currentUser?: BehaviorSubject<User | null>;
-    toast = new BehaviorSubject<ToastProps>({type: ToastType.INFO, message: "testToast"})
-
 
     constructor(
         private authService: AuthService,
         private router: Router,
         private route: ActivatedRoute,
+        protected toastService: ToastsService,
+        private viewContainerRef: ViewContainerRef,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
@@ -34,6 +30,7 @@ export class AppComponent implements OnInit {
     }
 
     ngOnInit() {
+        this.toastService.setRootViewContainerRef(this.viewContainerRef)
         this.currentUser = this.authService.getCurrentUserSubject()
         let data = localStorage.getItem("credential");
         if (data) {
@@ -51,5 +48,4 @@ export class AppComponent implements OnInit {
         localStorage.removeItem("credential")
         location.reload()
     }
-
 }
diff --git a/ufund-ui/src/app/app.module.ts b/ufund-ui/src/app/app.module.ts
index ea7e6ad..c91256e 100644
--- a/ufund-ui/src/app/app.module.ts
+++ b/ufund-ui/src/app/app.module.ts
@@ -16,6 +16,7 @@ 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';
+import { ToastComponent } from './components/toast/toast.component';
 
 @NgModule({
     declarations: [
@@ -29,6 +30,7 @@ import { SignupComponent } from './components/signup/signup.component';
         LoginComponent,
         SignupComponent,
         MiniNeedListComponent,
+        ToastComponent,
     ],
     imports: [
         BrowserModule,
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;
+}
diff --git a/ufund-ui/src/app/services/toasts.service.ts b/ufund-ui/src/app/services/toasts.service.ts
index 0c35e45..4fd024e 100644
--- a/ufund-ui/src/app/services/toasts.service.ts
+++ b/ufund-ui/src/app/services/toasts.service.ts
@@ -1,4 +1,5 @@
-import {Injectable} from '@angular/core';
+import {Injectable, ViewContainerRef} from '@angular/core';
+import {ToastComponent} from '../components/toast/toast.component';
 
 export enum ToastType {
     INFO,
@@ -11,9 +12,16 @@ export enum ToastType {
 })
 export class ToastsService {
 
-    constructor() {}
+    private vcr?: ViewContainerRef
 
     sendToast(type: ToastType, message: string, action?: {label: string, onAction: () => void}) {
+        let compRef = this.vcr?.createComponent(ToastComponent)!
+        compRef.setInput("message", message)
+        compRef.setInput("type", type)
+        compRef.setInput("action", action)
+    }
 
+    setRootViewContainerRef(vcr: ViewContainerRef) {
+        this.vcr = vcr
     }
 }