-
Notifications
You must be signed in to change notification settings - Fork 374
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #945 from Feilner/master
Add UI Accessory support for Door and Window
- Loading branch information
Showing
17 changed files
with
358 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
ui/src/app/core/accessories/types/door/door.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<div class="accessory-box" [ngClass]="{'switch-on': service.values.TargetPosition}" appLongclick | ||
(longclick)="onLongClick()" (shortclick)="onClick()"> | ||
<div class="d-flex flex-column h-100"> | ||
<div *ngIf="!service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/door-closed.svg'" | ||
aria-label="Door " class="accessory-svg"></div> | ||
<div *ngIf="service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/door-open.svg'" | ||
aria-label="Door " class="accessory-svg"></div> | ||
<div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div> | ||
<div class="accessory-label grey-text" *ngIf="service.values.PositionState === 2"> | ||
<span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span> | ||
<span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100"> | ||
{{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }} | ||
</span> | ||
<span *ngIf="service.values.CurrentPosition === 100">{{ 'accessories.control.label_open' | translate }}</span> | ||
</div> | ||
<div class="accessory-label red-text" *ngIf="service.values.PositionState === 1"> | ||
{{ 'accessories.control.label_opening' | translate }}... | ||
</div> | ||
<div class="accessory-label red-text" *ngIf="service.values.PositionState === 0"> | ||
{{ 'accessories.control.label_closing' | translate }}... | ||
</div> | ||
</div> | ||
</div> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.door-mode-control { | ||
.btn { | ||
font-size: 1.4rem; | ||
text-transform: initial; | ||
} | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { Component, OnInit, Input } from '@angular/core'; | ||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; | ||
import { ServiceTypeX } from '../../accessories.interfaces'; | ||
|
||
import { DoorManageComponent } from './door.manage.component'; | ||
|
||
@Component({ | ||
selector: 'app-door', | ||
templateUrl: './door.component.html', | ||
styleUrls: ['./door.component.scss'], | ||
}) | ||
export class DoorComponent implements OnInit { | ||
@Input() public service: ServiceTypeX; | ||
|
||
constructor( | ||
private modalService: NgbModal, | ||
) { } | ||
|
||
ngOnInit() { } | ||
|
||
onClick() { | ||
if (this.service.values.TargetPosition) { | ||
this.service.getCharacteristic('TargetPosition').setValue(0); | ||
} else { | ||
this.service.getCharacteristic('TargetPosition').setValue(100); | ||
} | ||
} | ||
|
||
onLongClick() { | ||
const ref = this.modalService.open(DoorManageComponent, { | ||
size: 'sm', | ||
}); | ||
ref.componentInstance.service = this.service; | ||
} | ||
|
||
} |
36 changes: 36 additions & 0 deletions
36
ui/src/app/core/accessories/types/door/door.manage.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<div class="modal-content"> | ||
<div class="modal-header"> | ||
<h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5> | ||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" | ||
(click)="activeModal.dismiss('Cross click')"> | ||
<span aria-hidden="true">×</span> | ||
</button> | ||
</div> | ||
<div class="modal-body text-center"> | ||
|
||
<h5> | ||
<strong> | ||
<div *ngIf="service.values.PositionState === 2"> | ||
<span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span> | ||
<span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100"> | ||
{{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }} | ||
</span> | ||
<span *ngIf="service.values.CurrentPosition === 100">Open</span> | ||
</div> | ||
<div class="red-text" *ngIf="service.values.PositionState === 1"> | ||
{{ 'accessories.control.label_opening' | translate }}... | ||
</div> | ||
<div class="red-text" *ngIf="service.values.PositionState === 0"> | ||
{{ 'accessories.control.label_closing' | translate }}... | ||
</div> | ||
</strong> | ||
</h5> | ||
|
||
<p>{{ 'accessories.control.label_target' | translate }}: {{ targetPosition.value }}%</p> | ||
<nouislider [min]="targetPosition.min" [max]="targetPosition.max" [step]="targetPosition.step" | ||
[(ngModel)]="targetPosition.value" (ngModelChange)="onTargetPositionChange()"> | ||
</nouislider> | ||
|
||
</div> | ||
</div> | ||
|
59 changes: 59 additions & 0 deletions
59
ui/src/app/core/accessories/types/door/door.manage.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import { Component, OnInit, Input } from '@angular/core'; | ||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; | ||
import { ServiceTypeX } from '../../accessories.interfaces'; | ||
|
||
import { Subject } from 'rxjs'; | ||
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; | ||
|
||
@Component({ | ||
selector: 'app-door-manage', | ||
templateUrl: './door.manage.component.html', | ||
styleUrls: ['./door.component.scss'], | ||
}) | ||
export class DoorManageComponent implements OnInit { | ||
@Input() public service: ServiceTypeX; | ||
public targetMode: any; | ||
public targetPosition: any; | ||
public targetPositionChanged: Subject<string> = new Subject<string>(); | ||
|
||
constructor( | ||
public activeModal: NgbActiveModal, | ||
) { | ||
this.targetPositionChanged | ||
.pipe( | ||
debounceTime(300), | ||
distinctUntilChanged(), | ||
) | ||
.subscribe((value) => { | ||
if (this.service.getCharacteristic('CurrentPosition').value < this.targetPosition.value) { | ||
this.service.values.PositionState = 1; | ||
} else if (this.service.getCharacteristic('CurrentPosition').value > this.targetPosition.value) { | ||
this.service.values.PositionState = 0; | ||
} | ||
this.service.getCharacteristic('TargetPosition').setValue(this.targetPosition.value); | ||
}); | ||
} | ||
|
||
ngOnInit() { | ||
this.targetMode = this.service.values.On; | ||
this.loadTargetPosition(); | ||
} | ||
|
||
loadTargetPosition() { | ||
const TargetPosition = this.service.getCharacteristic('TargetPosition'); | ||
|
||
if (TargetPosition) { | ||
this.targetPosition = { | ||
value: TargetPosition.value, | ||
min: TargetPosition.minValue, | ||
max: TargetPosition.maxValue, | ||
step: TargetPosition.minStep, | ||
}; | ||
} | ||
} | ||
|
||
onTargetPositionChange() { | ||
this.targetPositionChanged.next(this.targetPosition.value); | ||
} | ||
|
||
} |
24 changes: 24 additions & 0 deletions
24
ui/src/app/core/accessories/types/window/window.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
<div class="accessory-box" [ngClass]="{'switch-on': service.values.TargetPosition}" appLongclick | ||
(longclick)="onLongClick()" (shortclick)="onClick()"> | ||
<div class="d-flex flex-column h-100"> | ||
<div *ngIf="!service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/window-closed.svg'" | ||
aria-label="Window " class="accessory-svg"></div> | ||
<div *ngIf="service.values.TargetPosition" [inlineSVG]="'/assets/hap-icons/window-open.svg'" | ||
aria-label="Window " class="accessory-svg"></div> | ||
<div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div> | ||
<div class="accessory-label grey-text" *ngIf="service.values.PositionState === 2"> | ||
<span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span> | ||
<span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100"> | ||
{{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }} | ||
</span> | ||
<span *ngIf="service.values.CurrentPosition === 100">{{ 'accessories.control.label_open' | translate }}</span> | ||
</div> | ||
<div class="accessory-label red-text" *ngIf="service.values.PositionState === 1"> | ||
{{ 'accessories.control.label_opening' | translate }}... | ||
</div> | ||
<div class="accessory-label red-text" *ngIf="service.values.PositionState === 0"> | ||
{{ 'accessories.control.label_closing' | translate }}... | ||
</div> | ||
</div> | ||
</div> | ||
|
7 changes: 7 additions & 0 deletions
7
ui/src/app/core/accessories/types/window/window.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.window-mode-control { | ||
.btn { | ||
font-size: 1.4rem; | ||
text-transform: initial; | ||
} | ||
} | ||
|
36 changes: 36 additions & 0 deletions
36
ui/src/app/core/accessories/types/window/window.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { Component, OnInit, Input } from '@angular/core'; | ||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; | ||
import { ServiceTypeX } from '../../accessories.interfaces'; | ||
|
||
import { WindowManageComponent } from './window.manage.component'; | ||
|
||
@Component({ | ||
selector: 'app-window', | ||
templateUrl: './window.component.html', | ||
styleUrls: ['./window.component.scss'], | ||
}) | ||
export class WindowComponent implements OnInit { | ||
@Input() public service: ServiceTypeX; | ||
|
||
constructor( | ||
private modalService: NgbModal, | ||
) { } | ||
|
||
ngOnInit() { } | ||
|
||
onClick() { | ||
if (this.service.values.TargetPosition) { | ||
this.service.getCharacteristic('TargetPosition').setValue(0); | ||
} else { | ||
this.service.getCharacteristic('TargetPosition').setValue(100); | ||
} | ||
} | ||
|
||
onLongClick() { | ||
const ref = this.modalService.open(WindowManageComponent, { | ||
size: 'sm', | ||
}); | ||
ref.componentInstance.service = this.service; | ||
} | ||
|
||
} |
36 changes: 36 additions & 0 deletions
36
ui/src/app/core/accessories/types/window/window.manage.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<div class="modal-content"> | ||
<div class="modal-header"> | ||
<h5 class="modal-title" [innerText]="service.customName || service.serviceName"></h5> | ||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" | ||
(click)="activeModal.dismiss('Cross click')"> | ||
<span aria-hidden="true">×</span> | ||
</button> | ||
</div> | ||
<div class="modal-body text-center"> | ||
|
||
<h5> | ||
<strong> | ||
<div *ngIf="service.values.PositionState === 2"> | ||
<span *ngIf="service.values.CurrentPosition === 0">{{ 'accessories.control.label_closed' | translate }}</span> | ||
<span *ngIf="service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100"> | ||
{{ service.values.CurrentPosition }}% {{ 'accessories.control.label_open' | translate }} | ||
</span> | ||
<span *ngIf="service.values.CurrentPosition === 100">Open</span> | ||
</div> | ||
<div class="red-text" *ngIf="service.values.PositionState === 1"> | ||
{{ 'accessories.control.label_opening' | translate }}... | ||
</div> | ||
<div class="red-text" *ngIf="service.values.PositionState === 0"> | ||
{{ 'accessories.control.label_closing' | translate }}... | ||
</div> | ||
</strong> | ||
</h5> | ||
|
||
<p>{{ 'accessories.control.label_target' | translate }}: {{ targetPosition.value }}%</p> | ||
<nouislider [min]="targetPosition.min" [max]="targetPosition.max" [step]="targetPosition.step" | ||
[(ngModel)]="targetPosition.value" (ngModelChange)="onTargetPositionChange()"> | ||
</nouislider> | ||
|
||
</div> | ||
</div> | ||
|
59 changes: 59 additions & 0 deletions
59
ui/src/app/core/accessories/types/window/window.manage.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import { Component, OnInit, Input } from '@angular/core'; | ||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; | ||
import { ServiceTypeX } from '../../accessories.interfaces'; | ||
|
||
import { Subject } from 'rxjs'; | ||
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; | ||
|
||
@Component({ | ||
selector: 'app-window-manage', | ||
templateUrl: './window.manage.component.html', | ||
styleUrls: ['./window.component.scss'], | ||
}) | ||
export class WindowManageComponent implements OnInit { | ||
@Input() public service: ServiceTypeX; | ||
public targetMode: any; | ||
public targetPosition: any; | ||
public targetPositionChanged: Subject<string> = new Subject<string>(); | ||
|
||
constructor( | ||
public activeModal: NgbActiveModal, | ||
) { | ||
this.targetPositionChanged | ||
.pipe( | ||
debounceTime(300), | ||
distinctUntilChanged(), | ||
) | ||
.subscribe((value) => { | ||
if (this.service.getCharacteristic('CurrentPosition').value < this.targetPosition.value) { | ||
this.service.values.PositionState = 1; | ||
} else if (this.service.getCharacteristic('CurrentPosition').value > this.targetPosition.value) { | ||
this.service.values.PositionState = 0; | ||
} | ||
this.service.getCharacteristic('TargetPosition').setValue(this.targetPosition.value); | ||
}); | ||
} | ||
|
||
ngOnInit() { | ||
this.targetMode = this.service.values.On; | ||
this.loadTargetPosition(); | ||
} | ||
|
||
loadTargetPosition() { | ||
const TargetPosition = this.service.getCharacteristic('TargetPosition'); | ||
|
||
if (TargetPosition) { | ||
this.targetPosition = { | ||
value: TargetPosition.value, | ||
min: TargetPosition.minValue, | ||
max: TargetPosition.maxValue, | ||
step: TargetPosition.minStep, | ||
}; | ||
} | ||
} | ||
|
||
onTargetPositionChange() { | ||
this.targetPositionChanged.next(this.targetPosition.value); | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.