use smoke detector icon for carbon monoxide and dioxide sensors

CHANGELOG.md

@@ -18,6 +18,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 - consistent labels for sensor-type accessories
 - update default dashboard layout
 - remove pnpm warning modal
+- use smoke detector icon for carbon monoxide and dioxide sensors
 
 ### Other Changes
 

ui/src/app/core/accessories/accessories.module.ts

@@ -5,6 +5,8 @@ import { AirpurifierComponent } from '@/app/core/accessories/types/airpurifier/a
 import { AirpurifierManageComponent } from '@/app/core/accessories/types/airpurifier/airpurifier.manage.component'
 import { AirqualitysensorComponent } from '@/app/core/accessories/types/airqualitysensor/airqualitysensor.component'
 import { BatteryComponent } from '@/app/core/accessories/types/battery/battery.component'
+import { CarbondioxidesensorComponent } from '@/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component'
+import { CarbonmonoxidesensorComponent } from '@/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component'
 import { ContactsensorComponent } from '@/app/core/accessories/types/contactsensor/contactsensor.component'
 import { DoorComponent } from '@/app/core/accessories/types/door/door.component'
 import { DoorManageComponent } from '@/app/core/accessories/types/door/door.manage.component'
@@ -103,6 +105,8 @@ import { NgxMdModule } from 'ngx-md'
     HeaterCoolerManageComponent,
     HumidifierDehumidifierComponent,
     HumidifierDehumidifierManageComponent,
+    CarbonmonoxidesensorComponent,
+    CarbondioxidesensorComponent,
   ],
   imports: [
     CommonModule,

ui/src/app/core/accessories/accessory-tile/accessory-tile.component.html

@@ -35,6 +35,12 @@
   <app-securitysystem *ngSwitchCase="'SecuritySystem'" [service]="service">Security System</app-securitysystem>
   <app-leaksensor *ngSwitchCase="'LeakSensor'" [service]="service">Leak Sensor</app-leaksensor>
   <app-smokesensor *ngSwitchCase="'SmokeSensor'" [service]="service">Smoke Sensor</app-smokesensor>
+  <app-carbonmonoxidesensor *ngSwitchCase="'CarbonMonoxideSensor'" [service]="service"
+    >Carbon Monoxide Sensor</app-carbonmonoxidesensor
+  >
+  <app-carbondioxidesensor *ngSwitchCase="'CarbonDioxideSensor'" [service]="service"
+    >Carbon Monoxide Sensor</app-carbondioxidesensor
+  >
   <app-valve *ngSwitchCase="'Valve'" [service]="service">Valve</app-valve>
   <app-irrigationsystem *ngSwitchCase="'IrrigationSystem'" [service]="service">Irrigation System</app-irrigationsystem>
   <app-heatercooler *ngSwitchCase="'HeaterCooler'" [service]="service">Heater Cooler</app-heatercooler>

ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html

@@ -0,0 +1,22 @@
+<div
+  class="accessory-box"
+  [ngClass]="{
+  'switch-on': service.values.CarbonDioxideDetected,
+  'switch-off': !service.values.CarbonDioxideDetected
+}"
+>
+  <div class="d-flex flex-column h-100">
+    <div
+      [inlineSVG]="'/assets/hap-icons/smokesensor.svg'"
+      [attr.aria-label]="'Carbon Dioxide Sensor'"
+      class="accessory-svg"
+    ></div>
+    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
+    <div class="accessory-label red-text" *ngIf="service.values.CarbonDioxideDetected">
+      {{ 'accessories.control.detected' | translate }}
+    </div>
+    <div class="accessory-label grey-text" *ngIf="!service.values.CarbonDioxideDetected">
+      {{ 'accessories.control.not_detected' | translate }}
+    </div>
+  </div>
+</div>

ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.scss

@@ -0,0 +1,12 @@
+::ng-deep {
+  .switch-off {
+    svg {
+      .smoke_sensor_trigger_lines {
+        display: none;
+      }
+      .smoke_sensor_box {
+        fill: #808080;
+      }
+    }
+  }
+}

ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts

@@ -0,0 +1,13 @@
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'app-carbondioxidesensor',
+  templateUrl: './carbondioxidesensor.component.html',
+  styleUrls: ['./carbondioxidesensor.component.scss'],
+})
+export class CarbondioxidesensorComponent {
+  @Input() public service: ServiceTypeX
+
+  constructor() {}
+}

ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html

@@ -0,0 +1,22 @@
+<div
+  class="accessory-box"
+  [ngClass]="{
+  'switch-on': service.values.CarbonMonoxideDetected,
+  'switch-off': !service.values.CarbonMonoxideDetected
+}"
+>
+  <div class="d-flex flex-column h-100">
+    <div
+      [inlineSVG]="'/assets/hap-icons/smokesensor.svg'"
+      [attr.aria-label]="'Carbon Monoxide Sensor'"
+      class="accessory-svg"
+    ></div>
+    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
+    <div class="accessory-label red-text" *ngIf="service.values.CarbonMonoxideDetected">
+      {{ 'accessories.control.detected' | translate }}
+    </div>
+    <div class="accessory-label grey-text" *ngIf="!service.values.CarbonMonoxideDetected">
+      {{ 'accessories.control.not_detected' | translate }}
+    </div>
+  </div>
+</div>

ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.scss

@@ -0,0 +1,12 @@
+::ng-deep {
+  .switch-off {
+    svg {
+      .smoke_sensor_trigger_lines {
+        display: none;
+      }
+      .smoke_sensor_box {
+        fill: #808080;
+      }
+    }
+  }
+}

ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts

@@ -0,0 +1,13 @@
+import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'app-carbonmonoxidesensor',
+  templateUrl: './carbonmonoxidesensor.component.html',
+  styleUrls: ['./carbonmonoxidesensor.component.scss'],
+})
+export class CarbonmonoxidesensorComponent {
+  @Input() public service: ServiceTypeX
+
+  constructor() {}
+}