From 6e9cdd1a118a9e92e4bf417e7943a337344a6827 Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <wolfgang.hottgenroth@icloud.com>
Date: Mon, 25 Jun 2018 13:14:31 +0200
Subject: [PATCH] tune with dispatcher output

---
 src/app/app.component.css                        |  9 +++++++++
 src/app/app.component.html                       |  7 +++++++
 src/app/app.module.ts                            |  4 +++-
 src/app/led-box/led-box.component.ts             |  2 +-
 src/app/on-off-button/on-off-button.component.ts | 10 +++++++---
 5 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 3019c78..8459e68 100644
--- a/src/app/app.component.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index c9d44cf..29ebc9f 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ca78a98..5bda57f 100644
--- a/src/app/app.module.ts
+++ b/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
diff --git a/src/app/led-box/led-box.component.ts b/src/app/led-box/led-box.component.ts
index 8407ea6..5e71558 100644
--- a/src/app/led-box/led-box.component.ts
+++ b/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>
diff --git a/src/app/on-off-button/on-off-button.component.ts b/src/app/on-off-button/on-off-button.component.ts
index 3bb4bdc..cf4d5b9 100644
--- a/src/app/on-off-button/on-off-button.component.ts
+++ b/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">
-    <button (click)="clickOn()" [ngStyle]="{'font-size':'150%'}">on</button>
-    <button (click)="clickOff()" [ngStyle]="{'font-size':'150%'}">off</button>
+  <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)="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) { }