From 239485fab6a215e1d66f46d3f881e969756b9c7d Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <wolfgang.hottgenroth@icloud.com>
Date: Sat, 23 Jun 2018 22:08:24 +0200
Subject: [PATCH] material works

---
 package-lock.json                             | 16 ++++
 package.json                                  |  2 +
 src/app/app.component.html                    | 95 +++++++++++++------
 src/app/app.module.ts                         | 12 ++-
 .../led-button-group2.component.ts            |  6 +-
 src/styles.css                                |  1 +
 6 files changed, 100 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6d9355f..90a9f50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,6 +68,14 @@
         "tslib": "1.9.3"
       }
     },
+    "@angular/cdk": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.5.tgz",
+      "integrity": "sha512-GN8m1d+VcCE9+Bgwv06Y8YJKyZ0i9ZIq2ZPBcJYt+KVgnVVRg4JkyUNxud07LNsvzOX22DquHqmIZiC4hAG7Ag==",
+      "requires": {
+        "tslib": "1.9.3"
+      }
+    },
     "@angular/cli": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.7.4.tgz",
@@ -201,6 +209,14 @@
       "integrity": "sha512-tgnFAhwBmUs1W0dmcmlBmUlMaOgkoyuSdrcF23lz8W5+nSLb+LnbH5a3blU2NVqA4ESvLKQkPW5dpKa/LuhrPQ==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.5.tgz",
+      "integrity": "sha512-IltfBeTJWnmZehOQNQ7KoFs7MGWuZTe0g21hIitGkusVNt1cIoTD24xKH5jwztjH19c04IgiwonpurMKM6pBCQ==",
+      "requires": {
+        "tslib": "1.9.3"
+      }
+    },
     "@angular/platform-browser": {
       "version": "5.2.11",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.11.tgz",
diff --git a/package.json b/package.json
index fad82b9..9407b01 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.2.4",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.4",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6807861..0a6e8bf 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,28 +1,67 @@
-<table id="maintable">
-  <tr>
-    <td>
-      <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
-    </td>
-    <td>
-      <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
-    </td>
-    <td>
-      <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
-    </td>
-    <td>
-      <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
-    </td>
-  </tr>
-  <tr>
-      <td>
-        <app-number-field topic="number/test1"></app-number-field>
-      </td>
-      <td>
-      </td>
-      <td>
-      </td>
-      <td>
-      </td>
-    </tr>
-  
-</table>
+
+<mat-tab-group>
+    <mat-tab label="Licht">
+        <mat-accordion>
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Wohnzimmer
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <table id="maintable">
+                <tr>
+                  <td>
+                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
+                  </td>
+                </tr>
+              </table>
+              </mat-expansion-panel>
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Esszimmer
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <table id="maintable">
+                <tr>
+                  <td>
+                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
+                  </td>
+                </tr>
+              </table>
+              </mat-expansion-panel>
+        </mat-accordion>
+          
+
+
+
+
+
+          
+    </mat-tab>
+    <mat-tab label="Fenster">
+
+    </mat-tab>
+    <mat-tab label="Heizung">
+
+    </mat-tab>
+</mat-tab-group>
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9367c91..426d179 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
+
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
+
 import { MqttclientService } from './mqttclient.service'
 
 import { AppComponent } from './app.component';
@@ -20,7 +26,11 @@ import { LedButtonGroup2Component } from './led-button-group2/led-button-group2.
     LedButtonGroup2Component
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatTabsModule,
+    MatExpansionModule,
+    MatButtonModule
   ],
   providers: [
     MqttclientService
diff --git a/src/app/led-button-group2/led-button-group2.component.ts b/src/app/led-button-group2/led-button-group2.component.ts
index e76f239..7111197 100644
--- a/src/app/led-button-group2/led-button-group2.component.ts
+++ b/src/app/led-button-group2/led-button-group2.component.ts
@@ -4,13 +4,13 @@ import { MqttclientService } from '../mqttclient.service'
 @Component({
   selector: 'ledbutton2',
   template: `
-  <div [ngStyle]="{ 'text-align': 'center', 'border': '2px solid black', 
+  <div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px', 
                     'width': '150px', 'padding':'5px',
                     'font-family': 'sans-serif' }">
     {{label}}<br/>
-    <button (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
+    <button mat-mini-fab color="primary" (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
     <led [topic]="feedbackTopic"></led>
-    <button (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
+    <button mat-mini-fab color="primary" (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
   </div>
   `
 })
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..5f69d4f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";