start heating controller, don't remember angular syntax, can't continue for the moment

This commit is contained in:
Wolfgang Hottgenroth 2018-08-21 11:56:09 +02:00
parent 06d88ca126
commit e1b6d15bd5
Signed by: wn
GPG Key ID: B586EAFCDF2F65F4
4 changed files with 74 additions and 2 deletions

View File

@ -27,7 +27,7 @@
<p class="clear"></p>
</mat-tab>
<mat-tab label="Heizung">
<heatingcontroller></heatingcontroller>
</mat-tab>
</mat-tab-group>

View File

@ -16,6 +16,7 @@ import { LedButtonGroupComponent } from './led-button-group/led-button-group.com
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';
import { HeatingControllerComponent } from './heating-controller/heating-controller.component';
@NgModule({
@ -26,7 +27,8 @@ import { LedBoxComponent } from './led-box/led-box.component';
LedButtonGroupComponent,
NumberFieldComponent,
LedButtonGroup2Component,
LedBoxComponent
LedBoxComponent,
HeatingControllerComponent
],
imports: [
BrowserModule,

View File

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

View File

@ -0,0 +1,45 @@
import { Component, Input, OnInit } from '@angular/core';
import { MqttclientService } from '../mqttclient.service'
@Component({
selector: 'heatingcontroller',
template: `
<div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px',
'width': '150px', 'padding':'5px', 'margin': '5px',
'font-family': 'sans-serif' }">
{{label}}<br/>
<button mat-mini-fab color="primary" (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
<button mat-mini-fab color="primary" (click)="clickAbsent()" [ngStyle]="{'font-size':'100%'}">absent</button>
<button mat-mini-fab color="primary" (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
<br/>
</div>
`
})
export class HeatingControllerComponent implements OnInit {
@Input() topic : string = 'invalid'
@Input() label : string = 'invalid'
constructor(private mqttclientService : MqttclientService) { }
ngOnInit() {
}
clickOn() {
console.log(`click on for ${this.topic}`)
this.mqttclientService.publish(this.topic, "ON")
}
clickAbsent() {
console.log(`click absent for ${this.topic}`)
this.mqttclientService.publish(this.topic, "ABSENT")
}
clickOff() {
console.log(`click off for ${this.topic}`)
this.mqttclientService.publish(this.topic, "OFF")
}
}