wn/smartclient
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

material works

Browse Source
This commit is contained in:
Wolfgang Hottgenroth 2018-06-23 22:08:24 +02:00
parent acd2647124
commit 239485fab6
Signed by: wn
GPG Key ID: B586EAFCDF2F65F4
6 changed files with 100 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@ -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",

2
package.json
View File

@ -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",

95
src/app/app.component.html
View File

@ -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>

12
src/app/app.module.ts
View File

@ -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

6
src/app/led-button-group2/led-button-group2.component.ts
View File

@ -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
src/styles.css
View File

@ -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";