Client: better notifications for a beautiful world

6 files changed, 64 insertions, 23 deletions

diff --git a/client/src/app/+admin/friends/friend-add/friend-add.component.ts b/client/src/app/+admin/friends/friend-add/friend-add.component.ts
index 014252011..a271970ae 100644
--- a/client/src/app/+admin/friends/friend-add/friend-add.component.ts
+++ b/client/src/app/+admin/friends/friend-add/friend-add.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import { validateHost } from '../../../shared';
 import { FriendService } from '../shared';
 
@@ -15,7 +17,11 @@ export class FriendAddComponent implements OnInit {
   hosts = [ ];
   error: string = null;
 
-  constructor(private router: Router, private friendService: FriendService) {}
+  constructor(
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private friendService: FriendService
+  ) {}
 
   ngOnInit() {
     this.form = new FormGroup({});
@@ -83,10 +89,11 @@ export class FriendAddComponent implements OnInit {
 
     this.friendService.makeFriends(notEmptyHosts).subscribe(
       status => {
-        alert('Make friends request sent!');
+        this.notificationsService.success('Sucess', 'Make friends request sent!');
         this.router.navigate([ '/admin/friends/list' ]);
       },
-      error => alert(error.text)
+
+      err => this.notificationsService.error('Error', err.text)
     );
   }
 
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.ts b/client/src/app/+admin/friends/friend-list/friend-list.component.ts
index bec10162c..700ea7a69 100644
--- a/client/src/app/+admin/friends/friend-list/friend-list.component.ts
+++ b/client/src/app/+admin/friends/friend-list/friend-list.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import { Friend, FriendService } from '../shared';
 
 @Component({
@@ -10,7 +12,10 @@ import { Friend, FriendService } from '../shared';
 export class FriendListComponent implements OnInit {
   friends: Friend[];
 
-  constructor(private friendService: FriendService) {  }
+  constructor(
+    private notificationsService: NotificationsService,
+    private friendService: FriendService
+  ) {  }
 
   ngOnInit() {
     this.getFriends();
@@ -21,10 +26,12 @@ export class FriendListComponent implements OnInit {
 
     this.friendService.quitFriends().subscribe(
       status => {
-        alert('Quit friends!');
+        this.notificationsService.success('Sucess', 'Friends left!');
+
         this.getFriends();
       },
-      error => alert(error.text)
+
+      err => this.notificationsService.error('Error', err.text)
     );
   }
 
@@ -32,7 +39,7 @@ export class FriendListComponent implements OnInit {
     this.friendService.getFriends().subscribe(
       res => this.friends = res.friends,
 
-      err => alert(err.text)
+      err => this.notificationsService.error('Error', err.text)
     );
   }
 }
diff --git a/client/src/app/+admin/requests/request-stats/request-stats.component.ts b/client/src/app/+admin/requests/request-stats/request-stats.component.ts
index 23b836779..18855a5f8 100644
--- a/client/src/app/+admin/requests/request-stats/request-stats.component.ts
+++ b/client/src/app/+admin/requests/request-stats/request-stats.component.ts
@@ -1,6 +1,7 @@
-import { setInterval } from 'timers'
 import { Component, OnInit, OnDestroy } from '@angular/core';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import { RequestService, RequestStats } from '../shared';
 
 @Component({
@@ -11,9 +12,13 @@ import { RequestService, RequestStats } from '../shared';
 export class RequestStatsComponent implements OnInit, OnDestroy {
   stats: RequestStats = null;
 
-  private interval: NodeJS.Timer = null;
+  private interval: number = null;
+  private timeout: number = null;
 
-  constructor(private requestService: RequestService) {  }
+  constructor(
+    private notificationsService: NotificationsService,
+    private requestService: RequestService
+  ) {  }
 
   ngOnInit() {
     this.getStats();
@@ -21,8 +26,12 @@ export class RequestStatsComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    if (this.stats !== null && this.stats.secondsInterval !== null) {
-      clearInterval(this.interval);
+    if (this.interval !== null) {
+      window.clearInterval(this.interval);
+    }
+
+    if (this.timeout !== null) {
+      window.clearTimeout(this.timeout);
     }
   }
 
@@ -30,16 +39,16 @@ export class RequestStatsComponent implements OnInit, OnDestroy {
     this.requestService.getStats().subscribe(
       stats => this.stats = stats,
 
-      err => alert(err.text)
+      err => this.notificationsService.error('Error', err.text)
     );
   }
 
   private runInterval() {
-    this.interval = setInterval(() => {
+    this.interval = window.setInterval(() => {
       this.stats.remainingMilliSeconds -= 1000;
 
       if (this.stats.remainingMilliSeconds <= 0) {
-        setTimeout(() => this.getStats(), this.stats.remainingMilliSeconds + 100);
+        this.timeout = window.setTimeout(() => this.getStats(), this.stats.remainingMilliSeconds + 100);
       }
     }, 1000);
   }
diff --git a/client/src/app/+admin/users/user-add/user-add.component.ts b/client/src/app/+admin/users/user-add/user-add.component.ts
index ab96fb01d..a851fee44 100644
--- a/client/src/app/+admin/users/user-add/user-add.component.ts
+++ b/client/src/app/+admin/users/user-add/user-add.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import { UserService } from '../shared';
 import { FormReactive, USER_USERNAME, USER_PASSWORD } from '../../../shared';
 
@@ -25,6 +27,7 @@ export class UserAddComponent extends FormReactive implements OnInit {
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
+    private notificationsService: NotificationsService,
     private userService: UserService
   ) {
     super();
@@ -49,7 +52,10 @@ export class UserAddComponent extends FormReactive implements OnInit {
     const { username, password } = this.form.value;
 
     this.userService.addUser(username, password).subscribe(
-      ok => this.router.navigate([ '/admin/users/list' ]),
+      () => {
+        this.notificationsService.success('Success', `User ${username} created.`);
+        this.router.navigate([ '/admin/users/list' ]);
+      },
 
       err => this.error = err.text
     );
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 03f4e5c0a..ca08ed305 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import { User } from '../../../shared';
 import { UserService } from '../shared';
 
@@ -12,7 +14,10 @@ export class UserListComponent implements OnInit {
   totalUsers: number;
   users: User[];
 
-  constructor(private userService: UserService) {}
+  constructor(
+    private notificationsService: NotificationsService,
+    private userService: UserService
+  ) {}
 
   ngOnInit() {
     this.getUsers();
@@ -25,7 +30,7 @@ export class UserListComponent implements OnInit {
         this.totalUsers = totalUsers;
       },
 
-      err => alert(err.text)
+      err => this.notificationsService.error('Error', err.text)
     );
   }
 
@@ -33,9 +38,12 @@ export class UserListComponent implements OnInit {
   removeUser(user: User) {
     if (confirm('Are you sure?')) {
       this.userService.removeUser(user).subscribe(
-        () => this.getUsers(),
+        () => {
+          this.notificationsService.success('Success', `User ${user.username} deleted.`);
+          this.getUsers();
+        },
 
-        err => alert(err.text)
+        err => this.notificationsService.error('Error', err.text)
       );
     }
   }
diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
index de58bba3d..cfd9151b0 100644
--- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts
@@ -1,6 +1,7 @@
-import { setInterval } from 'timers'
 import { Component, OnInit } from '@angular/core';
 
+import { NotificationsService } from 'angular2-notifications';
+
 import { VideoAbuseService, VideoAbuse} from '../../../shared';
 
 @Component({
@@ -11,7 +12,10 @@ import { VideoAbuseService, VideoAbuse} from '../../../shared';
 export class VideoAbuseListComponent implements OnInit {
   videoAbuses: VideoAbuse[];
 
-  constructor(private videoAbuseService: VideoAbuseService) {  }
+  constructor(
+    private notificationsService: NotificationsService,
+    private videoAbuseService: VideoAbuseService
+  ) {  }
 
   ngOnInit() {
     this.getVideoAbuses();
@@ -25,7 +29,7 @@ export class VideoAbuseListComponent implements OnInit {
     this.videoAbuseService.getVideoAbuses().subscribe(
       res => this.videoAbuses = res.videoAbuses,
 
-      err => alert(err.text)
+      err => this.notificationsService.error('Error', err.text)
     );
   }
 }