different led button group

This commit is contained in:
Wolfgang Hottgenroth 2018-06-23 18:43:25 +02:00
parent ab2a25d324
commit acd2647124
Signed by: wn
GPG Key ID: B586EAFCDF2F65F4
5 changed files with 74 additions and 6 deletions

View File

@ -1,16 +1,16 @@
<table id="maintable">
<tr>
<td>
<ledbutton topic="led/test1" label="Küche Deckenlampe"></ledbutton>
<ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
</td>
<td>
<ledbutton topic="led/test2" label="Keller normal"></ledbutton>
<ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
</td>
<td>
<ledbutton topic="led/test3" label="Keller hell"></ledbutton>
<ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
</td>
<td>
<ledbutton topic="led/test4" label="test4"></ledbutton>
<ledbutton2 topic="led/test4" label="test4"></ledbutton2>
</td>
</tr>
<tr>

View File

@ -7,6 +7,7 @@ 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';
import { NumberFieldComponent } from './number-field/number-field.component';
import { LedButtonGroup2Component } from './led-button-group2/led-button-group2.component';
@NgModule({
@ -15,7 +16,8 @@ import { NumberFieldComponent } from './number-field/number-field.component';
LedindicatorComponent,
OnOffButtonComponent,
LedButtonGroupComponent,
NumberFieldComponent
NumberFieldComponent,
LedButtonGroup2Component
],
imports: [
BrowserModule

View File

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

View File

@ -0,0 +1,41 @@
import { Component, Input, OnInit } from '@angular/core';
import { MqttclientService } from '../mqttclient.service'
@Component({
selector: 'ledbutton2',
template: `
<div [ngStyle]="{ 'text-align': 'center', 'border': '2px solid black',
'width': '150px', 'padding':'5px',
'font-family': 'sans-serif' }">
{{label}}<br/>
<button (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
<led [topic]="feedbackTopic"></led>
<button (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
</div>
`
})
export class LedButtonGroup2Component implements OnInit {
actionTopic : string
feedbackTopic : string
@Input('topic') topicPre : string
@Input() label : string
constructor(private mqttclientService : MqttclientService) { }
ngOnInit() {
this.actionTopic = this.topicPre + '/state'
this.feedbackTopic = this.topicPre + '/feedback'
}
clickOn() {
this.mqttclientService.publish(this.actionTopic, "ON")
}
clickOff() {
this.mqttclientService.publish(this.actionTopic, "OFF")
}
}

View File

@ -4,7 +4,7 @@ import { MqttclientService } from '../mqttclient.service'
@Component({
selector: 'led',
template: `
<span [ngStyle]="{'color':color, 'font-size':'500%'}">&#x25cf;</span>
<span [ngStyle]="{'color':color, 'font-size':'200%', 'padding-right':'5px', 'padding-left':'5px'}">&#x25cf;</span>
`
})
export class LedindicatorComponent implements OnInit {