allow fan/fanv2 rotation speed to be a different unit than percentage

homebridge · Dec 27, 2023 · f35071d · f35071d
1 parent 89e94e1
commit f35071d
Show file tree

Hide file tree

Showing 53 changed files with 91 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ All notable changes to homebridge-config-ui-x will be documented in this file.
 - added credits link in status footer and modal for credits
 - added more `aria-label` attributes to buttons to improve accessibility
 - add link to homebridge wiki in logs on plugin action error
+- allow fan/fanv2 rotation speed to be a different unit than percentage
 
 ### Translation Changes
 

diff --git a/ui/src/app/core/accessories/accessories.module.ts b/ui/src/app/core/accessories/accessories.module.ts
@@ -51,7 +51,7 @@ import { ValveComponent } from '@/app/core/accessories/types/valve/valve.compone
 import { ValveManageComponent } from '@/app/core/accessories/types/valve/valve.manage.component';
 import { WindowComponent } from '@/app/core/accessories/types/window/window.component';
 import { WindowManageComponent } from '@/app/core/accessories/types/window/window.manage.component';
-import { WindowcoveringComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.component';
+import { WindowCoveringComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.component';
 import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component';
 import { CoreModule } from '@/app/core/core.module';
 
@@ -79,7 +79,7 @@ import { CoreModule } from '@/app/core/core.module';
     OccupancysensorComponent,
     HumiditysensorComponent,
     AirqualitysensorComponent,
-    WindowcoveringComponent,
+    WindowCoveringComponent,
     WindowcoveringManageComponent,
     WindowComponent,
     WindowManageComponent,

diff --git a/ui/src/app/core/accessories/types/airpurifier/airpurifier.component.ts b/ui/src/app/core/accessories/types/airpurifier/airpurifier.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 import { AirpurifierManageComponent } from '@/app/core/accessories/types/airpurifier/airpurifier.manage.component';
 
 @Component({

diff --git a/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.ts b/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-airpurifier-manage',

diff --git a/ui/src/app/core/accessories/types/airqualitysensor/airqualitysensor.component.ts b/ui/src/app/core/accessories/types/airqualitysensor/airqualitysensor.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-airqualitysensor',

diff --git a/ui/src/app/core/accessories/types/batteryservice/batteryservice.component.ts b/ui/src/app/core/accessories/types/batteryservice/batteryservice.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-batteryservice',

diff --git a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-contactsensor',

diff --git a/ui/src/app/core/accessories/types/door/door.component.ts b/ui/src/app/core/accessories/types/door/door.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 import { DoorManageComponent } from '@/app/core/accessories/types/door/door.manage.component';
 
 @Component({
@@ -27,7 +27,7 @@ export class DoorComponent implements OnInit {
 
   onLongClick() {
     const ref = this.modalService.open(DoorManageComponent, {
-      size: 'sm',
+      size: 'md',
     });
     ref.componentInstance.service = this.service;
   }

diff --git a/ui/src/app/core/accessories/types/door/door.manage.component.html b/ui/src/app/core/accessories/types/door/door.manage.component.html
@@ -6,7 +6,7 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
-  <div class="modal-body text-center">
+  <div class="modal-body text-center px-5">
 
     <h5>
       <strong>

diff --git a/ui/src/app/core/accessories/types/door/door.manage.component.ts b/ui/src/app/core/accessories/types/door/door.manage.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-door-manage',

diff --git a/ui/src/app/core/accessories/types/fan/fan.component.html b/ui/src/app/core/accessories/types/fan/fan.component.html
@@ -8,6 +8,6 @@
       [innerText]="(service.values.On ? 'accessories.control.label_on' : 'accessories.control.label_off') | translate">
     </div>
     <div class="accessory-label grey-text" *ngIf="service.values.RotationSpeed && service.values.On">
-      {{ service.values.RotationSpeed }}%</div>
+      {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}</div>
   </div>
-</div>
+</div>
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.ts b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 import { FanManageComponent } from '@/app/core/accessories/types/fan/fan.manage.component';
 
 @Component({
@@ -10,25 +10,33 @@ import { FanManageComponent } from '@/app/core/accessories/types/fan/fan.manage.
 })
 export class FanComponent implements OnInit {
   @Input() public service: ServiceTypeX;
+  public rotationSpeedUnit = '';
 
   constructor(
     private modalService: NgbModal,
   ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    // Find the unit for the rotation speed
+    const RotationSpeed = this.service.serviceCharacteristics.find((c) => c.type === 'RotationSpeed');
+    if (RotationSpeed && RotationSpeed.unit === 'percentage') {
+      this.rotationSpeedUnit = '%';
+    }
+  }
 
   onClick() {
     this.service.getCharacteristic('On').setValue(!this.service.values.On);
 
-    // set the brightness to 100% if on 0% when turned on
+    // set the rotation speed to max if on 0% when turned on
     if (!this.service.values.On && 'RotationSpeed' in this.service.values && !this.service.values.RotationSpeed) {
-      this.service.getCharacteristic('RotationSpeed').setValue(100);
+      const RotationSpeed = this.service.getCharacteristic('RotationSpeed');
+      RotationSpeed.setValue(RotationSpeed.maxValue);
     }
   }
 
   onLongClick() {
     const ref = this.modalService.open(FanManageComponent, {
-      size: 'sm',
+      size: 'md',
     });
     ref.componentInstance.service = this.service;
   }

diff --git a/ui/src/app/core/accessories/types/fan/fan.manage.component.html b/ui/src/app/core/accessories/types/fan/fan.manage.component.html
@@ -6,7 +6,7 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
-  <div class="modal-body text-center">
+  <div class="modal-body text-center px-5">
 
     <h5>
       <strong>
@@ -27,7 +27,7 @@ <h5>
 
     <div *ngIf="targetRotationSpeed">
       <h5 class="mb-0">{{ 'accessories.control.label_rotation_speed' | translate }}</h5>
-      <p>{{ targetRotationSpeed.value }}%</p>
+      <p>{{ targetRotationSpeed.value }}<span *ngIf="targetRotationSpeed.unit === 'percentage'">%</span></p>
       <nouislider [min]="targetRotationSpeed.min" [max]="targetRotationSpeed.max" [step]="targetRotationSpeed.step"
         [(ngModel)]="targetRotationSpeed.value" (ngModelChange)="onTargetRotationSpeedChange()">
       </nouislider>

diff --git a/ui/src/app/core/accessories/types/fan/fan.manage.component.ts b/ui/src/app/core/accessories/types/fan/fan.manage.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-fan-manage',
@@ -53,16 +53,17 @@ export class FanManageComponent implements OnInit {
         min: RotationSpeed.minValue,
         max: RotationSpeed.maxValue,
         step: RotationSpeed.minStep,
+        unit: RotationSpeed.unit,
       };
     }
   }
 
   onTargetStateChange() {
     this.service.getCharacteristic('On').setValue(this.targetMode);
 
-    // set the brightness to 100% if on 0% when turned on
+    // set the rotation speed to max if on 0% when turned on
     if (this.targetMode && this.targetRotationSpeed && !this.targetRotationSpeed.value) {
-      this.targetRotationSpeed.value = 100;
+      this.targetRotationSpeed.value = this.service.getCharacteristic('RotationSpeed').maxValue;
     }
   }
 

diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.html b/ui/src/app/core/accessories/types/fanv2/fanv2.component.html
@@ -8,6 +8,6 @@
       [innerText]="(service.values.Active ? 'accessories.control.label_on' : 'accessories.control.label_off') | translate">
     </div>
     <div class="accessory-label grey-text" *ngIf="service.values.RotationSpeed && service.values.Active">
-      {{ service.values.RotationSpeed }}%</div>
+      {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}</div>
   </div>
-</div>
+</div>
diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 import { Fanv2ManageComponent } from '@/app/core/accessories/types/fanv2/fanv2.manage.component';
 
 @Component({
@@ -10,25 +10,33 @@ import { Fanv2ManageComponent } from '@/app/core/accessories/types/fanv2/fanv2.m
 })
 export class Fanv2Component implements OnInit {
   @Input() public service: ServiceTypeX;
+  public rotationSpeedUnit = '';
 
   constructor(
     private modalService: NgbModal,
   ) {}
 
-  ngOnInit() {}
+  ngOnInit() {
+    // Find the unit for the rotation speed
+    const RotationSpeed = this.service.serviceCharacteristics.find((c) => c.type === 'RotationSpeed');
+    if (RotationSpeed && RotationSpeed.unit === 'percentage') {
+      this.rotationSpeedUnit = '%';
+    }
+  }
 
   onClick() {
     this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1);
 
-    // set the brightness to 100% if on 0% when turned on
+    // set the rotation speed to max if on 0% when turned on
     if (!this.service.values.On && 'RotationSpeed' in this.service.values && !this.service.values.RotationSpeed) {
-      this.service.getCharacteristic('RotationSpeed').setValue(100);
+      const RotationSpeed = this.service.getCharacteristic('RotationSpeed');
+      RotationSpeed.setValue(RotationSpeed.maxValue);
     }
   }
 
   onLongClick() {
     const ref = this.modalService.open(Fanv2ManageComponent, {
-      size: 'sm',
+      size: 'md',
     });
     ref.componentInstance.service = this.service;
   }

diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
@@ -6,7 +6,7 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
-  <div class="modal-body text-center">
+  <div class="modal-body text-center px-5">
 
     <h5>
       <strong>
@@ -27,7 +27,7 @@ <h5>
 
     <div *ngIf="targetRotationSpeed">
       <h5 class="mb-0">{{ 'accessories.control.label_rotation_speed' | translate }}</h5>
-      <p>{{ targetRotationSpeed.value }}%</p>
+      <p>{{ targetRotationSpeed.value }}<span *ngIf="targetRotationSpeed.unit === 'percentage'">%</span></p>
       <nouislider [min]="targetRotationSpeed.min" [max]="targetRotationSpeed.max" [step]="targetRotationSpeed.step"
         [(ngModel)]="targetRotationSpeed.value" (ngModelChange)="onTargetRotationSpeedChange()">
       </nouislider>

diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-fanv2-manage',
@@ -53,16 +53,17 @@ export class Fanv2ManageComponent implements OnInit {
         min: RotationSpeed.minValue,
         max: RotationSpeed.maxValue,
         step: RotationSpeed.minStep,
+        unit: RotationSpeed.unit,
       };
     }
   }
 
   onTargetStateChange() {
     this.service.getCharacteristic('Active').setValue(this.targetMode);
 
-    // set the brightness to 100% if on 0% when turned on
+    // set the rotation speed to max if on 0% when turned on
     if (this.targetMode && this.targetRotationSpeed && !this.targetRotationSpeed.value) {
-      this.targetRotationSpeed.value = 100;
+      this.targetRotationSpeed.value = this.service.getCharacteristic('RotationSpeed').maxValue;
     }
   }
 

diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-garagedooropener',

diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 import { HeaterCoolerManageComponent } from '@/app/core/accessories/types/heatercooler/heatercooler.manage.component';
 
 @Component({

diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-heatercooler-manage',

diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 import { HumidifierDehumidifierManageComponent } from '@/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component'; // eslint-disable-line max-len
 
 @Component({

diff --git a/.../core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts b/.../core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-humidifierdehumidifier-manage',

diff --git a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-humiditysensor',

diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-irrigationsystem',

diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-leaksensor',

diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 import { LightbulbManageComponent } from '@/app/core/accessories/types//lightbulb/lightbulb.manage.component';
 
 @Component({

diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-lightbulb-manage',

diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-lightsensor',

diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { ServiceTypeX } from '../../accessories.interfaces';
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces';
 
 @Component({
   selector: 'app-lockmechanism',