continue on heating controller

src/app/app.module.ts

@@ -6,8 +6,9 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
-
+import { MatInputModule } from '@angular/material/input'
 import { MqttclientService } from './mqttclient.service'
+import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { LedindicatorComponent } from './ledindicator/ledindicator.component';
@@ -36,7 +37,9 @@ import { HeatingControllerComponent } from './heating-controller/heating-control
     MatTabsModule,
     MatExpansionModule,
     MatButtonModule,
-    MatDividerModule
+    MatDividerModule,
+    MatInputModule,
+    FormsModule
   ],
   providers: [
     MqttclientService

src/app/heating-controller/heating-controller.component.ts

@@ -1,5 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core'
 import { MqttclientService } from '../mqttclient.service'
+import {coerceNumberProperty} from '@angular/cdk/coercion'
 
 @Component({
   selector: 'heatingcontroller',
@@ -12,9 +13,16 @@ import { MqttclientService } from '../mqttclient.service'
   <button mat-mini-fab color="primary" (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
   <button mat-mini-fab color="primary" (click)="clickForceOn()" [ngStyle]="{'font-size':'100%'}">forceOn</button>
   <br/>
-  <!-- <input type="text" [value]="currentTemperature"></input> -->
-  <br/>
-  <!-- <input type="text" [value]="presetTemperature"></input> -->
+  <mat-form-field [ngStyle]="{'margin':'10px', 'width':'80%'}">
+    <input matInput type="number" placeholder="Current" [(ngModel)]="currentTemperature"
+           (click)="setCurrentTemperature()" (keyup)="setCurrentTemperature()">
+  </mat-form-field>
+  <mat-form-field [ngStyle]="{'margin':'10px', 'width':'80%'}">
+    <input type="checkbox" [(ngModel)]="enablePresetTemperature">
+    <input matInput type="number" placeholder="Preset" [(ngModel)]="presetTemperature" 
+           (click)="setPresetTemperature()" (keyup)="setPresetTemperature()"
+           [disabled]="! enablePresetTemperature">
+  </mat-form-field>
   </div>
   `
   
@@ -28,8 +36,9 @@ export class HeatingControllerComponent implements OnInit {
   feedbackTemperatureTopic : string = 'invalid'
   @Input() label : string = 'invalid'
 
-  currentTemperature : string
-  presetTemperature : string
+  currentTemperature : number = 20
+  enablePresetTemperature : boolean = false
+  presetTemperature : number = 20
   
   constructor(private mqttclientService : MqttclientService) { }
   
@@ -41,10 +50,10 @@ export class HeatingControllerComponent implements OnInit {
     this.feedbackTemperatureTopic = this.topicPre + '/temperature/feedback'
 
     this.mqttclientService.register(this.feedbackTemperatureTopic, (message: string) => {
-      this.currentTemperature = message
+      this.currentTemperature = parseInt(message)
     })
     this.mqttclientService.register(this.feedbackPresetTopic, (message: string) => {
-      this.presetTemperature = message
+      this.presetTemperature = parseInt(message)
     })
   }
   
@@ -63,5 +72,12 @@ export class HeatingControllerComponent implements OnInit {
     this.mqttclientService.publish(this.commandTopic, "OFF")
   }
   
+  setCurrentTemperature() {
+    console.log(`click on currentTemperature ${this.currentTemperature}`)
+  }
+
+  setPresetTemperature() {
+    console.log(`click on presetTemperature ${this.presetTemperature}`)
+  }
 }