Permalink
Browse files

feat(notification): implement live notifications (closes #128)

  • Loading branch information...
jkuri committed Sep 12, 2017
1 parent 2a19784 commit af04c8edab128587ddcca48ada86ad5f07ec2d25
@@ -150,6 +150,12 @@ export class SocketServer {
case 'subscribeToLogs':
logger.subscribe(msg => conn.next(msg));
break;
case 'subscribeToNotifications':
logger.filter(msg => !!msg.notify).subscribe(msg => {
const notify = { notification: msg, type: 'notification' };
conn.next(notify);
});
break;
}
});
});
@@ -11,6 +11,7 @@ import { SocketServiceProvider } from './services/socket.service';
import { AuthGuardProvider, AuthGuard } from './services/auth-guard.service';
import { AccessGuardProvider, AccessGuard } from './services/access-guard.service';
import { AuthServiceProvider } from './services/auth.service';
import { NotificationService } from './services/notification.service';
import { EqualValidator } from './directives/equal-validator.directive';
import { SafeHtmlPipe } from './pipes/safe-html.pipe';
import { TimeDurationPipe } from './pipes/time-duration.pipe';
@@ -127,7 +128,8 @@ import { AppLogsComponent } from './components/app-logs';
SocketServiceProvider,
AuthServiceProvider,
AuthGuardProvider,
AccessGuardProvider
AccessGuardProvider,
NotificationService
],
bootstrap: [ AppComponent ]
})
@@ -14,12 +14,12 @@
<div class="nav-right">
<a class="nav-item notification-item" *ngIf="user" (click)="toggleNotify()">
<img src="/images/icons/notification.svg">
<div class="notify-num-container">
<span>5</span>
<div class="notify-num-container" *ngIf="notifications?.length">
<span>{{ notifications?.length }}</span>
</div>
<div class="notification-dropdown" *ngIf="notifyDropped">
<div class="notification-item">
<span>[error]: bleenco/abstruse access_token not set</span>
<div class="notification-item" *ngFor="let notify of notifications; let i = index;">
<span [ngClass]="{ error: notify.type === 'error' }">{{ notify.message }}</span>
</div>
</div>
</a>
@@ -2,6 +2,7 @@ import { Component, HostListener, ElementRef, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { AuthService } from '../../services/auth.service';
import { ConfigService } from '../../services/config.service';
import { NotificationService, NotificationType } from '../../services/notification.service';

@Component({
selector: 'app-header',
@@ -11,18 +12,22 @@ export class AppHeaderComponent implements OnInit {
menuDropped: boolean;
notifyDropped: boolean;
user: any;
notifications: NotificationType[];

constructor(
private authService: AuthService,
private router: Router,
private elementRef: ElementRef,
private config: ConfigService
private config: ConfigService,
private notificationService: NotificationService
) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.menuDropped = false;
}
});

this.notifications = [];
}

ngOnInit() {
@@ -37,6 +42,16 @@ export class AppHeaderComponent implements OnInit {
this.user.avatar = this.config.url + this.user.avatar;
}
});

if (this.user) {
this.notificationService.notifications
.distinctUntilChanged()
.subscribe((notify: NotificationType) => {
this.notifications.push(notify);
});

this.notificationService.sub();
}
}

toggleMenu() {
@@ -0,0 +1,29 @@
import { Injectable } from '@angular/core';
import { SocketService } from './socket.service';
import { Subject } from 'rxjs/Subject';

export interface NotificationType {
message: string;
type: 'error' | 'warning' | 'info';
}

@Injectable()
export class NotificationService {
notifications: Subject<NotificationType>;

constructor(private socket: SocketService) {
this.notifications = new Subject();
}

sub(): void {
this.socket.emit({ type: 'subscribeToNotifications' });

this.socket.outputEvents
.filter(e => e.type === 'notification')
.subscribe(e => this.emit(e.notification));
}

emit(notify: NotificationType): void {
this.notifications.next(notify);
}
}
@@ -35,7 +35,7 @@

.notification-dropdown
position: absolute
width: 300px
width: 400px
top: 75px
right: 62px
border-radius: 5px
@@ -62,9 +62,16 @@
display: block
color: $color-secondary
padding: 10px
font-size: 12px
font-size: 13px
position: relative
text-align: left
font-weight: normal

.error
color: $red

.warning
color: $yellow

&:last-child
border-bottom-left-radius: 4px

0 comments on commit af04c8e

Please sign in to comment.