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
6 changed files with 100 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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