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()}`; + } +}