diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5d8518e6..b88ad534 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -7,7 +7,8 @@
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2667f0b8..b6520117 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -46,6 +46,8 @@ import { TimeAgoPipe } from './pipes/time-ago.pipe';
import { StreamStatusesComponent } from './components/stream/stream-statuses/stream-statuses.component';
import { StreamEditionComponent } from './components/stream/stream-edition/stream-edition.component';
import { TutorialComponent } from './components/tutorial/tutorial.component';
+import { NotificationHubComponent } from './components/notification-hub/notification-hub.component';
+import { NotificationService } from "./services/notification.service";
const routes: Routes = [
{ path: "", redirectTo: "home", pathMatch: "full" },
@@ -82,7 +84,8 @@ const routes: Routes = [
TimeAgoPipe,
StreamStatusesComponent,
StreamEditionComponent,
- TutorialComponent
+ TutorialComponent,
+ NotificationHubComponent
],
imports: [
FontAwesomeModule,
@@ -100,7 +103,7 @@ const routes: Routes = [
]),
NgxsStoragePluginModule.forRoot()
],
- providers: [AuthService, NavigationService, MastodonService, StreamingService],
+ providers: [AuthService, NavigationService, NotificationService, MastodonService, StreamingService],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
diff --git a/src/app/components/floating-column/manage-account/manage-account.component.ts b/src/app/components/floating-column/manage-account/manage-account.component.ts
index dcbb2c92..ebf7c3de 100644
--- a/src/app/components/floating-column/manage-account/manage-account.component.ts
+++ b/src/app/components/floating-column/manage-account/manage-account.component.ts
@@ -4,6 +4,7 @@ import { Store } from '@ngxs/store';
import { AccountsStateModel, AccountInfo, RemoveAccount } from '../../../states/accounts.state';
import { AccountWrapper } from '../../../models/account.models';
import { NavigationService } from '../../../services/navigation.service';
+import { NotificationService } from '../../../services/notification.service';
@Component({
selector: 'app-manage-account',
@@ -17,7 +18,8 @@ export class ManageAccountComponent implements OnInit {
constructor(
private readonly store: Store,
- private readonly navigationService: NavigationService) { }
+ private readonly navigationService: NavigationService,
+ private notificationService: NotificationService) { }
ngOnInit() {
const instance = this.account.info.instance;
@@ -29,7 +31,9 @@ export class ManageAccountComponent implements OnInit {
addStream(stream: StreamElement): boolean {
if (stream) {
- this.store.dispatch([new AddStream(stream)]);
+ this.store.dispatch([new AddStream(stream)]).toPromise().then(() => {
+ this.notificationService.notify(`added ${stream.displayableFullName}`, false);
+ });
}
return false;
}
diff --git a/src/app/components/notification-hub/notification-hub.component.html b/src/app/components/notification-hub/notification-hub.component.html
new file mode 100644
index 00000000..48514e6e
--- /dev/null
+++ b/src/app/components/notification-hub/notification-hub.component.html
@@ -0,0 +1,5 @@
+
+
+ {{ notification.message }}
+
+
diff --git a/src/app/components/notification-hub/notification-hub.component.scss b/src/app/components/notification-hub/notification-hub.component.scss
new file mode 100644
index 00000000..f3861e03
--- /dev/null
+++ b/src/app/components/notification-hub/notification-hub.component.scss
@@ -0,0 +1,14 @@
+.notification-hub {
+ position: fixed;
+ bottom: 30px;
+ z-index: 9999999;
+ margin: 0 0 10px 0;
+
+ &__notification{
+ background-color: #22b90e;
+ color: black;
+ padding: 5px 10px;
+ border-radius: 2px;
+ margin: 0 0 5px 15px;
+ }
+}
\ No newline at end of file
diff --git a/src/app/components/notification-hub/notification-hub.component.spec.ts b/src/app/components/notification-hub/notification-hub.component.spec.ts
new file mode 100644
index 00000000..8d5e16ff
--- /dev/null
+++ b/src/app/components/notification-hub/notification-hub.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationHubComponent } from './notification-hub.component';
+
+xdescribe('NotificationHubComponent', () => {
+ let component: NotificationHubComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NotificationHubComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NotificationHubComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/notification-hub/notification-hub.component.ts b/src/app/components/notification-hub/notification-hub.component.ts
new file mode 100644
index 00000000..5d88f7a6
--- /dev/null
+++ b/src/app/components/notification-hub/notification-hub.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { NotificationService, NotificatioData } from '../../services/notification.service';
+
+@Component({
+ selector: 'app-notification-hub',
+ templateUrl: './notification-hub.component.html',
+ styleUrls: ['./notification-hub.component.scss']
+})
+export class NotificationHubComponent implements OnInit {
+ notifications: NotificatioData[] = [];
+
+ constructor(private notificationService: NotificationService) { }
+
+ ngOnInit() {
+ this.notificationService.notifactionStream.subscribe((notification: NotificatioData) => {
+ this.notifications.push(notification);
+
+ setTimeout(() => {
+ this.notifications = this.notifications.filter(x => x.id === notification.id);
+ }, 2000);
+ });
+
+ // this.autoSubmit();
+ }
+
+ autoSubmit(): any {
+ this.notificationService.notify("test message", false);
+
+ setTimeout(() => {
+ this.autoSubmit();
+ }, 5000);
+ }
+
+ onClick(notification: NotificatioData): void{
+ this.notifications = this.notifications.filter(x => x.id === notification.id);
+
+ setTimeout(() => {
+ this.notifications.length = 0;
+ }, 2000);
+ }
+}
diff --git a/src/app/services/notification.service.spec.ts b/src/app/services/notification.service.spec.ts
new file mode 100644
index 00000000..f40b4207
--- /dev/null
+++ b/src/app/services/notification.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NotificationService } from './notification.service';
+
+xdescribe('NotificationService', () => {
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ providers: [NotificationService]
+ });
+ });
+
+ it('should be created', inject([NotificationService], (service: NotificationService) => {
+ expect(service).toBeTruthy();
+ }));
+});
diff --git a/src/app/services/notification.service.ts b/src/app/services/notification.service.ts
new file mode 100644
index 00000000..8320c588
--- /dev/null
+++ b/src/app/services/notification.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class NotificationService {
+ public notifactionStream = new Subject();
+
+ constructor() {
+ }
+
+ public notify(message: string, isError: boolean){
+ let newNotification = new NotificatioData(message, isError);
+ this.notifactionStream.next(newNotification);
+ }
+}
+
+export class NotificatioData {
+ public id: string;
+
+ constructor(
+ public message: string,
+ public isError: boolean
+ ) {
+ this.id = `${message}${new Date().getTime()}`;
+ }
+}