From 4bae0eeb616febcc803a3bf1c8c4963e3d16d259 Mon Sep 17 00:00:00 2001 From: Wolfgang Hottgenroth Date: Fri, 22 Jun 2018 17:20:43 +0200 Subject: [PATCH] button led group --- src/app/app.component.css | 3 -- src/app/app.component.html | 16 +++++++--- src/app/app.module.ts | 6 +++- .../led-button-group.component.spec.ts | 25 +++++++++++++++ .../led-button-group.component.ts | 28 +++++++++++++++++ .../ledindicator/ledindicator.component.ts | 10 ++---- src/app/mqttclient.service.ts | 5 +++ .../on-off-button.component.spec.ts | 25 +++++++++++++++ .../on-off-button/on-off-button.component.ts | 31 +++++++++++++++++++ src/assets/thumbup-icon.svg | 22 ------------- 10 files changed, 134 insertions(+), 37 deletions(-) create mode 100644 src/app/led-button-group/led-button-group.component.spec.ts create mode 100644 src/app/led-button-group/led-button-group.component.ts create mode 100644 src/app/on-off-button/on-off-button.component.spec.ts create mode 100644 src/app/on-off-button/on-off-button.component.ts delete mode 100644 src/assets/thumbup-icon.svg diff --git a/src/app/app.component.css b/src/app/app.component.css index c6b96ff..e69de29 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,3 +0,0 @@ -#maintable { - border: 1px; -} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 5f6055a..ed6639e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,16 @@ - - - - + + + +
+ + + + + + + +
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 67806f0..a4cab8b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,12 +4,16 @@ import { MqttclientService } from './mqttclient.service' import { AppComponent } from './app.component'; import { LedindicatorComponent } from './ledindicator/ledindicator.component'; +import { OnOffButtonComponent } from './on-off-button/on-off-button.component'; +import { LedButtonGroupComponent } from './led-button-group/led-button-group.component'; @NgModule({ declarations: [ AppComponent, - LedindicatorComponent + LedindicatorComponent, + OnOffButtonComponent, + LedButtonGroupComponent ], imports: [ BrowserModule diff --git a/src/app/led-button-group/led-button-group.component.spec.ts b/src/app/led-button-group/led-button-group.component.spec.ts new file mode 100644 index 0000000..02fd6df --- /dev/null +++ b/src/app/led-button-group/led-button-group.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LedButtonGroupComponent } from './led-button-group.component'; + +describe('LedButtonGroupComponent', () => { + let component: LedButtonGroupComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LedButtonGroupComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LedButtonGroupComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/led-button-group/led-button-group.component.ts b/src/app/led-button-group/led-button-group.component.ts new file mode 100644 index 0000000..2705bd0 --- /dev/null +++ b/src/app/led-button-group/led-button-group.component.ts @@ -0,0 +1,28 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'ledbutton', + template: ` +
+ {{label}}
+
+ +
+ ` +}) +export class LedButtonGroupComponent implements OnInit { + + actionTopic : string + feedbackTopic : string + @Input('topic') topicPre : string + @Input() label : string + + constructor() { } + + ngOnInit() { + this.actionTopic = this.topicPre + '/state' + this.feedbackTopic = this.topicPre + '/feedback' + } +} diff --git a/src/app/ledindicator/ledindicator.component.ts b/src/app/ledindicator/ledindicator.component.ts index d53e5f8..6e19b59 100644 --- a/src/app/ledindicator/ledindicator.component.ts +++ b/src/app/ledindicator/ledindicator.component.ts @@ -2,18 +2,14 @@ import { Component, Input, OnInit } from '@angular/core' import { MqttclientService } from '../mqttclient.service' @Component({ - selector: 'app-ledindicator', + selector: 'led', template: ` -
- {{ledId}}
- ● -
+ ● ` }) export class LedindicatorComponent implements OnInit { @Input() topic : string = 'invalid' - @Input() ledId : string = 'invalid' color : string = 'red' @@ -23,7 +19,7 @@ export class LedindicatorComponent implements OnInit { ngOnInit() { this.mqttclientService.register(this.topic, (message: string) => { if (message == 'ON') { - this.color = 'green' + this.color = '#40FF00' } else if (message == 'OFF') { this.color = 'red' } else { diff --git a/src/app/mqttclient.service.ts b/src/app/mqttclient.service.ts index 1f22196..72b8b1f 100644 --- a/src/app/mqttclient.service.ts +++ b/src/app/mqttclient.service.ts @@ -30,4 +30,9 @@ export class MqttclientService { this.callbacks.set(topic, cb) this.mqttClient.subscribe(topic) } + + publish(topic: string, message: string) { + console.log(`${message} published on ${topic}`) + this.mqttClient.publish(topic, message) + } } diff --git a/src/app/on-off-button/on-off-button.component.spec.ts b/src/app/on-off-button/on-off-button.component.spec.ts new file mode 100644 index 0000000..8ba8752 --- /dev/null +++ b/src/app/on-off-button/on-off-button.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OnOffButtonComponent } from './on-off-button.component'; + +describe('OnOffButtonComponent', () => { + let component: OnOffButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OnOffButtonComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OnOffButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/on-off-button/on-off-button.component.ts b/src/app/on-off-button/on-off-button.component.ts new file mode 100644 index 0000000..3bb4bdc --- /dev/null +++ b/src/app/on-off-button/on-off-button.component.ts @@ -0,0 +1,31 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { MqttclientService } from '../mqttclient.service' + +@Component({ + selector: 'onoff', + template: ` +
+ + +
+ ` +}) +export class OnOffButtonComponent implements OnInit { + @Input() topic : string = 'invalid' + + constructor(private mqttclientService : MqttclientService) { } + + ngOnInit() { + } + + clickOn() { + console.log(`click on for ${this.topic}`) + this.mqttclientService.publish(this.topic, "ON") + } + + clickOff() { + console.log(`click off for ${this.topic}`) + this.mqttclientService.publish(this.topic, "OFF") + } + +} diff --git a/src/assets/thumbup-icon.svg b/src/assets/thumbup-icon.svg deleted file mode 100644 index 373b3ec..0000000 --- a/src/assets/thumbup-icon.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -