fix radio button groups in certain accessory control modals

homebridge · Dec 25, 2024 · 0771c29 · 0771c29
1 parent 7a64df1
commit 0771c29
Show file tree

Hide file tree

Showing 31 changed files with 256 additions and 202 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 
 - fix verified plugins link in support module (fixes [#2295](https://github.com/homebridge/homebridge-config-ui-x/issues/2295))
 - add missing modal footer `<div>`s to accessory control modals
+- fix radio button groups in certain accessory control modals (fixes [#2294](https://github.com/homebridge/homebridge-config-ui-x/issues/2294))
 
 ### Other Changes
 

diff --git a/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html b/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html
@@ -19,18 +19,26 @@ <h5>
     </h5>
 
     <div
-      class="fan-mode-control btn-group btn-group-toggle d-flex justify-content-center my-4"
-      ngbRadioGroup
-      name="radioBasic"
-      [(ngModel)]="targetMode"
-      (change)="onTargetStateChange()"
+      class="btn-group-vertical d-flex justify-content-center mb-4 p-0"
+      role="group"
+      aria-label="Air Purifier Mode Control"
     >
-      <label ngbButtonLabel class="btn-primary">
-        <input ngbButton type="radio" [value]="0" /> {{ 'accessories.control.off' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary">
-        <input ngbButton type="radio" [value]="1" /> {{ 'accessories.control.on' | translate }}
-      </label>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(0)"
+        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.off' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(1)"
+        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.on' | translate }}
+      </button>
     </div>
 
     @if (targetRotationSpeed) {

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
@@ -66,10 +66,11 @@ export class AirpurifierManageComponent implements OnInit {
     }
   }
 
-  onTargetStateChange() {
+  setTargetMode(value: number) {
+    this.targetMode = value
     this.service.getCharacteristic('Active').setValue(this.targetMode)
 
-    // set the brightness to 100% if on 0% when turned on
+    // Set the rotation speed to 100% if on 0% when turned on
     if (this.targetMode && this.targetRotationSpeed && !this.targetRotationSpeed.value) {
       this.targetRotationSpeed.value = 100
     }

diff --git a/ui/src/app/core/accessories/types/fan/fan.component.scss b/ui/src/app/core/accessories/types/fan/fan.component.scss
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.ts b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -9,7 +9,6 @@ import { LongClickDirective } from '../../../directives/longclick.directive'
 @Component({
   selector: 'app-fan',
   templateUrl: './fan.component.html',
-  styleUrls: ['./fan.component.scss'],
   standalone: true,
   imports: [
     LongClickDirective,

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
@@ -19,19 +19,23 @@ <h5>
       </strong>
     </h5>
 
-    <div
-      class="fan-mode-control btn-group btn-group-toggle d-flex justify-content-center my-4"
-      ngbRadioGroup
-      name="radioBasic"
-      [(ngModel)]="targetMode"
-      (change)="onTargetStateChange()"
-    >
-      <label ngbButtonLabel class="btn-primary">
-        <input ngbButton type="radio" [value]="false" /> {{ 'accessories.control.off' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary">
-        <input ngbButton type="radio" [value]="true" /> {{ 'accessories.control.on' | translate }}
-      </label>
+    <div class="btn-group-vertical d-flex justify-content-center mb-4 p-0" role="group" aria-label="Fan Mode Control">
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(false)"
+        [style.opacity]="!targetMode ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.off' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(true)"
+        [style.opacity]="targetMode ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.on' | translate }}
+      </button>
     </div>
 
     @if (targetRotationSpeed) {

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
@@ -11,7 +11,6 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 @Component({
   selector: 'app-fan-manage',
   templateUrl: './fan.manage.component.html',
-  styleUrls: ['./fan.component.scss'],
   standalone: true,
   imports: [
     FormsModule,
@@ -67,10 +66,11 @@ export class FanManageComponent implements OnInit {
     }
   }
 
-  onTargetStateChange() {
+  setTargetMode(value: boolean) {
+    this.targetMode = value
     this.service.getCharacteristic('On').setValue(this.targetMode)
 
-    // set the rotation speed to max 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 = this.service.getCharacteristic('RotationSpeed').maxValue
     }

diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.scss b/ui/src/app/core/accessories/types/fanv2/fanv2.component.scss
diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -9,7 +9,6 @@ import { LongClickDirective } from '../../../directives/longclick.directive'
 @Component({
   selector: 'app-fanv2',
   templateUrl: './fanv2.component.html',
-  styleUrls: ['./fanv2.component.scss'],
   standalone: true,
   imports: [
     LongClickDirective,

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
@@ -19,19 +19,23 @@ <h5>
       </strong>
     </h5>
 
-    <div
-      class="fan-mode-control btn-group btn-group-toggle d-flex justify-content-center my-4"
-      ngbRadioGroup
-      name="radioBasic"
-      [(ngModel)]="targetMode"
-      (change)="onTargetStateChange()"
-    >
-      <label ngbButtonLabel class="btn-primary">
-        <input ngbButton type="radio" [value]="0" /> {{ 'accessories.control.off' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary">
-        <input ngbButton type="radio" [value]="1" /> {{ 'accessories.control.on' | translate }}
-      </label>
+    <div class="btn-group-vertical d-flex justify-content-center mb-4 p-0" role="group" aria-label="Fan Mode Control">
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(0)"
+        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.off' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(1)"
+        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.on' | translate }}
+      </button>
     </div>
 
     @if (targetRotationSpeed) {

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
@@ -11,7 +11,6 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 @Component({
   selector: 'app-fanv2-manage',
   templateUrl: './fanv2.manage.component.html',
-  styleUrls: ['./fanv2.component.scss'],
   standalone: true,
   imports: [
     FormsModule,
@@ -67,10 +66,11 @@ export class Fanv2ManageComponent implements OnInit {
     }
   }
 
-  onTargetStateChange() {
+  setTargetMode(value: number) {
+    this.targetMode = value
     this.service.getCharacteristic('Active').setValue(this.targetMode)
 
-    // set the rotation speed to max 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 = this.service.getCharacteristic('RotationSpeed').maxValue
     }

diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.scss b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.scss
@@ -38,10 +38,3 @@
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
-
-.thermostat-mode-control {
-  .btn {
-    font-size: 1.4rem;
-    text-transform: initial;
-  }
-}
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
@@ -23,24 +23,42 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
     ></div>
 
     <div
-      class="thermostat-mode-control btn-group-vertical btn-group-toggle d-flex justify-content-center mb-4"
-      ngbRadioGroup
-      name="radioBasic"
-      [(ngModel)]="targetMode"
-      (change)="onTargetStateChange()"
+      class="btn-group-vertical d-flex justify-content-center mb-4 p-0"
+      role="group"
+      aria-label="Heater Cooler Mode Control"
     >
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="0" /> {{ 'accessories.control.auto' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="1" /> {{ 'accessories.control.heat' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="2" /> {{ 'accessories.control.cool' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="'off'" /> {{ 'accessories.control.off' | translate }}
-      </label>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(0)"
+        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.auto' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(1)"
+        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.heat' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(2)"
+        [style.opacity]="targetMode === 2 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.cool' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode('off')"
+        [style.opacity]="targetMode === 'off' ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.off' | translate }}
+      </button>
     </div>
 
     @if (service.values.Active === 1 && HeatingThresholdTemperature && CoolingThresholdTemperature) {

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
@@ -28,7 +28,7 @@ export class HeaterCoolerManageComponent implements OnInit {
   $activeModal = inject(NgbActiveModal)
 
   @Input() public service: ServiceTypeX
-  public targetMode: any
+  public targetMode: number | 'off'
   public targetTemperatureChanged: Subject<any> = new Subject<any>()
 
   public CoolingThresholdTemperature: CharacteristicType
@@ -77,7 +77,9 @@ export class HeaterCoolerManageComponent implements OnInit {
     this.autoTemp = [this.targetHeatingTemp, this.targetCoolingTemp]
   }
 
-  onTargetStateChange() {
+  setTargetMode(value: number | 'off') {
+    this.targetMode = value
+
     if (this.targetMode === 'off') {
       this.service.getCharacteristic('Active').setValue(0)
     } else {

diff --git a/...c/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.scss b/...c/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.scss
@@ -45,10 +45,3 @@
   -webkit-transition: all 0.15s ease-in-out;
   transition: all 0.15s ease-in-out;
 }
-
-.humidity-mode-control {
-  .btn {
-    font-size: 1.4rem;
-    text-transform: initial;
-  }
-}
diff --git a/...ore/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html b/...ore/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
@@ -24,24 +24,42 @@ <h5 class="modal-title" [innerText]="service.customName || service.serviceName">
     </div>
 
     <div
-      class="humidity-mode-control btn-group-vertical btn-group-toggle d-flex justify-content-center mb-4"
-      ngbRadioGroup
-      name="radioBasic"
-      [(ngModel)]="targetMode"
-      (change)="onTargetStateChange()"
+      class="btn-group-vertical d-flex justify-content-center mb-4 p-0"
+      role="group"
+      aria-label="Humidifier Dehumidifier Mode Control"
     >
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="0" /> {{ 'accessories.control.auto' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="1" /> {{ 'accessories.control.humidifying' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="2" /> {{ 'accessories.control.dehumidifying' | translate }}
-      </label>
-      <label ngbButtonLabel class="btn-primary m-0">
-        <input ngbButton type="radio" [value]="'off'" /> {{ 'accessories.control.off' | translate }}
-      </label>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(0)"
+        [style.opacity]="targetMode === 0 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.auto' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(1)"
+        [style.opacity]="targetMode === 1 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.humidifying' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode(2)"
+        [style.opacity]="targetMode === 2 ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.dehumidifying' | translate }}
+      </button>
+      <button
+        type="button"
+        class="btn btn-primary mb-0 mx-0 px-0 py-2"
+        (click)="setTargetMode('off')"
+        [style.opacity]="targetMode === 'off' ? '1' : '0.75'"
+      >
+        {{ 'accessories.control.off' | translate }}
+      </button>
     </div>
 
     @if (service.values.Active === 1 && RelativeHumidityHumidifierThreshold && RelativeHumidityDehumidifierThreshold) {

diff --git a/.../core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts b/.../core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
@@ -25,7 +25,7 @@ export class HumidifierDehumidifierManageComponent implements OnInit {
   $activeModal = inject(NgbActiveModal)
 
   @Input() public service: ServiceTypeX
-  public targetMode: any
+  public targetMode: number | 'off'
   public targetHumidityChanged: Subject<any> = new Subject<any>()
 
   public RelativeHumidityDehumidifierThreshold: CharacteristicType
@@ -74,7 +74,9 @@ export class HumidifierDehumidifierManageComponent implements OnInit {
     this.autoHumidity = [this.targetHumidifierHumidity, this.targetDehumidifierHumidity]
   }
 
-  onTargetStateChange() {
+  setTargetMode(value: number | 'off') {
+    this.targetMode = value
+
     if (this.targetMode === 'off') {
       this.service.getCharacteristic('Active').setValue(0)
     } else {

diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.scss b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.scss