tune with dispatcher output

src/app/app.component.css

@@ -6,7 +6,16 @@ ledbox {
     float: left;
     display: block;
 }
+onoff {
+    float: left;
+    display: block;
+}
 
 p.clear {
     clear: both;
 }
+
+div#scenes {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}

src/app/app.component.html

@@ -1,6 +1,13 @@
 
 <mat-tab-group>
     <mat-tab label="Licht">
+      <div id="scenes">
+      <onoff *ngFor="let scene of configuration.scenes"
+        [label]="scene.label" [topic]="scene.actionTopic"></onoff>
+      <p class="clear"></p>
+      </div>
+      <mat-divider></mat-divider>
+
       <mat-accordion>
         <mat-expansion-panel *ngFor="let room of configuration.switches">
           <mat-expansion-panel-header>

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { NgModule } from '@angular/core';
 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 { MqttclientService } from './mqttclient.service'
 
@@ -32,7 +33,8 @@ import { LedBoxComponent } from './led-box/led-box.component';
     BrowserAnimationsModule,
     MatTabsModule,
     MatExpansionModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDividerModule
   ],
   providers: [
     MqttclientService

src/app/led-box/led-box.component.ts

@@ -5,7 +5,7 @@ import { MqttclientService } from '../mqttclient.service'
   selector: 'ledbox',
   template: `
   <div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px', 
-  'width': '100px', 'padding':'5px', 'margin': '5px',
+  'width': '100px', 'height':'80px', 'padding':'5px', 'margin': '5px',
   'font-family': 'sans-serif' }">
     {{label}}<br/>
     <led [topic]="topic" greenToken="CLOSED" redToken="OPEN"></led>

src/app/on-off-button/on-off-button.component.ts

@@ -4,14 +4,18 @@ import { MqttclientService } from '../mqttclient.service'
 @Component({
   selector: 'onoff',
   template: `
-  <div class="button">
+  <div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px', 
-    <button (click)="clickOn()" [ngStyle]="{'font-size':'150%'}">on</button>
+                    'width': '150px', 'padding':'5px', 'margin': '5px',
-    <button (click)="clickOff()" [ngStyle]="{'font-size':'150%'}">off</button>
+                    '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)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
   </div>
   `
 })
 export class OnOffButtonComponent implements OnInit {
   @Input() topic : string = 'invalid'
+  @Input() label : string = 'invalid'
 
   constructor(private mqttclientService : MqttclientService) { }