added first iteration of notification center
This commit is contained in:
parent
d77d269501
commit
3cd12e4a1f
|
@ -7,7 +7,8 @@
|
||||||
<div id="display-zone">
|
<div id="display-zone">
|
||||||
<app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
|
<app-tutorial id="tutorial" *ngIf="tutorialActive"></app-tutorial>
|
||||||
<app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
|
<app-floating-column id="floating-column" *ngIf="floatingColumnActive"></app-floating-column>
|
||||||
<router-outlet></router-outlet>
|
<app-notification-hub></app-notification-hub>
|
||||||
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<app-streams-selection-footer>
|
<app-streams-selection-footer>
|
||||||
|
|
|
@ -46,6 +46,8 @@ import { TimeAgoPipe } from './pipes/time-ago.pipe';
|
||||||
import { StreamStatusesComponent } from './components/stream/stream-statuses/stream-statuses.component';
|
import { StreamStatusesComponent } from './components/stream/stream-statuses/stream-statuses.component';
|
||||||
import { StreamEditionComponent } from './components/stream/stream-edition/stream-edition.component';
|
import { StreamEditionComponent } from './components/stream/stream-edition/stream-edition.component';
|
||||||
import { TutorialComponent } from './components/tutorial/tutorial.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 = [
|
const routes: Routes = [
|
||||||
{ path: "", redirectTo: "home", pathMatch: "full" },
|
{ path: "", redirectTo: "home", pathMatch: "full" },
|
||||||
|
@ -82,7 +84,8 @@ const routes: Routes = [
|
||||||
TimeAgoPipe,
|
TimeAgoPipe,
|
||||||
StreamStatusesComponent,
|
StreamStatusesComponent,
|
||||||
StreamEditionComponent,
|
StreamEditionComponent,
|
||||||
TutorialComponent
|
TutorialComponent,
|
||||||
|
NotificationHubComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
FontAwesomeModule,
|
FontAwesomeModule,
|
||||||
|
@ -100,7 +103,7 @@ const routes: Routes = [
|
||||||
]),
|
]),
|
||||||
NgxsStoragePluginModule.forRoot()
|
NgxsStoragePluginModule.forRoot()
|
||||||
],
|
],
|
||||||
providers: [AuthService, NavigationService, MastodonService, StreamingService],
|
providers: [AuthService, NavigationService, NotificationService, MastodonService, StreamingService],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||||
})
|
})
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { Store } from '@ngxs/store';
|
||||||
import { AccountsStateModel, AccountInfo, RemoveAccount } from '../../../states/accounts.state';
|
import { AccountsStateModel, AccountInfo, RemoveAccount } from '../../../states/accounts.state';
|
||||||
import { AccountWrapper } from '../../../models/account.models';
|
import { AccountWrapper } from '../../../models/account.models';
|
||||||
import { NavigationService } from '../../../services/navigation.service';
|
import { NavigationService } from '../../../services/navigation.service';
|
||||||
|
import { NotificationService } from '../../../services/notification.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-manage-account',
|
selector: 'app-manage-account',
|
||||||
|
@ -17,7 +18,8 @@ export class ManageAccountComponent implements OnInit {
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private readonly store: Store,
|
private readonly store: Store,
|
||||||
private readonly navigationService: NavigationService) { }
|
private readonly navigationService: NavigationService,
|
||||||
|
private notificationService: NotificationService) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
const instance = this.account.info.instance;
|
const instance = this.account.info.instance;
|
||||||
|
@ -29,7 +31,9 @@ export class ManageAccountComponent implements OnInit {
|
||||||
|
|
||||||
addStream(stream: StreamElement): boolean {
|
addStream(stream: StreamElement): boolean {
|
||||||
if (stream) {
|
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;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
<div class="notification-hub">
|
||||||
|
<div class="notification-hub__notification" *ngFor="let notification of notifications" (click)="onClick(notification)">
|
||||||
|
{{ notification.message }}
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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<NotificationHubComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ NotificationHubComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(NotificationHubComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
|
@ -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();
|
||||||
|
}));
|
||||||
|
});
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Subject } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class NotificationService {
|
||||||
|
public notifactionStream = new Subject<NotificatioData>();
|
||||||
|
|
||||||
|
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()}`;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue