aboutsummaryrefslogtreecommitdiff
path: root/ufund-ui
diff options
context:
space:
mode:
Diffstat (limited to 'ufund-ui')
-rw-r--r--ufund-ui/src/app/app.component.css28
-rw-r--r--ufund-ui/src/app/app.component.html8
-rw-r--r--ufund-ui/src/app/app.component.ts14
-rw-r--r--ufund-ui/src/app/app.module.ts2
-rw-r--r--ufund-ui/src/app/components/toast/toast.component.css57
-rw-r--r--ufund-ui/src/app/components/toast/toast.component.html7
-rw-r--r--ufund-ui/src/app/components/toast/toast.component.ts37
-rw-r--r--ufund-ui/src/app/services/toasts.service.ts12
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
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-17 14:14:35 +0000