tune with dispatcher output

This commit is contained in:
Wolfgang Hottgenroth 2018-06-25 13:14:31 +02:00
parent fdf0c55094
commit 6e9cdd1a11
Signed by: wn
GPG Key ID: B586EAFCDF2F65F4
5 changed files with 27 additions and 5 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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) { }