different led button group
This commit is contained in:
parent
ab2a25d324
commit
acd2647124
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
41
src/app/led-button-group2/led-button-group2.component.ts
Normal file
41
src/app/led-button-group2/led-button-group2.component.ts
Normal 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")
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -4,7 +4,7 @@ import { MqttclientService } from '../mqttclient.service'
|
||||
@Component({
|
||||
selector: 'led',
|
||||
template: `
|
||||
<span [ngStyle]="{'color':color, 'font-size':'500%'}">●</span>
|
||||
<span [ngStyle]="{'color':color, 'font-size':'200%', 'padding-right':'5px', 'padding-left':'5px'}">●</span>
|
||||
`
|
||||
})
|
||||
export class LedindicatorComponent implements OnInit {
|
||||
|
Loading…
x
Reference in New Issue
Block a user