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 @@
-
-