Add push notification and device token management.

src/app/app.component.html

@@ -1 +1,4 @@
-{{ message | async | json }}
+<router-outlet></router-outlet>
+<div *ngIf="userType === 'customer' && message.value" style="position: fixed; padding:1em; right: 2em; bottom: 2em; background-color: grey;">
+  {{ message | async | json }}
+</div>

src/app/app.component.ts

@@ -1,21 +1,25 @@
 import { Component } from '@angular/core';
 import { MessagingService } from './service/messaging.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
-  template: '<router-outlet></router-outlet>'
+  templateUrl: './app.component.html',
 })
 export class AppComponent {
   title = 'push-notification';
   message;
+  userType;
 
   constructor(private messagingService: MessagingService) { }
 
   ngOnInit() {
-    if (localStorage.getItem('usertype') === 'customer') {
+    this.userType = localStorage.getItem('usertype');
+    if (this.userType === 'customer') {
       this.messagingService.requestPermission();
       this.messagingService.receiveMessage();
       this.message = this.messagingService.currentMessage;
     }
+    console.log(this.message);
   }
 }

src/app/dashboard/send-push-notification.component.html

@@ -10,9 +10,9 @@
           <div class="card-block">
             <div class="form-group row">
               <label class="col-md-3 form-control-label" for="select-input"><strong>Select Recipients</strong></label>
-              <select required class="form-control" type="text" formControlName="devicetokens" multiple>
+              <select required class="form-control" type="text" formControlName="topic">
-                <option *ngFor="let deviceToken of deviceTokenIdList" [ngValue]="deviceTokenList[deviceToken].token">
+                <option *ngFor="let topic of topicIdList" [ngValue]="topicList[topic].name">
-                {{ deviceTokenList[deviceToken].user }} <{{deviceTokenList[deviceToken].token}}>
+                {{ topicList[topic].name }} <strong>({{topicList[topic].numberOfSubscribers}} subscribers)</strong>
                 </option>
               </select>
             </div>

src/app/dashboard/send-push-notification.component.ts

@@ -13,24 +13,23 @@ export class SendPushNotificationComponent implements OnInit {
   noEmail = false;
   sendMessageFormStatus: any;
   sendMessageFormStatusError = 'Error received, please try again.';
-  deviceTokenList: any;
+  topicList: any;
-  deviceTokenIdList: any;
+  topicIdList: any;
 
   constructor(private api: ApiService) {
-    this.api.getDeviceTokens().subscribe(
+    this.api.getTopics().subscribe(
       result => {
-        console.log(result);
+        this.topicList = result.topics;
-        this.deviceTokenList = result.tokens;
+        this.topicIdList = Object.keys(this.topicList);
-        this.deviceTokenIdList = Object.keys(this.deviceTokenList);
       },
       error => {
-        console.log("Couldn't get device token");
+        console.log("Couldn't get topics");
         console.log(error._body);
       }
     );
     this.sendMessageForm = new FormGroup({
       messagetext: new FormControl('', Validators.required),
-      devicetokens: new FormControl('', Validators.required),
+      topic: new FormControl('', Validators.required),
     });
   }
 
@@ -58,7 +57,6 @@ export class SendPushNotificationComponent implements OnInit {
   }
 
   onSubmit(): void {
-    console.log(this.sendMessageForm.value);
     this.api
       .sendMessage(this.sendMessageForm.value)
       .subscribe(

src/app/providers/api-service.ts

@@ -108,6 +108,14 @@ export class ApiService {
 
   // Push notifications
 
+  public checkDeviceToken(data) {
+    data.session_key = this.sessionKey;
+    return this.http.post<any>(
+      this.apiUrl + '/check-device-token',
+      data
+    );
+  }
+
   public addDeviceToken(data) {
     data.session_key = this.sessionKey;
     return this.http.post<any>(
@@ -124,8 +132,15 @@ export class ApiService {
     );
   }
 
+  public getTopics() {
+    const key = this.sessionKey;
+    return this.http.post<any>(
+      this.apiUrl + '/get-topics',
+      { session_key : key }
+    );
+  }
+
   public sendMessage(data) {
-    data.devicetoken = localStorage.getItem('devicetoken');
     data.sender = localStorage.getItem('displayname');
     return this.http.post<any>(
       this.apiUrl + '/send-message',

src/app/service/messaging.service.ts

@@ -9,24 +9,48 @@ export class MessagingService {
   currentMessage = new BehaviorSubject(null);
 
   constructor(
-    private angularFireMessaging: AngularFireMessaging,
+    private readonly angularFireMessaging: AngularFireMessaging,
     private api: ApiService
-  ) {
+  ) { }
-    this.angularFireMessaging.messages.subscribe((_messaging: AngularFireMessaging) => {
-      _messaging.onMessage = _messaging.onMessage.bind(_messaging);
-      _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
-    })
-  }
 
   requestPermission() {
+    if (!('Notification' in window)) {
+      alert("This browser does not support notifications.");
+      return;
+    } else if (Notification.permission === 'granted') {
+      console.log("Push notification permission granted");
+      this.registerDeviceToken();
+    } else if (Notification.permission === 'denied' ||
+               Notification.permission === 'default') {
+      console.log("Push notification permission not granted");
+      Notification.requestPermission().then(function(permission) {
+        if (permission === 'granted') {
+          console.log("Push notification permission granted");
+          this.registerDeviceToken();
+        }
+      });
+    }
+  }
+
+  registerDeviceToken() {
     this.angularFireMessaging.requestToken.subscribe((token) => {
-      this.api.addDeviceToken({'token': token, 'email': localStorage.getItem('email')}).subscribe(
+      this.api.checkDeviceToken({'token': token}).subscribe(
         result => {
-          console.log("Device registered successfully!");
+          if (result.exists) console.log("Device already registered!");
-          localStorage.setItem('devicetoken', token);
+          else {
+            this.api.addDeviceToken({'token': token, 'email': localStorage.getItem('email')}).subscribe(
+              result => {
+                console.log("Device registered successfully!");
+                localStorage.setItem('devicetoken', token);
+              },
+              error => {
+                console.error("Device could not be registered!", error._body);
+              }
+            );
+          }
         },
         error => {
-          console.error("Device could not be registered!", error._body);
+          console.error(error._body);
         }
       );
     }, (err) => {
@@ -35,9 +59,9 @@ export class MessagingService {
   }
 
   receiveMessage() {
-    this.angularFireMessaging.messages.subscribe((payload) => {
+    this.angularFireMessaging.messages.subscribe((message) => {
-      console.log("new message received. ", payload);
+      console.log("show message!", message);
-      this.currentMessage.next(payload);
+      this.currentMessage.next(message);
     });
   }
 }