material works
This commit is contained in:
parent
acd2647124
commit
239485fab6
16
package-lock.json
generated
16
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
`
|
||||
})
|
||||
|
@ -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";
|
||||
|
Loading…
x
Reference in New Issue
Block a user