ledbox
This commit is contained in:
parent
93fb9bf192
commit
a386b338ce
@ -2,6 +2,10 @@ ledbutton2 {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
ledbox {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
p.clear {
|
||||
clear: both;
|
||||
|
@ -55,6 +55,9 @@
|
||||
|
||||
</mat-tab>
|
||||
<mat-tab label="Fenster">
|
||||
<ledbox topic="led/test4" label="test4"></ledbox>
|
||||
<ledbox topic="led/test4" label="test4"></ledbox>
|
||||
<p class="clear"></p>
|
||||
|
||||
</mat-tab>
|
||||
<mat-tab label="Heizung">
|
||||
|
@ -14,6 +14,7 @@ import { OnOffButtonComponent } from './on-off-button/on-off-button.component';
|
||||
import { LedButtonGroupComponent } from './led-button-group/led-button-group.component';
|
||||
import { NumberFieldComponent } from './number-field/number-field.component';
|
||||
import { LedButtonGroup2Component } from './led-button-group2/led-button-group2.component';
|
||||
import { LedBoxComponent } from './led-box/led-box.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
@ -23,7 +24,8 @@ import { LedButtonGroup2Component } from './led-button-group2/led-button-group2.
|
||||
OnOffButtonComponent,
|
||||
LedButtonGroupComponent,
|
||||
NumberFieldComponent,
|
||||
LedButtonGroup2Component
|
||||
LedButtonGroup2Component,
|
||||
LedBoxComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
25
src/app/led-box/led-box.component.spec.ts
Normal file
25
src/app/led-box/led-box.component.spec.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LedBoxComponent } from './led-box.component';
|
||||
|
||||
describe('LedBoxComponent', () => {
|
||||
let component: LedBoxComponent;
|
||||
let fixture: ComponentFixture<LedBoxComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ LedBoxComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LedBoxComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
24
src/app/led-box/led-box.component.ts
Normal file
24
src/app/led-box/led-box.component.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { MqttclientService } from '../mqttclient.service'
|
||||
|
||||
@Component({
|
||||
selector: 'ledbox',
|
||||
template: `
|
||||
<div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px',
|
||||
'width': '100px', 'padding':'5px', 'margin': '5px',
|
||||
'font-family': 'sans-serif' }">
|
||||
{{label}}<br/>
|
||||
<led [topic]="feedbackTopic"></led>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class LedBoxComponent implements OnInit {
|
||||
@Input() topic : string
|
||||
@Input() label : string
|
||||
|
||||
constructor(private mqttclientService : MqttclientService) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
@ -9,7 +9,7 @@ import { MqttclientService } from '../mqttclient.service'
|
||||
'font-family': 'sans-serif' }">
|
||||
{{label}}<br/>
|
||||
<button mat-mini-fab color="primary" (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
|
||||
<led [topic]="feedbackTopic"></led>
|
||||
<led [topic]="feedbackTopic" greenToken="ON" redToken="OFF"></led>
|
||||
<button mat-mini-fab color="primary" (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
|
||||
</div>
|
||||
`
|
||||
|
@ -10,6 +10,8 @@ import { MqttclientService } from '../mqttclient.service'
|
||||
export class LedindicatorComponent implements OnInit {
|
||||
|
||||
@Input() topic : string = 'invalid'
|
||||
@Input() greenToken : string = 'green'
|
||||
@Input() redToken : string = 'red'
|
||||
color : string = 'red'
|
||||
|
||||
|
||||
@ -18,9 +20,9 @@ export class LedindicatorComponent implements OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
this.mqttclientService.register(this.topic, (message: string) => {
|
||||
if (message == 'ON') {
|
||||
if (message == this.greenToken) {
|
||||
this.color = '#40FF00'
|
||||
} else if (message == 'OFF') {
|
||||
} else if (message == this.redToken) {
|
||||
this.color = 'red'
|
||||
} else {
|
||||
this.color = 'lightgrey'
|
||||
|
Loading…
x
Reference in New Issue
Block a user