{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.Active) {
-
- {{ service.values.RotationSpeed }}%
-
+ } @if (service.values.RotationSpeed && service.values.Active) {
+ {{ service.values.RotationSpeed }}%
+ }
diff --git a/ui/src/app/core/accessories/types/airpurifier/airpurifier.component.ts b/ui/src/app/core/accessories/types/airpurifier/airpurifier.component.ts
index aa6a0acaf..5474c6f12 100644
--- a/ui/src/app/core/accessories/types/airpurifier/airpurifier.component.ts
+++ b/ui/src/app/core/accessories/types/airpurifier/airpurifier.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { AirpurifierManageComponent } from '@/app/core/accessories/types/airpurifier/airpurifier.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-airpurifier',
templateUrl: './airpurifier.component.html',
styleUrls: ['./airpurifier.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class AirpurifierComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
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
index 0cf6b6f84..7cc4b10f8 100644
--- a/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html
+++ b/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.html
@@ -33,7 +33,8 @@
-
+ @if (targetRotationSpeed) {
+
{{ 'accessories.control.rotation_speed' | translate }}
{{ targetRotationSpeed.value }}%
{{ 'accessories.control.rotation_speed' | translate }}
>
+ }
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
index 49093893a..393126a12 100644
--- a/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.ts
+++ b/ui/src/app/core/accessories/types/airpurifier/airpurifier.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-airpurifier-manage',
templateUrl: './airpurifier.manage.component.html',
styleUrls: ['./airpurifier.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class AirpurifierManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetRotationSpeed: any
public targetRotationSpeedChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetRotationSpeedChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/airqualitysensor/airqualitysensor.component.ts b/ui/src/app/core/accessories/types/airqualitysensor/airqualitysensor.component.ts
index 9238b0897..017117159 100644
--- a/ui/src/app/core/accessories/types/airqualitysensor/airqualitysensor.component.ts
+++ b/ui/src/app/core/accessories/types/airqualitysensor/airqualitysensor.component.ts
@@ -1,9 +1,12 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-airqualitysensor',
templateUrl: './airqualitysensor.component.html',
+ imports: [NgClass, InlineSVGModule],
})
export class AirqualitysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/battery/battery.component.html b/ui/src/app/core/accessories/types/battery/battery.component.html
index 370ea30b4..0a3aebf94 100644
--- a/ui/src/app/core/accessories/types/battery/battery.component.html
+++ b/ui/src/app/core/accessories/types/battery/battery.component.html
@@ -8,14 +8,12 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.battery_notcharging' | translate }}
-
-
- {{ 'accessories.control.battery_charging' | translate }}
-
-
- {{ 'accessories.control.battery_notchargeable' | translate }}
-
+ @if (service.values.ChargingState === 0) {
+ {{ 'accessories.control.battery_notcharging' | translate }}
+ } @if (service.values.ChargingState === 1) {
+ {{ 'accessories.control.battery_charging' | translate }}
+ } @if (service.values.ChargingState === 2) {
+ {{ 'accessories.control.battery_notchargeable' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/battery/battery.component.ts b/ui/src/app/core/accessories/types/battery/battery.component.ts
index c091824ff..76b66e211 100644
--- a/ui/src/app/core/accessories/types/battery/battery.component.ts
+++ b/ui/src/app/core/accessories/types/battery/battery.component.ts
@@ -1,10 +1,17 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { DecimalPipe, NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-battery',
templateUrl: './battery.component.html',
styleUrls: ['./battery.component.scss'],
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class BatteryComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html
index 485313aad..e5f6895da 100644
--- a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html
+++ b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.CarbonDioxideDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.CarbonDioxideDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts
index a60a153ca..cd4a393fa 100644
--- a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts
+++ b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-carbondioxidesensor',
templateUrl: './carbondioxidesensor.component.html',
styleUrls: ['./carbondioxidesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class CarbondioxidesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html
index 8cf3960e0..701aa57b3 100644
--- a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html
+++ b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.CarbonMonoxideDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.CarbonMonoxideDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts
index ae5fb24e4..e1d988e42 100644
--- a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts
+++ b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-carbonmonoxidesensor',
templateUrl: './carbonmonoxidesensor.component.html',
styleUrls: ['./carbonmonoxidesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class CarbonmonoxidesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html
index d78f0ce33..65caf28bd 100644
--- a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html
+++ b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html
@@ -6,24 +6,24 @@
}"
>
+ @if (service.values.ContactSensorState) {
+ } @if (!service.values.ContactSensorState) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.closed' | translate }}
-
+ @if (service.values.ContactSensorState) {
+ {{ 'accessories.control.open' | translate }}
+ } @if (!service.values.ContactSensorState) {
+ {{ 'accessories.control.closed' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts
index e17976931..4b0cf4f9a 100644
--- a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts
+++ b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-contactsensor',
templateUrl: './contactsensor.component.html',
styleUrls: ['./contactsensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ContactsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/door/door.component.html b/ui/src/app/core/accessories/types/door/door.component.html
index df8df0eff..3b4c21ee8 100644
--- a/ui/src/app/core/accessories/types/door/door.component.html
+++ b/ui/src/app/core/accessories/types/door/door.component.html
@@ -7,31 +7,26 @@
tabindex="0"
>
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/door/door.component.ts b/ui/src/app/core/accessories/types/door/door.component.ts
index 684e6e4bb..ac878efed 100644
--- a/ui/src/app/core/accessories/types/door/door.component.ts
+++ b/ui/src/app/core/accessories/types/door/door.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { DoorManageComponent } from '@/app/core/accessories/types/door/door.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-door',
templateUrl: './door.component.html',
styleUrls: ['./door.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class DoorComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
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
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/door/door.manage.component.html
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
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
index 1295613b4..3045278b5 100644
--- a/ui/src/app/core/accessories/types/door/door.manage.component.ts
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class DoorManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.html b/ui/src/app/core/accessories/types/fan/fan.component.html
index 84aa8193a..e282ddabe 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.html
+++ b/ui/src/app/core/accessories/types/fan/fan.component.html
@@ -7,16 +7,19 @@
tabindex="0"
>
- 
- 
+ @if (!service.values.On) {
+
+ } @if (service.values.On) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.On) {
-
- {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
-
+ } @if (service.values.RotationSpeed && service.values.On) {
+ {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
+ }
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.ts b/ui/src/app/core/accessories/types/fan/fan.component.ts
index 805bdc8f0..a8d0dc9a8 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { FanManageComponent } from '@/app/core/accessories/types/fan/fan.manage.component'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-fan',
templateUrl: './fan.component.html',
styleUrls: ['./fan.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class FanComponent implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// Find the unit for the rotation speed
const RotationSpeed = this.service.serviceCharacteristics.find(c => c.type === 'RotationSpeed')
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
index ff9e7fffb..482a168dd 100644
--- a/ui/src/app/core/accessories/types/fan/fan.manage.component.html
+++ b/ui/src/app/core/accessories/types/fan/fan.manage.component.html
@@ -34,9 +34,14 @@
-
+ @if (targetRotationSpeed) {
+
{{ 'accessories.control.rotation_speed' | translate }}
- {{ targetRotationSpeed.value }}%
+
+ {{ targetRotationSpeed.value }}@if (targetRotationSpeed.unit === 'percentage') {
+ %
+ }
+
{{ 'accessories.control.rotation_speed' | translate }}
>
+ }
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
index de06e1db0..c138dc5cd 100644
--- a/ui/src/app/core/accessories/types/fan/fan.manage.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fan-manage',
templateUrl: './fan.manage.component.html',
styleUrls: ['./fan.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class FanManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetRotationSpeed: any
public targetRotationSpeedChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetRotationSpeedChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.html b/ui/src/app/core/accessories/types/fanv2/fanv2.component.html
index 6cb230594..77109933d 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.html
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.html
@@ -7,16 +7,19 @@
tabindex="0"
>
-
-
+ @if (!service.values.Active) {
+
+ } @if (service.values.Active) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.Active) {
-
- {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
-
+ } @if (service.values.RotationSpeed && service.values.Active) {
+ {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
+ }
diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
index dafd115ab..a98073e6c 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Fanv2ManageComponent } from '@/app/core/accessories/types/fanv2/fanv2.manage.component'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-fanv2',
templateUrl: './fanv2.component.html',
styleUrls: ['./fanv2.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class Fanv2Component implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// Find the unit for the rotation speed
const RotationSpeed = this.service.serviceCharacteristics.find(c => c.type === 'RotationSpeed')
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
index 0ec467c08..70997046a 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
@@ -34,9 +34,14 @@
-
+ @if (targetRotationSpeed) {
+
{{ 'accessories.control.rotation_speed' | translate }}
- {{ targetRotationSpeed.value }}%
+
+ {{ targetRotationSpeed.value }}@if (targetRotationSpeed.unit === 'percentage') {
+ %
+ }
+
{{ 'accessories.control.rotation_speed' | translate }}
>
+ }
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
index 2d18d3481..2afcdd250 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fanv2-manage',
templateUrl: './fanv2.manage.component.html',
styleUrls: ['./fanv2.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class Fanv2ManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetRotationSpeed: any
public targetRotationSpeedChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetRotationSpeedChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
index 5ae4da9a4..5ce6e3195 100644
--- a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
+++ b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
@@ -9,21 +9,18 @@
{{ service.customName || service.serviceName }}
+ @if (service.values.CurrentDoorState < 2 ) {
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
-
-
- {{ 'accessories.control.stopped' | translate }}
-
+ } @if (service.values.CurrentDoorState === 2) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.CurrentDoorState === 3) {
+ {{ 'accessories.control.closing' | translate }}...
+ } @if (service.values.CurrentDoorState === 4) {
+ {{ 'accessories.control.stopped' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
index d4652bf09..f90c6c593 100644
--- a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
+++ b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class GaragedooropenerComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
index 379f02ae4..4ba400e55 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
@@ -17,30 +17,25 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
-
- {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
- {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
+ @if (service.values.Active === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('CoolingThresholdTemperature') &&
+ service.getCharacteristic('HeatingThresholdTemperature')) {
+
+ @switch (service.values.TargetHeaterCoolerState) { @case (1) {
+ {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (2) {
+ {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (0) {
+
{{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°-{{
service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('CoolingThresholdTemperature') ||
+ !service.getCharacteristic('HeatingThresholdTemperature'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
index 8483fd28a..80db0116f 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HeaterCoolerManageComponent } from '@/app/core/accessories/types/heatercooler/heatercooler.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-heatercooler',
templateUrl: './heatercooler.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
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
index cfad71edd..2fd2b59a3 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
@@ -43,11 +43,12 @@
-
+ @if (service.values.Active === 1 && HeatingThresholdTemperature && CoolingThresholdTemperature) {
+
{{ 'accessories.control.target_temperature' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoTemp[0] | convertTemp | number:'1.0-1' }}° - {{ autoTemp[1] | convertTemp | number:'1.0-1'
}}°
@@ -61,7 +62,8 @@
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (1) {
+
{{ targetHeatingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (2) {
+
{{ targetCoolingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
+ } }
+ }
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
index 27edcbd62..eaedd443e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
@@ -1,7 +1,12 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +14,18 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperatureChanged: Subject = new Subject()
@@ -22,9 +37,7 @@ export class HeaterCoolerManageComponent implements OnInit {
public targetHeatingTemp: number
public autoTemp: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
index 8ac6c48f9..f634e1fb2 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
@@ -18,26 +18,25 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ service.values.RelativeHumidityHumidifierThreshold }}%
- {{ service.values.RelativeHumidityDehumidifierThreshold }}%
-
+ @if (service.values.Active === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('RelativeHumidityDehumidifierThreshold') &&
+ service.getCharacteristic('RelativeHumidityHumidifierThreshold')) {
+
+ @switch (service.values.TargetHumidifierDehumidifierState) { @case (1) {
+ {{ service.values.RelativeHumidityHumidifierThreshold }}%
+ } @case (2) {
+ {{ service.values.RelativeHumidityDehumidifierThreshold }}%
+ } @case (0) {
+
{{ service.values.RelativeHumidityHumidifierThreshold }}%-{{
service.values.RelativeHumidityDehumidifierThreshold }}%
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('RelativeHumidityDehumidifierThreshold') ||
+ !service.getCharacteristic('RelativeHumidityHumidifierThreshold'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
index 3cd70f0f7..62e468f58 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HumidifierDehumidifierManageComponent } from '@/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-humidifierdehumidifier',
templateUrl: './humidifierdehumidifier.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
index 641dd0471..c5de61ad9 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
@@ -44,13 +44,12 @@
-
+ @if (service.values.Active === 1 && RelativeHumidityHumidifierThreshold && RelativeHumidityDehumidifierThreshold) {
+
{{ 'accessories.control.target_humidity' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoHumidity[0] }}% - {{ autoHumidity[1] }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (1) {
+
{{ targetHumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (2) {
+
{{ targetDehumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
+ } }
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
index f57d53c75..b2b50a116 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
@@ -1,7 +1,11 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +13,16 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetHumidityChanged: Subject = new Subject()
@@ -22,9 +34,7 @@ export class HumidifierDehumidifierManageComponent implements OnInit {
public targetHumidifierHumidity: number
public autoHumidity: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetHumidityChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
index 842404b93..a2dd03b7c 100644
--- a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
+++ b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
@@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core'
selector: 'app-humiditysensor',
templateUrl: './humiditysensor.component.html',
styleUrls: ['./humiditysensor.component.scss'],
+ standalone: true,
})
export class HumiditysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
index 72f87e078..d34cc2567 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
@@ -12,11 +12,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.InUse) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.InUse) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
index d40780b57..bfc828c0d 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
@@ -1,10 +1,20 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-irrigationsystem',
templateUrl: './irrigationsystem.component.html',
styleUrls: ['./irrigationsystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class IrrigationSystemComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
index 22854fdec..a5bca7525 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
@@ -8,11 +8,10 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.LeakDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.LeakDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
index b8ce31d83..1d5a15a52 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LeaksensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
index 86111ed30..198f9c091 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
@@ -9,11 +9,13 @@
{{ service.customName || service.serviceName }}
+ @if (!service.values.Brightness) {
- {{ service.values.Brightness }}%
+ } @if (service.values.Brightness) {
+ {{ service.values.Brightness }}%
+ }
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
index 152c86437..f37b37491 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { LightbulbManageComponent } from '@/app/core/accessories/types//lightbulb/lightbulb.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lightbulb',
templateUrl: './lightbulb.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('On').setValue(!this.service.values.On)
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
index 48e28ed67..d9da9454d 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
@@ -34,7 +34,8 @@
-
+ @if (targetBrightness) {
+
{{ 'accessories.control.brightness' | translate }}
{{ targetBrightness.value }}%
{{ 'accessories.control.brightness' | translate }}
>
+ }
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
index 7c07b26a5..b0d8f2e56 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class LightbulbManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetBrightness: any
public targetBrightnessChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetBrightnessChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
index e0b111b2f..7bb67e856 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
@@ -2,11 +2,10 @@
{{ service.customName || service.serviceName }}
-
- {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
-
-
- {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
-
+ @if (service.values.CurrentAmbientLightLevel < 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
+ } @if (service.values.CurrentAmbientLightLevel >= 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
+ }
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
index f4cd83950..9e003595d 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
@@ -1,9 +1,15 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-lightsensor',
templateUrl: './lightsensor.component.html',
+ imports: [
+ InlineSVGModule,
+ DecimalPipe,
+ ],
})
export class LightsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
index d2cb81a6f..bea28fe66 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
@@ -6,39 +6,26 @@
tabindex="0"
>
-
-
-
+ @if (service.values.LockCurrentState === 0) {
+
+ } @if (service.values.LockCurrentState === 1) {
+
+ } @if (service.values.LockCurrentState > 1) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (service.values.LockCurrentState < 2) {
-
-
- {{ 'accessories.control.jammed' | translate }}
-
-
- {{ 'accessories.control.unknown' | translate }}
-
+ } @if (service.values.LockCurrentState === 2) {
+ {{ 'accessories.control.jammed' | translate }}
+ } @if (service.values.LockCurrentState === 3) {
+ {{ 'accessories.control.unknown' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
index 8a5463c39..a9c7e58bf 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LockmechanismComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
index 39cbcc4bb..5168daf2e 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.MotionDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.MotionDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
index 987c00938..db83c7747 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class MotionsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
index 75e9cf3de..7a12c1568 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.OccupancyDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.OccupancyDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
index 9aa9092ae..a93f35eb0 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OccupancysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/outlet/outlet.component.ts b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
index 3d0f963e6..9147ffeb2 100644
--- a/ui/src/app/core/accessories/types/outlet/outlet.component.ts
+++ b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-outlet',
templateUrl: './outlet.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OutletComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
index 52fdebd8d..2c21fb7f1 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
@@ -6,27 +6,32 @@
tabindex="0"
>
+ @if (service.values.SecuritySystemCurrentState !== 3) {
+ } @if (service.values.SecuritySystemCurrentState === 3) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.home' | translate }}
- {{ 'accessories.control.away' | translate }}
- {{ 'accessories.control.night' | translate }}
- {{ 'accessories.control.off' | translate }}
- {{ 'accessories.control.triggered' | translate }}
-
+ @switch (service.values.SecuritySystemCurrentState) { @case (0) {
+ {{ 'accessories.control.home' | translate }}
+ } @case (1) {
+ {{ 'accessories.control.away' | translate }}
+ } @case (2) {
+ {{ 'accessories.control.night' | translate }}
+ } @case (3) {
+ {{ 'accessories.control.off' | translate }}
+ } @case (4) {
+ {{ 'accessories.control.triggered' | translate }}
+ } }
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
index fdd989257..542825441 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SecuritysystemManageComponent } from '@/app/core/accessories/types/securitysystem/securitysystem.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-securitysystem',
templateUrl: './securitysystem.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
const ref = this.$modal.open(SecuritysystemManageComponent, {
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
index 745ad07e0..c8e8328a6 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
@@ -1,20 +1,21 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-securitysystem.manage',
templateUrl: './securitysystem.manage.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetMode = this.service.values.SecuritySystemTargetState
}
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
index 53b21405f..13bd18a18 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.SmokeDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.SmokeDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
index aebb32bef..36cbc046c 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SmokesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.html b/ui/src/app/core/accessories/types/speaker/speaker.component.html
index 9b9b54a45..0f772e614 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.html
@@ -9,16 +9,12 @@
{{ service.customName || service.serviceName }}
-
-
- {{ service.values.Volume }}%
-
-
- {{ 'accessories.control.not_mute' | translate }}
-
+ @if (service.values.Mute) {
+
+ } @if (service.values.Volume !== undefined && !service.values.Mute) {
+ {{ service.values.Volume }}%
+ } @if (service.values.Volume === undefined && !service.values.Mute) {
+ {{ 'accessories.control.not_mute' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
index d86c6bf13..8c7b12073 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SpeakerManageComponent } from '@/app/core/accessories/types/speaker/speaker.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-speaker',
templateUrl: './speaker.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('Mute').setValue(!this.service.values.Mute)
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
index 27ae0aa3a..14d5cb1cf 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
@@ -33,7 +33,8 @@
-
+ @if (targetVolume) {
+
{{ 'accessories.control.speaker_volume' | translate }}
{{ targetVolume.value }}%
{{ 'accessories.control.speaker_volume' | translate }}
>
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
index f94a85a02..447b63842 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class SpeakerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetVolume: any
public targetVolumeChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetVolumeChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
index 308aa8d4a..05e16d385 100644
--- a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
+++ b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-statelessprogrammableswitch',
templateUrl: './statelessprogrammableswitch.component.html',
+ imports: [InlineSVGModule],
})
export class StatelessprogrammableswitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/switch/switch.component.ts b/ui/src/app/core/accessories/types/switch/switch.component.ts
index c549acdf4..902944b0c 100644
--- a/ui/src/app/core/accessories/types/switch/switch.component.ts
+++ b/ui/src/app/core/accessories/types/switch/switch.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-switch',
templateUrl: './switch.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SwitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/television/television.component.html b/ui/src/app/core/accessories/types/television/television.component.html
index 76aab0d82..97102dd25 100644
--- a/ui/src/app/core/accessories/types/television/television.component.html
+++ b/ui/src/app/core/accessories/types/television/television.component.html
@@ -10,11 +10,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ channelList[service.values.ActiveIdentifier] }}
-
+ @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active) {
+ {{ channelList[service.values.ActiveIdentifier] }}
+ }
diff --git a/ui/src/app/core/accessories/types/television/television.component.ts b/ui/src/app/core/accessories/types/television/television.component.ts
index bbeb11e05..7e58ec924 100644
--- a/ui/src/app/core/accessories/types/television/television.component.ts
+++ b/ui/src/app/core/accessories/types/television/television.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-television',
templateUrl: './television.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class TelevisionComponent implements OnInit {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
index 1bf86fde3..2af99e513 100644
--- a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
+++ b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
@@ -1,10 +1,13 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
@Component({
selector: 'app-temperaturesensor',
templateUrl: './temperaturesensor.component.html',
styleUrls: ['./temperaturesensor.component.scss'],
+ imports: [DecimalPipe, ConvertTempPipe],
})
export class TemperaturesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
index bb172946d..c8e459239 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
@@ -17,11 +17,12 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
+ @if (service.values.TargetHeatingCoolingState === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.TargetHeatingCoolingState) {
+
{{ service.values.TargetTemperature | convertTemp | number:'1.0-1' }}°
+ }
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
index 9ee71ba28..0fcb3464b 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ThermostatManageComponent } from '@/app/core/accessories/types/thermostat/thermostat.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-thermostat',
templateUrl: './thermostat.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
size: 'sm',
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
index 4a4de5abd..3b03d84c1 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
@@ -1,6 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +13,24 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperature: any
public targetTemperatureChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/unknown/unknown.component.ts b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
index 72e85eb3b..6f76d1e57 100644
--- a/ui/src/app/core/accessories/types/unknown/unknown.component.ts
+++ b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-unknown',
templateUrl: './unknown.component.html',
+ imports: [InlineSVGModule],
})
export class UnknownComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.html b/ui/src/app/core/accessories/types/valve/valve.component.html
index 9f4a68558..162a4a6db 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.component.html
@@ -7,41 +7,24 @@
tabindex="0"
>
-
-
-
-
+ @if (service.values.ValveType === 0) {
+
+ } @if (service.values.ValveType === 1) {
+
+ } @if (service.values.ValveType === 2) {
+
+ } @if (service.values.ValveType === 3) {
+
+ }
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ remainingDuration }}
-
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.Active && remainingDuration) {
+ {{ remainingDuration }}
+ } @if (service.values.Active && !remainingDuration) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.ts b/ui/src/app/core/accessories/types/valve/valve.component.ts
index 7650b07ce..b255513d7 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.component.ts
@@ -1,16 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ValveManageComponent } from '@/app/core/accessories/types/valve/valve.manage.component'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
import { interval, Subscription } from 'rxjs'
import { filter } from 'rxjs/operators'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-valve',
templateUrl: './valve.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,10 +30,6 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
if (this.service.getCharacteristic('RemainingDuration')) {
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.html b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
index 680f30d27..91722697e 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
@@ -18,7 +18,9 @@
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
index 5cff3bb61..b53876770 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
@@ -1,23 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
selector: 'app-valve-manage',
templateUrl: './valve.manage.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ValveManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public availableSetDurations = []
public targetSetDuration: number
private durationSeconds = [300, 600, 900, 1200, 1500, 1800, 2100, 2400, 2700, 3000, 3300, 3600]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetSetDuration = this.service.values.SetDuration
diff --git a/ui/src/app/core/accessories/types/window/window.component.html b/ui/src/app/core/accessories/types/window/window.component.html
index 741bff947..5e9587188 100644
--- a/ui/src/app/core/accessories/types/window/window.component.html
+++ b/ui/src/app/core/accessories/types/window/window.component.html
@@ -7,31 +7,26 @@
tabindex="0"
>
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.component.ts b/ui/src/app/core/accessories/types/window/window.component.ts
index bbcd0b981..d063de8a3 100644
--- a/ui/src/app/core/accessories/types/window/window.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowManageComponent } from '@/app/core/accessories/types/window/window.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-window',
templateUrl: './window.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.html b/ui/src/app/core/accessories/types/window/window.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.html
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
index 43e31dd2b..3075f449e 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -7,31 +7,34 @@
tabindex="0"
>
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@ Homebridge Google Smart Home
-
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
{{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ }
-
-
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
-
-
+ @if (!gshConfig.token) {
+ {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) {
+
-
-
+ } @if (gshConfig.token) {
+
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
-
-
+ @if (justLinked) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
+ }
-
-
- []
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
- -
+ @for (option of fundingOptions; track option) {
+
-
{{ option.url }}
+ }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
-
+ } @if (!allPluginsSupported) {
+
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
+ }
- -
+ @for (plugin of installedPlugins; track plugin) {
+
-
{{ plugin.name }}
-
+ @if (plugin.hb2Ready === 'supported') {
+
-
+ } @if (plugin.hb2Ready === 'unknown') {
+
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@ {{ presentTenseVerb }}: {{ pluginName }}
-
-
-
- {{ 'platform.version.service_restart_required' | translate }}
-
+ @if (actionComplete) {
+
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+ {{ 'platform.version.service_restart_required' | translate }}
+ }
{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- {{ 'restart.homebridge' | translate }}
-
-
- {{ 'restart.child_bridges' | translate }}
-
+ @if (!isDisabled) {
+
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+ {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) {
+ {{ 'restart.child_bridges' | translate }}
+ }
-
+ } @if (changeLog) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
{{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
+ }
-
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
- v{{ installedVersion }} →
- {{ release.name }}
- v{{ latestVersion }}
+ @if (installedVersion) {
+ v{{ installedVersion }} →
+ } @if (release.name) {
+ {{ release.name }}
+ } @if (!release.name) {
+ v{{ latestVersion }}
+ }
+ }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
-
+ } @if (!loading) {
+
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+ {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }
{{ 'plugins.manage.select_version' | translate }}:
- -
+ @for (version of versionsWithTags; track version) {
+
-
{{ version.tag }}
v{{ version.version }}
-
+ }
-
{{ 'plugins.manage.all_versions' | translate }}
-
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && !canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ }
-
+ @if (!loading && canConfigure) {
+
+ @for (block of pluginConfig; track block) {
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) {
+ }
@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
{{ 'accessories.control.rotation_speed' | translate }}
{{ targetRotationSpeed.value }}%
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.battery_notcharging' | translate }}
-
-
- {{ 'accessories.control.battery_charging' | translate }}
-
-
- {{ 'accessories.control.battery_notchargeable' | translate }}
-
+ @if (service.values.ChargingState === 0) {
+ {{ 'accessories.control.battery_notcharging' | translate }}
+ } @if (service.values.ChargingState === 1) {
+ {{ 'accessories.control.battery_charging' | translate }}
+ } @if (service.values.ChargingState === 2) {
+ {{ 'accessories.control.battery_notchargeable' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/battery/battery.component.ts b/ui/src/app/core/accessories/types/battery/battery.component.ts
index c091824ff..76b66e211 100644
--- a/ui/src/app/core/accessories/types/battery/battery.component.ts
+++ b/ui/src/app/core/accessories/types/battery/battery.component.ts
@@ -1,10 +1,17 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { DecimalPipe, NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-battery',
templateUrl: './battery.component.html',
styleUrls: ['./battery.component.scss'],
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class BatteryComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html
index 485313aad..e5f6895da 100644
--- a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html
+++ b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.CarbonDioxideDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.CarbonDioxideDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts
index a60a153ca..cd4a393fa 100644
--- a/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts
+++ b/ui/src/app/core/accessories/types/carbondioxidesensor/carbondioxidesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-carbondioxidesensor',
templateUrl: './carbondioxidesensor.component.html',
styleUrls: ['./carbondioxidesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class CarbondioxidesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html
index 8cf3960e0..701aa57b3 100644
--- a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html
+++ b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.CarbonMonoxideDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.CarbonMonoxideDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts
index ae5fb24e4..e1d988e42 100644
--- a/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts
+++ b/ui/src/app/core/accessories/types/carbonmonoxidesensor/carbonmonoxidesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-carbonmonoxidesensor',
templateUrl: './carbonmonoxidesensor.component.html',
styleUrls: ['./carbonmonoxidesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class CarbonmonoxidesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html
index d78f0ce33..65caf28bd 100644
--- a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html
+++ b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.html
@@ -6,24 +6,24 @@
}"
>
+ @if (service.values.ContactSensorState) {
+ } @if (!service.values.ContactSensorState) {
+ }
diff --git a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts
index e17976931..4b0cf4f9a 100644
--- a/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts
+++ b/ui/src/app/core/accessories/types/contactsensor/contactsensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-contactsensor',
templateUrl: './contactsensor.component.html',
styleUrls: ['./contactsensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ContactsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/door/door.component.html b/ui/src/app/core/accessories/types/door/door.component.html
index df8df0eff..3b4c21ee8 100644
--- a/ui/src/app/core/accessories/types/door/door.component.html
+++ b/ui/src/app/core/accessories/types/door/door.component.html
@@ -7,31 +7,26 @@
tabindex="0"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.closed' | translate }}
-
+ @if (service.values.ContactSensorState) {
+ {{ 'accessories.control.open' | translate }}
+ } @if (!service.values.ContactSensorState) {
+ {{ 'accessories.control.closed' | translate }}
+ }
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
diff --git a/ui/src/app/core/accessories/types/door/door.component.ts b/ui/src/app/core/accessories/types/door/door.component.ts
index 684e6e4bb..ac878efed 100644
--- a/ui/src/app/core/accessories/types/door/door.component.ts
+++ b/ui/src/app/core/accessories/types/door/door.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { DoorManageComponent } from '@/app/core/accessories/types/door/door.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-door',
templateUrl: './door.component.html',
styleUrls: ['./door.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class DoorComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
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
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/door/door.manage.component.html
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.html
@@ -14,19 +14,21 @@ {{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
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
index 1295613b4..3045278b5 100644
--- a/ui/src/app/core/accessories/types/door/door.manage.component.ts
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class DoorManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.html b/ui/src/app/core/accessories/types/fan/fan.component.html
index 84aa8193a..e282ddabe 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.html
+++ b/ui/src/app/core/accessories/types/fan/fan.component.html
@@ -7,16 +7,19 @@
tabindex="0"
>
-
-
+ @if (!service.values.On) {
+
+ } @if (service.values.On) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.On) {
-
- {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
-
+ } @if (service.values.RotationSpeed && service.values.On) {
+ {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
+ }
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.ts b/ui/src/app/core/accessories/types/fan/fan.component.ts
index 805bdc8f0..a8d0dc9a8 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { FanManageComponent } from '@/app/core/accessories/types/fan/fan.manage.component'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-fan',
templateUrl: './fan.component.html',
styleUrls: ['./fan.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class FanComponent implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// Find the unit for the rotation speed
const RotationSpeed = this.service.serviceCharacteristics.find(c => c.type === 'RotationSpeed')
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
index ff9e7fffb..482a168dd 100644
--- a/ui/src/app/core/accessories/types/fan/fan.manage.component.html
+++ b/ui/src/app/core/accessories/types/fan/fan.manage.component.html
@@ -34,9 +34,14 @@
-
+ @if (targetRotationSpeed) {
+
{{ 'accessories.control.rotation_speed' | translate }}
- {{ targetRotationSpeed.value }}%
+
+ {{ targetRotationSpeed.value }}@if (targetRotationSpeed.unit === 'percentage') {
+ %
+ }
+
{{ 'accessories.control.rotation_speed' | translate }}
>
+ }
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
index de06e1db0..c138dc5cd 100644
--- a/ui/src/app/core/accessories/types/fan/fan.manage.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fan-manage',
templateUrl: './fan.manage.component.html',
styleUrls: ['./fan.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class FanManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetRotationSpeed: any
public targetRotationSpeedChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetRotationSpeedChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.html b/ui/src/app/core/accessories/types/fanv2/fanv2.component.html
index 6cb230594..77109933d 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.html
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.html
@@ -7,16 +7,19 @@
tabindex="0"
>
-
-
+ @if (!service.values.Active) {
+
+ } @if (service.values.Active) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.Active) {
-
- {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
-
+ } @if (service.values.RotationSpeed && service.values.Active) {
+ {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
+ }
diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
index dafd115ab..a98073e6c 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Fanv2ManageComponent } from '@/app/core/accessories/types/fanv2/fanv2.manage.component'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-fanv2',
templateUrl: './fanv2.component.html',
styleUrls: ['./fanv2.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class Fanv2Component implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// Find the unit for the rotation speed
const RotationSpeed = this.service.serviceCharacteristics.find(c => c.type === 'RotationSpeed')
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
index 0ec467c08..70997046a 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
@@ -34,9 +34,14 @@
-
+ @if (targetRotationSpeed) {
+
{{ 'accessories.control.rotation_speed' | translate }}
- {{ targetRotationSpeed.value }}%
+
+ {{ targetRotationSpeed.value }}@if (targetRotationSpeed.unit === 'percentage') {
+ %
+ }
+
{{ 'accessories.control.rotation_speed' | translate }}
>
+ }
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
index 2d18d3481..2afcdd250 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fanv2-manage',
templateUrl: './fanv2.manage.component.html',
styleUrls: ['./fanv2.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class Fanv2ManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetRotationSpeed: any
public targetRotationSpeedChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetRotationSpeedChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
index 5ae4da9a4..5ce6e3195 100644
--- a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
+++ b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
@@ -9,21 +9,18 @@
{{ service.customName || service.serviceName }}
+ @if (service.values.CurrentDoorState < 2 ) {
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
-
-
- {{ 'accessories.control.stopped' | translate }}
-
+ } @if (service.values.CurrentDoorState === 2) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.CurrentDoorState === 3) {
+ {{ 'accessories.control.closing' | translate }}...
+ } @if (service.values.CurrentDoorState === 4) {
+ {{ 'accessories.control.stopped' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
index d4652bf09..f90c6c593 100644
--- a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
+++ b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class GaragedooropenerComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
index 379f02ae4..4ba400e55 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
@@ -17,30 +17,25 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
-
- {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
- {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
+ @if (service.values.Active === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('CoolingThresholdTemperature') &&
+ service.getCharacteristic('HeatingThresholdTemperature')) {
+
+ @switch (service.values.TargetHeaterCoolerState) { @case (1) {
+ {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (2) {
+ {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (0) {
+
{{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°-{{
service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('CoolingThresholdTemperature') ||
+ !service.getCharacteristic('HeatingThresholdTemperature'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
index 8483fd28a..80db0116f 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HeaterCoolerManageComponent } from '@/app/core/accessories/types/heatercooler/heatercooler.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-heatercooler',
templateUrl: './heatercooler.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
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
index cfad71edd..2fd2b59a3 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
@@ -43,11 +43,12 @@
-
+ @if (service.values.Active === 1 && HeatingThresholdTemperature && CoolingThresholdTemperature) {
+
{{ 'accessories.control.target_temperature' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoTemp[0] | convertTemp | number:'1.0-1' }}° - {{ autoTemp[1] | convertTemp | number:'1.0-1'
}}°
@@ -61,7 +62,8 @@
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (1) {
+
{{ targetHeatingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (2) {
+
{{ targetCoolingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
+ } }
+ }
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
index 27edcbd62..eaedd443e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
@@ -1,7 +1,12 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +14,18 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperatureChanged: Subject = new Subject()
@@ -22,9 +37,7 @@ export class HeaterCoolerManageComponent implements OnInit {
public targetHeatingTemp: number
public autoTemp: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
index 8ac6c48f9..f634e1fb2 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
@@ -18,26 +18,25 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ service.values.RelativeHumidityHumidifierThreshold }}%
- {{ service.values.RelativeHumidityDehumidifierThreshold }}%
-
+ @if (service.values.Active === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('RelativeHumidityDehumidifierThreshold') &&
+ service.getCharacteristic('RelativeHumidityHumidifierThreshold')) {
+
+ @switch (service.values.TargetHumidifierDehumidifierState) { @case (1) {
+ {{ service.values.RelativeHumidityHumidifierThreshold }}%
+ } @case (2) {
+ {{ service.values.RelativeHumidityDehumidifierThreshold }}%
+ } @case (0) {
+
{{ service.values.RelativeHumidityHumidifierThreshold }}%-{{
service.values.RelativeHumidityDehumidifierThreshold }}%
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('RelativeHumidityDehumidifierThreshold') ||
+ !service.getCharacteristic('RelativeHumidityHumidifierThreshold'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
index 3cd70f0f7..62e468f58 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HumidifierDehumidifierManageComponent } from '@/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-humidifierdehumidifier',
templateUrl: './humidifierdehumidifier.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
index 641dd0471..c5de61ad9 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
@@ -44,13 +44,12 @@
-
+ @if (service.values.Active === 1 && RelativeHumidityHumidifierThreshold && RelativeHumidityDehumidifierThreshold) {
+
{{ 'accessories.control.target_humidity' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoHumidity[0] }}% - {{ autoHumidity[1] }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (1) {
+
{{ targetHumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (2) {
+
{{ targetDehumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
+ } }
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
index f57d53c75..b2b50a116 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
@@ -1,7 +1,11 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +13,16 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetHumidityChanged: Subject = new Subject()
@@ -22,9 +34,7 @@ export class HumidifierDehumidifierManageComponent implements OnInit {
public targetHumidifierHumidity: number
public autoHumidity: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetHumidityChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
index 842404b93..a2dd03b7c 100644
--- a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
+++ b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
@@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core'
selector: 'app-humiditysensor',
templateUrl: './humiditysensor.component.html',
styleUrls: ['./humiditysensor.component.scss'],
+ standalone: true,
})
export class HumiditysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
index 72f87e078..d34cc2567 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
@@ -12,11 +12,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.InUse) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.InUse) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
index d40780b57..bfc828c0d 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
@@ -1,10 +1,20 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-irrigationsystem',
templateUrl: './irrigationsystem.component.html',
styleUrls: ['./irrigationsystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class IrrigationSystemComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
index 22854fdec..a5bca7525 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
@@ -8,11 +8,10 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.LeakDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.LeakDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
index b8ce31d83..1d5a15a52 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LeaksensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
index 86111ed30..198f9c091 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
@@ -9,11 +9,13 @@
{{ service.customName || service.serviceName }}
+ @if (!service.values.Brightness) {
- {{ service.values.Brightness }}%
+ } @if (service.values.Brightness) {
+ {{ service.values.Brightness }}%
+ }
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
index 152c86437..f37b37491 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { LightbulbManageComponent } from '@/app/core/accessories/types//lightbulb/lightbulb.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lightbulb',
templateUrl: './lightbulb.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('On').setValue(!this.service.values.On)
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
index 48e28ed67..d9da9454d 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
@@ -34,7 +34,8 @@
-
+ @if (targetBrightness) {
+
{{ 'accessories.control.brightness' | translate }}
{{ targetBrightness.value }}%
{{ 'accessories.control.brightness' | translate }}
>
+ }
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
index 7c07b26a5..b0d8f2e56 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class LightbulbManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetBrightness: any
public targetBrightnessChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetBrightnessChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
index e0b111b2f..7bb67e856 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
@@ -2,11 +2,10 @@
{{ service.customName || service.serviceName }}
-
- {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
-
-
- {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
-
+ @if (service.values.CurrentAmbientLightLevel < 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
+ } @if (service.values.CurrentAmbientLightLevel >= 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
+ }
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
index f4cd83950..9e003595d 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
@@ -1,9 +1,15 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-lightsensor',
templateUrl: './lightsensor.component.html',
+ imports: [
+ InlineSVGModule,
+ DecimalPipe,
+ ],
})
export class LightsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
index d2cb81a6f..bea28fe66 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
@@ -6,39 +6,26 @@
tabindex="0"
>
-
-
-
+ @if (service.values.LockCurrentState === 0) {
+
+ } @if (service.values.LockCurrentState === 1) {
+
+ } @if (service.values.LockCurrentState > 1) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (service.values.LockCurrentState < 2) {
-
-
- {{ 'accessories.control.jammed' | translate }}
-
-
- {{ 'accessories.control.unknown' | translate }}
-
+ } @if (service.values.LockCurrentState === 2) {
+ {{ 'accessories.control.jammed' | translate }}
+ } @if (service.values.LockCurrentState === 3) {
+ {{ 'accessories.control.unknown' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
index 8a5463c39..a9c7e58bf 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LockmechanismComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
index 39cbcc4bb..5168daf2e 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.MotionDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.MotionDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
index 987c00938..db83c7747 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class MotionsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
index 75e9cf3de..7a12c1568 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.OccupancyDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.OccupancyDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
index 9aa9092ae..a93f35eb0 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OccupancysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/outlet/outlet.component.ts b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
index 3d0f963e6..9147ffeb2 100644
--- a/ui/src/app/core/accessories/types/outlet/outlet.component.ts
+++ b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-outlet',
templateUrl: './outlet.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OutletComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
index 52fdebd8d..2c21fb7f1 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
@@ -6,27 +6,32 @@
tabindex="0"
>
+ @if (service.values.SecuritySystemCurrentState !== 3) {
+ } @if (service.values.SecuritySystemCurrentState === 3) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.home' | translate }}
- {{ 'accessories.control.away' | translate }}
- {{ 'accessories.control.night' | translate }}
- {{ 'accessories.control.off' | translate }}
- {{ 'accessories.control.triggered' | translate }}
-
+ @switch (service.values.SecuritySystemCurrentState) { @case (0) {
+ {{ 'accessories.control.home' | translate }}
+ } @case (1) {
+ {{ 'accessories.control.away' | translate }}
+ } @case (2) {
+ {{ 'accessories.control.night' | translate }}
+ } @case (3) {
+ {{ 'accessories.control.off' | translate }}
+ } @case (4) {
+ {{ 'accessories.control.triggered' | translate }}
+ } }
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
index fdd989257..542825441 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SecuritysystemManageComponent } from '@/app/core/accessories/types/securitysystem/securitysystem.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-securitysystem',
templateUrl: './securitysystem.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
const ref = this.$modal.open(SecuritysystemManageComponent, {
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
index 745ad07e0..c8e8328a6 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
@@ -1,20 +1,21 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-securitysystem.manage',
templateUrl: './securitysystem.manage.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetMode = this.service.values.SecuritySystemTargetState
}
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
index 53b21405f..13bd18a18 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.SmokeDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.SmokeDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
index aebb32bef..36cbc046c 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SmokesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.html b/ui/src/app/core/accessories/types/speaker/speaker.component.html
index 9b9b54a45..0f772e614 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.html
@@ -9,16 +9,12 @@
{{ service.customName || service.serviceName }}
-
-
- {{ service.values.Volume }}%
-
-
- {{ 'accessories.control.not_mute' | translate }}
-
+ @if (service.values.Mute) {
+
+ } @if (service.values.Volume !== undefined && !service.values.Mute) {
+ {{ service.values.Volume }}%
+ } @if (service.values.Volume === undefined && !service.values.Mute) {
+ {{ 'accessories.control.not_mute' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
index d86c6bf13..8c7b12073 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SpeakerManageComponent } from '@/app/core/accessories/types/speaker/speaker.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-speaker',
templateUrl: './speaker.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('Mute').setValue(!this.service.values.Mute)
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
index 27ae0aa3a..14d5cb1cf 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
@@ -33,7 +33,8 @@
-
+ @if (targetVolume) {
+
{{ 'accessories.control.speaker_volume' | translate }}
{{ targetVolume.value }}%
{{ 'accessories.control.speaker_volume' | translate }}
>
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
index f94a85a02..447b63842 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class SpeakerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetVolume: any
public targetVolumeChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetVolumeChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
index 308aa8d4a..05e16d385 100644
--- a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
+++ b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-statelessprogrammableswitch',
templateUrl: './statelessprogrammableswitch.component.html',
+ imports: [InlineSVGModule],
})
export class StatelessprogrammableswitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/switch/switch.component.ts b/ui/src/app/core/accessories/types/switch/switch.component.ts
index c549acdf4..902944b0c 100644
--- a/ui/src/app/core/accessories/types/switch/switch.component.ts
+++ b/ui/src/app/core/accessories/types/switch/switch.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-switch',
templateUrl: './switch.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SwitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/television/television.component.html b/ui/src/app/core/accessories/types/television/television.component.html
index 76aab0d82..97102dd25 100644
--- a/ui/src/app/core/accessories/types/television/television.component.html
+++ b/ui/src/app/core/accessories/types/television/television.component.html
@@ -10,11 +10,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ channelList[service.values.ActiveIdentifier] }}
-
+ @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active) {
+ {{ channelList[service.values.ActiveIdentifier] }}
+ }
diff --git a/ui/src/app/core/accessories/types/television/television.component.ts b/ui/src/app/core/accessories/types/television/television.component.ts
index bbeb11e05..7e58ec924 100644
--- a/ui/src/app/core/accessories/types/television/television.component.ts
+++ b/ui/src/app/core/accessories/types/television/television.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-television',
templateUrl: './television.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class TelevisionComponent implements OnInit {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
index 1bf86fde3..2af99e513 100644
--- a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
+++ b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
@@ -1,10 +1,13 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
@Component({
selector: 'app-temperaturesensor',
templateUrl: './temperaturesensor.component.html',
styleUrls: ['./temperaturesensor.component.scss'],
+ imports: [DecimalPipe, ConvertTempPipe],
})
export class TemperaturesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
index bb172946d..c8e459239 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
@@ -17,11 +17,12 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
+ @if (service.values.TargetHeatingCoolingState === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.TargetHeatingCoolingState) {
+
{{ service.values.TargetTemperature | convertTemp | number:'1.0-1' }}°
+ }
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
index 9ee71ba28..0fcb3464b 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ThermostatManageComponent } from '@/app/core/accessories/types/thermostat/thermostat.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-thermostat',
templateUrl: './thermostat.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
size: 'sm',
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
index 4a4de5abd..3b03d84c1 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
@@ -1,6 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +13,24 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperature: any
public targetTemperatureChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/unknown/unknown.component.ts b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
index 72e85eb3b..6f76d1e57 100644
--- a/ui/src/app/core/accessories/types/unknown/unknown.component.ts
+++ b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-unknown',
templateUrl: './unknown.component.html',
+ imports: [InlineSVGModule],
})
export class UnknownComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.html b/ui/src/app/core/accessories/types/valve/valve.component.html
index 9f4a68558..162a4a6db 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.component.html
@@ -7,41 +7,24 @@
tabindex="0"
>
-
-
-
-
+ @if (service.values.ValveType === 0) {
+
+ } @if (service.values.ValveType === 1) {
+
+ } @if (service.values.ValveType === 2) {
+
+ } @if (service.values.ValveType === 3) {
+
+ }
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ remainingDuration }}
-
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.Active && remainingDuration) {
+ {{ remainingDuration }}
+ } @if (service.values.Active && !remainingDuration) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.ts b/ui/src/app/core/accessories/types/valve/valve.component.ts
index 7650b07ce..b255513d7 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.component.ts
@@ -1,16 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ValveManageComponent } from '@/app/core/accessories/types/valve/valve.manage.component'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
import { interval, Subscription } from 'rxjs'
import { filter } from 'rxjs/operators'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-valve',
templateUrl: './valve.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,10 +30,6 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
if (this.service.getCharacteristic('RemainingDuration')) {
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.html b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
index 680f30d27..91722697e 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
@@ -18,7 +18,9 @@
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
index 5cff3bb61..b53876770 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
@@ -1,23 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
selector: 'app-valve-manage',
templateUrl: './valve.manage.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ValveManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public availableSetDurations = []
public targetSetDuration: number
private durationSeconds = [300, 600, 900, 1200, 1500, 1800, 2100, 2400, 2700, 3000, 3300, 3600]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetSetDuration = this.service.values.SetDuration
diff --git a/ui/src/app/core/accessories/types/window/window.component.html b/ui/src/app/core/accessories/types/window/window.component.html
index 741bff947..5e9587188 100644
--- a/ui/src/app/core/accessories/types/window/window.component.html
+++ b/ui/src/app/core/accessories/types/window/window.component.html
@@ -7,31 +7,26 @@
tabindex="0"
>
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.component.ts b/ui/src/app/core/accessories/types/window/window.component.ts
index bbcd0b981..d063de8a3 100644
--- a/ui/src/app/core/accessories/types/window/window.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowManageComponent } from '@/app/core/accessories/types/window/window.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-window',
templateUrl: './window.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.html b/ui/src/app/core/accessories/types/window/window.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.html
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
index 43e31dd2b..3075f449e 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -7,31 +7,34 @@
tabindex="0"
>
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@ Homebridge Google Smart Home
-
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
{{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ }
-
-
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
-
-
+ @if (!gshConfig.token) {
+ {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) {
+
-
-
+ } @if (gshConfig.token) {
+
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
-
-
+ @if (justLinked) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
+ }
-
-
- []
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
- -
+ @for (option of fundingOptions; track option) {
+
-
{{ option.url }}
+ }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
-
+ } @if (!allPluginsSupported) {
+
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
+ }
- -
+ @for (plugin of installedPlugins; track plugin) {
+
-
{{ plugin.name }}
-
+ @if (plugin.hb2Ready === 'supported') {
+
-
+ } @if (plugin.hb2Ready === 'unknown') {
+
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@ {{ presentTenseVerb }}: {{ pluginName }}
-
-
-
- {{ 'platform.version.service_restart_required' | translate }}
-
+ @if (actionComplete) {
+
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+ {{ 'platform.version.service_restart_required' | translate }}
+ }
{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- {{ 'restart.homebridge' | translate }}
-
-
- {{ 'restart.child_bridges' | translate }}
-
+ @if (!isDisabled) {
+
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+ {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) {
+ {{ 'restart.child_bridges' | translate }}
+ }
-
+ } @if (changeLog) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
{{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
+ }
-
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
- v{{ installedVersion }} →
- {{ release.name }}
- v{{ latestVersion }}
+ @if (installedVersion) {
+ v{{ installedVersion }} →
+ } @if (release.name) {
+ {{ release.name }}
+ } @if (!release.name) {
+ v{{ latestVersion }}
+ }
+ }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
-
+ } @if (!loading) {
+
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+ {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }
{{ 'plugins.manage.select_version' | translate }}:
- -
+ @for (version of versionsWithTags; track version) {
+
-
{{ version.tag }}
v{{ version.version }}
-
+ }
-
{{ 'plugins.manage.all_versions' | translate }}
-
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && !canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ }
-
+ @if (!loading && canConfigure) {
+
+ @for (block of pluginConfig; track block) {
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) {
+ }
@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
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
index 1295613b4..3045278b5 100644
--- a/ui/src/app/core/accessories/types/door/door.manage.component.ts
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class DoorManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.html b/ui/src/app/core/accessories/types/fan/fan.component.html
index 84aa8193a..e282ddabe 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.html
+++ b/ui/src/app/core/accessories/types/fan/fan.component.html
@@ -7,16 +7,19 @@
tabindex="0"
>
-
-
+ @if (!service.values.On) {
+
+ } @if (service.values.On) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.On) {
-
- {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
-
+ } @if (service.values.RotationSpeed && service.values.On) {
+ {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
+ }
diff --git a/ui/src/app/core/accessories/types/fan/fan.component.ts b/ui/src/app/core/accessories/types/fan/fan.component.ts
index 805bdc8f0..a8d0dc9a8 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { FanManageComponent } from '@/app/core/accessories/types/fan/fan.manage.component'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-fan',
templateUrl: './fan.component.html',
styleUrls: ['./fan.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class FanComponent implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// Find the unit for the rotation speed
const RotationSpeed = this.service.serviceCharacteristics.find(c => c.type === 'RotationSpeed')
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
index ff9e7fffb..482a168dd 100644
--- a/ui/src/app/core/accessories/types/fan/fan.manage.component.html
+++ b/ui/src/app/core/accessories/types/fan/fan.manage.component.html
@@ -34,9 +34,14 @@
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
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
index 1295613b4..3045278b5 100644
--- a/ui/src/app/core/accessories/types/door/door.manage.component.ts
+++ b/ui/src/app/core/accessories/types/door/door.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class DoorManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject
-
-
+ @if (!service.values.On) {
+
+ } @if (service.values.On) {
+
+ }
-
+ @if (!service.values.On) {
+
+ } @if (service.values.On) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.On) {
-
- {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
-
+ } @if (service.values.RotationSpeed && service.values.On) {
+ {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
+ }
{{ 'accessories.control.rotation_speed' | translate }}
-{{ targetRotationSpeed.value }}%
++ {{ targetRotationSpeed.value }}@if (targetRotationSpeed.unit === 'percentage') { + % + } +
-
-
+ @if (!service.values.Active) {
+
+ } @if (service.values.Active) {
+
+ }
diff --git a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
index dafd115ab..a98073e6c 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Fanv2ManageComponent } from '@/app/core/accessories/types/fanv2/fanv2.manage.component'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-fanv2',
templateUrl: './fanv2.component.html',
styleUrls: ['./fanv2.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class Fanv2Component implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// Find the unit for the rotation speed
const RotationSpeed = this.service.serviceCharacteristics.find(c => c.type === 'RotationSpeed')
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
index 0ec467c08..70997046a 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.html
@@ -34,9 +34,14 @@
-
+ @if (!service.values.Active) {
+
+ } @if (service.values.Active) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.RotationSpeed || !service.values.Active) {
-
- {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
-
+ } @if (service.values.RotationSpeed && service.values.Active) {
+ {{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}
+ }
-
+ @if (targetRotationSpeed) {
+
{{ 'accessories.control.rotation_speed' | translate }}
- {{ targetRotationSpeed.value }}%
+
+ {{ targetRotationSpeed.value }}@if (targetRotationSpeed.unit === 'percentage') {
+ %
+ }
+
{{ 'accessories.control.rotation_speed' | translate }}
>
+ }
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
index 2d18d3481..2afcdd250 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fanv2-manage',
templateUrl: './fanv2.manage.component.html',
styleUrls: ['./fanv2.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class Fanv2ManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetRotationSpeed: any
public targetRotationSpeedChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetRotationSpeedChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
index 5ae4da9a4..5ce6e3195 100644
--- a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
+++ b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.html
@@ -9,21 +9,18 @@
{{ service.customName || service.serviceName }}
+ @if (service.values.CurrentDoorState < 2 ) {
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
-
-
- {{ 'accessories.control.stopped' | translate }}
-
+ } @if (service.values.CurrentDoorState === 2) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.CurrentDoorState === 3) {
+ {{ 'accessories.control.closing' | translate }}...
+ } @if (service.values.CurrentDoorState === 4) {
+ {{ 'accessories.control.stopped' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
index d4652bf09..f90c6c593 100644
--- a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
+++ b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class GaragedooropenerComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
index 379f02ae4..4ba400e55 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
@@ -17,30 +17,25 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
-
- {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
- {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
+ @if (service.values.Active === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('CoolingThresholdTemperature') &&
+ service.getCharacteristic('HeatingThresholdTemperature')) {
+
+ @switch (service.values.TargetHeaterCoolerState) { @case (1) {
+ {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (2) {
+ {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (0) {
+
{{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°-{{
service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('CoolingThresholdTemperature') ||
+ !service.getCharacteristic('HeatingThresholdTemperature'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
index 8483fd28a..80db0116f 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HeaterCoolerManageComponent } from '@/app/core/accessories/types/heatercooler/heatercooler.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-heatercooler',
templateUrl: './heatercooler.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
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
index cfad71edd..2fd2b59a3 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
@@ -43,11 +43,12 @@
-
+ @if (service.values.Active === 1 && HeatingThresholdTemperature && CoolingThresholdTemperature) {
+
{{ 'accessories.control.target_temperature' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoTemp[0] | convertTemp | number:'1.0-1' }}° - {{ autoTemp[1] | convertTemp | number:'1.0-1'
}}°
@@ -61,7 +62,8 @@
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (1) {
+
{{ targetHeatingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (2) {
+
{{ targetCoolingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
+ } }
+ }
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
index 27edcbd62..eaedd443e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
@@ -1,7 +1,12 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +14,18 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperatureChanged: Subject = new Subject()
@@ -22,9 +37,7 @@ export class HeaterCoolerManageComponent implements OnInit {
public targetHeatingTemp: number
public autoTemp: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
index 8ac6c48f9..f634e1fb2 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
@@ -18,26 +18,25 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ service.values.RelativeHumidityHumidifierThreshold }}%
- {{ service.values.RelativeHumidityDehumidifierThreshold }}%
-
+ @if (service.values.Active === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('RelativeHumidityDehumidifierThreshold') &&
+ service.getCharacteristic('RelativeHumidityHumidifierThreshold')) {
+
+ @switch (service.values.TargetHumidifierDehumidifierState) { @case (1) {
+ {{ service.values.RelativeHumidityHumidifierThreshold }}%
+ } @case (2) {
+ {{ service.values.RelativeHumidityDehumidifierThreshold }}%
+ } @case (0) {
+
{{ service.values.RelativeHumidityHumidifierThreshold }}%-{{
service.values.RelativeHumidityDehumidifierThreshold }}%
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('RelativeHumidityDehumidifierThreshold') ||
+ !service.getCharacteristic('RelativeHumidityHumidifierThreshold'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
index 3cd70f0f7..62e468f58 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HumidifierDehumidifierManageComponent } from '@/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-humidifierdehumidifier',
templateUrl: './humidifierdehumidifier.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
index 641dd0471..c5de61ad9 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
@@ -44,13 +44,12 @@
-
+ @if (service.values.Active === 1 && RelativeHumidityHumidifierThreshold && RelativeHumidityDehumidifierThreshold) {
+
{{ 'accessories.control.target_humidity' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoHumidity[0] }}% - {{ autoHumidity[1] }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (1) {
+
{{ targetHumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (2) {
+
{{ targetDehumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
+ } }
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
index f57d53c75..b2b50a116 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
@@ -1,7 +1,11 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +13,16 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetHumidityChanged: Subject = new Subject()
@@ -22,9 +34,7 @@ export class HumidifierDehumidifierManageComponent implements OnInit {
public targetHumidifierHumidity: number
public autoHumidity: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetHumidityChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
index 842404b93..a2dd03b7c 100644
--- a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
+++ b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
@@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core'
selector: 'app-humiditysensor',
templateUrl: './humiditysensor.component.html',
styleUrls: ['./humiditysensor.component.scss'],
+ standalone: true,
})
export class HumiditysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
index 72f87e078..d34cc2567 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
@@ -12,11 +12,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.InUse) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.InUse) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
index d40780b57..bfc828c0d 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
@@ -1,10 +1,20 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-irrigationsystem',
templateUrl: './irrigationsystem.component.html',
styleUrls: ['./irrigationsystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class IrrigationSystemComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
index 22854fdec..a5bca7525 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
@@ -8,11 +8,10 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.LeakDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.LeakDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
index b8ce31d83..1d5a15a52 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LeaksensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
index 86111ed30..198f9c091 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
@@ -9,11 +9,13 @@
{{ service.customName || service.serviceName }}
+ @if (!service.values.Brightness) {
- {{ service.values.Brightness }}%
+ } @if (service.values.Brightness) {
+ {{ service.values.Brightness }}%
+ }
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
index 152c86437..f37b37491 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { LightbulbManageComponent } from '@/app/core/accessories/types//lightbulb/lightbulb.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lightbulb',
templateUrl: './lightbulb.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('On').setValue(!this.service.values.On)
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
index 48e28ed67..d9da9454d 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
@@ -34,7 +34,8 @@
-
+ @if (targetBrightness) {
+
{{ 'accessories.control.brightness' | translate }}
{{ targetBrightness.value }}%
{{ 'accessories.control.brightness' | translate }}
>
+ }
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
index 7c07b26a5..b0d8f2e56 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class LightbulbManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetBrightness: any
public targetBrightnessChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetBrightnessChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
index e0b111b2f..7bb67e856 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
@@ -2,11 +2,10 @@
{{ service.customName || service.serviceName }}
-
- {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
-
-
- {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
-
+ @if (service.values.CurrentAmbientLightLevel < 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
+ } @if (service.values.CurrentAmbientLightLevel >= 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
+ }
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
index f4cd83950..9e003595d 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
@@ -1,9 +1,15 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-lightsensor',
templateUrl: './lightsensor.component.html',
+ imports: [
+ InlineSVGModule,
+ DecimalPipe,
+ ],
})
export class LightsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
index d2cb81a6f..bea28fe66 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
@@ -6,39 +6,26 @@
tabindex="0"
>
-
-
-
+ @if (service.values.LockCurrentState === 0) {
+
+ } @if (service.values.LockCurrentState === 1) {
+
+ } @if (service.values.LockCurrentState > 1) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (service.values.LockCurrentState < 2) {
-
-
- {{ 'accessories.control.jammed' | translate }}
-
-
- {{ 'accessories.control.unknown' | translate }}
-
+ } @if (service.values.LockCurrentState === 2) {
+ {{ 'accessories.control.jammed' | translate }}
+ } @if (service.values.LockCurrentState === 3) {
+ {{ 'accessories.control.unknown' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
index 8a5463c39..a9c7e58bf 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LockmechanismComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
index 39cbcc4bb..5168daf2e 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.MotionDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.MotionDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
index 987c00938..db83c7747 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class MotionsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
index 75e9cf3de..7a12c1568 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.OccupancyDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.OccupancyDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
index 9aa9092ae..a93f35eb0 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OccupancysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/outlet/outlet.component.ts b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
index 3d0f963e6..9147ffeb2 100644
--- a/ui/src/app/core/accessories/types/outlet/outlet.component.ts
+++ b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-outlet',
templateUrl: './outlet.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OutletComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
index 52fdebd8d..2c21fb7f1 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
@@ -6,27 +6,32 @@
tabindex="0"
>
+ @if (service.values.SecuritySystemCurrentState !== 3) {
+ } @if (service.values.SecuritySystemCurrentState === 3) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.home' | translate }}
- {{ 'accessories.control.away' | translate }}
- {{ 'accessories.control.night' | translate }}
- {{ 'accessories.control.off' | translate }}
- {{ 'accessories.control.triggered' | translate }}
-
+ @switch (service.values.SecuritySystemCurrentState) { @case (0) {
+ {{ 'accessories.control.home' | translate }}
+ } @case (1) {
+ {{ 'accessories.control.away' | translate }}
+ } @case (2) {
+ {{ 'accessories.control.night' | translate }}
+ } @case (3) {
+ {{ 'accessories.control.off' | translate }}
+ } @case (4) {
+ {{ 'accessories.control.triggered' | translate }}
+ } }
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
index fdd989257..542825441 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SecuritysystemManageComponent } from '@/app/core/accessories/types/securitysystem/securitysystem.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-securitysystem',
templateUrl: './securitysystem.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
const ref = this.$modal.open(SecuritysystemManageComponent, {
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
index 745ad07e0..c8e8328a6 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
@@ -1,20 +1,21 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-securitysystem.manage',
templateUrl: './securitysystem.manage.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetMode = this.service.values.SecuritySystemTargetState
}
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
index 53b21405f..13bd18a18 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.SmokeDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.SmokeDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
index aebb32bef..36cbc046c 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SmokesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.html b/ui/src/app/core/accessories/types/speaker/speaker.component.html
index 9b9b54a45..0f772e614 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.html
@@ -9,16 +9,12 @@
{{ service.customName || service.serviceName }}
-
-
- {{ service.values.Volume }}%
-
-
- {{ 'accessories.control.not_mute' | translate }}
-
+ @if (service.values.Mute) {
+
+ } @if (service.values.Volume !== undefined && !service.values.Mute) {
+ {{ service.values.Volume }}%
+ } @if (service.values.Volume === undefined && !service.values.Mute) {
+ {{ 'accessories.control.not_mute' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
index d86c6bf13..8c7b12073 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SpeakerManageComponent } from '@/app/core/accessories/types/speaker/speaker.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-speaker',
templateUrl: './speaker.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('Mute').setValue(!this.service.values.Mute)
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
index 27ae0aa3a..14d5cb1cf 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
@@ -33,7 +33,8 @@
-
+ @if (targetVolume) {
+
{{ 'accessories.control.speaker_volume' | translate }}
{{ targetVolume.value }}%
{{ 'accessories.control.speaker_volume' | translate }}
>
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
index f94a85a02..447b63842 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class SpeakerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetVolume: any
public targetVolumeChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetVolumeChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
index 308aa8d4a..05e16d385 100644
--- a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
+++ b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-statelessprogrammableswitch',
templateUrl: './statelessprogrammableswitch.component.html',
+ imports: [InlineSVGModule],
})
export class StatelessprogrammableswitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/switch/switch.component.ts b/ui/src/app/core/accessories/types/switch/switch.component.ts
index c549acdf4..902944b0c 100644
--- a/ui/src/app/core/accessories/types/switch/switch.component.ts
+++ b/ui/src/app/core/accessories/types/switch/switch.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-switch',
templateUrl: './switch.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SwitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/television/television.component.html b/ui/src/app/core/accessories/types/television/television.component.html
index 76aab0d82..97102dd25 100644
--- a/ui/src/app/core/accessories/types/television/television.component.html
+++ b/ui/src/app/core/accessories/types/television/television.component.html
@@ -10,11 +10,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ channelList[service.values.ActiveIdentifier] }}
-
+ @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active) {
+ {{ channelList[service.values.ActiveIdentifier] }}
+ }
diff --git a/ui/src/app/core/accessories/types/television/television.component.ts b/ui/src/app/core/accessories/types/television/television.component.ts
index bbeb11e05..7e58ec924 100644
--- a/ui/src/app/core/accessories/types/television/television.component.ts
+++ b/ui/src/app/core/accessories/types/television/television.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-television',
templateUrl: './television.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class TelevisionComponent implements OnInit {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
index 1bf86fde3..2af99e513 100644
--- a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
+++ b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
@@ -1,10 +1,13 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
@Component({
selector: 'app-temperaturesensor',
templateUrl: './temperaturesensor.component.html',
styleUrls: ['./temperaturesensor.component.scss'],
+ imports: [DecimalPipe, ConvertTempPipe],
})
export class TemperaturesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
index bb172946d..c8e459239 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
@@ -17,11 +17,12 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
+ @if (service.values.TargetHeatingCoolingState === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.TargetHeatingCoolingState) {
+
{{ service.values.TargetTemperature | convertTemp | number:'1.0-1' }}°
+ }
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
index 9ee71ba28..0fcb3464b 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ThermostatManageComponent } from '@/app/core/accessories/types/thermostat/thermostat.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-thermostat',
templateUrl: './thermostat.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
size: 'sm',
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
index 4a4de5abd..3b03d84c1 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
@@ -1,6 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +13,24 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperature: any
public targetTemperatureChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/unknown/unknown.component.ts b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
index 72e85eb3b..6f76d1e57 100644
--- a/ui/src/app/core/accessories/types/unknown/unknown.component.ts
+++ b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-unknown',
templateUrl: './unknown.component.html',
+ imports: [InlineSVGModule],
})
export class UnknownComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.html b/ui/src/app/core/accessories/types/valve/valve.component.html
index 9f4a68558..162a4a6db 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.component.html
@@ -7,41 +7,24 @@
tabindex="0"
>
-
-
-
-
+ @if (service.values.ValveType === 0) {
+
+ } @if (service.values.ValveType === 1) {
+
+ } @if (service.values.ValveType === 2) {
+
+ } @if (service.values.ValveType === 3) {
+
+ }
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ remainingDuration }}
-
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.Active && remainingDuration) {
+ {{ remainingDuration }}
+ } @if (service.values.Active && !remainingDuration) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.ts b/ui/src/app/core/accessories/types/valve/valve.component.ts
index 7650b07ce..b255513d7 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.component.ts
@@ -1,16 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ValveManageComponent } from '@/app/core/accessories/types/valve/valve.manage.component'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
import { interval, Subscription } from 'rxjs'
import { filter } from 'rxjs/operators'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-valve',
templateUrl: './valve.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,10 +30,6 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
if (this.service.getCharacteristic('RemainingDuration')) {
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.html b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
index 680f30d27..91722697e 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
@@ -18,7 +18,9 @@
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
index 5cff3bb61..b53876770 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
@@ -1,23 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
selector: 'app-valve-manage',
templateUrl: './valve.manage.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ValveManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public availableSetDurations = []
public targetSetDuration: number
private durationSeconds = [300, 600, 900, 1200, 1500, 1800, 2100, 2400, 2700, 3000, 3300, 3600]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetSetDuration = this.service.values.SetDuration
diff --git a/ui/src/app/core/accessories/types/window/window.component.html b/ui/src/app/core/accessories/types/window/window.component.html
index 741bff947..5e9587188 100644
--- a/ui/src/app/core/accessories/types/window/window.component.html
+++ b/ui/src/app/core/accessories/types/window/window.component.html
@@ -7,31 +7,26 @@
tabindex="0"
>
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.component.ts b/ui/src/app/core/accessories/types/window/window.component.ts
index bbcd0b981..d063de8a3 100644
--- a/ui/src/app/core/accessories/types/window/window.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowManageComponent } from '@/app/core/accessories/types/window/window.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-window',
templateUrl: './window.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.html b/ui/src/app/core/accessories/types/window/window.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.html
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
index 43e31dd2b..3075f449e 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -7,31 +7,34 @@
tabindex="0"
>
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@ Homebridge Google Smart Home
-
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
{{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ }
-
-
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
-
-
+ @if (!gshConfig.token) {
+ {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) {
+
-
-
+ } @if (gshConfig.token) {
+
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
-
-
+ @if (justLinked) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
+ }
-
-
- []
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
- -
+ @for (option of fundingOptions; track option) {
+
-
{{ option.url }}
+ }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
-
+ } @if (!allPluginsSupported) {
+
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
+ }
- -
+ @for (plugin of installedPlugins; track plugin) {
+
-
{{ plugin.name }}
-
+ @if (plugin.hb2Ready === 'supported') {
+
-
+ } @if (plugin.hb2Ready === 'unknown') {
+
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@ {{ presentTenseVerb }}: {{ pluginName }}
-
-
-
- {{ 'platform.version.service_restart_required' | translate }}
-
+ @if (actionComplete) {
+
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+ {{ 'platform.version.service_restart_required' | translate }}
+ }
{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- {{ 'restart.homebridge' | translate }}
-
-
- {{ 'restart.child_bridges' | translate }}
-
+ @if (!isDisabled) {
+
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+ {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) {
+ {{ 'restart.child_bridges' | translate }}
+ }
-
+ } @if (changeLog) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
{{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
+ }
-
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
- v{{ installedVersion }} →
- {{ release.name }}
- v{{ latestVersion }}
+ @if (installedVersion) {
+ v{{ installedVersion }} →
+ } @if (release.name) {
+ {{ release.name }}
+ } @if (!release.name) {
+ v{{ latestVersion }}
+ }
+ }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
-
+ } @if (!loading) {
+
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+ {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }
{{ 'plugins.manage.select_version' | translate }}:
- -
+ @for (version of versionsWithTags; track version) {
+
-
{{ version.tag }}
v{{ version.version }}
-
+ }
-
{{ 'plugins.manage.all_versions' | translate }}
-
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && !canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ }
-
+ @if (!loading && canConfigure) {
+
+ @for (block of pluginConfig; track block) {
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) {
+ }
@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
{{ 'accessories.control.rotation_speed' | translate }}
-{{ targetRotationSpeed.value }}%
++ {{ targetRotationSpeed.value }}@if (targetRotationSpeed.unit === 'percentage') { + % + } +
{{ service.customName || service.serviceName }}
+ @if (service.values.CurrentDoorState < 2 ) {
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
-
-
- {{ 'accessories.control.stopped' | translate }}
-
+ } @if (service.values.CurrentDoorState === 2) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.CurrentDoorState === 3) {
+ {{ 'accessories.control.closing' | translate }}...
+ } @if (service.values.CurrentDoorState === 4) {
+ {{ 'accessories.control.stopped' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
index d4652bf09..f90c6c593 100644
--- a/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
+++ b/ui/src/app/core/accessories/types/garagedooropener/garagedooropener.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class GaragedooropenerComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
index 379f02ae4..4ba400e55 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.html
@@ -17,30 +17,25 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
-
- {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
- {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
-
-
+ @if (service.values.Active === 0) {
+
diff --git a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
index 8483fd28a..80db0116f 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HeaterCoolerManageComponent } from '@/app/core/accessories/types/heatercooler/heatercooler.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-heatercooler',
templateUrl: './heatercooler.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
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
index cfad71edd..2fd2b59a3 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.html
@@ -43,11 +43,12 @@ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('CoolingThresholdTemperature') &&
+ service.getCharacteristic('HeatingThresholdTemperature')) {
+
+ @switch (service.values.TargetHeaterCoolerState) { @case (1) {
+ {{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (2) {
+ {{ service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } @case (0) {
+
{{ service.values.HeatingThresholdTemperature | convertTemp | number:'1.0-1' }}°-{{
service.values.CoolingThresholdTemperature | convertTemp | number:'1.0-1' }}°
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('CoolingThresholdTemperature') ||
+ !service.getCharacteristic('HeatingThresholdTemperature'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
-
+ @if (service.values.Active === 1 && HeatingThresholdTemperature && CoolingThresholdTemperature) {
+
{{ 'accessories.control.target_temperature' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoTemp[0] | convertTemp | number:'1.0-1' }}° - {{ autoTemp[1] | convertTemp | number:'1.0-1'
}}°
@@ -61,7 +62,8 @@
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (1) {
+
{{ targetHeatingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ } @case (2) {
+
{{ targetCoolingTemp | convertTemp | number:'1.0-1' }}°
{{ 'accessories.control.target_temperature' | translate }}
>
+ } }
+ }
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
index 27edcbd62..eaedd443e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
@@ -1,7 +1,12 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +14,18 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperatureChanged: Subject = new Subject()
@@ -22,9 +37,7 @@ export class HeaterCoolerManageComponent implements OnInit {
public targetHeatingTemp: number
public autoTemp: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
index 8ac6c48f9..f634e1fb2 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
@@ -18,26 +18,25 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ service.values.RelativeHumidityHumidifierThreshold }}%
- {{ service.values.RelativeHumidityDehumidifierThreshold }}%
-
+ @if (service.values.Active === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('RelativeHumidityDehumidifierThreshold') &&
+ service.getCharacteristic('RelativeHumidityHumidifierThreshold')) {
+
+ @switch (service.values.TargetHumidifierDehumidifierState) { @case (1) {
+ {{ service.values.RelativeHumidityHumidifierThreshold }}%
+ } @case (2) {
+ {{ service.values.RelativeHumidityDehumidifierThreshold }}%
+ } @case (0) {
+
{{ service.values.RelativeHumidityHumidifierThreshold }}%-{{
service.values.RelativeHumidityDehumidifierThreshold }}%
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('RelativeHumidityDehumidifierThreshold') ||
+ !service.getCharacteristic('RelativeHumidityHumidifierThreshold'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
index 3cd70f0f7..62e468f58 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,21 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { HumidifierDehumidifierManageComponent } from '@/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-humidifierdehumidifier',
templateUrl: './humidifierdehumidifier.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
this.service.getCharacteristic('Active').setValue(this.service.values.Active ? 0 : 1)
}
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
index 641dd0471..c5de61ad9 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.html
@@ -44,13 +44,12 @@
-
+ @if (service.values.Active === 1 && RelativeHumidityHumidifierThreshold && RelativeHumidityDehumidifierThreshold) {
+
{{ 'accessories.control.target_humidity' | translate }}
-
-
-
+
+ @switch (targetMode) { @case (0) {
+
{{ autoHumidity[0] }}% - {{ autoHumidity[1] }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (1) {
+
{{ targetHumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ } @case (2) {
+
{{ targetDehumidifierHumidity }}%
{{ 'accessories.control.target_humidity' | translate }}
>
+ } }
+ }
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
index f57d53c75..b2b50a116 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
@@ -1,7 +1,11 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +13,16 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetHumidityChanged: Subject = new Subject()
@@ -22,9 +34,7 @@ export class HumidifierDehumidifierManageComponent implements OnInit {
public targetHumidifierHumidity: number
public autoHumidity: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetHumidityChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
index 842404b93..a2dd03b7c 100644
--- a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
+++ b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
@@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core'
selector: 'app-humiditysensor',
templateUrl: './humiditysensor.component.html',
styleUrls: ['./humiditysensor.component.scss'],
+ standalone: true,
})
export class HumiditysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
index 72f87e078..d34cc2567 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
@@ -12,11 +12,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.InUse) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.InUse) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
index d40780b57..bfc828c0d 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.ts
@@ -1,10 +1,20 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-irrigationsystem',
templateUrl: './irrigationsystem.component.html',
styleUrls: ['./irrigationsystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class IrrigationSystemComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
index 22854fdec..a5bca7525 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.html
@@ -8,11 +8,10 @@
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.LeakDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.LeakDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
index b8ce31d83..1d5a15a52 100644
--- a/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
+++ b/ui/src/app/core/accessories/types/leaksensor/leaksensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LeaksensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
index 86111ed30..198f9c091 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.html
@@ -9,11 +9,13 @@
{{ service.customName || service.serviceName }}
+ @if (!service.values.Brightness) {
- {{ service.values.Brightness }}%
+ } @if (service.values.Brightness) {
+ {{ service.values.Brightness }}%
+ }
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
index 152c86437..f37b37491 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { LightbulbManageComponent } from '@/app/core/accessories/types//lightbulb/lightbulb.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lightbulb',
templateUrl: './lightbulb.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('On').setValue(!this.service.values.On)
diff --git a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
index 48e28ed67..d9da9454d 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.html
@@ -34,7 +34,8 @@
-
+ @if (targetBrightness) {
+
{{ 'accessories.control.brightness' | translate }}
{{ targetBrightness.value }}%
{{ 'accessories.control.brightness' | translate }}
>
+ }
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
index 7c07b26a5..b0d8f2e56 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class LightbulbManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetBrightness: any
public targetBrightnessChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetBrightnessChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
index e0b111b2f..7bb67e856 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.html
@@ -2,11 +2,10 @@
{{ service.customName || service.serviceName }}
-
- {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
-
-
- {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
-
+ @if (service.values.CurrentAmbientLightLevel < 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
+ } @if (service.values.CurrentAmbientLightLevel >= 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
+ }
diff --git a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
index f4cd83950..9e003595d 100644
--- a/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
+++ b/ui/src/app/core/accessories/types/lightsensor/lightsensor.component.ts
@@ -1,9 +1,15 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-lightsensor',
templateUrl: './lightsensor.component.html',
+ imports: [
+ InlineSVGModule,
+ DecimalPipe,
+ ],
})
export class LightsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
index d2cb81a6f..bea28fe66 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.html
@@ -6,39 +6,26 @@
tabindex="0"
>
-
-
-
+ @if (service.values.LockCurrentState === 0) {
+
+ } @if (service.values.LockCurrentState === 1) {
+
+ } @if (service.values.LockCurrentState > 1) {
+
+ }
{{ service.customName || service.serviceName }}
+ @if (service.values.LockCurrentState < 2) {
-
-
- {{ 'accessories.control.jammed' | translate }}
-
-
- {{ 'accessories.control.unknown' | translate }}
-
+ } @if (service.values.LockCurrentState === 2) {
+ {{ 'accessories.control.jammed' | translate }}
+ } @if (service.values.LockCurrentState === 3) {
+ {{ 'accessories.control.unknown' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
index 8a5463c39..a9c7e58bf 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LockmechanismComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
index 39cbcc4bb..5168daf2e 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.MotionDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.MotionDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
index 987c00938..db83c7747 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class MotionsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
index 75e9cf3de..7a12c1568 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.OccupancyDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.OccupancyDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
index 9aa9092ae..a93f35eb0 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OccupancysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/outlet/outlet.component.ts b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
index 3d0f963e6..9147ffeb2 100644
--- a/ui/src/app/core/accessories/types/outlet/outlet.component.ts
+++ b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-outlet',
templateUrl: './outlet.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OutletComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
index 52fdebd8d..2c21fb7f1 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
@@ -6,27 +6,32 @@
tabindex="0"
>
+ @if (service.values.SecuritySystemCurrentState !== 3) {
+ } @if (service.values.SecuritySystemCurrentState === 3) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.home' | translate }}
- {{ 'accessories.control.away' | translate }}
- {{ 'accessories.control.night' | translate }}
- {{ 'accessories.control.off' | translate }}
- {{ 'accessories.control.triggered' | translate }}
-
+ @switch (service.values.SecuritySystemCurrentState) { @case (0) {
+ {{ 'accessories.control.home' | translate }}
+ } @case (1) {
+ {{ 'accessories.control.away' | translate }}
+ } @case (2) {
+ {{ 'accessories.control.night' | translate }}
+ } @case (3) {
+ {{ 'accessories.control.off' | translate }}
+ } @case (4) {
+ {{ 'accessories.control.triggered' | translate }}
+ } }
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
index fdd989257..542825441 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SecuritysystemManageComponent } from '@/app/core/accessories/types/securitysystem/securitysystem.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-securitysystem',
templateUrl: './securitysystem.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
const ref = this.$modal.open(SecuritysystemManageComponent, {
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
index 745ad07e0..c8e8328a6 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
@@ -1,20 +1,21 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-securitysystem.manage',
templateUrl: './securitysystem.manage.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetMode = this.service.values.SecuritySystemTargetState
}
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
index 53b21405f..13bd18a18 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.SmokeDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.SmokeDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
index aebb32bef..36cbc046c 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SmokesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.html b/ui/src/app/core/accessories/types/speaker/speaker.component.html
index 9b9b54a45..0f772e614 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.html
@@ -9,16 +9,12 @@
{{ service.customName || service.serviceName }}
-
-
- {{ service.values.Volume }}%
-
-
- {{ 'accessories.control.not_mute' | translate }}
-
+ @if (service.values.Mute) {
+
+ } @if (service.values.Volume !== undefined && !service.values.Mute) {
+ {{ service.values.Volume }}%
+ } @if (service.values.Volume === undefined && !service.values.Mute) {
+ {{ 'accessories.control.not_mute' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
index d86c6bf13..8c7b12073 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SpeakerManageComponent } from '@/app/core/accessories/types/speaker/speaker.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-speaker',
templateUrl: './speaker.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
this.service.getCharacteristic('Mute').setValue(!this.service.values.Mute)
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
index 27ae0aa3a..14d5cb1cf 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.html
@@ -33,7 +33,8 @@
-
+ @if (targetVolume) {
+
{{ 'accessories.control.speaker_volume' | translate }}
{{ targetVolume.value }}%
{{ 'accessories.control.speaker_volume' | translate }}
>
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
index f94a85a02..447b63842 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class SpeakerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetVolume: any
public targetVolumeChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetVolumeChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
index 308aa8d4a..05e16d385 100644
--- a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
+++ b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-statelessprogrammableswitch',
templateUrl: './statelessprogrammableswitch.component.html',
+ imports: [InlineSVGModule],
})
export class StatelessprogrammableswitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/switch/switch.component.ts b/ui/src/app/core/accessories/types/switch/switch.component.ts
index c549acdf4..902944b0c 100644
--- a/ui/src/app/core/accessories/types/switch/switch.component.ts
+++ b/ui/src/app/core/accessories/types/switch/switch.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-switch',
templateUrl: './switch.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SwitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/television/television.component.html b/ui/src/app/core/accessories/types/television/television.component.html
index 76aab0d82..97102dd25 100644
--- a/ui/src/app/core/accessories/types/television/television.component.html
+++ b/ui/src/app/core/accessories/types/television/television.component.html
@@ -10,11 +10,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ channelList[service.values.ActiveIdentifier] }}
-
+ @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active) {
+ {{ channelList[service.values.ActiveIdentifier] }}
+ }
diff --git a/ui/src/app/core/accessories/types/television/television.component.ts b/ui/src/app/core/accessories/types/television/television.component.ts
index bbeb11e05..7e58ec924 100644
--- a/ui/src/app/core/accessories/types/television/television.component.ts
+++ b/ui/src/app/core/accessories/types/television/television.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-television',
templateUrl: './television.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class TelevisionComponent implements OnInit {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
index 1bf86fde3..2af99e513 100644
--- a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
+++ b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
@@ -1,10 +1,13 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
@Component({
selector: 'app-temperaturesensor',
templateUrl: './temperaturesensor.component.html',
styleUrls: ['./temperaturesensor.component.scss'],
+ imports: [DecimalPipe, ConvertTempPipe],
})
export class TemperaturesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
index bb172946d..c8e459239 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
@@ -17,11 +17,12 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
+ @if (service.values.TargetHeatingCoolingState === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.TargetHeatingCoolingState) {
+
{{ service.values.TargetTemperature | convertTemp | number:'1.0-1' }}°
+ }
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
index 9ee71ba28..0fcb3464b 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ThermostatManageComponent } from '@/app/core/accessories/types/thermostat/thermostat.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-thermostat',
templateUrl: './thermostat.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
size: 'sm',
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
index 4a4de5abd..3b03d84c1 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
@@ -1,6 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +13,24 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperature: any
public targetTemperatureChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/unknown/unknown.component.ts b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
index 72e85eb3b..6f76d1e57 100644
--- a/ui/src/app/core/accessories/types/unknown/unknown.component.ts
+++ b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-unknown',
templateUrl: './unknown.component.html',
+ imports: [InlineSVGModule],
})
export class UnknownComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.html b/ui/src/app/core/accessories/types/valve/valve.component.html
index 9f4a68558..162a4a6db 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.component.html
@@ -7,41 +7,24 @@
tabindex="0"
>
-
-
-
-
+ @if (service.values.ValveType === 0) {
+
+ } @if (service.values.ValveType === 1) {
+
+ } @if (service.values.ValveType === 2) {
+
+ } @if (service.values.ValveType === 3) {
+
+ }
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ remainingDuration }}
-
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.Active && remainingDuration) {
+ {{ remainingDuration }}
+ } @if (service.values.Active && !remainingDuration) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.ts b/ui/src/app/core/accessories/types/valve/valve.component.ts
index 7650b07ce..b255513d7 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.component.ts
@@ -1,16 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ValveManageComponent } from '@/app/core/accessories/types/valve/valve.manage.component'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
import { interval, Subscription } from 'rxjs'
import { filter } from 'rxjs/operators'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-valve',
templateUrl: './valve.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,10 +30,6 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
if (this.service.getCharacteristic('RemainingDuration')) {
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.html b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
index 680f30d27..91722697e 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
@@ -18,7 +18,9 @@
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
index 5cff3bb61..b53876770 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
@@ -1,23 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
selector: 'app-valve-manage',
templateUrl: './valve.manage.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ValveManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public availableSetDurations = []
public targetSetDuration: number
private durationSeconds = [300, 600, 900, 1200, 1500, 1800, 2100, 2400, 2700, 3000, 3300, 3600]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetSetDuration = this.service.values.SetDuration
diff --git a/ui/src/app/core/accessories/types/window/window.component.html b/ui/src/app/core/accessories/types/window/window.component.html
index 741bff947..5e9587188 100644
--- a/ui/src/app/core/accessories/types/window/window.component.html
+++ b/ui/src/app/core/accessories/types/window/window.component.html
@@ -7,31 +7,26 @@
tabindex="0"
>
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.component.ts b/ui/src/app/core/accessories/types/window/window.component.ts
index bbcd0b981..d063de8a3 100644
--- a/ui/src/app/core/accessories/types/window/window.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowManageComponent } from '@/app/core/accessories/types/window/window.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-window',
templateUrl: './window.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.html b/ui/src/app/core/accessories/types/window/window.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.html
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
index 43e31dd2b..3075f449e 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -7,31 +7,34 @@
tabindex="0"
>
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@ Homebridge Google Smart Home
-
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
{{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ }
-
-
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
-
-
+ @if (!gshConfig.token) {
+ {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) {
+
-
-
+ } @if (gshConfig.token) {
+
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
-
-
+ @if (justLinked) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
+ }
-
-
- []
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
- -
+ @for (option of fundingOptions; track option) {
+
-
{{ option.url }}
+ }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
-
+ } @if (!allPluginsSupported) {
+
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
+ }
- -
+ @for (plugin of installedPlugins; track plugin) {
+
-
{{ plugin.name }}
-
+ @if (plugin.hb2Ready === 'supported') {
+
-
+ } @if (plugin.hb2Ready === 'unknown') {
+
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@ {{ presentTenseVerb }}: {{ pluginName }}
-
-
-
- {{ 'platform.version.service_restart_required' | translate }}
-
+ @if (actionComplete) {
+
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+ {{ 'platform.version.service_restart_required' | translate }}
+ }
{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- {{ 'restart.homebridge' | translate }}
-
-
- {{ 'restart.child_bridges' | translate }}
-
+ @if (!isDisabled) {
+
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+ {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) {
+ {{ 'restart.child_bridges' | translate }}
+ }
-
+ } @if (changeLog) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
{{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
+ }
-
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
- v{{ installedVersion }} →
- {{ release.name }}
- v{{ latestVersion }}
+ @if (installedVersion) {
+ v{{ installedVersion }} →
+ } @if (release.name) {
+ {{ release.name }}
+ } @if (!release.name) {
+ v{{ latestVersion }}
+ }
+ }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
-
+ } @if (!loading) {
+
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+ {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }
{{ 'plugins.manage.select_version' | translate }}:
- -
+ @for (version of versionsWithTags; track version) {
+
-
{{ version.tag }}
v{{ version.version }}
-
+ }
-
{{ 'plugins.manage.all_versions' | translate }}
-
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && !canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ }
-
+ @if (!loading && canConfigure) {
+
+ @for (block of pluginConfig; track block) {
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) {
+ }
@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
{{ 'accessories.control.target_temperature' | translate }}
- -
- = new Subject()
@@ -22,9 +37,7 @@ export class HeaterCoolerManageComponent implements OnInit {
public targetHeatingTemp: number
public autoTemp: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
index 8ac6c48f9..f634e1fb2 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.html
@@ -18,26 +18,25 @@
+
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
index 27edcbd62..eaedd443e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.manage.component.ts
@@ -1,7 +1,12 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +14,18 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperatureChanged: Subject
+ @switch (targetMode) { @case (0) {
+
-
{{ autoTemp[0] | convertTemp | number:'1.0-1' }}° - {{ autoTemp[1] | convertTemp | number:'1.0-1' }}° @@ -61,7 +62,8 @@
{{ 'accessories.control.target_temperature' | translate }}
>
+ } @case (1) {
+
{{ 'accessories.control.target_temperature' | translate }}
>
-
+ }
{{ targetHeatingTemp | convertTemp | number:'1.0-1' }}°
+ } @case (2) {
+
{{ 'accessories.control.target_temperature' | translate }}
>
+ } }
{{ targetCoolingTemp | convertTemp | number:'1.0-1' }}°
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ service.values.RelativeHumidityHumidifierThreshold }}%
- {{ service.values.RelativeHumidityDehumidifierThreshold }}%
-
+ @if (service.values.Active === 0) {
+
{{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active === 1 && service.getCharacteristic('RelativeHumidityDehumidifierThreshold') &&
+ service.getCharacteristic('RelativeHumidityHumidifierThreshold')) {
+
+ @switch (service.values.TargetHumidifierDehumidifierState) { @case (1) {
+ {{ service.values.RelativeHumidityHumidifierThreshold }}%
+ } @case (2) {
+ {{ service.values.RelativeHumidityDehumidifierThreshold }}%
+ } @case (0) {
+
{{ service.values.RelativeHumidityHumidifierThreshold }}%-{{
service.values.RelativeHumidityDehumidifierThreshold }}%
+ } }
-
- {{ 'accessories.control.on' | translate }}
-
+ } @if (service.values.Active === 1 && (!service.getCharacteristic('RelativeHumidityDehumidifierThreshold') ||
+ !service.getCharacteristic('RelativeHumidityHumidifierThreshold'))) {
+ {{ 'accessories.control.on' | translate }}
+ }
{{ 'accessories.control.target_humidity' | translate }}
- -
- = new Subject()
@@ -22,9 +34,7 @@ export class HumidifierDehumidifierManageComponent implements OnInit {
public targetHumidifierHumidity: number
public autoHumidity: [number, number]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetHumidityChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
index 842404b93..a2dd03b7c 100644
--- a/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
+++ b/ui/src/app/core/accessories/types/humiditysensor/humiditysensor.component.ts
@@ -5,6 +5,7 @@ import { Component, Input } from '@angular/core'
selector: 'app-humiditysensor',
templateUrl: './humiditysensor.component.html',
styleUrls: ['./humiditysensor.component.scss'],
+ standalone: true,
})
export class HumiditysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
index 72f87e078..d34cc2567 100644
--- a/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
+++ b/ui/src/app/core/accessories/types/irrigationsystem/irrigationsystem.component.html
@@ -12,11 +12,10 @@
+
diff --git a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
index f57d53c75..b2b50a116 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.manage.component.ts
@@ -1,7 +1,11 @@
import type { CharacteristicType } from '@homebridge/hap-client'
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@@ -9,8 +13,16 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetHumidityChanged: Subject
+ @switch (targetMode) { @case (0) {
+
{{ 'accessories.control.target_humidity' | translate }}
>
-
{{ autoHumidity[0] }}% - {{ autoHumidity[1] }}%
+ } @case (1) {
+
{{ 'accessories.control.target_humidity' | translate }}
>
-
+ }
{{ targetHumidifierHumidity }}%
+ } @case (2) {
+
{{ 'accessories.control.target_humidity' | translate }}
>
+ } }
{{ targetDehumidifierHumidity }}%
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.InUse) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.InUse) {
+ {{ 'accessories.control.off' | translate }}
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.LeakDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.LeakDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
{{ service.customName || service.serviceName }}
+ @if (!service.values.Brightness) {
- {{ service.values.Brightness }}%
+ } @if (service.values.Brightness) {
+ {{ service.values.Brightness }}%
+ }
+ @if (targetBrightness) {
+
{{ 'accessories.control.brightness' | translate }}
>
+ }
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
index 7c07b26a5..b0d8f2e56 100644
--- a/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
+++ b/ui/src/app/core/accessories/types/lightbulb/lightbulb.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class LightbulbManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetBrightness: any
public targetBrightnessChanged: Subject{{ 'accessories.control.brightness' | translate }}
{{ targetBrightness.value }}%
{{ service.customName || service.serviceName }}
-
- {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
-
-
- {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
-
+ @if (service.values.CurrentAmbientLightLevel < 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '0.1-1' }} lux
+ } @if (service.values.CurrentAmbientLightLevel >= 1) {
+ {{ service.values.CurrentAmbientLightLevel | number: '1.0-0' }} lux
+ }
-
-
-
+ @if (service.values.LockCurrentState === 0) {
+
+ } @if (service.values.LockCurrentState === 1) {
+
+ } @if (service.values.LockCurrentState > 1) {
+
+ }
diff --git a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
index 8a5463c39..a9c7e58bf 100644
--- a/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
+++ b/ui/src/app/core/accessories/types/lockmechanism/lockmechanism.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LockmechanismComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
index 39cbcc4bb..5168daf2e 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
+ @if (service.values.LockCurrentState < 2) {
-
-
- {{ 'accessories.control.jammed' | translate }}
-
-
- {{ 'accessories.control.unknown' | translate }}
-
+ } @if (service.values.LockCurrentState === 2) {
+ {{ 'accessories.control.jammed' | translate }}
+ } @if (service.values.LockCurrentState === 3) {
+ {{ 'accessories.control.unknown' | translate }}
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.MotionDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.MotionDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
index 987c00938..db83c7747 100644
--- a/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
+++ b/ui/src/app/core/accessories/types/motionsensor/motionsensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class MotionsensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
index 75e9cf3de..7a12c1568 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.OccupancyDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.OccupancyDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
index 9aa9092ae..a93f35eb0 100644
--- a/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
+++ b/ui/src/app/core/accessories/types/occupancysensor/occupancysensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OccupancysensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/outlet/outlet.component.ts b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
index 3d0f963e6..9147ffeb2 100644
--- a/ui/src/app/core/accessories/types/outlet/outlet.component.ts
+++ b/ui/src/app/core/accessories/types/outlet/outlet.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-outlet',
templateUrl: './outlet.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class OutletComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
index 52fdebd8d..2c21fb7f1 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.html
@@ -6,27 +6,32 @@
tabindex="0"
>
+ @if (service.values.SecuritySystemCurrentState !== 3) {
+ } @if (service.values.SecuritySystemCurrentState === 3) {
+ }
-
+ @switch (service.values.SecuritySystemCurrentState) { @case (0) {
+
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
index fdd989257..542825441 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { SecuritysystemManageComponent } from '@/app/core/accessories/types/securitysystem/securitysystem.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-securitysystem',
templateUrl: './securitysystem.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
const ref = this.$modal.open(SecuritysystemManageComponent, {
diff --git a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
index 745ad07e0..c8e8328a6 100644
--- a/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
+++ b/ui/src/app/core/accessories/types/securitysystem/securitysystem.manage.component.ts
@@ -1,20 +1,21 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-securitysystem.manage',
templateUrl: './securitysystem.manage.component.html',
styleUrls: ['./securitysystem.component.scss'],
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetMode = this.service.values.SecuritySystemTargetState
}
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
index 53b21405f..13bd18a18 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.html
@@ -12,11 +12,10 @@
class="accessory-svg"
>
{{ service.customName || service.serviceName }}
- {{ 'accessories.control.home' | translate }}
- {{ 'accessories.control.away' | translate }}
- {{ 'accessories.control.night' | translate }}
- {{ 'accessories.control.off' | translate }}
- {{ 'accessories.control.triggered' | translate }}
- {{ 'accessories.control.home' | translate }}
+ } @case (1) {
+ {{ 'accessories.control.away' | translate }}
+ } @case (2) {
+ {{ 'accessories.control.night' | translate }}
+ } @case (3) {
+ {{ 'accessories.control.off' | translate }}
+ } @case (4) {
+ {{ 'accessories.control.triggered' | translate }}
+ } }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.detected' | translate }}
-
-
- {{ 'accessories.control.not_detected' | translate }}
-
+ @if (service.values.SmokeDetected) {
+ {{ 'accessories.control.detected' | translate }}
+ } @if (!service.values.SmokeDetected) {
+ {{ 'accessories.control.not_detected' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
index aebb32bef..36cbc046c 100644
--- a/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
+++ b/ui/src/app/core/accessories/types/smokesensor/smokesensor.component.ts
@@ -1,10 +1,18 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ imports: [
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SmokesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.component.html b/ui/src/app/core/accessories/types/speaker/speaker.component.html
index 9b9b54a45..0f772e614 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.component.html
+++ b/ui/src/app/core/accessories/types/speaker/speaker.component.html
@@ -9,16 +9,12 @@
{{ service.customName || service.serviceName }}
-
-
- {{ service.values.Volume }}%
-
-
- {{ 'accessories.control.not_mute' | translate }}
-
+ @if (service.values.Mute) {
+
+ } @if (service.values.Volume !== undefined && !service.values.Mute) {
+ {{ service.values.Volume }}%
+ } @if (service.values.Volume === undefined && !service.values.Mute) {
+ {{ 'accessories.control.not_mute' | translate }}
+ }
-
+ @if (targetVolume) {
+
{{ 'accessories.control.speaker_volume' | translate }}
{{ targetVolume.value }}%
{{ 'accessories.control.speaker_volume' | translate }}
>
+ }
diff --git a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
index f94a85a02..447b63842 100644
--- a/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
+++ b/ui/src/app/core/accessories/types/speaker/speaker.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
+
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ imports: [
+ FormsModule,
+ NouisliderComponent,
+ TranslatePipe,
+ ],
})
export class SpeakerManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetVolume: any
public targetVolumeChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetVolumeChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
index 308aa8d4a..05e16d385 100644
--- a/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
+++ b/ui/src/app/core/accessories/types/statelessprogrammableswitch/statelessprogrammableswitch.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-statelessprogrammableswitch',
templateUrl: './statelessprogrammableswitch.component.html',
+ imports: [InlineSVGModule],
})
export class StatelessprogrammableswitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/switch/switch.component.ts b/ui/src/app/core/accessories/types/switch/switch.component.ts
index c549acdf4..902944b0c 100644
--- a/ui/src/app/core/accessories/types/switch/switch.component.ts
+++ b/ui/src/app/core/accessories/types/switch/switch.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-switch',
templateUrl: './switch.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SwitchComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/television/television.component.html b/ui/src/app/core/accessories/types/television/television.component.html
index 76aab0d82..97102dd25 100644
--- a/ui/src/app/core/accessories/types/television/television.component.html
+++ b/ui/src/app/core/accessories/types/television/television.component.html
@@ -10,11 +10,10 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ channelList[service.values.ActiveIdentifier] }}
-
+ @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active) {
+ {{ channelList[service.values.ActiveIdentifier] }}
+ }
diff --git a/ui/src/app/core/accessories/types/television/television.component.ts b/ui/src/app/core/accessories/types/television/television.component.ts
index bbeb11e05..7e58ec924 100644
--- a/ui/src/app/core/accessories/types/television/television.component.ts
+++ b/ui/src/app/core/accessories/types/television/television.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-television',
templateUrl: './television.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class TelevisionComponent implements OnInit {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
index 1bf86fde3..2af99e513 100644
--- a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
+++ b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
@@ -1,10 +1,13 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
@Component({
selector: 'app-temperaturesensor',
templateUrl: './temperaturesensor.component.html',
styleUrls: ['./temperaturesensor.component.scss'],
+ imports: [DecimalPipe, ConvertTempPipe],
})
export class TemperaturesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
index bb172946d..c8e459239 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
@@ -17,11 +17,12 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
+ @if (service.values.TargetHeatingCoolingState === 0) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.TargetHeatingCoolingState) {
+
{{ service.values.TargetTemperature | convertTemp | number:'1.0-1' }}°
+ }
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
index 9ee71ba28..0fcb3464b 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ThermostatManageComponent } from '@/app/core/accessories/types/thermostat/thermostat.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-thermostat',
templateUrl: './thermostat.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
size: 'sm',
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
index 4a4de5abd..3b03d84c1 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
@@ -1,6 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +13,24 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperature: any
public targetTemperatureChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetTemperatureChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/unknown/unknown.component.ts b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
index 72e85eb3b..6f76d1e57 100644
--- a/ui/src/app/core/accessories/types/unknown/unknown.component.ts
+++ b/ui/src/app/core/accessories/types/unknown/unknown.component.ts
@@ -1,9 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { Component, Input } from '@angular/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
@Component({
selector: 'app-unknown',
templateUrl: './unknown.component.html',
+ imports: [InlineSVGModule],
})
export class UnknownComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.html b/ui/src/app/core/accessories/types/valve/valve.component.html
index 9f4a68558..162a4a6db 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.component.html
@@ -7,41 +7,24 @@
tabindex="0"
>
-
-
-
-
+ @if (service.values.ValveType === 0) {
+
+ } @if (service.values.ValveType === 1) {
+
+ } @if (service.values.ValveType === 2) {
+
+ } @if (service.values.ValveType === 3) {
+
+ }
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ remainingDuration }}
-
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.Active && remainingDuration) {
+ {{ remainingDuration }}
+ } @if (service.values.Active && !remainingDuration) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ }
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.ts b/ui/src/app/core/accessories/types/valve/valve.component.ts
index 7650b07ce..b255513d7 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.component.ts
@@ -1,16 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ValveManageComponent } from '@/app/core/accessories/types/valve/valve.manage.component'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
import { interval, Subscription } from 'rxjs'
import { filter } from 'rxjs/operators'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-valve',
templateUrl: './valve.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,10 +30,6 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
if (this.service.getCharacteristic('RemainingDuration')) {
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.html b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
index 680f30d27..91722697e 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
@@ -18,7 +18,9 @@
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
index 5cff3bb61..b53876770 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.ts
@@ -1,23 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
selector: 'app-valve-manage',
templateUrl: './valve.manage.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ValveManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public availableSetDurations = []
public targetSetDuration: number
private durationSeconds = [300, 600, 900, 1200, 1500, 1800, 2100, 2400, 2700, 3000, 3300, 3600]
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
-
ngOnInit() {
this.targetSetDuration = this.service.values.SetDuration
diff --git a/ui/src/app/core/accessories/types/window/window.component.html b/ui/src/app/core/accessories/types/window/window.component.html
index 741bff947..5e9587188 100644
--- a/ui/src/app/core/accessories/types/window/window.component.html
+++ b/ui/src/app/core/accessories/types/window/window.component.html
@@ -7,31 +7,26 @@
tabindex="0"
>
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.component.ts b/ui/src/app/core/accessories/types/window/window.component.ts
index bbcd0b981..d063de8a3 100644
--- a/ui/src/app/core/accessories/types/window/window.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowManageComponent } from '@/app/core/accessories/types/window/window.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-window',
templateUrl: './window.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.html b/ui/src/app/core/accessories/types/window/window.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.html
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
index 43e31dd2b..3075f449e 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -7,31 +7,34 @@
tabindex="0"
>
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@ Homebridge Google Smart Home
-
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
{{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ }
-
-
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
-
-
+ @if (!gshConfig.token) {
+ {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) {
+
-
-
+ } @if (gshConfig.token) {
+
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
-
-
+ @if (justLinked) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
+ }
-
-
- []
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
- -
+ @for (option of fundingOptions; track option) {
+
-
{{ option.url }}
+ }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
-
+ } @if (!allPluginsSupported) {
+
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
+ }
- -
+ @for (plugin of installedPlugins; track plugin) {
+
-
{{ plugin.name }}
-
+ @if (plugin.hb2Ready === 'supported') {
+
-
+ } @if (plugin.hb2Ready === 'unknown') {
+
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@ {{ presentTenseVerb }}: {{ pluginName }}
-
-
-
- {{ 'platform.version.service_restart_required' | translate }}
-
+ @if (actionComplete) {
+
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+ {{ 'platform.version.service_restart_required' | translate }}
+ }
{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- {{ 'restart.homebridge' | translate }}
-
-
- {{ 'restart.child_bridges' | translate }}
-
+ @if (!isDisabled) {
+
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+ {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) {
+ {{ 'restart.child_bridges' | translate }}
+ }
-
+ } @if (changeLog) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
{{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
+ }
-
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
- v{{ installedVersion }} →
- {{ release.name }}
- v{{ latestVersion }}
+ @if (installedVersion) {
+ v{{ installedVersion }} →
+ } @if (release.name) {
+ {{ release.name }}
+ } @if (!release.name) {
+ v{{ latestVersion }}
+ }
+ }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
-
+ } @if (!loading) {
+
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+ {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }
{{ 'plugins.manage.select_version' | translate }}:
- -
+ @for (version of versionsWithTags; track version) {
+
-
{{ version.tag }}
v{{ version.version }}
-
+ }
-
{{ 'plugins.manage.all_versions' | translate }}
-
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && !canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ }
-
+ @if (!loading && canConfigure) {
+
+ @for (block of pluginConfig; track block) {
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) {
+ }
@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
{{ 'accessories.control.speaker_volume' | translate }}
{{ targetVolume.value }}%
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
- {{ channelList[service.values.ActiveIdentifier] }}
-
+ @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ } @if (service.values.Active) {
+ {{ channelList[service.values.ActiveIdentifier] }}
+ }
diff --git a/ui/src/app/core/accessories/types/television/television.component.ts b/ui/src/app/core/accessories/types/television/television.component.ts
index bbeb11e05..7e58ec924 100644
--- a/ui/src/app/core/accessories/types/television/television.component.ts
+++ b/ui/src/app/core/accessories/types/television/television.component.ts
@@ -1,9 +1,19 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { NgClass } from '@angular/common'
import { Component, Input, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-television',
templateUrl: './television.component.html',
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class TelevisionComponent implements OnInit {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
index 1bf86fde3..2af99e513 100644
--- a/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
+++ b/ui/src/app/core/accessories/types/temperaturesensor/temperaturesensor.component.ts
@@ -1,10 +1,13 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe } from '@angular/common'
import { Component, Input } from '@angular/core'
@Component({
selector: 'app-temperaturesensor',
templateUrl: './temperaturesensor.component.html',
styleUrls: ['./temperaturesensor.component.scss'],
+ imports: [DecimalPipe, ConvertTempPipe],
})
export class TemperaturesensorComponent {
@Input() public service: ServiceTypeX
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
index bb172946d..c8e459239 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.html
@@ -17,11 +17,12 @@
}"
>
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.off' | translate }}
-
-
+ @if (service.values.TargetHeatingCoolingState === 0) {
+
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
index 9ee71ba28..0fcb3464b 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,21 +1,30 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ThermostatManageComponent } from '@/app/core/accessories/types/thermostat/thermostat.manage.component'
-import { Component, Input } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-thermostat',
templateUrl: './thermostat.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
-
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
size: 'sm',
diff --git a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
index 4a4de5abd..3b03d84c1 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.manage.component.ts
@@ -1,6 +1,11 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +13,24 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ imports: [
+ NgClass,
+ FormsModule,
+ NouisliderComponent,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetTemperature: any
public targetTemperatureChanged: Subject{{ 'accessories.control.off' | translate }}
+ } @if (service.values.TargetHeatingCoolingState) {
+
{{ service.values.TargetTemperature | convertTemp | number:'1.0-1' }}°
+ }
-
-
-
-
+ @if (service.values.ValveType === 0) {
+
+ } @if (service.values.ValveType === 1) {
+
+ } @if (service.values.ValveType === 2) {
+
+ } @if (service.values.ValveType === 3) {
+
+ }
diff --git a/ui/src/app/core/accessories/types/valve/valve.component.ts b/ui/src/app/core/accessories/types/valve/valve.component.ts
index 7650b07ce..b255513d7 100644
--- a/ui/src/app/core/accessories/types/valve/valve.component.ts
+++ b/ui/src/app/core/accessories/types/valve/valve.component.ts
@@ -1,16 +1,28 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { ValveManageComponent } from '@/app/core/accessories/types/valve/valve.manage.component'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
import { interval, Subscription } from 'rxjs'
import { filter } from 'rxjs/operators'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-valve',
templateUrl: './valve.component.html',
styleUrls: ['./valve.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,10 +30,6 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
-
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
if (this.service.getCharacteristic('RemainingDuration')) {
diff --git a/ui/src/app/core/accessories/types/valve/valve.manage.component.html b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
index 680f30d27..91722697e 100644
--- a/ui/src/app/core/accessories/types/valve/valve.manage.component.html
+++ b/ui/src/app/core/accessories/types/valve/valve.manage.component.html
@@ -18,7 +18,9 @@
{{ service.customName || service.values.ConfiguredName || service.serviceName }}
-
- {{ remainingDuration }}
-
-
- {{ 'accessories.control.running' | translate }}
-
-
- {{ 'accessories.control.off' | translate }}
-
+ @if (service.values.Active && remainingDuration) {
+ {{ remainingDuration }}
+ } @if (service.values.Active && !remainingDuration) {
+ {{ 'accessories.control.running' | translate }}
+ } @if (!service.values.Active) {
+ {{ 'accessories.control.off' | translate }}
+ }
-
-
+ @if (!service.values.TargetPosition) {
+
+ } @if (service.values.TargetPosition) {
+
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.component.ts b/ui/src/app/core/accessories/types/window/window.component.ts
index bbcd0b981..d063de8a3 100644
--- a/ui/src/app/core/accessories/types/window/window.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowManageComponent } from '@/app/core/accessories/types/window/window.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-window',
templateUrl: './window.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.html b/ui/src/app/core/accessories/types/window/window.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.html
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.html
@@ -14,19 +14,21 @@ {{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
index 43e31dd2b..3075f449e 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -7,31 +7,34 @@
tabindex="0"
>
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@ Homebridge Google Smart Home
-
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
{{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ }
-
-
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
-
-
+ @if (!gshConfig.token) {
+ {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) {
+
-
-
+ } @if (gshConfig.token) {
+
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
-
-
+ @if (justLinked) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
+ }
-
-
- []
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
- -
+ @for (option of fundingOptions; track option) {
+
-
{{ option.url }}
+ }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
-
+ } @if (!allPluginsSupported) {
+
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
+ }
- -
+ @for (plugin of installedPlugins; track plugin) {
+
-
{{ plugin.name }}
-
+ @if (plugin.hb2Ready === 'supported') {
+
-
+ } @if (plugin.hb2Ready === 'unknown') {
+
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@ {{ presentTenseVerb }}: {{ pluginName }}
-
-
-
- {{ 'platform.version.service_restart_required' | translate }}
-
+ @if (actionComplete) {
+
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+ {{ 'platform.version.service_restart_required' | translate }}
+ }
{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- {{ 'restart.homebridge' | translate }}
-
-
- {{ 'restart.child_bridges' | translate }}
-
+ @if (!isDisabled) {
+
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+ {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) {
+ {{ 'restart.child_bridges' | translate }}
+ }
-
+ } @if (changeLog) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
{{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
+ }
-
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
- v{{ installedVersion }} →
- {{ release.name }}
- v{{ latestVersion }}
+ @if (installedVersion) {
+ v{{ installedVersion }} →
+ } @if (release.name) {
+ {{ release.name }}
+ } @if (!release.name) {
+ v{{ latestVersion }}
+ }
+ }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
-
+ } @if (!loading) {
+
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+ {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }
{{ 'plugins.manage.select_version' | translate }}:
- -
+ @for (version of versionsWithTags; track version) {
+
-
{{ version.tag }}
v{{ version.version }}
-
+ }
-
{{ 'plugins.manage.all_versions' | translate }}
-
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && !canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ }
-
+ @if (!loading && canConfigure) {
+
+ @for (block of pluginConfig; track block) {
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) {
+ }
@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
index 43e31dd2b..3075f449e 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.html
@@ -7,31 +7,34 @@
tabindex="0"
>
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
{{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@ Homebridge Google Smart Home
-
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
{{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ }
-
-
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
-
-
+ @if (!gshConfig.token) {
+ {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) {
+
-
-
+ } @if (gshConfig.token) {
+
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
-
-
+ @if (justLinked) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
+ }
-
-
- []
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
- -
+ @for (option of fundingOptions; track option) {
+
-
{{ option.url }}
+ }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
-
+ } @if (!allPluginsSupported) {
+
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
+ }
- -
+ @for (plugin of installedPlugins; track plugin) {
+
-
{{ plugin.name }}
-
+ @if (plugin.hb2Ready === 'supported') {
+
-
+ } @if (plugin.hb2Ready === 'unknown') {
+
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@ {{ presentTenseVerb }}: {{ pluginName }}
-
-
-
- {{ 'platform.version.service_restart_required' | translate }}
-
+ @if (actionComplete) {
+
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+ {{ 'platform.version.service_restart_required' | translate }}
+ }
{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- {{ 'restart.homebridge' | translate }}
-
-
- {{ 'restart.child_bridges' | translate }}
-
+ @if (!isDisabled) {
+
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+ {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) {
+ {{ 'restart.child_bridges' | translate }}
+ }
-
+ } @if (changeLog) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
{{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
+ }
-
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
- v{{ installedVersion }} →
- {{ release.name }}
- v{{ latestVersion }}
+ @if (installedVersion) {
+ v{{ installedVersion }} →
+ } @if (release.name) {
+ {{ release.name }}
+ } @if (!release.name) {
+ v{{ latestVersion }}
+ }
+ }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
-
+ } @if (!loading) {
+
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+ {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }
{{ 'plugins.manage.select_version' | translate }}:
- -
+ @for (version of versionsWithTags; track version) {
+
-
{{ version.tag }}
v{{ version.version }}
-
+ }
-
{{ 'plugins.manage.all_versions' | translate }}
-
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && !canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ }
-
+ @if (!loading && canConfigure) {
+
+ @for (block of pluginConfig; track block) {
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) {
+ }
@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/window/window.manage.component.ts b/ui/src/app/core/accessories/types/window/window.manage.component.ts
index 507bdcbca..926482dea 100644
--- a/ui/src/app/core/accessories/types/window/window.manage.component.ts
+++ b/ui/src/app/core/accessories/types/window/window.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject
+ @if (!service.values.TargetPosition) {
+ } @if (service.values.TargetPosition) {
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
index b989592fd..227cfc794 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.component.ts
@@ -1,19 +1,27 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
import { WindowcoveringManageComponent } from '@/app/core/accessories/types/windowcovering/windowcovering.manage.component'
-import { Component, Input } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { InlineSVGModule } from 'ng-inline-svg-2'
+import { LongClickDirective } from '../../../directives/longclick.directive'
@Component({
selector: 'app-windowcovering',
templateUrl: './windowcovering.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
- @Input() public service: ServiceTypeX
+ private $modal = inject(NgbModal)
- constructor(
- private $modal: NgbModal,
- ) {}
+ @Input() public service: ServiceTypeX
onClick() {
if (this.service.values.TargetPosition) {
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
index 3d30f946c..3708e4c98 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.html
@@ -14,19 +14,21 @@ {{ service.customName || service.serviceName }}
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}%
-
- {{ 'accessories.control.open' | translate }}
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}%
+ } @if (service.values.CurrentPosition === 100) {
+ {{ 'accessories.control.open' | translate }}
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
index 7785e4740..745cc60de 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.ts
@@ -1,22 +1,21 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './restart-child-bridges.component.html',
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
- @Input() bridges: { username: string, displayName: string }[] = []
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() bridges: { username: string, displayName: string }[] = []
public async onRestartChildBridgeClick() {
try {
diff --git a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
index be7670b1e..3d63872a7 100644
--- a/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
+++ b/ui/src/app/core/components/restart-homebridge/restart-homebridge.component.ts
@@ -1,23 +1,22 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './restart-homebridge.component.html',
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
- @Input() fullRestart = false
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ @Input() fullRestart = false
public onRestartHomebridgeClick() {
if (!this.fullRestart) {
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.html b/ui/src/app/core/components/schema-form/schema-form.component.html
index 8e47ac9e8..c5e93f636 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.html
+++ b/ui/src/app/core/components/schema-form/schema-form.component.html
@@ -1,6 +1,6 @@
+ @if (configSchema.schema) {
+ }
diff --git a/ui/src/app/core/components/schema-form/schema-form.component.ts b/ui/src/app/core/components/schema-form/schema-form.component.ts
index 775f1bf4f..f1732490b 100644
--- a/ui/src/app/core/components/schema-form/schema-form.component.ts
+++ b/ui/src/app/core/components/schema-form/schema-form.component.ts
@@ -1,11 +1,20 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core'
+
+import { JsonSchemaFormModule } from '@ng-formworks/core'
+import { JsonSchemaFormPatchDirective } from '../../directives/json-schema-form-patch.directive'
@Component({
selector: 'app-schema-form',
templateUrl: './schema-form.component.html',
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
@Output() dataChange = new EventEmitter()
@@ -24,10 +33,6 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
const userLanguage = this.$settings.env.lang.split('-')[0]
diff --git a/ui/src/app/core/components/spinner/spinner.component.ts b/ui/src/app/core/components/spinner/spinner.component.ts
index ee3a84752..6eef42999 100644
--- a/ui/src/app/core/components/spinner/spinner.component.ts
+++ b/ui/src/app/core/components/spinner/spinner.component.ts
@@ -4,6 +4,7 @@ import { Component } from '@angular/core'
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss'],
+ standalone: true,
})
export class SpinnerComponent {
constructor() {}
diff --git a/ui/src/app/core/core.module.ts b/ui/src/app/core/core.module.ts
deleted file mode 100644
index bbdce9c8a..000000000
--- a/ui/src/app/core/core.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
-import { InformationComponent } from '@/app/core/components/information/information.component'
-import { QrcodeComponent } from '@/app/core/components/qrcode/qrcode.component'
-import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component'
-import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { SchemaFormComponent } from '@/app/core/components/schema-form/schema-form.component'
-import { SpinnerComponent } from '@/app/core/components/spinner/spinner.component'
-import { JsonSchemaFormPatchDirective } from '@/app/core/directives/json-schema-form-patch.directive'
-import { LongClickDirective } from '@/app/core/directives/longclick.directive'
-import { PluginsMarkdownDirective } from '@/app/core/directives/plugins.markdown.directive'
-import { RtlDirective } from '@/app/core/directives/rtl.directive'
-import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
-import { ExternalLinkIconPipe } from '@/app/core/pipes/external-link-icon.pipe'
-import { ReplacePipe } from '@/app/core/pipes/replace.pipe'
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { ReactiveFormsModule } from '@angular/forms'
-import { Bootstrap4FrameworkModule } from '@ng-formworks/bootstrap4'
-import { TranslateModule } from '@ngx-translate/core'
-
-@NgModule({
- declarations: [
- SpinnerComponent,
- SchemaFormComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ConfirmComponent,
- InformationComponent,
- RestartHomebridgeComponent,
- RestartChildBridgesComponent,
- QrcodeComponent,
- ],
- imports: [
- CommonModule,
- TranslateModule,
- Bootstrap4FrameworkModule,
- ReactiveFormsModule,
- ],
- providers: [],
- exports: [
- SpinnerComponent,
- SchemaFormComponent,
- QrcodeComponent,
- ConvertTempPipe,
- ReplacePipe,
- ExternalLinkIconPipe,
- PluginsMarkdownDirective,
- LongClickDirective,
- RtlDirective,
- JsonSchemaFormPatchDirective,
- ],
-})
-export class CoreModule {}
diff --git a/ui/src/app/core/directives/json-schema-form-patch.directive.ts b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
index b0fd2c48e..4fcc8e5ff 100644
--- a/ui/src/app/core/directives/json-schema-form-patch.directive.ts
+++ b/ui/src/app/core/directives/json-schema-form-patch.directive.ts
@@ -1,16 +1,19 @@
-import { Directive, Host, Input, Optional, Self } from '@angular/core'
+import { Directive, inject, Input } from '@angular/core'
import { JsonSchemaFormComponent } from '@ng-formworks/core'
import { cloneDeep, merge, uniqueId } from 'lodash-es'
-@Directive({
- selector: '[jsfPatch]',
+@Directive({
+ selector: '[jsfPatch]',
+ standalone: true,
})
-export class JsonSchemaFormPatchDirective {
+export class JsonSchemaFormPatchDirective {
+ jsonSchemaForm = inject(JsonSchemaFormComponent, { host: true, self: true, optional: true })
+
@Input() jsfPatch = false
- constructor(
- @Host() @Self() @Optional() public jsonSchemaForm: JsonSchemaFormComponent,
- ) {
+ constructor() {
+ const jsonSchemaForm = this.jsonSchemaForm
+
const buildLayoutOriginal = jsonSchemaForm.jsf.buildLayout.bind(jsonSchemaForm.jsf)
jsonSchemaForm.jsf.buildLayout = (widgetLibrary: any) => {
diff --git a/ui/src/app/core/directives/longclick.directive.ts b/ui/src/app/core/directives/longclick.directive.ts
index d35845dd8..e70d5bcaf 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -3,6 +3,7 @@ import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..4e013d4d6 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,12 @@
-import { Directive, ElementRef, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, OnInit } from '@angular/core'
import { EmojiConvertor } from 'emoji-js'
@Directive({
selector: 'markdown',
+ standalone: true,
})
export class PluginsMarkdownDirective implements OnInit {
- constructor(
- private el: ElementRef,
- ) {}
+ private el = inject(ElementRef)
ngOnInit() {
// ensure third party links open in a new window without a referrer
diff --git a/ui/src/app/core/directives/rtl.directive.ts b/ui/src/app/core/directives/rtl.directive.ts
index e3c0eeaf8..5f29109f0 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,15 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { Directive, ElementRef, inject, Input, OnInit } from '@angular/core'
@Directive({
selector: '[rtl]',
+ standalone: true,
})
export class RtlDirective implements OnInit {
- @Input() rtl: string
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ @Input() rtl: string
ngOnInit() {
if (this.$settings.rtl) {
diff --git a/ui/src/app/core/log.service.ts b/ui/src/app/core/log.service.ts
index 29fcaaa89..bd6c9e49e 100644
--- a/ui/src/app/core/log.service.ts
+++ b/ui/src/app/core/log.service.ts
@@ -1,5 +1,5 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { ElementRef, Injectable } from '@angular/core'
+import { ElementRef, inject, Injectable } from '@angular/core'
import { Subject } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { ITerminalOptions, Terminal } from 'xterm'
@@ -10,6 +10,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links'
providedIn: 'root',
})
export class LogService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -19,10 +21,6 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
-
startTerminal(
targetElement: ElementRef,
termOpts: ITerminalOptions = {},
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
index 1ff5cb4f6..a86948d28 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.html
@@ -15,9 +15,11 @@
-
- {{ 'accessories.control.closed' | translate }}
-
- {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
-
- Open
-
-
- {{ 'accessories.control.opening' | translate }}...
-
-
- {{ 'accessories.control.closing' | translate }}...
+ @if (service.values.PositionState === 2) {
+
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- ) {
+ constructor() {
this.targetPositionChanged
.pipe(
debounceTime(300),
diff --git a/ui/src/app/core/api.service.ts b/ui/src/app/core/api.service.ts
index c2bc0e4b2..1373e9422 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,13 @@
import { environment } from '@/environments/environment'
import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable } from 'rxjs'
@Injectable({
providedIn: 'root',
})
export class ApiService {
- constructor(private $http: HttpClient) {}
+ private $http = inject(HttpClient)
get(url: string, options?): Observable {
return this.$http.get(`${environment.api.base}${url}`, options)
diff --git a/ui/src/app/core/auth/admin.guard.ts b/ui/src/app/core/auth/admin.guard.ts
index 6a8aef108..5f878866a 100644
--- a/ui/src/app/core/auth/admin.guard.ts
+++ b/ui/src/app/core/auth/admin.guard.ts
@@ -1,5 +1,5 @@
import { AuthService } from '@/app/core/auth/auth.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -9,12 +9,10 @@ import { Observable } from 'rxjs'
providedIn: 'root',
})
export class AdminGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
canActivate(): Observable | Promise | boolean {
if (this.$auth.user && this.$auth.user.admin) {
diff --git a/ui/src/app/core/auth/auth.guard.ts b/ui/src/app/core/auth/auth.guard.ts
index 2c1aa06d4..7efd19069 100644
--- a/ui/src/app/core/auth/auth.guard.ts
+++ b/ui/src/app/core/auth/auth.guard.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -8,11 +8,9 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class AuthGuard implements CanActivate {
- constructor(
- private $auth: AuthService,
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $auth = inject(AuthService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(
_next: ActivatedRouteSnapshot,
diff --git a/ui/src/app/core/auth/auth.service.ts b/ui/src/app/core/auth/auth.service.ts
index 00c0c6e87..ba13e80d4 100644
--- a/ui/src/app/core/auth/auth.service.ts
+++ b/ui/src/app/core/auth/auth.service.ts
@@ -2,7 +2,7 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import dayjs from 'dayjs'
import { firstValueFrom } from 'rxjs'
@@ -16,15 +16,15 @@ interface UserInterface {
@Injectable()
export class AuthService {
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ private $settings = inject(SettingsService)
+
public token: string
public user: UserInterface = {}
private logoutTimer: NodeJS.Timeout
- constructor(
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- private $settings: SettingsService,
- ) {
+ constructor() {
// load the token (if present) from local storage on page init
this.loadToken()
}
diff --git a/ui/src/app/core/components/confirm/confirm.component.html b/ui/src/app/core/components/confirm/confirm.component.html
index e62dc9fc4..45174db66 100644
--- a/ui/src/app/core/components/confirm/confirm.component.html
+++ b/ui/src/app/core/components/confirm/confirm.component.html
@@ -12,7 +12,9 @@ {{ title }}
-
+ @if (faIconClass) {
+
+ }
{{ message }}
-
-
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
{{ subtitle }}
+ }
{{ message }}
diff --git a/ui/src/app/core/components/information/information.component.ts b/ui/src/app/core/components/information/information.component.ts
index fbca31fa0..9bdb82359 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,18 +1,19 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
@Component({
templateUrl: './information.component.html',
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@Input() ctaButtonLabel?: string
@Input() ctaButtonLink?: string
@Input() faIconClass: string
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/components/qrcode/qrcode.component.ts b/ui/src/app/core/components/qrcode/qrcode.component.ts
index f72d68132..1bd77deb5 100644
--- a/ui/src/app/core/components/qrcode/qrcode.component.ts
+++ b/ui/src/app/core/components/qrcode/qrcode.component.ts
@@ -1,14 +1,15 @@
-import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core'
+import { Component, ElementRef, Input, OnChanges, viewChild } from '@angular/core'
import { toString } from 'qrcode'
@Component({
selector: 'app-qrcode',
templateUrl: './qrcode.component.html',
+ standalone: true,
})
export class QrcodeComponent implements OnChanges {
@Input() data: string
- @ViewChild('qrcode', { static: true }) qrcodeElement: ElementRef
+ readonly qrcodeElement = viewChild('qrcode')
ngOnChanges(): void {
this.renderQrCode()
@@ -16,7 +17,8 @@ export class QrcodeComponent implements OnChanges {
async renderQrCode() {
if (this.data) {
- this.qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
+ const qrcodeElement = this.qrcodeElement()
+ qrcodeElement.nativeElement.innerHTML = await toString(this.data, {
type: 'svg',
margin: 0,
color: {
@@ -24,7 +26,7 @@ export class QrcodeComponent implements OnChanges {
dark: document.body.classList.contains('dark-mode') ? '#FFF' : '#000',
},
})
- const svgElement = this.qrcodeElement.nativeElement.querySelector('svg') as SVGElement
+ const svgElement = qrcodeElement.nativeElement.querySelector('svg') as SVGElement
const svgPathElement = svgElement.querySelector('path') as SVGPathElement
svgPathElement.classList.add('qr-code-theme-color')
}
diff --git a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
index d79d350ed..b071592af 100644
--- a/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
+++ b/ui/src/app/core/components/restart-child-bridges/restart-child-bridges.component.html
@@ -16,7 +16,9 @@ {{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
- - {{ bridge.displayName }}
+ @for (bridge of bridges; track bridge) {
+ - {{ bridge.displayName }}
+ }
+ @if (service.values.CurrentPosition === 0) {
+ {{ 'accessories.control.closed' | translate }}
+ } @if (service.values.CurrentPosition > 0 && service.values.CurrentPosition < 100) {
+ {{ service.values.CurrentPosition }}% {{ 'accessories.control.open' | translate }}
+ } @if (service.values.CurrentPosition === 100) {
+ Open
+ }
+ } @if (service.values.PositionState === 1) {
+ {{ 'accessories.control.opening' | translate }}...
+ } @if (service.values.PositionState === 0) {
+ {{ 'accessories.control.closing' | translate }}...
+ }
diff --git a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
index 2a7f17323..16c13c421 100644
--- a/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
+++ b/ui/src/app/core/accessories/types/windowcovering/windowcovering.manage.component.ts
@@ -1,6 +1,10 @@
import { ServiceTypeX } from '@/app/core/accessories/accessories.interfaces'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
+import { NouisliderComponent } from 'ng2-nouislider'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -8,16 +12,21 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ imports: [
+ NouisliderComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class WindowcoveringManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
public targetPosition: any
public targetPositionChanged: Subject{{ title }}
{{ message }}
+ @if (faIconClass) {
+
+ } @if (subtitle) {
+
+ }
{{ subtitle }}
{{ message }}
{{ 'platform.version.service_restart_required' | transla
{{ 'restart.child_bridge_list' | translate }}
-
-
- {{ bridge.displayName }} + @for (bridge of bridges; track bridge) { +
- {{ bridge.displayName }} + }
+ @if (loading) {
+
+ }
-
+ @if (uiLoaded && pluginConfig.length && schema.singular && showSchemaForm) {
+
>
-
-
+ } @if (formId) {
+
>
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
index d85770b3a..fbaaf5484 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.component.ts
@@ -6,19 +6,36 @@ import { PluginSchema } from '@/app/core/manage-plugins/plugin-config/plugin-con
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { NgbActiveModal, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom, Subject } from 'rxjs'
import { debounceTime, skip } from 'rxjs/operators'
+import { SchemaFormComponent } from '../../components/schema-form/schema-form.component'
@Component({
templateUrl: './custom-plugins.component.html',
styleUrls: ['./custom-plugins.component.scss'],
+ imports: [
+ SchemaFormComponent,
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class CustomPluginsComponent implements OnInit, OnDestroy {
- @ViewChild('custompluginui', { static: true }) customPluginUiElementTarget: ElementRef
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
+ readonly customPluginUiElementTarget = viewChild('custompluginui')
@Input() plugin: any
@Input() schema: PluginSchema
@Input() pluginConfig: Record[]
@@ -52,17 +69,6 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
private schemaFormRecentlyRefreshed = false
private schemaFormRefreshSubject = new Subject()
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
this.pluginAlias = this.schema.pluginAlias
@@ -124,7 +130,7 @@ export class CustomPluginsComponent implements OnInit, OnDestroy {
}
loadUi() {
- this.iframe = this.customPluginUiElementTarget.nativeElement as HTMLIFrameElement
+ this.iframe = this.customPluginUiElementTarget().nativeElement as HTMLIFrameElement
this.iframe.src = `${environment.api.base + this.basePath
}/index.html?origin=${encodeURIComponent(location.origin)}&v=${encodeURIComponent(this.plugin.installedVersion)}`
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
index b3ef46582..58daf0fa2 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { CustomPluginsService } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.service'
import { HomebridgeDeconzComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component'
@@ -13,12 +12,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { NgxMdModule } from 'ngx-md'
@NgModule({
- declarations: [
- CustomPluginsComponent,
- HomebridgeDeconzComponent,
- HomebridgeGoogleSmarthomeComponent,
- HomebridgeHueComponent,
- ],
imports: [
CommonModule,
NgbModule,
@@ -27,7 +20,10 @@ import { NgxMdModule } from 'ngx-md'
TranslateModule.forChild(),
Bootstrap4FrameworkModule,
NgxMdModule,
- CoreModule,
+ CustomPluginsComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeGoogleSmarthomeComponent,
+ HomebridgeHueComponent,
],
providers: [
CustomPluginsService,
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
index f952dac97..2311729e4 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/custom-plugins.service.ts
@@ -1,6 +1,6 @@
import { CustomPluginsComponent } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.component'
import { HomebridgeGoogleSmarthomeComponent } from '@/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { firstValueFrom } from 'rxjs'
@@ -10,15 +10,13 @@ import { ApiService } from '../../api.service'
providedIn: 'root',
})
export class CustomPluginsService {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+
public plugins = {
'homebridge-gsh': HomebridgeGoogleSmarthomeComponent,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- ) {}
-
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(plugin.name)
const ref = this.$modal.open(this.plugins[plugin.name], {
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
index 9801434c8..88f6b4e9b 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-deconz/homebridge-deconz.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-deconz',
templateUrl: './homebridge-deconz.component.html',
+ standalone: true,
})
export class HomebridgeDeconzComponent {
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-deconz/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
index 793ad4a77..26a227e70 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html
@@ -12,8 +12,10 @@
- Homebridge Google Smart Home
-
+ @if (!$settings.env.enableAccessories) {
+
+ @if (!$settings.env.enableAccessories) {
+
+ }
-
- {{ 'accessories.message_must_use_insecure_mode' | translate }}
@@ -29,58 +31,62 @@
Homebridge Google Smart Home
+ } @if ($settings.env.enableAccessories) {
+
{{ 'plugins.settings.custom.homebridge-gsh.message_about' | translate }}
-- {{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }} -
-
+ @if (!gshConfig.token) {
+
-
-
{{ 'plugins.settings.custom.homebridge-gsh.message_account_link_required' | translate }}
+ } @if (!gshConfig.token) { +
+ } @if (gshConfig.token) {
+
[]
@@ -26,14 +44,7 @@ export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
private popup: Window
private originCheckInterval: NodeJS.Timeout
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $jwtHelper: JwtHelperService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
// listen for sign in events from the link account popup
window.addEventListener('message', this.windowMessageListener, false)
}
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
index ef6909cce..643e8fa8d 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-hue/homebridge-hue.component.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
@@ -7,13 +7,12 @@ import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-homebridge-hue',
templateUrl: './homebridge-hue.component.html',
+ standalone: true,
})
export class HomebridgeHueComponent {
- constructor(
- private $api: ApiService,
- private $translate: TranslateService,
- private $toastr: ToastrService,
- ) {}
+ private $api = inject(ApiService)
+ private $translate = inject(TranslateService)
+ private $toastr = inject(ToastrService)
downloadDumpFile() {
this.$api.get('/plugins/custom-plugins/homebridge-hue/dump-file', { observe: 'response', responseType: 'blob' }).subscribe({
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
index 2ad5c85cd..b0817361c 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.html
@@ -16,14 +16,17 @@ {{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ linkType | titlecase }} {{ 'plugins.settings.custom.homebridge-gsh.label_account_linked' | translate }}
- -
+ @if (justLinked) {
+
+ }
-
- {{ 'plugins.settings.custom.homebridge-gsh.message_homebridge_restart_required' | translate }}
-
diff --git a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.ts b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.ts
index f70f7bd45..e179cb3fe 100644
--- a/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.ts
+++ b/ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.ts
@@ -1,18 +1,36 @@
/* global NodeJS */
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { JwtHelperService } from '@auth0/angular-jwt'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
+import { NgxMdModule } from 'ngx-md'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
+import { SchemaFormComponent } from '../../../components/schema-form/schema-form.component'
+import { PluginsMarkdownDirective } from '../../../directives/plugins.markdown.directive'
@Component({
selector: 'app-homebridge-google-smarthome',
templateUrl: './homebridge-google-smarthome.component.html',
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ SchemaFormComponent,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class HomebridgeGoogleSmarthomeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $jwtHelper = inject(JwtHelperService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() public plugin: any
@Input() public schema: any
@Input() pluginConfig: Record
+ @if (schema.footerDisplay) {
+
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ }
{{ 'plugins.manage.disable' | translate }}: {{ pluginNam
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
-
+ @if (isConfigured && !isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
+ }
{{ 'plugins.manage.confirm_disable' | translate: { pluginName } }}
- {{ 'plugins.manage.confirm_disable_accessory_1' | translate }}
- {{ 'plugins.manage.confirm_disable_accessory_2' | translate }}
-
+ } @if (isConfigured && isConfiguredDynamicPlatform) {
+
- {{ 'plugins.manage.confirm_disable_platform_1' | translate }}
- {{ 'plugins.manage.confirm_disable_platform_2' | translate }}
diff --git a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
index a8ffe5900..a3239cc05 100644
--- a/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/disable-plugin/disable-plugin.component.ts
@@ -1,15 +1,19 @@
-import { Component, Input } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Component, inject, Input } from '@angular/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './disable-plugin.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
-
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
}
diff --git a/ui/src/app/core/manage-plugins/donate/donate.component.html b/ui/src/app/core/manage-plugins/donate/donate.component.html
index 72b4e4797..5362d662b 100644
--- a/ui/src/app/core/manage-plugins/donate/donate.component.html
+++ b/ui/src/app/core/manage-plugins/donate/donate.component.html
@@ -20,12 +20,14 @@
{{ 'plugins.donate.message_1' | translate }}
{{ 'plugins.donate.message_2' | translate }}
-
-
- + @for (option of fundingOptions; track option) { +
- {{ option.url }} + }
-
+ @if (loading) {
+
-
-
+ } @if (!loading) {
+
+ @if (allPluginsSupported) {
+
-
All your plugins are marked as compatible with the new version of Homebridge.
You are all set to continue below.
+ } @if (!allPluginsSupported) {
+
+ }
+ }
Some of your plugins are not explicitly marked as compatible with the new version of Homebridge.
@@ -36,27 +40,31 @@
Homebridge v2 Update
To ignore this warning and continue with the update, click continue below.
-
-
- + @for (plugin of installedPlugins; track plugin) { +
- {{ plugin.name }} - + @if (plugin.hb2Ready === 'supported') { + - + } @if (plugin.hb2Ready === 'unknown') { + + } + }
diff --git a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
index 1d2ac39ab..d3cb62c83 100644
--- a/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
+++ b/ui/src/app/core/manage-plugins/hb-update-confirm/hb-update-confirm.component.ts
@@ -1,27 +1,28 @@
import { ApiService } from '@/app/core/api.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './hb-update-confirm.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class HbUpdateConfirmComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public installedPlugins: any = []
public allPluginsSupported = true
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.loadInstalledPlugins()
}
diff --git a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
index 7eb104594..6915876fd 100644
--- a/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
+++ b/ui/src/app/core/manage-plugins/interpolate-md.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'interpolateMd',
+ standalone: true,
})
export class InterpolateMdPipe implements PipeTransform {
transform(value: string): string {
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
index 91ae2cbb5..6cc325fd3 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.html
@@ -12,101 +12,112 @@
- {{ presentTenseVerb }}: {{ pluginName }}
-
-
- {{ 'platform.version.service_restart_required' | translate }} -
+ @if (actionComplete) { +
+ @if (justUpdatedPlugin) {
+
+ @if (!isDisabled) {
+
{{ 'platform.version.service_restart_required' | translate }}
+ }{{ 'plugins.manage.thanks_for_updating' | translate:{ pluginName: pluginName, targetVersion: targetVersion } }}
-
-
- - {{ 'restart.homebridge' | translate }} -
-- {{ 'restart.child_bridges' | translate }} -
+ @if (!isDisabled) { +
+ @if (['homebridge', 'homebridge-config-ui-x'].includes(pluginName) || childBridges.length === 0) {
+
- {{ 'restart.homebridge' | translate }}
+ } @if (!['homebridge', 'homebridge-config-ui-x'].includes(pluginName) && childBridges.length > 0) { +{{ 'restart.child_bridges' | translate }}
+ }
+ } @if (changeLog) {
+
+ }
+ } @if (!onlineUpdateOk) {
+
{{ 'plugins.manage.manual_update_required' | translate }}
{{ 'plugins.manage.online_updates' | translate }}
-
+ @if ($settings.env.serviceMode) {
+
+ }
- {{ 'plugins.manage.manual_update_command' | translate }}
-hb-service stop
-npm install -g {{ pluginName }}@{{targetVersion}}
-hb-service start
-
+ } @if (showReleaseNotes && !actionComplete) {
+
+ @if (release.name || latestVersion) {
+
+ }
-
diff --git a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.ts b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.ts
index a859f3aa1..110f5b5d0 100644
--- a/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/manage-plugin/manage-plugin.component.ts
@@ -4,22 +4,39 @@ import { HbUpdateConfirmComponent } from '@/app/core/manage-plugins/hb-update-co
import { PluginLogsComponent } from '@/app/core/manage-plugins/plugin-logs/plugin-logs.component'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
import { Router } from '@angular/router'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
+import { NgxMdModule } from 'ngx-md'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { Terminal } from 'xterm'
+
import { FitAddon } from 'xterm-addon-fit'
+import { PluginsMarkdownDirective } from '../../directives/plugins.markdown.directive'
@Component({
templateUrl: './manage-plugin.component.html',
styleUrls: ['./manage-plugin.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ TranslatePipe,
+ ],
})
export class ManagePluginComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() pluginName: string
@Input() targetVersion = 'latest'
@Input() latestVersion: string
@@ -46,16 +63,7 @@ export class ManagePluginComponent implements OnInit, OnDestroy {
private fitAddon = new FitAddon()
private errorLog = ''
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {
+ constructor() {
this.term.loadAddon(this.fitAddon)
}
diff --git a/ui/src/app/core/manage-plugins/manage-plugins.module.ts b/ui/src/app/core/manage-plugins/manage-plugins.module.ts
index 3f4156733..dd439c3a4 100644
--- a/ui/src/app/core/manage-plugins/manage-plugins.module.ts
+++ b/ui/src/app/core/manage-plugins/manage-plugins.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { CustomPluginsModule } from '@/app/core/manage-plugins/custom-plugins/custom-plugins.module'
import { DisablePluginComponent } from '@/app/core/manage-plugins/disable-plugin/disable-plugin.component'
import { DonateComponent } from '@/app/core/manage-plugins/donate/donate.component'
@@ -24,7 +23,16 @@ import { NgxMdModule } from 'ngx-md'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ NgxMdModule,
+ MonacoEditorModule,
+ NgbModule,
+ CustomPluginsModule,
PluginConfigComponent,
ManagePluginComponent,
UninstallPluginComponent,
@@ -40,18 +48,6 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
HbUpdateConfirmComponent,
SwitchToScopedComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- NgxMdModule,
- MonacoEditorModule,
- NgbModule,
- CoreModule,
- CustomPluginsModule,
- ],
providers: [
ManagePluginsService,
],
diff --git a/ui/src/app/core/manage-plugins/manage-plugins.service.ts b/ui/src/app/core/manage-plugins/manage-plugins.service.ts
index 76ff3d21c..2aa8feebd 100644
--- a/ui/src/app/core/manage-plugins/manage-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/manage-plugins.service.ts
@@ -10,7 +10,7 @@ import { ResetAccessoriesComponent } from '@/app/core/manage-plugins/reset-acces
import { SwitchToScopedComponent } from '@/app/core/manage-plugins/switch-to-scoped/switch-to-scoped.component'
import { UninstallPluginComponent } from '@/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component'
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -21,14 +21,12 @@ import { lt, minVersion } from 'semver'
providedIn: 'root',
})
export class ManagePluginsService {
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $customPluginsService: CustomPluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $customPluginsService = inject(CustomPluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
installPlugin(pluginName: string, targetVersion = 'latest') {
const ref = this.$modal.open(ManagePluginComponent, {
diff --git a/ui/src/app/core/manage-plugins/manage-version/manage-version.component.html b/ui/src/app/core/manage-plugins/manage-version/manage-version.component.html
index c412cc87b..acbd79a8e 100644
--- a/ui/src/app/core/manage-plugins/manage-version/manage-version.component.html
+++ b/ui/src/app/core/manage-plugins/manage-version/manage-version.component.html
@@ -12,71 +12,62 @@ - v{{ installedVersion }} → - {{ release.name }} - v{{ latestVersion }} + @if (installedVersion) { + v{{ installedVersion }} → + } @if (release.name) { + {{ release.name }} + } @if (!release.name) { + v{{ latestVersion }} + }
{{ 'plugins.manage.release_notes' | translate }}
{{ 'plugins.manage.install' | translate }}: {{ plugin.di
-
+ @if (loading) {
+
-
-
-
-
- {{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }} -
+ } @if (!loading) { +
+ @if (plugin.installedVersion) {
+
+ } @if (!plugin.installedVersion) {
+
+ } @if (plugin.installedVersion) {
+
+ }
{{ 'plugins.status_installed' | translate }}: v{{ plugin.installedVersion }}
+ }{{ 'plugins.manage.select_version' | translate }}:
-
-
- + @for (version of versionsWithTags; track version) { +
-
{{ version.tag }}
v{{ version.version }} -
+ }
-
{{ 'plugins.manage.all_versions' | translate }}-
-
+ @if (loading) {
+
-
-
+ } @if (!loading && !canConfigure) {
+
+ }
-
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
+ @if (!loading && canConfigure) {
+
diff --git a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
index 9002eb8ae..cf69b5f45 100644
--- a/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
+++ b/ui/src/app/core/manage-plugins/manual-config/manual-config.component.ts
@@ -4,19 +4,46 @@ import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebr
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { Router } from '@angular/router'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
+import { EditorComponent } from 'ngx-monaco-editor-v2'
+
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './manual-config.component.html',
styleUrls: ['./manual-config.component.scss'],
+ imports: [
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ EditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ManualConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
public pluginAlias: string
@@ -36,18 +63,6 @@ export class ManualConfigComponent implements OnInit {
public monacoEditor: any
public editorOptions: any
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- private $router: Router,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
get arrayKey() {
return this.pluginType === 'accessory' ? 'accessories' : 'platforms'
}
diff --git a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
index 53d154b86..1b96cdca4 100644
--- a/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-bridge/plugin-bridge.component.html
@@ -3,17 +3,18 @@
+ @for (block of pluginConfig; track block) {
+ }
+ }
{{ block.name || pluginAlias }}
+ @if (show === 'configBlock.' + $index) {
+ }
{{ 'child_bridge.bridge_settings' | translate }}: {{ plugin.displayName || plugin.name }}
+ @if (!justInstalled) { + }@@ -28,16 +29,20 @@
-
+ @if (configBlocks.length) {
+
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
-
- -
+ @if (configBlocks.length) {
+
+ @for (item of configBlocks; track item; let i = $index) {
+ -
- {{ item.name || item.accessory || item.platform }}
- - {{ item._bridge.name }}
+ {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) {
+ - {{ item._bridge.name }}
+ }
/>
-
-
+ @if (item._bridge?.username) {
+
+ @if (deviceInfo[item._bridge?.username] === false) {
+
{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}
-
+ } @if (deviceInfo[item._bridge?.username]) {
+
}"
>
{{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' :
- 'status.widget.qr_unpaired') | translate }}
-
- · {{ 'status.code_scan' | translate }}
-
+ 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) {
+ · {{ 'status.code_scan' | translate }}
+ }
-
+ @if ($settings.env.serviceMode) {
+
{{ 'child_bridge.config.header' | translate }}
-
+ @if (showConfigFields[i]) {
+
{{ 'child_bridge.config.description' | translate }}
{{ 'child_bridge.config.name' | translate }}
@@ -126,10 +135,8 @@
/>
-
+ @if (canShowBridgeDebug) {
+
{{ 'child_bridge.config.debug' | translate }} -D
/>
+ }
DEBUG
@@ -169,16 +177,22 @@
+ }
+ }
+ }
+ }
+ }
+ }
-
- {{ 'child_bridge.must_configure_plugin' | translate }}
-
-
+ } @if (!configBlocks.length && canConfigure) {
+ {{ 'child_bridge.must_configure_plugin' | translate }}
+ } @if (!canConfigure) {
+
{{ 'plugins.settings.message_manual_config_required' | translate }} {{
'plugins.settings.message_consult_documentation' | translate }}
@@ -189,49 +203,51 @@
+ }
-
+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion,
installedVersion: nodeInstalledVersion } }}
{{ 'plugins.compat.node_link' | translate }}
- -
+ } @if (!isValidHb) {
+
-
{{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion,
installedVersion: hbInstalledVersion } }}
+ }
{{ 'plugins.compat.are_you_sure' | translate }}
+ }
-
+ @if (plugin.name === 'homebridge') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ }
-
+ @if (plugin.name === 'homebridge-config-ui-x') {
+
- -
+ @if (!isValidNode) {
+
-
{{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion:
nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }}
{{ 'plugins.compat.node_link' | translate }}
+ }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
+ }
diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
index d26cf9756..fefe94e49 100644
--- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts
@@ -1,12 +1,18 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+
import { minVersion, SemVer } from 'semver'
@Component({
templateUrl: './plugin-compatibility.component.html',
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
-
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
this.nodeInstalledVersion = this.$settings.env.nodeVersion
diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
index aa7ac39cb..4c332dc37 100644
--- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
+++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html
@@ -16,24 +16,16 @@
-
@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
@@ -31,8 +38,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ NgClass,
+ NgbTooltip,
+ NgbAccordionToggle,
+ NgbAccordionButton,
+ NgbCollapse,
+ NgbAccordionCollapse,
+ NgbAccordionBody,
+ SchemaFormComponent,
+ HomebridgeDeconzComponent,
+ HomebridgeHueComponent,
+ TranslatePipe,
+ InterpolateMdPipe,
+ ],
})
export class PluginConfigComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $plugin = inject(ManagePluginsService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() schema: PluginSchema
@@ -48,16 +82,6 @@ export class PluginConfigComponent implements OnInit {
public formIsValid = true
public strictValidation = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
this.pluginType = this.schema.pluginType
diff --git a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
index 30bfcf7dc..0870e6a42 100644
--- a/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
+++ b/ui/src/app/core/manage-plugins/plugin-logs/plugin-logs.component.ts
@@ -2,39 +2,30 @@ import { ApiService } from '@/app/core/api.service'
import { ConfirmComponent } from '@/app/core/components/confirm/confirm.component'
import { LogService } from '@/app/core/log.service'
import { HttpErrorResponse, HttpResponse } from '@angular/common/http'
-import {
- Component,
- ElementRef,
- HostListener,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { Component, ElementRef, HostListener, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { saveAs } from 'file-saver'
import { ToastrService } from 'ngx-toastr'
import { Subject } from 'rxjs'
@Component({
templateUrl: './plugin-logs.component.html',
+ imports: [TranslatePipe],
})
export class PluginLogsComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $log = inject(LogService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
- @ViewChild('pluginlogoutput', { static: true }) termTarget: ElementRef
+ readonly termTarget = viewChild('pluginlogoutput')
private resizeEvent = new Subject()
private pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $log: LogService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
@HostListener('window:resize', ['$event'])
onWindowResize() {
this.resizeEvent.next(undefined)
@@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy {
this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({
next: (result) => {
this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name)
- this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias)
+ this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias)
},
error: (error) => {
console.error(error)
diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
index ac821a646..07d775395 100644
--- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
+++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html
@@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.clear_cache_bridge.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -26,7 +28,8 @@ {{ 'child_bridge.reset_accessories' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@ {{ 'child_bridge.reset_accessories' | translate }}
>
+ }
+ }
-
+ @if (loading) {
+
-
+ } @if (!loading && backupList && backupList.length) {
+
-
+ @for (backup of backupList; track backup) {
+
{{ backup.timestamp | date:'medium' }}
@@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ }
-
+ } @if (!loading && (!backupList || !backupList.length)) {
+
{{ 'config.restore.no_backups' | translate }}
+ }
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
index c9d24f728..71b9576a2 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts
@@ -1,13 +1,23 @@
import { ApiService } from '@/app/core/api.service'
-import { Component, OnInit } from '@angular/core'
+import { DatePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './config.restore.component.html',
+ imports: [
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class ConfigRestoreComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public loading = true
public backupList: {
id: string
@@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
next: (data: any[]) => {
diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html
index 6e4b3d930..fe45638c0 100644
--- a/ui/src/app/modules/login/login.component.html
+++ b/ui/src/app/modules/login/login.component.html
@@ -6,7 +6,8 @@
-
+@if ($settings.env.serviceMode) {
+
{{ 'settings.cache.title' | translate }}
- {{ 'settings.cache.desc' | translate }}
-
+ @if (showFields.cache) {
+ {{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
+ }
+}
@@ -531,8 +547,10 @@
{{ 'reset.bridges.title' | translate }}
- {{ 'reset.bridges.desc' | translate }}
-
+ @if (showFields.reset) {
+ {{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
+ }
diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts
index 961722f6b..0a3674b06 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone
import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component'
import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component'
import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component'
-import { Component, OnInit } from '@angular/core'
-import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
@Component({
templateUrl: './settings.component.html',
+ imports: [
+ NgClass,
+ RouterLink,
+ FormsModule,
+ ReactiveFormsModule,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SettingsComponent implements OnInit {
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $plugin = inject(ManagePluginsService)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public originalServiceForm = {
HOMEBRIDGE_DEBUG: false,
HOMEBRIDGE_KEEP_ORPHANS: false,
@@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit {
public legacyMdnsFormControl = new UntypedFormControl(false)
public showAvahiMdnsOption = false
public showResolvedMdnsOption = false
- public availableNetworkAdapters: Record = []
- public bridgeNetworkAdapters: Record = []
+ public availableNetworkAdapters: any[] = []
+ public bridgeNetworkAdapters: string[] = []
public hbPortFormControl = new FormControl(0)
public isHbV2 = false
public showFields = {
@@ -77,15 +94,6 @@ export class SettingsComponent implements OnInit {
cache: true,
}
- constructor(
- private $api: ApiService,
- private $modal: NgbModal,
- private $plugin: ManagePluginsService,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
this.initUiSettingsForm()
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 4d8de9551..96f03aa24 100644
--- a/ui/src/app/modules/settings/settings.module.ts
+++ b/ui/src/app/modules/settings/settings.module.ts
@@ -15,7 +15,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule,
+ NgbModule,
+ SettingsRoutingModule,
SettingsComponent,
UnpairAllBridgesComponent,
UnpairSingleBridgeComponent,
@@ -26,13 +32,5 @@ import { TranslateModule } from '@ngx-translate/core'
RestoreComponent,
BackupComponent,
],
- imports: [
- CommonModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule,
- NgbModule,
- SettingsRoutingModule,
- ],
})
export class SettingsModule {}
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
index a08d1ae72..50f9e4c47 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.html
@@ -46,8 +46,11 @@ {{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()"
[disabled]="clicked"
>
- {{ 'form.button_reset' | translate }}
-
+ @if (!clicked) {
+ {{ 'form.button_reset' | translate }}
+ } @if (clicked) {
+
+ }
diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
index 2356ddd55..818e7be0b 100644
--- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
+++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts
@@ -1,23 +1,25 @@
import { ApiService } from '@/app/core/api.service'
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { Router } from '@angular/router'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
templateUrl: './unpair-all-bridges.component.html',
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
- public clicked: boolean
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public clicked: boolean
onResetHomebridgeAccessoryClick() {
this.clicked = true
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
index 389812156..afbded8af 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html
@@ -13,11 +13,13 @@ {{ 'reset.bridges_single.title' | translate }}
-
+ @if (pairings.length === 0) {
+
{{ 'reset.bridges.empty' | translate }}
-
+ } @if (pairings.length > 0) {
+
@@ -27,7 +29,8 @@ {{ 'reset.bridges_single.title' | translate }}
- -
+ @for (item of pairings; track item) {
+
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@ {{ 'reset.bridges_single.title' | translate }}
>
+ }
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
index e63ca7a58..1df084ffc 100644
--- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
+++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts
@@ -1,27 +1,32 @@
import { ApiService } from '@/app/core/api.service'
import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './unpair-single-bridge.component.html',
+ imports: [
+ NgbAlert,
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class UnpairSingleBridgeComponent implements OnInit, OnDestroy {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public pairings: any[] = []
public deleting: null | string = null
private unpaired = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.loadPairings()
}
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
index 3e5d62903..347b3ec01 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts
@@ -1,11 +1,10 @@
-import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SetupWizardComponent,
+ loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent),
},
]
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
index a67c5a890..c04defa4d 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html
@@ -1,6 +1,7 @@
-
+ @if (step === 'welcome') {
+
{{ 'setup.welcome_to_homebridge' | translate }}
-
-
+ } @if (step === 'create-account') {
+
{{ 'setup.create_account' | translate }}
-
{{ 'setup.create_account_reason' | translate }}
-
{{ 'setup.create_account' | translate }}
/>
-
{{ 'setup.create_account' | translate }}
/>
-
-
-
+ } @if (step === 'restore-backup') {
+
{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-
{{ 'form.button_restore' | translate }}
{{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}
-
-
-
-
+ } @if (step === 'restarting') {
+
-
-
+ } @if (step === 'setup-complete') {
+
{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
+ }
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
index 66b2bedd6..3fa2729a3 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts
@@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { SettingsService } from '@/app/core/settings.service'
import { RestoreComponent } from '@/app/modules/settings/restore/restore.component'
import { environment } from '@/environments/environment'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'
import { Title } from '@angular/platform-browser'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './setup-wizard.component.html',
styleUrls: ['./setup-wizard.component.scss'],
+ imports: [
+ FormsModule,
+ ReactiveFormsModule,
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class SetupWizardComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $settings = inject(SettingsService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public previousTitle: string
public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome'
@@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy {
public selectedFile: File
public restoreUploading = false
- constructor(
- private $api: ApiService,
- private $auth: AuthService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
-
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
this.$title.setTitle('Setup Homebridge')
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
index 760807712..cb8a721d0 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts
@@ -1,5 +1,5 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { CanActivate, Router } from '@angular/router'
import { firstValueFrom } from 'rxjs'
@@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs'
providedIn: 'root',
})
export class SetupWizardGuard implements CanActivate {
- constructor(
- private $router: Router,
- private $settings: SettingsService,
- ) {}
+ private $router = inject(Router)
+ private $settings = inject(SettingsService)
async canActivate(): Promise {
if (!this.$settings.settingsLoaded) {
diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
index db449d2bb..1e62691a2 100644
--- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
+++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
@@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SetupWizardComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule,
NgbModule,
- CoreModule,
SetupWizardRoutingModule,
+ SetupWizardComponent,
],
providers: [
SetupWizardGuard,
diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts
index 20777ba7c..6486c0604 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,11 @@
-import { Component } from '@angular/core'
+import { Component, inject } from '@angular/core'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './credits.component.html',
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
}
diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html
index 547e69fb2..251cae0e5 100644
--- a/ui/src/app/modules/status/status.component.html
+++ b/ui/src/app/modules/status/status.component.html
@@ -3,7 +3,8 @@
{{ 'menu.label_status' | translate }}
-
+ @if (consoleStatus === 'up' && $auth.user.admin) {
+
-
+ } @if (consoleStatus === 'up' && $auth.user.admin) {
+
+ }
-
-
-
-
-
-
-
-
+ @if (dashboard.length) {
+
+ @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) {
+
+
+ @if (options.draggable.enabled) {
+
+ }
+
+
+ } }
+ }
diff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts
index 788111b98..02e26cc23 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { GridsterConfig, GridsterItem } from 'angular-gridster2'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2'
import { firstValueFrom, Subject } from 'rxjs'
+
import { take } from 'rxjs/operators'
+import { SpinnerComponent } from '../../core/components/spinner/spinner.component'
+import { WidgetsComponent } from './widgets/widgets.component'
@Component({
templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'],
+ imports: [
+ NgbTooltip,
+ SpinnerComponent,
+ GridsterComponent,
+ GridsterItemComponent,
+ WidgetsComponent,
+ TranslatePipe,
+ ],
})
export class StatusComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
public saveWidgetsEvent = new Subject()
public options: GridsterConfig
public dashboard: Array = []
@@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy {
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
this.options = {
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index e2853ed93..a3fd6b159 100644
--- a/ui/src/app/modules/status/status.module.ts
+++ b/ui/src/app/modules/status/status.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
import { StatusComponent } from '@/app/modules/status/status.component'
@@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
+ imports: [
+ CommonModule,
+ RouterModule,
+ FormsModule,
+ ReactiveFormsModule,
+ TranslateModule.forChild(),
+ NgbModule,
+ GridsterModule,
+ DragulaModule,
+ BaseChartDirective,
+ AccessoriesCoreModule,
+ ManagePluginsModule,
StatusComponent,
WidgetsComponent,
WidgetVisibilityComponent,
@@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula'
HomekitBridgesWidgetComponent,
CreditsComponent,
],
- imports: [
- CommonModule,
- RouterModule,
- FormsModule,
- ReactiveFormsModule,
- TranslateModule.forChild(),
- NgbModule,
- GridsterModule,
- DragulaModule,
- BaseChartDirective,
- CoreModule,
- AccessoriesCoreModule,
- ManagePluginsModule,
- ],
providers: [
provideCharts(withDefaultRegisterables()),
],
diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts
index 16878799c..56454763c 100644
--- a/ui/src/app/modules/status/widget-control/widget-control.component.ts
+++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts
@@ -1,9 +1,11 @@
import { ApiService } from '@/app/core/api.service'
import { environment } from '@/environments/environment'
+import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { firstValueFrom, Observable, of } from 'rxjs'
import {
catchError,
@@ -16,8 +18,24 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ imports: [
+ NgSwitch,
+ FormsModule,
+ NgSwitchCase,
+ NgClass,
+ NgbTypeahead,
+ NgFor,
+ NgIf,
+ DatePipe,
+ TranslatePipe,
+ ],
})
export class WidgetControlComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+
@Input() widget: any
// weather
@@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
-
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
debounceTime(300),
diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
index 2f3ef332a..b8a1ab235 100644
--- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
+++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html
@@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
-
- -
+ @if (availableWidgets.length) {
+
+ @for (widget of availableWidgets; track widget) {
+ -
{{ widget.name }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
index a0d250558..3c22c3c82 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts
@@ -1,13 +1,9 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ UpperCasePipe,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class CpuWidgetComponent implements OnInit, OnDestroy {
+ $settings = inject(SettingsService)
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public cpu = {} as any
public cpuTemperature = {} as any
@@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
getServerCpuInfo() {
this.io.request('get-server-cpu-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
index 167edb92e..f518a1414 100644
--- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
+++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html
@@ -2,9 +2,11 @@
-
+ @if (setupUri) {
+
('pincode')
+ readonly qrcodeContainerElement = viewChild('qrcodecontainer')
@Input() resizeEvent: Subject
@@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit {
}
resizeQrCode() {
- const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight
- const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth
- const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight
+ const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight
+ const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth
+ const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight
this.qrCodeHeight = containerHeight - pinCodeHeight
this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth
diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
index 3d75f21e1..5230284a7 100644
--- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts
@@ -1,22 +1,24 @@
import { LogService } from '@/app/core/log.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './homebridge-logs-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('logoutput', { static: true }) termTarget: ElementRef
+ private $log = inject(LogService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('logoutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$log.startTerminal(this.termTarget, {
+ this.$log.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
index 1d378e64b..bd1a273ca 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html
@@ -23,9 +23,9 @@
Homebridge
+ @if (homebridgeStatus.status === 'up') {
-
+ } @if (homebridgeStatus.status !== 'up') {
+
+ }
-
+ @for (bridge of childBridges; track bridge) {
+
+ }
diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
index 236de9c84..49b906d04 100644
--- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts
@@ -1,15 +1,27 @@
import { ApiService } from '@/app/core/api.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homekit-bridges-widget.component.html',
styleUrls: ['./homekit-bridges-widget.component.scss'],
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgeStatus = {} as any
@@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy {
private ioMain: IoNamespace
private ioChild: IoNamespace
- constructor(
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit(): Promise {
this.ioMain = this.$ws.getExistingNamespace('status')
this.ioMain.socket.on('homebridge-status', (data) => {
diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
index f8442203f..5fdb43f88 100644
--- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class MemoryWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public totalMemory: number
public freeMemory: number
@@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
getServerMemoryInfo() {
this.io.request('get-server-memory-info').subscribe((data) => {
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
index df4dcaa45..c4dc643f4 100644
--- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts
@@ -1,12 +1,7 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { DecimalPipe, NgClass } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { ChartConfiguration } from 'chart.js'
import { BaseChartDirective } from 'ng2-charts'
import { interval, Subscription } from 'rxjs'
@@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ imports: [
+ NgClass,
+ BaseChartDirective,
+ DecimalPipe,
+ TranslatePipe,
+ ],
})
export class NetworkWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() public widget: any
- @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective
- @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef
+ readonly chart = viewChild(BaseChartDirective)
+ readonly widgetBackground = viewChild('widgetbackground')
public interface: string
public receivedPerSec: number
@@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
// lookup the chart color based on the current theme
- const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor
+ const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor
if (userColor) {
this.lineChartOptions.elements.line.backgroundColor = userColor
this.lineChartOptions.elements.line.borderColor = userColor
@@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
this.interface = data.net.iface
this.lineChartData.datasets[0].data = { ...[] }
this.lineChartLabels = []
- this.chart.update()
+ this.chart().update()
}
this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8
@@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
}
this.updateData(data)
- this.chart.update()
+ this.chart().update()
})
}
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
index 6fc5d779b..996b6a8be 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html
@@ -2,44 +2,53 @@
{{ 'status.widget.info' | translate }}
-
+ @if (serverInfo) {
+
-
+ @if (serverInfo.os) {
+
{{ 'status.widget.info.os' | translate }}
-
- {{ serverInfo.os.codename }}
- {{ serverInfo.os.distro }}
-
-
+ @if (!serverInfo.homebridgeRunningInSynologyPackage) {
+
+ @switch (serverInfo.os.platform) { @case ('darwin') {
+ {{ serverInfo.os.codename }}
+ } @case ('win32') {
+ {{ serverInfo.os.distro }}
+ } @default {
+
+ @if (nodejsInfo.showGlibcUnsupportedWarning) {
+
- {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }})
+ } }
- Synology DSM
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+ Synology DSM
+ }
-
+ } @if (serverInfo.network.ip4) {
+
{{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip4 }}
-
+ } @if (serverInfo.network.ip6) {
+
{{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }})
{{ serverInfo.network.ip6 }}
-
+ } @if (serverInfo.os) {
+
{{ 'status.widget.info.hostname' | translate }}
{{ serverInfo.os.hostname }}
+ }
{{ 'status.widget.info.service_user' | translate }}
{{ serverInfo.serviceUser }}
@@ -68,15 +77,18 @@
{{ 'status.widget.info.timezone' | translate }}
{{ serverInfo.time.timezone }}
-
+ @if (serverInfo.homebridgeRunningInDocker) {
+
{{ 'status.widget.info.docker' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ 'status.widget.info.synology_package' | translate }}
{{ 'status.widget.info.yes' | translate }}
-
+ } @if (!serverInfo.homebridgeServiceMode) {
+
{{ 'status.widget.info.service_mode' | translate }}
@@ -85,7 +97,9 @@
{{ 'status.widget.info.disabled' | translate }}
+ }
+ }
diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
index 68887870d..9c95f4013 100644
--- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts
@@ -1,14 +1,24 @@
import { InformationComponent } from '@/app/core/components/information/information.component'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass, TitleCasePipe } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
templateUrl: './system-info-widget.component.html',
styleUrls: ['./system-info-widget.component.scss'],
+ imports: [
+ NgClass,
+ TitleCasePipe,
+ TranslatePipe,
+ ],
})
export class SystemInfoWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverInfo: any
@@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
index 7275a70f6..8db425fc0 100644
--- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts
@@ -1,22 +1,24 @@
import { TerminalService } from '@/app/core/terminal.service'
-import {
- Component,
- ElementRef,
- Input,
- OnDestroy,
- OnInit,
- ViewChild,
-} from '@angular/core'
+import { NgClass, NgStyle } from '@angular/common'
+import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { Subject } from 'rxjs'
import { ITerminalOptions } from 'xterm'
@Component({
templateUrl: './terminal-widget.component.html',
+ imports: [
+ NgClass,
+ NgStyle,
+ TranslatePipe,
+ ],
})
export class TerminalWidgetComponent implements OnInit, OnDestroy {
- @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef
- @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef
- @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef
+ private $terminal = inject(TerminalService)
+
+ readonly widgetContainerElement = viewChild('widgetcontainer')
+ readonly titleElement = viewChild('terminaltitle')
+ readonly termTarget = viewChild('terminaloutput')
@Input() widget: any
@Input() resizeEvent: Subject
@@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
-
ngOnInit() {
this.fontSize = this.widget.fontSize || 15
this.fontWeight = this.widget.fontWeight || 400
setTimeout(() => {
- this.$terminal.startTerminal(this.termTarget, {
+ this.$terminal.startTerminal(this.termTarget(), {
cursorBlink: false,
theme: {
background: '#2b2b2b',
@@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
}
getTerminalHeight(): number {
- const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight
- const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight
+ const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight
+ const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight
return widgetContainerHeight - titleHeight
}
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
index f47bc8965..d8f020831 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html
@@ -6,40 +6,41 @@
+ @if (homebridgePkg.installedVersion) {
Homebridge
- Homebridge
+ } @if (!homebridgePkg.installedVersion) {
+ Homebridge
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgePkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -47,39 +48,40 @@
+ @if (homebridgeUiPkg.installedVersion) {
Homebridge UI
- Homebridge UI
+ } @if (!homebridgeUiPkg.installedVersion) {
+ Homebridge UI
+ }
- {{ 'status.homebridge.checking' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ @if (!homebridgeUiPkg.installedVersion) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) {
{{ 'status.plugin_out_of_date' | translate }}
+ }
@@ -87,83 +89,63 @@
{{ 'menu.label_plugins' | translate }}
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!homebridgePluginStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) {
+
{{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
translate) : ('status.plugins_out_of_date' | translate) }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
Node.js
-
- {{ 'status.homebridge.checking' | translate }}
-
-
+ @if (!nodejsStatusDone) {
+ {{ 'status.homebridge.checking' | translate }}
+ } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{'status.plugin_out_of_date' | translate }}
-
+ } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ 'status.widget.info.node_unsupp' | translate }}
-
- {{ 'status.homebridge.up_to_date' | translate }}
-
+ } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) {
+ {{ 'status.homebridge.up_to_date' | translate }}
+ }
diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
index e1f3bac8b..6e5f1454a 100644
--- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts
@@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service'
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './update-centre-widget.component.html',
styleUrls: ['./update-centre-widget.component.scss'],
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class UpdateCentreWidgetComponent implements OnInit {
+ private $modal = inject(NgbModal)
+ $plugin = inject(ManagePluginsService)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public homebridgePkg = {} as any
@@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..edc583460 100644
--- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
@@ -1,11 +1,16 @@
import { IoNamespace, WsService } from '@/app/core/ws.service'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './uptime-widget.component.html',
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
index 5991d34a2..01ee4348a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html
@@ -2,19 +2,15 @@
{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}
-
+ @if (!this.widget.location || !this.widget.location.id) {
+
{{ 'status.widget.weather.label_config_required_help' | translate }}
-
+ } @if (widget.location && widget.location.id && currentWeather) {
+
@@ -25,4 +21,5 @@ {{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
+ }
diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
index c8d7a5d5d..fe3cc153a 100644
--- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts
@@ -1,15 +1,28 @@
+import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
+import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common'
import { HttpClient, HttpParams } from '@angular/common/http'
-import { Component, Input, OnDestroy, OnInit } from '@angular/core'
-import { TranslateService } from '@ngx-translate/core'
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
import { interval, Subject, Subscription } from 'rxjs'
@Component({
templateUrl: './weather-widget.component.html',
+ imports: [
+ NgClass,
+ DecimalPipe,
+ TitleCasePipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class WeatherWidgetComponent implements OnInit, OnDestroy {
+ private $http = inject(HttpClient)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
@Input() configureEvent: Subject
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
this.io.connected.subscribe(async () => {
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 197659004..7e3d7f9db 100644
--- a/ui/src/app/modules/status/widgets/widgets.component.ts
+++ b/ui/src/app/modules/status/widgets/widgets.component.ts
@@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component'
import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
-import {
- ApplicationRef,
- Component,
- ComponentFactoryResolver,
- ElementRef,
- EmbeddedViewRef,
- Injector,
- Input,
- OnDestroy,
- OnInit,
-} from '@angular/core'
+import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core'
@Component({
selector: 'app-widgets',
template: '',
+ standalone: true,
})
export class WidgetsComponent implements OnInit, OnDestroy {
+ private appRef = inject(ApplicationRef)
+ private componentFactoryResolver = inject(ComponentFactoryResolver)
+ private el = inject(ElementRef)
+ private injector = inject(Injector)
+
@Input() widget: any
private availableWidgets = {
@@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef: any
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
-
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) {
this.load(this.availableWidgets[this.widget.component])
diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts
index a295b3e5c..b6516d762 100644
--- a/ui/src/app/modules/support/support-routing.module.ts
+++ b/ui/src/app/modules/support/support-routing.module.ts
@@ -1,11 +1,10 @@
-import { SupportComponent } from '@/app/modules/support/support.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: SupportComponent,
+ loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent),
},
]
diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html
index 4e8c142db..28f2777d3 100644
--- a/ui/src/app/modules/support/support.component.html
+++ b/ui/src/app/modules/support/support.component.html
@@ -16,7 +16,8 @@
{{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
+ }
{{ 'support.dev.title' | translate }}
-
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
+ }
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts
index 166431e5f..02b8ede2e 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,13 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ imports: [
+ NgClass,
+ TranslatePipe,
+ ],
})
export class SupportComponent {
public showFields = {
diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts
index c592e6be0..08f15f6da 100644
--- a/ui/src/app/modules/support/support.module.ts
+++ b/ui/src/app/modules/support/support.module.ts
@@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- SupportComponent,
- ],
imports: [
CommonModule,
SupportRoutingModule,
NgbModule,
ReactiveFormsModule,
TranslateModule,
+ SupportComponent,
],
})
export class SupportModule {}
diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
index 22f2c2f79..a729cd829 100644
--- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
+++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html
@@ -23,9 +23,11 @@ {{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate"
/>
-
+ @if (invalidCredentials) {
+
{{ 'login.invalid_credentials' | translate }}
+ }
-
+ @for (user of homebridgeUsers; track user) {
+
@@ -23,30 +24,21 @@
-
+ }
diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts
index 34305e0fa..7cc59d053 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component'
import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component'
-import { Component, OnInit } from '@angular/core'
+import { Component, inject, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
- public homebridgeUsers: Array
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ public homebridgeUsers: Array
ngOnInit() {
this.$route.data.subscribe((data: { homebridgeUsers: Array }) => {
diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts
index f3039d4b0..4b68bbc9f 100644
--- a/ui/src/app/modules/users/users.module.ts
+++ b/ui/src/app/modules/users/users.module.ts
@@ -1,4 +1,3 @@
-import { CoreModule } from '@/app/core/core.module'
import { UsersComponent } from '@/app/modules/users/users.component'
import { UsersResolver } from '@/app/modules/users/users.resolver'
import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
@@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { TranslateModule } from '@ngx-translate/core'
@NgModule({
- declarations: [
- UsersComponent,
- UsersAddComponent,
- UsersEditComponent,
- Users2faEnableComponent,
- Users2faDisableComponent,
- ],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
TranslateModule.forChild(),
NgbModule,
- CoreModule,
UsersRoutingModule,
+ UsersComponent,
+ UsersAddComponent,
+ UsersEditComponent,
+ Users2faEnableComponent,
+ Users2faDisableComponent,
],
providers: [
UsersResolver,
diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts
index d9dcd2e72..6d328efcc 100644
--- a/ui/src/app/modules/users/users.resolver.ts
+++ b/ui/src/app/modules/users/users.resolver.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Resolve, Router } from '@angular/router'
import { TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
@@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class UsersResolver implements Resolve {
- constructor(
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
async resolve() {
try {
diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts
index 298b8f110..7e29556e5 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen
import { SettingsService } from '@/app/core/settings.service'
import { IoNamespace, WsService } from '@/app/core/ws.service'
import { environment } from '@/environments/environment'
-import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NgClass } from '@angular/common'
+import { Component, inject, OnInit } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { TranslateService } from '@ngx-translate/core'
import { firstValueFrom } from 'rxjs'
import { lt } from 'semver'
+import { SidebarComponent } from './sidebar/sidebar.component'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
+ imports: [
+ SidebarComponent,
+ NgClass,
+ RouterOutlet,
+ ],
})
export class LayoutComponent implements OnInit {
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $router = inject(Router)
+ $settings = inject(SettingsService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
public sidebarExpanded = false
private io: IoNamespace
- constructor(
- public $auth: AuthService,
- private $modal: NgbModal,
- private $router: Router,
- public $settings: SettingsService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
-
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
this.io.socket.on('reconnect', () => {
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index 622b13a00..5ea1136d2 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -53,7 +53,8 @@
-
+ @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) {
+
{{ 'rpi.throttled.undervoltage_title' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_plugins' | translate }}
+ }
-
+ @if ($auth.user.admin) {
+
{{ 'menu.linux.label_logs' | translate }}
-
-
+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) {
+
{{ 'menu.linux.label_terminal' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.config_json_editor' | translate }}
-
-
+ } @if ($auth.user.admin) {
+
{{ 'menu.label_settings' | translate }}
+ }
-
+ @if ($settings.formAuth) {
+
{{ 'menu.tooltip_logout' | translate }}
+ }
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
index bab0e77d7..ea47a883b 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { NotificationService } from '@/app/core/notification.service'
import { SettingsService } from '@/app/core/settings.service'
-import { Component, Input, OnInit, Renderer2 } from '@angular/core'
-import { NavigationEnd, Router } from '@angular/router'
+import { NgClass, NgOptimizedImage } from '@angular/common'
+import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core'
+import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router'
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ imports: [
+ NgOptimizedImage,
+ NgClass,
+ RouterLink,
+ RouterLinkActive,
+ TranslatePipe,
+ ],
})
export class SidebarComponent implements OnInit {
+ router = inject(Router)
+ translate = inject(TranslateService)
+ $auth = inject(AuthService)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $notification = inject(NotificationService)
+ private $translate = inject(TranslateService)
+ private renderer = inject(Renderer2)
+
@Input() isExpanded = false
public rPiCurrentlyUnderVoltage = false
@@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit {
public isMobile: any = false
public freezeMenu = false
- constructor(
- public router: Router,
- public translate: TranslateService,
- public $auth: AuthService,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $notification: NotificationService,
- private $translate: TranslateService,
- private renderer: Renderer2,
- ) {
+ constructor() {
+ const router = this.router
+
this.isMobile = this.$md.detect.mobile()
// ensure the menu closes when we navigate
diff --git a/ui/src/main.ts b/ui/src/main.ts
index f192d20b5..150123566 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,13 +1,63 @@
-import { AppModule } from '@/app/app.module'
-import { environment } from '@/environments/environment'
-import { enableProdMode } from '@angular/core'
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppRoutingModule } from '@/app/app-routing.module'
+import { AuthModule } from '@/app/core/auth/auth.module'
+import { supportedLocales } from '@/app/core/locales'
+import { onMonacoLoad } from '@/app/core/monaco-editor.service'
+import { LoginModule } from '@/app/modules/login/login.module'
+import { RestartModule } from '@/app/modules/restart/restart.module'
+import { StatusModule } from '@/app/modules/status/status.module'
+import { environment } from '@/environments/environment'
+import { NgOptimizedImage } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core'
+import { bootstrapApplication, BrowserModule } from '@angular/platform-browser'
+import { provideAnimations } from '@angular/platform-browser/animations'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DragulaModule } from 'ng2-dragula'
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
+import { ToastrModule } from 'ngx-toastr'
+import { AppComponent } from './app/app.component'
import '../../src/globalDefaults'
if (environment.production) {
enableProdMode()
}
-// eslint-disable-next-line no-console
-platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err))
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({
+ autoDismiss: true,
+ newestOnTop: false,
+ closeButton: true,
+ maxOpened: 2,
+ positionClass: 'toast-bottom-right',
+ }), NgbModule, MonacoEditorModule.forRoot({
+ defaultOptions: {
+ scrollBeyondLastLine: false,
+ quickSuggestions: true,
+ parameterHints: true,
+ formatOnType: true,
+ formatOnPaste: true,
+ folding: true,
+ minimap: {
+ enabled: false,
+ },
+ },
+ onMonacoLoad,
+ }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage),
+ {
+ provide: LOCALE_ID,
+ useFactory: (translate: TranslateService) => {
+ if (translate.currentLang in supportedLocales) {
+ return supportedLocales[translate.currentLang]
+ } else {
+ return 'en'
+ }
+ },
+ deps: [TranslateService],
+ },
+ provideAnimations(),
+ provideHttpClient(withInterceptorsFromDi()),
+ ],
+}).catch(err => console.log(err)) // eslint-disable-line no-console
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index b43e590ec..46b360e85 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -17,7 +17,6 @@
]
},
"declaration": false,
- "downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
{{ 'child_bridge.bridges_paired' | translate }}
{{ 'child_bridge.select_type' | translate }}:
--
-
-
+ @if (configBlocks.length) {
+
-
+ @for (item of configBlocks; track item; let i = $index) {
+
-
-
- {{ item.name || item.accessory || item.platform }} - - {{ item._bridge.name }} + {{ item.name || item.accessory || item.platform }} @if (enabledBlocks[i] && item._bridge?.name) { + - {{ item._bridge.name }} + }
/>-+ @if (item._bridge?.username) { ++ @if (deviceInfo[item._bridge?.username] === false) { +-{{ 'child_bridge.restart_homebridge' | translate }}
{{ 'child_bridge.return_to_pair' | translate }}+ } @if (deviceInfo[item._bridge?.username]) { +-+ } + } + }-}" > {{ (deviceInfo[item._bridge?.username]._isPaired ? 'status.widget.qr_paired' : - 'status.widget.qr_unpaired') | translate }} - - · {{ 'status.code_scan' | translate }} - + 'status.widget.qr_unpaired') | translate }} @if (!deviceInfo[item._bridge?.username]._isPaired) { + · {{ 'status.code_scan' | translate }} + } + @if ($settings.env.serviceMode) { ++ }+ }{{ 'child_bridge.config.header' | translate }}-+ @if (showConfigFields[i]) { ++ }-{{ 'child_bridge.config.description' | translate }}{{ 'child_bridge.config.name' | translate }} @@ -126,10 +135,8 @@/>
+ @if (canShowBridgeDebug) { +{{ 'child_bridge.config.debug' | translate }}+ }-D/>DEBUG
@@ -169,16 +177,22 @@- {{ 'child_bridge.must_configure_plugin' | translate }} - -+ } @if (!configBlocks.length && canConfigure) { ++ }{{ 'child_bridge.must_configure_plugin' | translate }} + } @if (!canConfigure) { +{{ 'plugins.settings.message_manual_config_required' | translate }} {{ 'plugins.settings.message_consult_documentation' | translate }} @@ -189,49 +203,51 @@ -+ @if (!['homebridge', 'homebridge-config-ui-x'].includes(plugin.name)) { ++ } --
-
- + @if (!isValidNode) { +
- {{ 'plugins.compat.node_too_low' | translate: { pluginName: plugin.name, minVersion: nodeMinVersion, installedVersion: nodeInstalledVersion } }} {{ 'plugins.compat.node_link' | translate }} -
- + } @if (!isValidHb) { +
- {{ 'plugins.compat.hb_too_low' | translate: { pluginName: plugin.name, minVersion: hbMinVersion, installedVersion: hbInstalledVersion } }} + }
{{ 'plugins.compat.are_you_sure' | translate }}
+ @if (plugin.name === 'homebridge') { +diff --git a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts index d26cf9756..fefe94e49 100644 --- a/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts +++ b/ui/src/app/core/manage-plugins/plugin-compatibility/plugin-compatibility.component.ts @@ -1,12 +1,18 @@ import { SettingsService } from '@/app/core/settings.service' -import { Component, Input, OnInit } from '@angular/core' +import { Component, inject, Input, OnInit } from '@angular/core' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe } from '@ngx-translate/core' + import { minVersion, SemVer } from 'semver' @Component({ templateUrl: './plugin-compatibility.component.html', + imports: [TranslatePipe], }) export class PluginCompatibilityComponent implements OnInit { + $activeModal = inject(NgbActiveModal) + private $settings = inject(SettingsService) + @Input() plugin: any @Input() isValidNode: boolean @Input() isValidHb: boolean @@ -17,11 +23,6 @@ export class PluginCompatibilityComponent implements OnInit { public hbMinVersion: SemVer public hbInstalledVersion: string - constructor( - public $activeModal: NgbActiveModal, - private $settings: SettingsService, - ) {} - ngOnInit(): void { this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node) this.nodeInstalledVersion = this.$settings.env.nodeVersion diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html index aa7ac39cb..4c332dc37 100644 --- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html +++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.html @@ -16,24 +16,16 @@+ } --
-
- + @if (!isValidNode) { +
- {{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion: nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge' } }} {{ 'plugins.compat.node_link' | translate }} + }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge' } }}
+ @if (plugin.name === 'homebridge-config-ui-x') { ++ }-
-
- + @if (!isValidNode) { +
- {{ 'plugins.compat.hb_node_too_low' | translate: { minVersion: nodeMinVersion, installedVersion: nodeInstalledVersion, latestVersion: plugin.latestVersion, packageName: 'Homebridge UI' } }} {{ 'plugins.compat.node_link' | translate }} + }
{{ 'plugins.compat.node_first' | translate: { packageName: 'Homebridge UI' } }}
--+ @if (schema.headerDisplay) { + + } -+ @if (pluginConfig.length && !schema.singular) { ++ @for (block of pluginConfig; track block; let i = $index) { +diff --git a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.ts b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.ts index 9d69b14c6..35658388b 100644 --- a/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.ts +++ b/ui/src/app/core/manage-plugins/plugin-config/plugin-config.component.ts @@ -1,14 +1,21 @@ import { ApiService } from '@/app/core/api.service' import { RestartChildBridgesComponent } from '@/app/core/components/restart-child-bridges/restart-child-bridges.component' import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component' +import { InterpolateMdPipe } from '@/app/core/manage-plugins/interpolate-md.pipe' import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service' import { SettingsService } from '@/app/core/settings.service' -import { Component, Input, OnInit } from '@angular/core' -import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { NgClass } from '@angular/common' +import { Component, inject, Input, OnInit } from '@angular/core' +import { NgbAccordionBody, NgbAccordionButton, NgbAccordionCollapse, NgbAccordionDirective, NgbAccordionHeader, NgbAccordionItem, NgbAccordionToggle, NgbActiveModal, NgbCollapse, NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' +import { NgxMdModule } from 'ngx-md' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' import { v4 as uuid } from 'uuid' +import { SchemaFormComponent } from '../../components/schema-form/schema-form.component' +import { PluginsMarkdownDirective } from '../../directives/plugins.markdown.directive' +import { HomebridgeDeconzComponent } from '../custom-plugins/homebridge-deconz/homebridge-deconz.component' +import { HomebridgeHueComponent } from '../custom-plugins/homebridge-hue/homebridge-hue.component' export interface PluginConfigBlock { config: Record+ } -+ }@@ -49,8 +41,8 @@
{{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) { + }+ @if (pluginConfig.length && schema.singular) { ++ }- - + @if (plugin.name==='homebridge-deconz') { + + } @if (plugin.name==='homebridge-hue') { + + } -+ @if (schema.footerDisplay) { + + } + @if (schema.singular) { openDelay="150" triggers="hover" > + }('pluginlogoutput') private resizeEvent = new Subject() private pluginAlias: string - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $log: LogService, - private $modal: NgbModal, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} - @HostListener('window:resize', ['$event']) onWindowResize() { this.resizeEvent.next(undefined) @@ -49,7 +40,7 @@ export class PluginLogsComponent implements OnInit, OnDestroy { this.$api.get(`/config-editor/plugin/${encodeURIComponent(this.plugin.name)}`).subscribe({ next: (result) => { this.pluginAlias = this.plugin.name === 'homebridge-config-ui-x' ? 'Homebridge UI' : (result[0]?.name || this.plugin.name) - this.$log.startTerminal(this.termTarget, {}, this.resizeEvent, this.pluginAlias) + this.$log.startTerminal(this.termTarget(), {}, this.resizeEvent, this.pluginAlias) }, error: (error) => { console.error(error) diff --git a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html index ac821a646..07d775395 100644 --- a/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html +++ b/ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html @@ -12,11 +12,13 @@ {{ 'child_bridge.reset_accessories' | translate }}
-+ @if (pairings.length === 0) { +-{{ 'reset.clear_cache_bridge.empty' | translate }}
+ } @if (pairings.length > 0) { ++ }-
@@ -26,7 +28,8 @@
{{ 'child_bridge.reset_accessories' | translate }}
-
-
- + @for (item of pairings; track item) { +
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -43,8 +46,10 @@{{ 'child_bridge.reset_accessories' | translate }}
>
+ }
-+ @if (loading) { +-+ } @if (!loading && backupList && backupList.length) { +
-
-+ @for (backup of backupList; track backup) { + {{ backup.timestamp | date:'medium' }} @@ -25,11 +28,14 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
+ } @if (!loading && (!backupList || !backupList.length)) { +diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts index c9d24f728..71b9576a2 100644 --- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts +++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.ts @@ -1,13 +1,23 @@ import { ApiService } from '@/app/core/api.service' -import { Component, OnInit } from '@angular/core' +import { DatePipe } from '@angular/common' +import { Component, inject, OnInit } from '@angular/core' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' @Component({ templateUrl: './config.restore.component.html', + imports: [ + DatePipe, + TranslatePipe, + ], }) export class ConfigRestoreComponent implements OnInit { + $activeModal = inject(NgbActiveModal) + private $api = inject(ApiService) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public loading = true public backupList: { id: string @@ -15,13 +25,6 @@ export class ConfigRestoreComponent implements OnInit { file: string }[] = [] - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} - ngOnInit() { this.$api.get('/config-editor/backups').subscribe({ next: (data: any[]) => { diff --git a/ui/src/app/modules/login/login.component.html b/ui/src/app/modules/login/login.component.html index 6e4b3d930..fe45638c0 100644 --- a/ui/src/app/modules/login/login.component.html +++ b/ui/src/app/modules/login/login.component.html @@ -6,7 +6,8 @@ -+ }{{ 'config.restore.no_backups' | translate }}
+@if ($settings.env.serviceMode) { +diff --git a/ui/src/app/modules/settings/settings.component.ts b/ui/src/app/modules/settings/settings.component.ts index 961722f6b..0a3674b06 100644 --- a/ui/src/app/modules/settings/settings.component.ts +++ b/ui/src/app/modules/settings/settings.component.ts @@ -9,18 +9,35 @@ import { RestoreComponent } from '@/app/modules/settings/restore/restore.compone import { SelectNetworkInterfacesComponent } from '@/app/modules/settings/select-network-interfaces/select-network-interfaces.component' import { UnpairAllBridgesComponent } from '@/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component' import { UnpairSingleBridgeComponent } from '@/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component' -import { Component, OnInit } from '@angular/core' -import { FormControl, FormGroup, UntypedFormControl } from '@angular/forms' +import { NgClass, TitleCasePipe } from '@angular/common' +import { Component, inject, OnInit } from '@angular/core' +import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms' +import { RouterLink } from '@angular/router' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' import { debounceTime } from 'rxjs/operators' @Component({ templateUrl: './settings.component.html', + imports: [ + NgClass, + RouterLink, + FormsModule, + ReactiveFormsModule, + TitleCasePipe, + TranslatePipe, + ], }) export class SettingsComponent implements OnInit { + private $api = inject(ApiService) + private $modal = inject(NgbModal) + private $plugin = inject(ManagePluginsService) + $settings = inject(SettingsService) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public originalServiceForm = { HOMEBRIDGE_DEBUG: false, HOMEBRIDGE_KEEP_ORPHANS: false, @@ -64,8 +81,8 @@ export class SettingsComponent implements OnInit { public legacyMdnsFormControl = new UntypedFormControl(false) public showAvahiMdnsOption = false public showResolvedMdnsOption = false - public availableNetworkAdapters: Record+}{{ 'settings.cache.title' | translate }}-{{ 'settings.cache.desc' | translate }}
--
+ @if (showFields.cache) {
+
-
{{ 'reset.clear_cache_single.title' | translate }}
@@ -514,7 +528,9 @@
{{ 'settings.cache.desc' | translate }}
+ } @if (showFields.cache) { +@@ -531,8 +547,10 @@-{{ 'reset.bridges.title' | translate }}
{{ 'reset.bridges.desc' | translate }}
--
+ @if (showFields.reset) {
+
-
{{ 'reset.bridges_single.title' | translate }}
@@ -562,5 +580,6 @@
{{ 'reset.bridges.desc' | translate }}
+ } @if (showFields.reset) { +{{ 'reset.bridges_all.title' | translate }}
(click)="onResetHomebridgeAccessoryClick()" [disabled]="clicked" > - {{ 'form.button_reset' | translate }} - + @if (!clicked) { + {{ 'form.button_reset' | translate }} + } @if (clicked) { + + } diff --git a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts index 2356ddd55..818e7be0b 100644 --- a/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts +++ b/ui/src/app/modules/settings/unpair-all-bridges/unpair-all-bridges.component.ts @@ -1,23 +1,25 @@ import { ApiService } from '@/app/core/api.service' -import { Component } from '@angular/core' +import { Component, inject } from '@angular/core' import { Router } from '@angular/router' -import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' @Component({ templateUrl: './unpair-all-bridges.component.html', + imports: [ + NgbAlert, + TranslatePipe, + ], }) export class UnpairAllBridgesComponent { - public clicked: boolean + $activeModal = inject(NgbActiveModal) + private $api = inject(ApiService) + private $route = inject(Router) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $route: Router, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} + public clicked: boolean onResetHomebridgeAccessoryClick() { this.clicked = true diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html index 389812156..afbded8af 100644 --- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html +++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html @@ -13,11 +13,13 @@{{ 'reset.bridges_single.title' | translate }}
-+ @if (pairings.length === 0) { +-{{ 'reset.bridges.empty' | translate }}
+ } @if (pairings.length > 0) { ++ }-
@@ -27,7 +29,8 @@
{{ 'reset.bridges_single.title' | translate }}
-
-
- + @for (item of pairings; track item) { +
-
{{ item.displayName }} ({{ item._main ? 'Homebridge' : (item._category | titlecase) }})
@@ -55,8 +58,10 @@{{ 'reset.bridges_single.title' | translate }}
>
+ }
diff --git a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts index e63ca7a58..1df084ffc 100644 --- a/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts +++ b/ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.ts @@ -1,27 +1,32 @@ import { ApiService } from '@/app/core/api.service' import { RestartHomebridgeComponent } from '@/app/core/components/restart-homebridge/restart-homebridge.component' -import { Component, OnDestroy, OnInit } from '@angular/core' -import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { NgClass, TitleCasePipe } from '@angular/common' +import { Component, inject, OnDestroy, OnInit } from '@angular/core' +import { NgbActiveModal, NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' @Component({ templateUrl: './unpair-single-bridge.component.html', + imports: [ + NgbAlert, + NgClass, + TitleCasePipe, + TranslatePipe, + ], }) export class UnpairSingleBridgeComponent implements OnInit, OnDestroy { + $activeModal = inject(NgbActiveModal) + private $api = inject(ApiService) + private $modal = inject(NgbModal) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public pairings: any[] = [] public deleting: null | string = null private unpaired = false - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $modal: NgbModal, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} - ngOnInit(): void { this.loadPairings() } diff --git a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts index 3e5d62903..347b3ec01 100644 --- a/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts +++ b/ui/src/app/modules/setup-wizard/setup-wizard-routing.module.ts @@ -1,11 +1,10 @@ -import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component' import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' const routes: Routes = [ { path: '', - component: SetupWizardComponent, + loadComponent: () => import('@/app/modules/setup-wizard/setup-wizard.component').then(m => m.SetupWizardComponent), }, ] diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.html b/ui/src/app/modules/setup-wizard/setup-wizard.component.html index a67c5a890..c04defa4d 100644 --- a/ui/src/app/modules/setup-wizard/setup-wizard.component.html +++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.html @@ -1,6 +1,7 @@-+ @if (step === 'welcome') { +- -
{{ 'setup.welcome_to_homebridge' | translate }}
+ } @if (step === 'create-account') { +- -
{{ 'setup.create_account' | translate }}
--{{ 'setup.create_account_reason' | translate }}
{{ 'setup.create_account' | translate }} />-{{ 'setup.create_account' | translate }} />-+ } @if (step === 'restore-backup') { +- -{{ 'setup.create_account' | translate }}
/>
{{ 'form.button_restore' | translate }}
{{ 'backup.restore_help_one' | translate }}
-{{ 'form.button_restore' | translate }} {{ selectedFile?.name || 'backup.label_choose_backup_file_to_restore' | translate }}--+ } @if (step === 'restarting') { +diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts index 66b2bedd6..3fa2729a3 100644 --- a/ui/src/app/modules/setup-wizard/setup-wizard.component.ts +++ b/ui/src/app/modules/setup-wizard/setup-wizard.component.ts @@ -3,19 +3,36 @@ import { AuthService } from '@/app/core/auth/auth.service' import { SettingsService } from '@/app/core/settings.service' import { RestoreComponent } from '@/app/modules/settings/restore/restore.component' import { environment } from '@/environments/environment' -import { Component, OnDestroy, OnInit } from '@angular/core' -import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms' +import { NgClass } from '@angular/common' +import { Component, inject, OnDestroy, OnInit } from '@angular/core' +import { AbstractControl, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms' import { Title } from '@angular/platform-browser' +import { RouterLink } from '@angular/router' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' @Component({ templateUrl: './setup-wizard.component.html', styleUrls: ['./setup-wizard.component.scss'], + imports: [ + FormsModule, + ReactiveFormsModule, + NgClass, + RouterLink, + TranslatePipe, + ], }) export class SetupWizardComponent implements OnInit, OnDestroy { + private $api = inject(ApiService) + private $auth = inject(AuthService) + private $modal = inject(NgbModal) + private $settings = inject(SettingsService) + private $title = inject(Title) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public previousTitle: string public step: 'welcome' | 'create-account' | 'setup-complete' | 'restore-backup' | 'restarting' = 'welcome' @@ -30,16 +47,6 @@ export class SetupWizardComponent implements OnInit, OnDestroy { public selectedFile: File public restoreUploading = false - constructor( - private $api: ApiService, - private $auth: AuthService, - private $modal: NgbModal, - private $settings: SettingsService, - private $title: Title, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} - ngOnInit(): void { this.previousTitle = this.$title.getTitle() this.$title.setTitle('Setup Homebridge') diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts index 760807712..cb8a721d0 100644 --- a/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts +++ b/ui/src/app/modules/setup-wizard/setup-wizard.guard.ts @@ -1,5 +1,5 @@ import { SettingsService } from '@/app/core/settings.service' -import { Injectable } from '@angular/core' +import { inject, Injectable } from '@angular/core' import { CanActivate, Router } from '@angular/router' import { firstValueFrom } from 'rxjs' @@ -7,10 +7,8 @@ import { firstValueFrom } from 'rxjs' providedIn: 'root', }) export class SetupWizardGuard implements CanActivate { - constructor( - private $router: Router, - private $settings: SettingsService, - ) {} + private $router = inject(Router) + private $settings = inject(SettingsService) async canActivate(): Promise- -
+ } @if (step === 'setup-complete') { ++ }{{ 'setup_wizard_message_complete_title' | translate }}{{ 'setup_wizard_message_complete_message' | translate }}
{{ 'setup.open_dashboard' | translate }}
{ if (!this.$settings.settingsLoaded) { diff --git a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts index db449d2bb..1e62691a2 100644 --- a/ui/src/app/modules/setup-wizard/setup-wizard.module.ts +++ b/ui/src/app/modules/setup-wizard/setup-wizard.module.ts @@ -1,4 +1,3 @@ -import { CoreModule } from '@/app/core/core.module' import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component' import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard' import { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module' @@ -9,17 +8,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap' import { TranslateModule } from '@ngx-translate/core' @NgModule({ - declarations: [ - SetupWizardComponent, - ], imports: [ CommonModule, FormsModule, ReactiveFormsModule, TranslateModule, NgbModule, - CoreModule, SetupWizardRoutingModule, + SetupWizardComponent, ], providers: [ SetupWizardGuard, diff --git a/ui/src/app/modules/status/credits/credits.component.ts b/ui/src/app/modules/status/credits/credits.component.ts index 20777ba7c..6486c0604 100644 --- a/ui/src/app/modules/status/credits/credits.component.ts +++ b/ui/src/app/modules/status/credits/credits.component.ts @@ -1,11 +1,11 @@ -import { Component } from '@angular/core' +import { Component, inject } from '@angular/core' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe } from '@ngx-translate/core' @Component({ templateUrl: './credits.component.html', + imports: [TranslatePipe], }) export class CreditsComponent { - constructor( - public $activeModal: NgbActiveModal, - ) {} + $activeModal = inject(NgbActiveModal) } diff --git a/ui/src/app/modules/status/status.component.html b/ui/src/app/modules/status/status.component.html index 547e69fb2..251cae0e5 100644 --- a/ui/src/app/modules/status/status.component.html +++ b/ui/src/app/modules/status/status.component.html @@ -3,7 +3,8 @@ {{ 'menu.label_status' | translate }}
-+ @if (consoleStatus === 'up' && $auth.user.admin) { +-+ } @if (consoleStatus === 'up' && $auth.user.admin) { ++ }-+ @if (consoleStatus === 'down') { + + } -- - + @if (dashboard.length) { +- -- --- + @for (item of dashboard; track item) { @if (!(item.hideOnMobile && page.mobile)) { + + }+ + } }+ @if (options.draggable.enabled) { + + } +++ diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts index a0d250558..3c22c3c82 100644 --- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts +++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.ts @@ -1,13 +1,9 @@ +import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe' import { SettingsService } from '@/app/core/settings.service' import { IoNamespace, WsService } from '@/app/core/ws.service' -import { - Component, - ElementRef, - Input, - OnDestroy, - OnInit, - ViewChild, -} from '@angular/core' +import { DecimalPipe, NgClass, UpperCasePipe } from '@angular/common' +import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' import { ChartConfiguration } from 'chart.js' import { BaseChartDirective } from 'ng2-charts' import { interval, Subscription } from 'rxjs' @@ -15,12 +11,23 @@ import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './cpu-widget.component.html', styleUrls: ['./cpu-widget.component.scss'], + imports: [ + NgClass, + BaseChartDirective, + UpperCasePipe, + DecimalPipe, + TranslatePipe, + ConvertTempPipe, + ], }) export class CpuWidgetComponent implements OnInit, OnDestroy { + $settings = inject(SettingsService) + private $ws = inject(WsService) + @Input() public widget: any - @ViewChild(BaseChartDirective, { static: true }) private chart: BaseChartDirective - @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef + readonly chart = viewChild(BaseChartDirective) + readonly widgetBackground = viewChilddiff --git a/ui/src/app/modules/status/status.component.ts b/ui/src/app/modules/status/status.component.ts index 788111b98..02e26cc23 100644 --- a/ui/src/app/modules/status/status.component.ts +++ b/ui/src/app/modules/status/status.component.ts @@ -5,17 +5,35 @@ import { IoNamespace, WsService } from '@/app/core/ws.service' import { CreditsComponent } from '@/app/modules/status/credits/credits.component' import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component' import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component' -import { Component, OnDestroy, OnInit } from '@angular/core' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { GridsterConfig, GridsterItem } from 'angular-gridster2' +import { Component, inject, OnDestroy, OnInit } from '@angular/core' +import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe } from '@ngx-translate/core' +import { GridsterComponent, GridsterConfig, GridsterItem, GridsterItemComponent } from 'angular-gridster2' import { firstValueFrom, Subject } from 'rxjs' + import { take } from 'rxjs/operators' +import { SpinnerComponent } from '../../core/components/spinner/spinner.component' +import { WidgetsComponent } from './widgets/widgets.component' @Component({ templateUrl: './status.component.html', styleUrls: ['./status.component.scss'], + imports: [ + NgbTooltip, + SpinnerComponent, + GridsterComponent, + GridsterItemComponent, + WidgetsComponent, + TranslatePipe, + ], }) export class StatusComponent implements OnInit, OnDestroy { + $auth = inject(AuthService) + private $modal = inject(NgbModal) + private $notification = inject(NotificationService) + $settings = inject(SettingsService) + private $ws = inject(WsService) + public saveWidgetsEvent = new Subject() public options: GridsterConfig public dashboard: Array= [] @@ -26,14 +44,6 @@ export class StatusComponent implements OnInit, OnDestroy { private io: IoNamespace - constructor( - public $auth: AuthService, - private $modal: NgbModal, - private $notification: NotificationService, - public $settings: SettingsService, - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.connectToNamespace('status') this.options = { diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts index e2853ed93..a3fd6b159 100644 --- a/ui/src/app/modules/status/status.module.ts +++ b/ui/src/app/modules/status/status.module.ts @@ -1,5 +1,5 @@ import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module' -import { CoreModule } from '@/app/core/core.module' + import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module' import { CreditsComponent } from '@/app/modules/status/credits/credits.component' import { StatusComponent } from '@/app/modules/status/status.component' @@ -30,7 +30,18 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2 import { DragulaModule } from 'ng2-dragula' @NgModule({ - declarations: [ + imports: [ + CommonModule, + RouterModule, + FormsModule, + ReactiveFormsModule, + TranslateModule.forChild(), + NgbModule, + GridsterModule, + DragulaModule, + BaseChartDirective, + AccessoriesCoreModule, + ManagePluginsModule, StatusComponent, WidgetsComponent, WidgetVisibilityComponent, @@ -50,20 +61,6 @@ import { DragulaModule } from 'ng2-dragula' HomekitBridgesWidgetComponent, CreditsComponent, ], - imports: [ - CommonModule, - RouterModule, - FormsModule, - ReactiveFormsModule, - TranslateModule.forChild(), - NgbModule, - GridsterModule, - DragulaModule, - BaseChartDirective, - CoreModule, - AccessoriesCoreModule, - ManagePluginsModule, - ], providers: [ provideCharts(withDefaultRegisterables()), ], diff --git a/ui/src/app/modules/status/widget-control/widget-control.component.ts b/ui/src/app/modules/status/widget-control/widget-control.component.ts index 16878799c..56454763c 100644 --- a/ui/src/app/modules/status/widget-control/widget-control.component.ts +++ b/ui/src/app/modules/status/widget-control/widget-control.component.ts @@ -1,9 +1,11 @@ import { ApiService } from '@/app/core/api.service' import { environment } from '@/environments/environment' +import { DatePipe, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase } from '@angular/common' import { HttpClient, HttpParams } from '@angular/common/http' -import { Component, Input, OnInit } from '@angular/core' -import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { Component, inject, Input, OnInit } from '@angular/core' +import { FormsModule } from '@angular/forms' +import { NgbActiveModal, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { firstValueFrom, Observable, of } from 'rxjs' import { catchError, @@ -16,8 +18,24 @@ import { @Component({ templateUrl: './widget-control.component.html', + imports: [ + NgSwitch, + FormsModule, + NgSwitchCase, + NgClass, + NgbTypeahead, + NgFor, + NgIf, + DatePipe, + TranslatePipe, + ], }) export class WidgetControlComponent implements OnInit { + $activeModal = inject(NgbActiveModal) + private $api = inject(ApiService) + private $http = inject(HttpClient) + private $translate = inject(TranslateService) + @Input() widget: any // weather @@ -57,13 +75,6 @@ export class WidgetControlComponent implements OnInit { public networkInterfaces: string[] = [] - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $http: HttpClient, - private $translate: TranslateService, - ) {} - public searchCountryCodes = (text$: Observable ) => text$.pipe( debounceTime(300), diff --git a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html index 2f3ef332a..b8a1ab235 100644 --- a/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html +++ b/ui/src/app/modules/status/widget-visibility/widget-visibility.component.html @@ -12,11 +12,10 @@ {{ 'status.widget.show_hide' | translate }}
--
-
-
+ @if (availableWidgets.length) {
+
-
+ @for (widget of availableWidgets; track widget) {
+
- {{ widget.name }} + }
('widgetbackground') public cpu = {} as any public cpuTemperature = {} as any @@ -72,15 +79,10 @@ export class CpuWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - public $settings: SettingsService, - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.getExistingNamespace('status') // lookup the chart color based on the current theme - const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor + const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor if (userColor) { this.lineChartOptions.elements.line.backgroundColor = userColor this.lineChartOptions.elements.line.borderColor = userColor @@ -114,7 +116,7 @@ export class CpuWidgetComponent implements OnInit, OnDestroy { getServerCpuInfo() { this.io.request('get-server-cpu-info').subscribe((data) => { this.updateData(data) - this.chart.update() + this.chart().update() }) } diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html index 167edb92e..f518a1414 100644 --- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html +++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.html @@ -2,9 +2,11 @@ ---+ @if (setupUri) { ++ }diff --git a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.ts b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.ts index b53371fa4..376b3f2c5 100644 --- a/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.ts +++ b/ui/src/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component.ts @@ -1,13 +1,23 @@ import { IoNamespace, WsService } from '@/app/core/ws.service' -import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core' +import { NgStyle } from '@angular/common' +import { Component, ElementRef, inject, Input, OnInit, viewChild } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' import { Subject } from 'rxjs' +import { QrcodeComponent } from '../../../../core/components/qrcode/qrcode.component' @Component({ templateUrl: './hap-qrcode-widget.component.html', + imports: [ + NgStyle, + QrcodeComponent, + TranslatePipe, + ], }) export class HapQrcodeWidgetComponent implements OnInit { - @ViewChild('pincode', { static: true }) pincodeElement: ElementRef - @ViewChild('qrcodecontainer', { static: true }) qrcodeContainerElement: ElementRef + private $ws = inject(WsService) + + readonly pincodeElement = viewChild('pincode') + readonly qrcodeContainerElement = viewChild ('qrcodecontainer') @Input() resizeEvent: Subject @@ -18,10 +28,6 @@ export class HapQrcodeWidgetComponent implements OnInit { private io: IoNamespace - constructor( - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.getExistingNamespace('status') @@ -48,9 +54,9 @@ export class HapQrcodeWidgetComponent implements OnInit { } resizeQrCode() { - const containerHeight = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetHeight - const containerWidth = (this.qrcodeContainerElement.nativeElement as HTMLElement).offsetWidth - const pinCodeHeight = (this.pincodeElement.nativeElement as HTMLElement).offsetHeight + const containerHeight = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetHeight + const containerWidth = (this.qrcodeContainerElement().nativeElement as HTMLElement).offsetWidth + const pinCodeHeight = (this.pincodeElement().nativeElement as HTMLElement).offsetHeight this.qrCodeHeight = containerHeight - pinCodeHeight this.qrCodeWidth = containerWidth > this.qrCodeHeight ? this.qrCodeHeight : containerWidth diff --git a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts index 3d75f21e1..5230284a7 100644 --- a/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts +++ b/ui/src/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component.ts @@ -1,22 +1,24 @@ import { LogService } from '@/app/core/log.service' -import { - Component, - ElementRef, - Input, - OnDestroy, - OnInit, - ViewChild, -} from '@angular/core' +import { NgClass, NgStyle } from '@angular/common' +import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' import { Subject } from 'rxjs' import { ITerminalOptions } from 'xterm' @Component({ templateUrl: './homebridge-logs-widget.component.html', + imports: [ + NgClass, + NgStyle, + TranslatePipe, + ], }) export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy { - @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef - @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef - @ViewChild('logoutput', { static: true }) termTarget: ElementRef + private $log = inject(LogService) + + readonly widgetContainerElement = viewChild ('widgetcontainer') + readonly titleElement = viewChild ('terminaltitle') + readonly termTarget = viewChild ('logoutput') @Input() widget: any @Input() resizeEvent: Subject @@ -27,16 +29,12 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy { private fontSize = 15 private fontWeight: ITerminalOptions['fontWeight'] = '400' - constructor( - private $log: LogService, - ) {} - ngOnInit() { this.fontSize = this.widget.fontSize || 15 this.fontWeight = this.widget.fontWeight || 400 setTimeout(() => { - this.$log.startTerminal(this.termTarget, { + this.$log.startTerminal(this.termTarget(), { cursorBlink: false, theme: { background: '#2b2b2b', @@ -69,8 +67,8 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy { } getTerminalHeight(): number { - const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight - const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight + const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight + const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight return widgetContainerHeight - titleHeight } diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html index 1d378e64b..bd1a273ca 100644 --- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html +++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.html @@ -23,9 +23,9 @@ Homebridge+ @if (homebridgeStatus.status === 'up') { - + } @if (homebridgeStatus.status !== 'up') { + + }+ @for (bridge of childBridges; track bridge) { ++ }diff --git a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts index 236de9c84..49b906d04 100644 --- a/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts +++ b/ui/src/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component.ts @@ -1,15 +1,27 @@ import { ApiService } from '@/app/core/api.service' import { IoNamespace, WsService } from '@/app/core/ws.service' -import { Component, Input, OnDestroy, OnInit } from '@angular/core' -import { TranslateService } from '@ngx-translate/core' +import { NgClass } from '@angular/common' +import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core' +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' @Component({ templateUrl: './homekit-bridges-widget.component.html', styleUrls: ['./homekit-bridges-widget.component.scss'], + imports: [ + NgClass, + NgbTooltip, + TranslatePipe, + ], }) export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy { + private $api = inject(ApiService) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + private $ws = inject(WsService) + @Input() widget: any public homebridgeStatus = {} as any @@ -18,13 +30,6 @@ export class HomekitBridgesWidgetComponent implements OnInit, OnDestroy { private ioMain: IoNamespace private ioChild: IoNamespace - constructor( - private $api: ApiService, - private $toastr: ToastrService, - private $translate: TranslateService, - private $ws: WsService, - ) {} - async ngOnInit(): Promise{ this.ioMain = this.$ws.getExistingNamespace('status') this.ioMain.socket.on('homebridge-status', (data) => { diff --git a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts index f8442203f..5fdb43f88 100644 --- a/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts +++ b/ui/src/app/modules/status/widgets/memory-widget/memory-widget.component.ts @@ -1,12 +1,7 @@ import { IoNamespace, WsService } from '@/app/core/ws.service' -import { - Component, - ElementRef, - Input, - OnDestroy, - OnInit, - ViewChild, -} from '@angular/core' +import { DecimalPipe, NgClass } from '@angular/common' +import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' import { ChartConfiguration } from 'chart.js' import { BaseChartDirective } from 'ng2-charts' import { interval, Subscription } from 'rxjs' @@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './memory-widget.component.html', styleUrls: ['./memory-widget.component.scss'], + imports: [ + NgClass, + BaseChartDirective, + DecimalPipe, + TranslatePipe, + ], }) export class MemoryWidgetComponent implements OnInit, OnDestroy { + private $ws = inject(WsService) + @Input() public widget: any - @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective - @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef + readonly chart = viewChild(BaseChartDirective) + readonly widgetBackground = viewChild ('widgetbackground') public totalMemory: number public freeMemory: number @@ -71,15 +74,11 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.getExistingNamespace('status') // lookup the chart color based on the current theme - const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor + const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor if (userColor) { this.lineChartOptions.elements.line.backgroundColor = userColor this.lineChartOptions.elements.line.borderColor = userColor @@ -113,7 +112,7 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy { getServerMemoryInfo() { this.io.request('get-server-memory-info').subscribe((data) => { this.updateData(data) - this.chart.update() + this.chart().update() }) } diff --git a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts index df4dcaa45..c4dc643f4 100644 --- a/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts +++ b/ui/src/app/modules/status/widgets/network-widget/network-widget.component.ts @@ -1,12 +1,7 @@ import { IoNamespace, WsService } from '@/app/core/ws.service' -import { - Component, - ElementRef, - Input, - OnDestroy, - OnInit, - ViewChild, -} from '@angular/core' +import { DecimalPipe, NgClass } from '@angular/common' +import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' import { ChartConfiguration } from 'chart.js' import { BaseChartDirective } from 'ng2-charts' import { interval, Subscription } from 'rxjs' @@ -14,12 +9,20 @@ import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './network-widget.component.html', styleUrls: ['./network-widget.component.scss'], + imports: [ + NgClass, + BaseChartDirective, + DecimalPipe, + TranslatePipe, + ], }) export class NetworkWidgetComponent implements OnInit, OnDestroy { + private $ws = inject(WsService) + @Input() public widget: any - @ViewChild(BaseChartDirective, { static: true }) public chart: BaseChartDirective - @ViewChild('widgetbackground', { static: true }) private widgetBackground: ElementRef + readonly chart = viewChild(BaseChartDirective) + readonly widgetBackground = viewChild ('widgetbackground') public interface: string public receivedPerSec: number @@ -70,14 +73,10 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.getExistingNamespace('status') // lookup the chart color based on the current theme - const userColor = getComputedStyle(this.widgetBackground.nativeElement).backgroundColor + const userColor = getComputedStyle(this.widgetBackground().nativeElement).backgroundColor if (userColor) { this.lineChartOptions.elements.line.backgroundColor = userColor this.lineChartOptions.elements.line.borderColor = userColor @@ -117,7 +116,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy { this.interface = data.net.iface this.lineChartData.datasets[0].data = { ...[] } this.lineChartLabels = [] - this.chart.update() + this.chart().update() } this.receivedPerSec = (data.net.rx_sec / 1024 / 1024) * 8 @@ -129,7 +128,7 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy { } this.updateData(data) - this.chart.update() + this.chart().update() }) } diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html index 6fc5d779b..996b6a8be 100644 --- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html +++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.html @@ -2,44 +2,53 @@ {{ 'status.widget.info' | translate }}-+ @if (serverInfo) { +diff --git a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts index 68887870d..9c95f4013 100644 --- a/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts +++ b/ui/src/app/modules/status/widgets/system-info-widget/system-info-widget.component.ts @@ -1,14 +1,24 @@ import { InformationComponent } from '@/app/core/components/information/information.component' import { IoNamespace, WsService } from '@/app/core/ws.service' -import { Component, Input, OnInit } from '@angular/core' +import { NgClass, TitleCasePipe } from '@angular/common' +import { Component, inject, Input, OnInit } from '@angular/core' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' @Component({ templateUrl: './system-info-widget.component.html', styleUrls: ['./system-info-widget.component.scss'], + imports: [ + NgClass, + TitleCasePipe, + TranslatePipe, + ], }) export class SystemInfoWidgetComponent implements OnInit { + private $modal = inject(NgbModal) + private $translate = inject(TranslateService) + private $ws = inject(WsService) + @Input() widget: any public serverInfo: any @@ -16,12 +26,6 @@ export class SystemInfoWidgetComponent implements OnInit { private io: IoNamespace - constructor( - private $modal: NgbModal, - private $translate: TranslateService, - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.getExistingNamespace('status') this.io.connected.subscribe(async () => { diff --git a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts index 7275a70f6..8db425fc0 100644 --- a/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts +++ b/ui/src/app/modules/status/widgets/terminal-widget/terminal-widget.component.ts @@ -1,22 +1,24 @@ import { TerminalService } from '@/app/core/terminal.service' -import { - Component, - ElementRef, - Input, - OnDestroy, - OnInit, - ViewChild, -} from '@angular/core' +import { NgClass, NgStyle } from '@angular/common' +import { Component, ElementRef, inject, Input, OnDestroy, OnInit, viewChild } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' import { Subject } from 'rxjs' import { ITerminalOptions } from 'xterm' @Component({ templateUrl: './terminal-widget.component.html', + imports: [ + NgClass, + NgStyle, + TranslatePipe, + ], }) export class TerminalWidgetComponent implements OnInit, OnDestroy { - @ViewChild('widgetcontainer', { static: true }) widgetContainerElement: ElementRef - @ViewChild('terminaltitle', { static: true }) titleElement: ElementRef - @ViewChild('terminaloutput', { static: true }) termTarget: ElementRef + private $terminal = inject(TerminalService) + + readonly widgetContainerElement = viewChild+ }-
+ @if (serverInfo.os) { + {{ 'status.widget.info.os' | translate }} -- {{ serverInfo.os.codename }} - {{ serverInfo.os.distro }} - - + @if (!serverInfo.homebridgeRunningInSynologyPackage) { + + @switch (serverInfo.os.platform) { @case ('darwin') { + {{ serverInfo.os.codename }} + } @case ('win32') { + {{ serverInfo.os.distro }} + } @default { + + @if (nodejsInfo.showGlibcUnsupportedWarning) { + - {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }}) + } {{ serverInfo.os.distro }} {{ serverInfo.os.codename | titlecase }} ({{ serverInfo.os.release }}) + } } -Synology DSM + } @if (serverInfo.homebridgeRunningInSynologyPackage) { +Synology DSM + }+ } @if (serverInfo.network.ip4) { + {{ 'status.widget.info.ipv4' | translate }} ({{ serverInfo.network.iface }}) {{ serverInfo.network.ip4 }} + } @if (serverInfo.network.ip6) { + {{ 'status.widget.info.ipv6' | translate }} ({{ serverInfo.network.iface }}) {{ serverInfo.network.ip6 }} + } @if (serverInfo.os) { + {{ 'status.widget.info.hostname' | translate }} {{ serverInfo.os.hostname }} {{ 'status.widget.info.service_user' | translate }} {{ serverInfo.serviceUser }} @@ -68,15 +77,18 @@{{ 'status.widget.info.timezone' | translate }} {{ serverInfo.time.timezone }} + @if (serverInfo.homebridgeRunningInDocker) { + {{ 'status.widget.info.docker' | translate }} {{ 'status.widget.info.yes' | translate }} + } @if (serverInfo.homebridgeRunningInSynologyPackage) { + {{ 'status.widget.info.synology_package' | translate }} {{ 'status.widget.info.yes' | translate }} + } @if (!serverInfo.homebridgeServiceMode) { + {{ 'status.widget.info.service_mode' | translate }} @@ -85,7 +97,9 @@ {{ 'status.widget.info.disabled' | translate }} ('widgetcontainer') + readonly titleElement = viewChild ('terminaltitle') + readonly termTarget = viewChild ('terminaloutput') @Input() widget: any @Input() resizeEvent: Subject @@ -27,16 +29,12 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy { private fontSize = 15 private fontWeight: ITerminalOptions['fontWeight'] = '400' - constructor( - private $terminal: TerminalService, - ) {} - ngOnInit() { this.fontSize = this.widget.fontSize || 15 this.fontWeight = this.widget.fontWeight || 400 setTimeout(() => { - this.$terminal.startTerminal(this.termTarget, { + this.$terminal.startTerminal(this.termTarget(), { cursorBlink: false, theme: { background: '#2b2b2b', @@ -69,8 +67,8 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy { } getTerminalHeight(): number { - const widgetContainerHeight = (this.widgetContainerElement.nativeElement as HTMLElement).offsetHeight - const titleHeight = (this.titleElement.nativeElement as HTMLElement).offsetHeight + const widgetContainerHeight = (this.widgetContainerElement().nativeElement as HTMLElement).offsetHeight + const titleHeight = (this.titleElement().nativeElement as HTMLElement).offsetHeight return widgetContainerHeight - titleHeight } diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html index f47bc8965..d8f020831 100644 --- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html +++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.html @@ -6,40 +6,41 @@ -@@ -47,39 +48,40 @@+ @if (homebridgePkg.installedVersion) { Homebridge - Homebridge + } @if (!homebridgePkg.installedVersion) { + Homebridge + }
- {{ 'status.homebridge.checking' | translate }} - - {{ 'status.homebridge.up_to_date' | translate }} - + @if (!homebridgePkg.installedVersion) { + {{ 'status.homebridge.checking' | translate }} + } @if (homebridgePkg.installedVersion && !homebridgePkg.updateAvailable) { + {{ 'status.homebridge.up_to_date' | translate }} + } @if (homebridgePkg.installedVersion && homebridgePkg.updateAvailable) { {{ 'status.plugin_out_of_date' | translate }} + }@@ -87,83 +89,63 @@+ @if (homebridgeUiPkg.installedVersion) { Homebridge UI - Homebridge UI + } @if (!homebridgeUiPkg.installedVersion) { + Homebridge UI + }
- {{ 'status.homebridge.checking' | translate }} - - {{ 'status.homebridge.up_to_date' | translate }} - + @if (!homebridgeUiPkg.installedVersion) { + {{ 'status.homebridge.checking' | translate }} + } @if (homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable) { + {{ 'status.homebridge.up_to_date' | translate }} + } @if (homebridgeUiPkg.installedVersion && homebridgeUiPkg.updateAvailable) { {{ 'status.plugin_out_of_date' | translate }} + }{{ 'menu.label_plugins' | translate }}
- - {{ 'status.homebridge.checking' | translate }} - - + @if (!homebridgePluginStatusDone) { + {{ 'status.homebridge.checking' | translate }} + } @if (homebridgePluginStatusDone && homebridgePluginStatus.length) { + {{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' | translate) : ('status.plugins_out_of_date' | translate) }} - - {{ 'status.homebridge.up_to_date' | translate }} - + } @if (homebridgePluginStatusDone && !homebridgePluginStatus.length) { + {{ 'status.homebridge.up_to_date' | translate }} + }diff --git a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts index e1f3bac8b..6e5f1454a 100644 --- a/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts +++ b/ui/src/app/modules/status/widgets/update-centre-widget/update-centre-widget.component.ts @@ -2,17 +2,31 @@ import { InformationComponent } from '@/app/core/components/information/informat import { ManagePluginsService } from '@/app/core/manage-plugins/manage-plugins.service' import { SettingsService } from '@/app/core/settings.service' import { IoNamespace, WsService } from '@/app/core/ws.service' -import { Component, Input, OnInit } from '@angular/core' +import { NgClass } from '@angular/common' +import { Component, inject, Input, OnInit } from '@angular/core' +import { RouterLink } from '@angular/router' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' @Component({ templateUrl: './update-centre-widget.component.html', styleUrls: ['./update-centre-widget.component.scss'], + imports: [ + NgClass, + RouterLink, + TranslatePipe, + ], }) export class UpdateCentreWidgetComponent implements OnInit { + private $modal = inject(NgbModal) + $plugin = inject(ManagePluginsService) + private $settings = inject(SettingsService) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + private $ws = inject(WsService) + @Input() widget: any public homebridgePkg = {} as any @@ -25,15 +39,6 @@ export class UpdateCentreWidgetComponent implements OnInit { private io: IoNamespace - constructor( - private $modal: NgbModal, - public $plugin: ManagePluginsService, - private $settings: SettingsService, - private $toastr: ToastrService, - private $translate: TranslateService, - private $ws: WsService, - ) {} - async ngOnInit() { this.io = this.$ws.getExistingNamespace('status') diff --git a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts index 8ab593eb4..edc583460 100644 --- a/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts +++ b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts @@ -1,11 +1,16 @@ import { IoNamespace, WsService } from '@/app/core/ws.service' -import { Component, Input, OnDestroy, OnInit } from '@angular/core' +import { NgClass } from '@angular/common' +import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './uptime-widget.component.html', + imports: [NgClass, TranslatePipe], }) export class UptimeWidgetComponent implements OnInit, OnDestroy { + private $ws = inject(WsService) + @Input() widget: any public serverUptime: string @@ -14,10 +19,6 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.getExistingNamespace('status') this.io.connected.subscribe(async () => { diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html index 5991d34a2..01ee4348a 100644 --- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html +++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.html @@ -2,19 +2,15 @@Node.js
- - {{ 'status.homebridge.checking' | translate }} - - + @if (!nodejsStatusDone) { + {{ 'status.homebridge.checking' | translate }} + } @if (nodejsStatusDone && nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning && + !serverInfo.homebridgeRunningInSynologyPackage) { + {{'status.plugin_out_of_date' | translate }} - + } @if (nodejsStatusDone && nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) { + {{ 'status.widget.info.node_unsupp' | translate }} - - {{ 'status.homebridge.up_to_date' | translate }} - + } @if (nodejsStatusDone && !nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning) { + {{ 'status.homebridge.up_to_date' | translate }} + }{{ currentWeather?.name }} {{ 'status.widget.weather.title_weather' | translate }}-+ @if (!this.widget.location || !this.widget.location.id) { +--{{ 'status.widget.weather.label_config_required_help' | translate }}
+ } @if (widget.location && widget.location.id && currentWeather) { +diff --git a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts index c8d7a5d5d..fe3cc153a 100644 --- a/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts +++ b/ui/src/app/modules/status/widgets/weather-widget/weather-widget.component.ts @@ -1,15 +1,28 @@ +import { ConvertTempPipe } from '@/app/core/pipes/convert-temp.pipe' import { IoNamespace, WsService } from '@/app/core/ws.service' import { environment } from '@/environments/environment' +import { DecimalPipe, NgClass, TitleCasePipe } from '@angular/common' import { HttpClient, HttpParams } from '@angular/common/http' -import { Component, Input, OnDestroy, OnInit } from '@angular/core' -import { TranslateService } from '@ngx-translate/core' +import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import dayjs from 'dayjs' import { interval, Subject, Subscription } from 'rxjs' @Component({ templateUrl: './weather-widget.component.html', + imports: [ + NgClass, + DecimalPipe, + TitleCasePipe, + TranslatePipe, + ConvertTempPipe, + ], }) export class WeatherWidgetComponent implements OnInit, OnDestroy { + private $http = inject(HttpClient) + private $translate = inject(TranslateService) + private $ws = inject(WsService) + @Input() widget: any @Input() configureEvent: Subject+ }@@ -25,4 +21,5 @@
{{ currentWeather.main.temp | convertTemp | number:'1.0-0' }}°
@@ -18,12 +31,6 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $http: HttpClient, - private $translate: TranslateService, - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.getExistingNamespace('status') this.io.connected.subscribe(async () => { diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts index 197659004..7e3d7f9db 100644 --- a/ui/src/app/modules/status/widgets/widgets.component.ts +++ b/ui/src/app/modules/status/widgets/widgets.component.ts @@ -11,23 +11,19 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w import { UpdateCentreWidgetComponent } from '@/app/modules/status/widgets/update-centre-widget/update-centre-widget.component' import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component' import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component' -import { - ApplicationRef, - Component, - ComponentFactoryResolver, - ElementRef, - EmbeddedViewRef, - Injector, - Input, - OnDestroy, - OnInit, -} from '@angular/core' +import { ApplicationRef, Component, ComponentFactoryResolver, ElementRef, EmbeddedViewRef, inject, Injector, Input, OnDestroy, OnInit } from '@angular/core' @Component({ selector: 'app-widgets', template: '', + standalone: true, }) export class WidgetsComponent implements OnInit, OnDestroy { + private appRef = inject(ApplicationRef) + private componentFactoryResolver = inject(ComponentFactoryResolver) + private el = inject(ElementRef) + private injector = inject(Injector) + @Input() widget: any private availableWidgets = { @@ -48,13 +44,6 @@ export class WidgetsComponent implements OnInit, OnDestroy { private componentRef: any - constructor( - private appRef: ApplicationRef, - private componentFactoryResolver: ComponentFactoryResolver, - private el: ElementRef, - private injector: Injector, - ) {} - ngOnInit() { if (Object.prototype.hasOwnProperty.call(this.availableWidgets, this.widget.component)) { this.load(this.availableWidgets[this.widget.component]) diff --git a/ui/src/app/modules/support/support-routing.module.ts b/ui/src/app/modules/support/support-routing.module.ts index a295b3e5c..b6516d762 100644 --- a/ui/src/app/modules/support/support-routing.module.ts +++ b/ui/src/app/modules/support/support-routing.module.ts @@ -1,11 +1,10 @@ -import { SupportComponent } from '@/app/modules/support/support.component' import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' const routes: Routes = [ { path: '', - component: SupportComponent, + loadComponent: () => import('@/app/modules/support/support.component').then(m => m.SupportComponent), }, ] diff --git a/ui/src/app/modules/support/support.component.html b/ui/src/app/modules/support/support.component.html index 4e8c142db..28f2777d3 100644 --- a/ui/src/app/modules/support/support.component.html +++ b/ui/src/app/modules/support/support.component.html @@ -16,7 +16,8 @@ {{ 'support.links.title' | translate }}
-
+ @if (showFields.general) {
+
-
{{ 'support.links.documentation' | translate }}
@@ -82,6 +83,7 @@
diff --git a/ui/src/app/modules/support/support.component.ts b/ui/src/app/modules/support/support.component.ts index 166431e5f..02b8ede2e 100644 --- a/ui/src/app/modules/support/support.component.ts +++ b/ui/src/app/modules/support/support.component.ts @@ -1,7 +1,13 @@ +import { NgClass } from '@angular/common' import { Component } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' @Component({ templateUrl: './support.component.html', + imports: [ + NgClass, + TranslatePipe, + ], }) export class SupportComponent { public showFields = { diff --git a/ui/src/app/modules/support/support.module.ts b/ui/src/app/modules/support/support.module.ts index c592e6be0..08f15f6da 100644 --- a/ui/src/app/modules/support/support.module.ts +++ b/ui/src/app/modules/support/support.module.ts @@ -7,15 +7,13 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap' import { TranslateModule } from '@ngx-translate/core' @NgModule({ - declarations: [ - SupportComponent, - ], imports: [ CommonModule, SupportRoutingModule, NgbModule, ReactiveFormsModule, TranslateModule, + SupportComponent, ], }) export class SupportModule {} diff --git a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html index 22f2c2f79..a729cd829 100644 --- a/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html +++ b/ui/src/app/modules/users/users-2fa-disable/users-2fa-disable.component.html @@ -23,9 +23,11 @@{{ 'support.dev.title' | translate }}--
+ @if (showFields.dev) {
+
-
{{ 'support.dev.item_swagger' | translate }}
@@ -179,4 +182,5 @@
{{ 'users.setup_2fa_disable' | translate }}
[placeholder]="'users.label_password' | translate" />+ @if (invalidCredentials) { +
{{ 'login.invalid_credentials' | translate }}
+ }-+ @for (user of homebridgeUsers; track user) { +diff --git a/ui/src/app/modules/users/users.component.ts b/ui/src/app/modules/users/users.component.ts index 34305e0fa..7cc59d053 100644 --- a/ui/src/app/modules/users/users.component.ts +++ b/ui/src/app/modules/users/users.component.ts @@ -4,27 +4,28 @@ import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/ import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component' import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.component' import { UsersEditComponent } from '@/app/modules/users/users-edit/users-edit.component' -import { Component, OnInit } from '@angular/core' +import { Component, inject, OnInit } from '@angular/core' import { ActivatedRoute } from '@angular/router' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' @Component({ selector: 'app-users', templateUrl: './users.component.html', + imports: [ + TranslatePipe, + ], }) export class UsersComponent implements OnInit { - public homebridgeUsers: Array+ }@@ -23,30 +24,21 @@-+ private $api = inject(ApiService) + $auth = inject(AuthService) + private $modal = inject(NgbModal) + private $route = inject(ActivatedRoute) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) - constructor( - private $api: ApiService, - public $auth: AuthService, - private $modal: NgbModal, - private $route: ActivatedRoute, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} + public homebridgeUsers: Array ngOnInit() { this.$route.data.subscribe((data: { homebridgeUsers: Array }) => { diff --git a/ui/src/app/modules/users/users.module.ts b/ui/src/app/modules/users/users.module.ts index f3039d4b0..4b68bbc9f 100644 --- a/ui/src/app/modules/users/users.module.ts +++ b/ui/src/app/modules/users/users.module.ts @@ -1,4 +1,3 @@ -import { CoreModule } from '@/app/core/core.module' import { UsersComponent } from '@/app/modules/users/users.component' import { UsersResolver } from '@/app/modules/users/users.resolver' import { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component' @@ -13,21 +12,18 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap' import { TranslateModule } from '@ngx-translate/core' @NgModule({ - declarations: [ - UsersComponent, - UsersAddComponent, - UsersEditComponent, - Users2faEnableComponent, - Users2faDisableComponent, - ], imports: [ CommonModule, FormsModule, ReactiveFormsModule, TranslateModule.forChild(), NgbModule, - CoreModule, UsersRoutingModule, + UsersComponent, + UsersAddComponent, + UsersEditComponent, + Users2faEnableComponent, + Users2faDisableComponent, ], providers: [ UsersResolver, diff --git a/ui/src/app/modules/users/users.resolver.ts b/ui/src/app/modules/users/users.resolver.ts index d9dcd2e72..6d328efcc 100644 --- a/ui/src/app/modules/users/users.resolver.ts +++ b/ui/src/app/modules/users/users.resolver.ts @@ -1,5 +1,5 @@ import { ApiService } from '@/app/core/api.service' -import { Injectable } from '@angular/core' +import { inject, Injectable } from '@angular/core' import { Resolve, Router } from '@angular/router' import { TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' @@ -7,12 +7,10 @@ import { firstValueFrom } from 'rxjs' @Injectable() export class UsersResolver implements Resolve { - constructor( - private $api: ApiService, - private $router: Router, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} + private $api = inject(ApiService) + private $router = inject(Router) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) async resolve() { try { diff --git a/ui/src/app/shared/layout/layout.component.ts b/ui/src/app/shared/layout/layout.component.ts index 298b8f110..7e29556e5 100644 --- a/ui/src/app/shared/layout/layout.component.ts +++ b/ui/src/app/shared/layout/layout.component.ts @@ -3,31 +3,36 @@ import { ConfirmComponent } from '@/app/core/components/confirm/confirm.componen import { SettingsService } from '@/app/core/settings.service' import { IoNamespace, WsService } from '@/app/core/ws.service' import { environment } from '@/environments/environment' -import { Component, OnInit } from '@angular/core' -import { Router } from '@angular/router' +import { NgClass } from '@angular/common' +import { Component, inject, OnInit } from '@angular/core' +import { Router, RouterOutlet } from '@angular/router' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' import { TranslateService } from '@ngx-translate/core' import { firstValueFrom } from 'rxjs' import { lt } from 'semver' +import { SidebarComponent } from './sidebar/sidebar.component' @Component({ selector: 'app-layout', templateUrl: './layout.component.html', styleUrls: ['./layout.component.scss'], + imports: [ + SidebarComponent, + NgClass, + RouterOutlet, + ], }) export class LayoutComponent implements OnInit { + $auth = inject(AuthService) + private $modal = inject(NgbModal) + private $router = inject(Router) + $settings = inject(SettingsService) + private $translate = inject(TranslateService) + private $ws = inject(WsService) + public sidebarExpanded = false private io: IoNamespace - constructor( - public $auth: AuthService, - private $modal: NgbModal, - private $router: Router, - public $settings: SettingsService, - private $translate: TranslateService, - private $ws: WsService, - ) {} - ngOnInit() { this.io = this.$ws.connectToNamespace('app') this.io.socket.on('reconnect', () => { diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html index 622b13a00..5ea1136d2 100644 --- a/ui/src/app/shared/layout/sidebar/sidebar.component.html +++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html @@ -53,7 +53,8 @@ + @if (rPiWasUnderVoltage || rPiCurrentlyUnderVoltage) { +- -{{ 'rpi.throttled.undervoltage_title' | translate }}+ } @if ($auth.user.admin) { ++ }{{ 'menu.label_plugins' | translate }}diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.ts b/ui/src/app/shared/layout/sidebar/sidebar.component.ts index bab0e77d7..ea47a883b 100644 --- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts +++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts @@ -3,17 +3,35 @@ import { InformationComponent } from '@/app/core/components/information/informat import { MobileDetectService } from '@/app/core/mobile-detect.service' import { NotificationService } from '@/app/core/notification.service' import { SettingsService } from '@/app/core/settings.service' -import { Component, Input, OnInit, Renderer2 } from '@angular/core' -import { NavigationEnd, Router } from '@angular/router' +import { NgClass, NgOptimizedImage } from '@angular/common' +import { Component, inject, Input, OnInit, Renderer2 } from '@angular/core' +import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router' import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'], + imports: [ + NgOptimizedImage, + NgClass, + RouterLink, + RouterLinkActive, + TranslatePipe, + ], }) export class SidebarComponent implements OnInit { + router = inject(Router) + translate = inject(TranslateService) + $auth = inject(AuthService) + $settings = inject(SettingsService) + private $md = inject(MobileDetectService) + private $modal = inject(NgbModal) + private $notification = inject(NotificationService) + private $translate = inject(TranslateService) + private renderer = inject(Renderer2) + @Input() isExpanded = false public rPiCurrentlyUnderVoltage = false @@ -21,17 +39,9 @@ export class SidebarComponent implements OnInit { public isMobile: any = false public freezeMenu = false - constructor( - public router: Router, - public translate: TranslateService, - public $auth: AuthService, - public $settings: SettingsService, - private $md: MobileDetectService, - private $modal: NgbModal, - private $notification: NotificationService, - private $translate: TranslateService, - private renderer: Renderer2, - ) { + constructor() { + const router = this.router + this.isMobile = this.$md.detect.mobile() // ensure the menu closes when we navigate diff --git a/ui/src/main.ts b/ui/src/main.ts index f192d20b5..150123566 100644 --- a/ui/src/main.ts +++ b/ui/src/main.ts @@ -1,13 +1,63 @@ -import { AppModule } from '@/app/app.module' -import { environment } from '@/environments/environment' -import { enableProdMode } from '@angular/core' -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' +import { AppRoutingModule } from '@/app/app-routing.module' +import { AuthModule } from '@/app/core/auth/auth.module' +import { supportedLocales } from '@/app/core/locales' +import { onMonacoLoad } from '@/app/core/monaco-editor.service' +import { LoginModule } from '@/app/modules/login/login.module' +import { RestartModule } from '@/app/modules/restart/restart.module' +import { StatusModule } from '@/app/modules/status/status.module' +import { environment } from '@/environments/environment' +import { NgOptimizedImage } from '@angular/common' +import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http' +import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core' +import { bootstrapApplication, BrowserModule } from '@angular/platform-browser' +import { provideAnimations } from '@angular/platform-browser/animations' +import { NgbModule } from '@ng-bootstrap/ng-bootstrap' +import { TranslateModule, TranslateService } from '@ngx-translate/core' +import { DragulaModule } from 'ng2-dragula' +import { MonacoEditorModule } from 'ngx-monaco-editor-v2' +import { ToastrModule } from 'ngx-toastr' +import { AppComponent } from './app/app.component' import '../../src/globalDefaults' if (environment.production) { enableProdMode() } -// eslint-disable-next-line no-console -platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, TranslateModule.forRoot(), ToastrModule.forRoot({ + autoDismiss: true, + newestOnTop: false, + closeButton: true, + maxOpened: 2, + positionClass: 'toast-bottom-right', + }), NgbModule, MonacoEditorModule.forRoot({ + defaultOptions: { + scrollBeyondLastLine: false, + quickSuggestions: true, + parameterHints: true, + formatOnType: true, + formatOnPaste: true, + folding: true, + minimap: { + enabled: false, + }, + }, + onMonacoLoad, + }), DragulaModule.forRoot(), AuthModule, LoginModule, StatusModule, RestartModule, AppRoutingModule, NgOptimizedImage), + { + provide: LOCALE_ID, + useFactory: (translate: TranslateService) => { + if (translate.currentLang in supportedLocales) { + return supportedLocales[translate.currentLang] + } else { + return 'en' + } + }, + deps: [TranslateService], + }, + provideAnimations(), + provideHttpClient(withInterceptorsFromDi()), + ], +}).catch(err => console.log(err)) // eslint-disable-line no-console diff --git a/ui/tsconfig.json b/ui/tsconfig.json index b43e590ec..46b360e85 100644 --- a/ui/tsconfig.json +++ b/ui/tsconfig.json @@ -17,7 +17,6 @@ ] }, "declaration": false, - "downlevelIteration": true, "importHelpers": true, "outDir": "./dist/out-tsc", "sourceMap": true,-+ @if ($auth.user.admin) { +- -{{ 'menu.linux.label_logs' | translate }}+ } @if ($settings.env.enableTerminalAccess && $auth.user.admin) { +- -{{ 'menu.linux.label_terminal' | translate }}+ } @if ($auth.user.admin) { +- -{{ 'menu.config_json_editor' | translate }}+ } @if ($auth.user.admin) { ++ }{{ 'menu.label_settings' | translate }}-+ @if ($settings.formAuth) { ++ }{{ 'menu.tooltip_logout' | translate }}
-