From c00af42ae533bd89cbccabc96ef84403eee09df6 Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <wolfgang.hottgenroth@icloud.com>
Date: Fri, 22 Jun 2018 15:41:48 +0200
Subject: [PATCH] mqtt client service as provider

---
 package-lock.json                             | 16 ---------
 src/app/app.module.ts                         |  6 ++--
 .../ledindicator/ledindicator.component.ts    | 22 +++++--------
 src/app/mqttclient.service.spec.ts            | 15 +++++++++
 src/app/mqttclient.service.ts                 | 33 +++++++++++++++++++
 5 files changed, 60 insertions(+), 32 deletions(-)
 create mode 100644 src/app/mqttclient.service.spec.ts
 create mode 100644 src/app/mqttclient.service.ts

diff --git a/package-lock.json b/package-lock.json
index eb20a49..6d9355f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,14 +68,6 @@
         "tslib": "1.9.3"
       }
     },
-    "@angular/cdk": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.0.tgz",
-      "integrity": "sha512-L1NM2hU8xvb35mDKIw+SR9UZGZtbSQl6fmd9X/tedaNYjIvyQ7SIX7iDJ+LqD0xUQopB+SeuhDL7D6IwGMV2bQ==",
-      "requires": {
-        "tslib": "1.9.3"
-      }
-    },
     "@angular/cli": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.7.4.tgz",
@@ -209,14 +201,6 @@
       "integrity": "sha512-tgnFAhwBmUs1W0dmcmlBmUlMaOgkoyuSdrcF23lz8W5+nSLb+LnbH5a3blU2NVqA4ESvLKQkPW5dpKa/LuhrPQ==",
       "dev": true
     },
-    "@angular/material": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.0.tgz",
-      "integrity": "sha512-asSzdfLkDDbQEyM/GKUxrlvuj8OvO5DqrNJ3e3uvi0OmZDpaO50yubQvrJ26nbqgwgRo+qwiGNN6XcFwYTRVPQ==",
-      "requires": {
-        "tslib": "1.9.3"
-      }
-    },
     "@angular/platform-browser": {
       "version": "5.2.11",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.11.tgz",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 65ac4c9..67806f0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { MqttclientService } from './mqttclient.service'
 
 import { AppComponent } from './app.component';
 import { LedindicatorComponent } from './ledindicator/ledindicator.component';
@@ -14,7 +14,9 @@ import { LedindicatorComponent } from './ledindicator/ledindicator.component';
   imports: [
     BrowserModule
   ],
-  providers: [],
+  providers: [
+    MqttclientService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/ledindicator/ledindicator.component.ts b/src/app/ledindicator/ledindicator.component.ts
index 2a40b22..d53e5f8 100644
--- a/src/app/ledindicator/ledindicator.component.ts
+++ b/src/app/ledindicator/ledindicator.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
-import * as Mqtt from 'mqtt'
+import { Component, Input, OnInit } from '@angular/core'
+import { MqttclientService } from '../mqttclient.service'
 
 @Component({
   selector: 'app-ledindicator',
@@ -16,27 +16,21 @@ export class LedindicatorComponent implements OnInit {
   @Input() ledId : string = 'invalid'
   color : string = 'red'
 
-  private mqttClient : Mqtt.MqttClient
 
-  constructor() { 
-    this.mqttClient = Mqtt.connect('ws://localhost:9001')
-    this.mqttClient.on('connect', () => {
-      this.mqttClient.subscribe(this.topic)
-    })
-    this.mqttClient.on('message', (topic: string, messageBuf: Buffer) => {
-      let message : string  = messageBuf.toString('UTF-8')
+  constructor(private mqttclientService : MqttclientService) { 
+  }
+
+  ngOnInit() {
+    this.mqttclientService.register(this.topic, (message: string) => {
       if (message == 'ON') {
         this.color = 'green'
       } else if (message == 'OFF') {
         this.color = 'red'
       } else {
-        this.color = 'blue'
+        this.color = 'lightgrey'
       }
     })
   }
 
-  ngOnInit() {
-  }
-
 }
 
diff --git a/src/app/mqttclient.service.spec.ts b/src/app/mqttclient.service.spec.ts
new file mode 100644
index 0000000..4110c2e
--- /dev/null
+++ b/src/app/mqttclient.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MqttclientService } from './mqttclient.service';
+
+describe('MqttclientService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MqttclientService]
+    });
+  });
+
+  it('should be created', inject([MqttclientService], (service: MqttclientService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/mqttclient.service.ts b/src/app/mqttclient.service.ts
new file mode 100644
index 0000000..1f22196
--- /dev/null
+++ b/src/app/mqttclient.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import * as Mqtt from 'mqtt'
+
+type callbackFunc = (message: string) => void
+
+@Injectable()
+export class MqttclientService {
+  private mqttClient : Mqtt.MqttClient
+  private callbacks : Map<string, callbackFunc> = new Map()
+
+  constructor() { 
+    this.mqttClient = Mqtt.connect('ws://localhost:9001')
+    this.mqttClient.on('connect', () => {
+      console.log('MQTT connected')
+      this.callbacks.forEach((value: callbackFunc, key: string) => {
+        this.mqttClient.subscribe(key)
+        console.log(`${key} subscribed`)
+      })
+    })
+    this.mqttClient.on('message', (topic: string, messageBuf: Buffer) => {
+      if (this.callbacks.has(topic)) {
+        let message : string  = messageBuf.toString('UTF-8')
+        console.log(`Providing ${message} to callback for ${topic}`)
+        this.callbacks.get(topic)(message)
+      }
+    })
+  }
+
+  register(topic: string, cb: callbackFunc) {
+    this.callbacks.set(topic, cb)
+    this.mqttClient.subscribe(topic)
+  }
+}