/pushapi: Auto stash before merge of "theslby/pushapi" and "development"

Push Frontend

src/app/app.module.ts

@@ -1,6 +1,14 @@
-// Push Notifications
-import { ServiceWorkerModule } from '@angular/service-worker';
 
+import { ConfigService } from './config.service';
+import { PushService } from './push.service';
+import { PushComponent } from './push/push.component';
+import { HttpModule } from '@angular/http';
+
+
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { environment } from '../environments/environment';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
@@ -45,19 +53,22 @@ import { DashboardModule } from './dashboard/dashboard.module';
 
 @NgModule({
   imports: [
+    BrowserAnimationsModule,
     BrowserModule,
     HttpClientModule,
+    HttpModule,
     NgxPaginationModule,
     BsDropdownModule.forRoot(),
     TabsModule.forRoot(),
     AuthModule,
     DashboardModule,
+    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
     // Loaded last to allow for 404 catchall
     AppRoutingModule,
   ],
   declarations: [
-    ServiceWorkerModule,
     AppComponent,
+    PushComponent,
     FullLayoutComponent,
     SimpleLayoutComponent,
     NAV_DROPDOWN_DIRECTIVES,
@@ -68,6 +79,8 @@ import { DashboardModule } from './dashboard/dashboard.module';
     P500Component,
   ],
   providers: [
+    ConfigService,
+    PushService,
     AuthGuard,
     OrgGuard,
     CustomerGuard,

src/app/config.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+import { environment } from './../environments/environment';
+
+@Injectable()
+export class ConfigService {
+
+    private _config:any = environment.config;
+
+    constructor() {
+    }
+
+    get(key: any) {
+        return this._config[key];
+    }
+}

src/app/layouts/full-layout.component.html

@@ -19,9 +19,8 @@
       </div>
     </li>
   </ul>
-  <push></push>
+  <app-push>HELLO</app-push>
 </header>
-
 <div class="app-body">
   <div class="sidebar">
     <nav class="sidebar-nav">
@@ -117,7 +116,6 @@
   </main>
 
 </div>
-
 <footer class="app-footer">
   <a href="http://www.peartrade.org" target="_blank">&copy; 2017 Pear Trading Ltd.</a>
   <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>

src/app/push.service.ts

@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/observable/throw';
+
+import { ConfigService } from './config.service';
+
+@Injectable()
+export class PushService {
+
+  private API_URL: string
+
+  constructor(private http: HttpClient, private configService: ConfigService) {
+    this.API_URL = this.configService.get('API_URL')
+  }
+
+  // urlBase64ToUint8Array(base64String) {
+  //   const padding = '='.repeat((4 - base64String.length % 4) % 4);
+  //   const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
+  //   const rawData = window.atob(base64);
+  //   const outputArray = new Uint8Array(rawData.length);
+  //   for (let i = 0; i < rawData.length; ++i) {
+  //     outputArray[i] = rawData.charCodeAt(i);
+  //   }
+  //   return outputArray;
+  // }
+
+  addSubscriber(subscription) {
+
+    const url = `${this.API_URL}/webpush`;
+    console.log('[Push Service] Adding subscriber')
+
+    let body = {
+      action: 'subscribe',
+      subscription: subscription
+    }
+
+    return this.http
+      .post(url, body)
+      .catch(this.handleError);
+
+  }
+
+  deleteSubscriber(subscription) {
+
+    const url = `${this.API_URL}/webpush`;
+    console.log('[Push Service] Deleting subscriber')
+
+    let body = {
+      action: 'unsubscribe',
+      subscription: subscription
+    }
+
+    return this.http
+      .post(url, body)
+      .catch(this.handleError);
+
+  }
+
+  private handleError(error: Response | any) {
+    let errMsg: string;
+    if (error instanceof Response) {
+      errMsg = `${error.statusText || 'Network error'}`;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+    }
+    return Observable.throw(errMsg);
+  }
+
+}

src/app/push/push.component.html

@@ -1,4 +1,3 @@
-<push-notification
-  title="hello"
-  body="hi">
-</push-notification>
+<button (click)="subscribeToPush()">Subscribe To Push</button>
+<button (click)="unsubscribeFromPush()">Unsubscribe From Push</button>
+{{target}}

src/app/push/push.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PushComponent } from './push.component';
+
+describe('PushComponent', () => {
+  let component: PushComponent;
+  let fixture: ComponentFixture<PushComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PushComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PushComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/push/push.component.ts

@@ -1,19 +1,101 @@
-import { Component, OnInit} from '@angular/core'
-import { PushNotificationComponent } from 'ng2-notifications/ng2-notifications';
+import { Component, OnInit } from '@angular/core';
+import { ConfigService } from './../config.service';
+import { PushService } from './../push.service';
+import { SwPush } from '@angular/service-worker';
+import "rxjs/Rx";
+
 
 @Component({
-  selector: 'push',
+  selector: 'app-push',
   templateUrl: './push.component.html',
+  styleUrls: ['./push.component.css']
+})
+export class PushComponent implements OnInit {
 
-  })
+  private VAPID_PUBLIC_KEY: string;
+
+  tweets = []
+  target = ''
 
 
-export class PushComponent {
-
-  constructor(){}
-
-  ngOnInit(){
-
+  constructor(private pushService: PushService, private configService: ConfigService, private swPush: SwPush) {
   }
 
+  ngOnInit() {
+    this.VAPID_PUBLIC_KEY = this.configService.get('VAPID_PUBLIC_KEY')
+  }
+
+  subscribeToPush() {
+
+      // Requesting messaging service to subscribe current client (browser)
+
+      this.swPush.requestSubscription({
+        serverPublicKey: this.VAPID_PUBLIC_KEY
+      })
+        .then(pushSubscription => {
+
+          // Passing subscription object to our backend
+          console.log(pushSubscription.endpoint)
+          this.target = JSON.stringify(pushSubscription);
+          console.log(pushSubscription.getKey)
+          this.pushService.addSubscriber(pushSubscription)
+            .subscribe(
+
+            res => {
+              console.log('[App] Add subscriber request answer', res)
+            },
+            err => {
+              console.log('[App] Add subscriber request failed', err)
+            }
+
+            )
+        })
+        .catch(err => {
+          console.error(err);
+        })
+
+    }
+
+  showNotification(){
+      this.swPush.messages.subscribe(message => {
+          console.log('[App] Push message received', message)
+      })
+  }
+
+  unsubscribeFromPush(){
+
+    // Get active subscription
+
+    this.swPush.subscription
+      .take(1)
+      .subscribe(pushSubscription => {
+
+        console.log('[App] pushSubscription', pushSubscription)
+
+        // Delete the subscription from the backend
+
+        this.pushService.deleteSubscriber(pushSubscription)
+          .subscribe(
+
+          res => {
+            console.log('[App] Delete subscriber request answer', res)
+            // Unsubscribe current client (browser)
+
+            pushSubscription.unsubscribe()
+              .then(success => {
+                console.log('[App] Unsubscription successful', success)
+              })
+              .catch(err => {
+                console.log('[App] Unsubscription failed', err)
+              })
+
+          },
+          err => {
+            console.log('[App] Delete subscription request failed', err)
+          }
+
+          )
+
+      })
+    }
 }