{{ 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..9b4d7c64c 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class AirpurifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..4721b4090 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-airpurifier-manage',
templateUrl: './airpurifier.manage.component.html',
styleUrls: ['./airpurifier.component.scss'],
+ standalone: true,
+ 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..b39263d5d 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,13 @@
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',
+ standalone: true,
+ 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..75fc006bd 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,18 @@
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'],
+ standalone: true,
+ 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..a73b2b2eb 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,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'
@Component({
selector: 'app-carbondioxidesensor',
templateUrl: './carbondioxidesensor.component.html',
styleUrls: ['./carbondioxidesensor.component.scss'],
+ standalone: true,
+ 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..310dba7a6 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,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'
@Component({
selector: 'app-carbonmonoxidesensor',
templateUrl: './carbonmonoxidesensor.component.html',
styleUrls: ['./carbonmonoxidesensor.component.scss'],
+ standalone: true,
+ 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..16e078a3f 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,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'
@Component({
selector: 'app-contactsensor',
templateUrl: './contactsensor.component.html',
styleUrls: ['./contactsensor.component.scss'],
+ standalone: true,
+ 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..026e2f9c4 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class DoorComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..f327270b4 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ standalone: true,
+ 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..73dcec803 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class FanComponent implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// Find the unit for the rotation speed
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..92f78b099 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fan-manage',
templateUrl: './fan.manage.component.html',
styleUrls: ['./fan.component.scss'],
+ standalone: true,
+ 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..7a73b9cd5 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class Fanv2Component implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// Find the unit for the rotation speed
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..cf0326b57 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fanv2-manage',
templateUrl: './fanv2.manage.component.html',
styleUrls: ['./fanv2.component.scss'],
+ standalone: true,
+ 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..5f8d565c6 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,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-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ standalone: true,
+ 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..2b870762e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..35249e318 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,19 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ standalone: true,
+ 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 +38,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..09050b461 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..a46578c1b 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,17 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ standalone: true,
+ 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 +35,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..6f34ebbed 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,21 @@
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'],
+ standalone: true,
+ 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..ec349ea55 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,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'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ standalone: true,
+ 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..7d5a41185 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..205118a2d 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ standalone: true,
+ 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..26c553ac6 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,16 @@
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',
+ standalone: true,
+ 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..7f152d7d5 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,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-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ standalone: true,
+ 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..6aef68bc8 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,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'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ standalone: true,
+ 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..2448979af 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,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'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ standalone: true,
+ 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..406cd5883 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,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-outlet',
templateUrl: './outlet.component.html',
+ standalone: true,
+ 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..7d8b1a127 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..2dd320f55 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,19 +1,23 @@
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'],
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
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..7ce03296e 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,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'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ standalone: true,
+ 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..bf576179a 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..33727ce55 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ standalone: true,
+ 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..23be5c68a 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,12 @@
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',
+ standalone: true,
+ 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..d2f342a7e 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,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-switch',
templateUrl: './switch.component.html',
+ standalone: true,
+ 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..967017d6a 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,20 @@
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',
+ standalone: true,
+ 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..830b5e956 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,14 @@
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'],
+ standalone: true,
+ 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..23101f896 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
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..e8c27b961 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,25 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ standalone: true,
+ 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..ffa25a9bd 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,12 @@
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',
+ standalone: true,
+ 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 9534e8aa5..5ae0ab05f 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,28 @@
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..fb48c87f5 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,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,9 +31,7 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
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..79b88cfb2 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,22 +1,30 @@
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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..f2992b794 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 }}
+ }
-
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ @if (schema.footerDisplay) {
+
+ }
-
-
+ } @if (gshConfig && gshConfig.token) {
+
[]
@@ -26,14 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@ {{ 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
-
+ 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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
{{ '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..75fc006bd 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,18 @@
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'],
+ standalone: true,
+ 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..a73b2b2eb 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,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'
@Component({
selector: 'app-carbondioxidesensor',
templateUrl: './carbondioxidesensor.component.html',
styleUrls: ['./carbondioxidesensor.component.scss'],
+ standalone: true,
+ 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..310dba7a6 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,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'
@Component({
selector: 'app-carbonmonoxidesensor',
templateUrl: './carbonmonoxidesensor.component.html',
styleUrls: ['./carbonmonoxidesensor.component.scss'],
+ standalone: true,
+ 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..16e078a3f 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,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'
@Component({
selector: 'app-contactsensor',
templateUrl: './contactsensor.component.html',
styleUrls: ['./contactsensor.component.scss'],
+ standalone: true,
+ 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..026e2f9c4 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class DoorComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..f327270b4 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ standalone: true,
+ 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..73dcec803 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class FanComponent implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// Find the unit for the rotation speed
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..92f78b099 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fan-manage',
templateUrl: './fan.manage.component.html',
styleUrls: ['./fan.component.scss'],
+ standalone: true,
+ 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..7a73b9cd5 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class Fanv2Component implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// Find the unit for the rotation speed
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..cf0326b57 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fanv2-manage',
templateUrl: './fanv2.manage.component.html',
styleUrls: ['./fanv2.component.scss'],
+ standalone: true,
+ 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..5f8d565c6 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,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-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ standalone: true,
+ 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..2b870762e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..35249e318 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,19 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ standalone: true,
+ 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 +38,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..09050b461 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..a46578c1b 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,17 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ standalone: true,
+ 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 +35,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..6f34ebbed 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,21 @@
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'],
+ standalone: true,
+ 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..ec349ea55 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,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'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ standalone: true,
+ 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..7d5a41185 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..205118a2d 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ standalone: true,
+ 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..26c553ac6 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,16 @@
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',
+ standalone: true,
+ 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..7f152d7d5 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,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-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ standalone: true,
+ 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..6aef68bc8 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,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'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ standalone: true,
+ 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..2448979af 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,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'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ standalone: true,
+ 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..406cd5883 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,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-outlet',
templateUrl: './outlet.component.html',
+ standalone: true,
+ 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..7d8b1a127 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..2dd320f55 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,19 +1,23 @@
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'],
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
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..7ce03296e 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,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'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ standalone: true,
+ 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..bf576179a 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..33727ce55 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ standalone: true,
+ 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..23be5c68a 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,12 @@
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',
+ standalone: true,
+ 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..d2f342a7e 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,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-switch',
templateUrl: './switch.component.html',
+ standalone: true,
+ 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..967017d6a 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,20 @@
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',
+ standalone: true,
+ 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..830b5e956 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,14 @@
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'],
+ standalone: true,
+ 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..23101f896 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
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..e8c27b961 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,25 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ standalone: true,
+ 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..ffa25a9bd 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,12 @@
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',
+ standalone: true,
+ 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 9534e8aa5..5ae0ab05f 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,28 @@
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..fb48c87f5 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,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,9 +31,7 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
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..79b88cfb2 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,22 +1,30 @@
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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..f2992b794 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 }}
+ }
-
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ @if (schema.footerDisplay) {
+
+ }
-
-
+ } @if (gshConfig && gshConfig.token) {
+
[]
@@ -26,14 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@ {{ 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
-
+ 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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
-
- {{ '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..f327270b4 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ standalone: true,
+ 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..73dcec803 100644
--- a/ui/src/app/core/accessories/types/fan/fan.component.ts
+++ b/ui/src/app/core/accessories/types/fan/fan.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class FanComponent implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// Find the unit for the rotation speed
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..f327270b4 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-door-manage',
templateUrl: './door.manage.component.html',
styleUrls: ['./door.component.scss'],
+ standalone: true,
+ 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..7a73b9cd5 100644
--- a/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
+++ b/ui/src/app/core/accessories/types/fanv2/fanv2.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class Fanv2Component implements OnInit {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public rotationSpeedUnit = ''
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// Find the unit for the rotation speed
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..cf0326b57 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-fanv2-manage',
templateUrl: './fanv2.manage.component.html',
styleUrls: ['./fanv2.component.scss'],
+ standalone: true,
+ 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..5f8d565c6 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,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-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ standalone: true,
+ 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..2b870762e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..35249e318 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,19 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ standalone: true,
+ 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 +38,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..09050b461 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..a46578c1b 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,17 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ standalone: true,
+ 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 +35,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..6f34ebbed 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,21 @@
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'],
+ standalone: true,
+ 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..ec349ea55 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,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'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ standalone: true,
+ 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..7d5a41185 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..205118a2d 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ standalone: true,
+ 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..26c553ac6 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,16 @@
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',
+ standalone: true,
+ 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..7f152d7d5 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,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-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ standalone: true,
+ 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..6aef68bc8 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,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'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ standalone: true,
+ 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..2448979af 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,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'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ standalone: true,
+ 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..406cd5883 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,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-outlet',
templateUrl: './outlet.component.html',
+ standalone: true,
+ 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..7d8b1a127 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..2dd320f55 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,19 +1,23 @@
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'],
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
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..7ce03296e 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,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'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ standalone: true,
+ 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..bf576179a 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..33727ce55 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ standalone: true,
+ 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..23be5c68a 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,12 @@
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',
+ standalone: true,
+ 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..d2f342a7e 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,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-switch',
templateUrl: './switch.component.html',
+ standalone: true,
+ 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..967017d6a 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,20 @@
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',
+ standalone: true,
+ 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..830b5e956 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,14 @@
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'],
+ standalone: true,
+ 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..23101f896 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
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..e8c27b961 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,25 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ standalone: true,
+ 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..ffa25a9bd 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,12 @@
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',
+ standalone: true,
+ 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 9534e8aa5..5ae0ab05f 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,28 @@
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..fb48c87f5 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,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,9 +31,7 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
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..79b88cfb2 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,22 +1,30 @@
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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..f2992b794 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 }}
+ }
-
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ @if (schema.footerDisplay) {
+
+ }
-
-
+ } @if (gshConfig && gshConfig.token) {
+
[]
@@ -26,14 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@ {{ 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
-
+ 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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
{{ '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..5f8d565c6 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,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-garagedooropener',
templateUrl: './garagedooropener.component.html',
+ standalone: true,
+ 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..2b870762e 100644
--- a/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
+++ b/ui/src/app/core/accessories/types/heatercooler/heatercooler.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class HeaterCoolerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..35249e318 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,19 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ standalone: true,
+ 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 +38,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..09050b461 100644
--- a/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
+++ b/ui/src/app/core/accessories/types/humidifierdehumidifier/humidifierdehumidifier.component.ts
@@ -1,20 +1,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ TranslatePipe,
+ ],
})
export class HumidifierDehumidifierComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..a46578c1b 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,17 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ standalone: true,
+ 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 +35,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..6f34ebbed 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,21 @@
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'],
+ standalone: true,
+ 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..ec349ea55 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,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'
@Component({
selector: 'app-leaksensor',
templateUrl: './leaksensor.component.html',
styleUrls: ['./leaksensor.component.scss'],
+ standalone: true,
+ 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..7d5a41185 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class LightbulbComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..205118a2d 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ standalone: true,
+ 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..26c553ac6 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,16 @@
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',
+ standalone: true,
+ 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..7f152d7d5 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,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-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ standalone: true,
+ 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..6aef68bc8 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,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'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ standalone: true,
+ 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..2448979af 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,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'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ standalone: true,
+ 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..406cd5883 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,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-outlet',
templateUrl: './outlet.component.html',
+ standalone: true,
+ 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..7d8b1a127 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..2dd320f55 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,19 +1,23 @@
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'],
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
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..7ce03296e 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,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'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ standalone: true,
+ 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..bf576179a 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SpeakerComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..33727ce55 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ standalone: true,
+ 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..23be5c68a 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,12 @@
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',
+ standalone: true,
+ 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..d2f342a7e 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,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-switch',
templateUrl: './switch.component.html',
+ standalone: true,
+ 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..967017d6a 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,20 @@
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',
+ standalone: true,
+ 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..830b5e956 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,14 @@
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'],
+ standalone: true,
+ 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..23101f896 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
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..e8c27b961 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,25 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ standalone: true,
+ 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..ffa25a9bd 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,12 @@
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',
+ standalone: true,
+ 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 9534e8aa5..5ae0ab05f 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,28 @@
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..fb48c87f5 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,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,9 +31,7 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
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..79b88cfb2 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,22 +1,30 @@
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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..f2992b794 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 }}
+ }
-
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ @if (schema.footerDisplay) {
+
+ }
-
-
+ } @if (gshConfig && gshConfig.token) {
+
[]
@@ -26,14 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@ {{ 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
-
+ 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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
{{ 'accessories.control.target_temperature' | translate }}
- -
- = new Subject()
@@ -22,9 +38,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..35249e318 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,19 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-heatercooler-manage',
templateUrl: './heatercooler.manage.component.html',
styleUrls: ['./heatercooler.component.scss'],
+ standalone: true,
+ 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 +35,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..a46578c1b 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,17 @@ import { debounceTime } from 'rxjs/operators'
selector: 'app-humidifierdehumidifier-manage',
templateUrl: './humidifierdehumidifier.manage.component.html',
styleUrls: ['./humidifierdehumidifier.component.scss'],
+ standalone: true,
+ 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..205118a2d 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-lightbulb-manage',
templateUrl: './lightbulb.manage.component.html',
styleUrls: ['./lightbulb.component.scss'],
+ standalone: true,
+ 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..7f152d7d5 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,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-lockmechanism',
templateUrl: './lockmechanism.component.html',
+ standalone: true,
+ 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..6aef68bc8 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,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'
@Component({
selector: 'app-motionsensor',
templateUrl: './motionsensor.component.html',
styleUrls: ['./motionsensor.component.scss'],
+ standalone: true,
+ 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..2448979af 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,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'
@Component({
selector: 'app-occupancysensor',
templateUrl: './occupancysensor.component.html',
styleUrls: ['./occupancysensor.component.scss'],
+ standalone: true,
+ 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..406cd5883 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,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-outlet',
templateUrl: './outlet.component.html',
+ standalone: true,
+ 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..7d8b1a127 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class SecuritysystemComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..2dd320f55 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,19 +1,23 @@
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'],
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class SecuritysystemManageComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public service: ServiceTypeX
public targetMode: any
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
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..7ce03296e 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,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'
@Component({
selector: 'app-smokesensor',
templateUrl: './smokesensor.component.html',
styleUrls: ['./smokesensor.component.scss'],
+ standalone: true,
+ 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..33727ce55 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-speaker-manage',
templateUrl: './speaker.manage.component.html',
styleUrls: ['./speaker.component.scss'],
+ standalone: true,
+ 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..23be5c68a 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,12 @@
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',
+ standalone: true,
+ 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..d2f342a7e 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,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-switch',
templateUrl: './switch.component.html',
+ standalone: true,
+ 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..967017d6a 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,20 @@
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',
+ standalone: true,
+ 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..830b5e956 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,14 @@
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'],
+ standalone: true,
+ 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..23101f896 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
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..e8c27b961 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,25 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ standalone: true,
+ 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..ffa25a9bd 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,12 @@
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',
+ standalone: true,
+ 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 9534e8aa5..5ae0ab05f 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,28 @@
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..fb48c87f5 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,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,9 +31,7 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
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..79b88cfb2 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,22 +1,30 @@
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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..f2992b794 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 }}
+ }
-
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ @if (schema.footerDisplay) {
+
+ }
-
-
+ } @if (gshConfig && gshConfig.token) {
+
[]
@@ -26,14 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@ {{ 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
-
+ 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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
{{ '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..967017d6a 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,20 @@
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',
+ standalone: true,
+ 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..830b5e956 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,14 @@
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'],
+ standalone: true,
+ 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..23101f896 100644
--- a/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
+++ b/ui/src/app/core/accessories/types/thermostat/thermostat.component.ts
@@ -1,20 +1,32 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ DecimalPipe,
+ TranslatePipe,
+ ConvertTempPipe,
+ ],
})
export class ThermostatComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
model = 1
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
onClick() {
const ref = this.$modal.open(ThermostatManageComponent, {
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..e8c27b961 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,25 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-thermostat-manage',
templateUrl: './thermostat.manage.component.html',
styleUrls: ['./thermostat.component.scss'],
+ standalone: true,
+ 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..fb48c87f5 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,29 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class ValveComponent implements OnInit, OnDestroy {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
public secondsActive = 0
@@ -18,9 +31,7 @@ export class ValveComponent implements OnInit, OnDestroy {
private remainingDurationInterval = interval(1000).pipe(filter(() => this.isActive()))
private remainingDurationSubscription: Subscription
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
ngOnInit() {
// set up the RemainingDuration countdown handlers, if the valve has the RemainingDuration Characteristic
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..f2992b794 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 }}
+ }
-
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ @if (schema.footerDisplay) {
+
+ }
-
-
+ } @if (gshConfig && gshConfig.token) {
+
[]
@@ -26,14 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@ {{ 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
-
+ 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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
-
- {{ '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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 }}
+ }
-
-
-
+ } @if (gshConfig && gshConfig.token) {
+
+ @if (schema.footerDisplay) {
+
+ }
-
-
+ } @if (gshConfig && gshConfig.token) {
+
[]
@@ -26,14 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@ {{ 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
-
+ 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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
+ @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..59d539c35 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-window-manage',
templateUrl: './window.manage.component.html',
styleUrls: ['./window.component.scss'],
+ standalone: true,
+ 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..1024c39ab 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,30 @@
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'],
+ standalone: true,
+ imports: [
+ LongClickDirective,
+ NgClass,
+ InlineSVGModule,
+ TranslatePipe,
+ ],
})
export class WindowCoveringComponent {
+ private $modal = inject(NgbModal)
+
@Input() public service: ServiceTypeX
- constructor(
- private $modal: NgbModal,
- ) {}
+ constructor() {}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..5a321277a 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartChildBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() bridges: { username: string, displayName: string }[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..0339ab816 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,25 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class RestartHomebridgeComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $router = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() fullRestart = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $router: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..c594d76eb 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,16 +1,26 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+
+import { Component, 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',
+ standalone: true,
+ imports: [
+ JsonSchemaFormModule,
+ JsonSchemaFormPatchDirective,
+ ],
})
export class SchemaFormComponent implements OnInit {
+ private $settings = inject(SettingsService)
+
@Input() configSchema: any
@Input() data: any
- @Output() dataChange = new EventEmitter()
- @Output() dataChanged = new EventEmitter()
- @Output() isValid = new EventEmitter()
+ readonly dataChange = output()
+ readonly dataChanged = output()
+ readonly isValid = output()
public currentData: any
public language: string = 'en'
@@ -24,9 +34,7 @@ export class SchemaFormComponent implements OnInit {
autocomplete: false,
}
- constructor(
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
// Use 'en' by default, unless the user's language is available
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..1e80b3bdb 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]',
+ standalone: true,
})
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..c6ae239fc 100644
--- a/ui/src/app/core/directives/longclick.directive.ts
+++ b/ui/src/app/core/directives/longclick.directive.ts
@@ -1,13 +1,14 @@
/* global NodeJS */
-import { Directive, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core'
+import { Directive, HostListener, Input, OnDestroy, output } from '@angular/core'
@Directive({
selector: '[appLongclick]',
+ standalone: true,
})
export class LongClickDirective implements OnDestroy {
@Input() public duration = 350
- @Output() public longclick: EventEmitter = new EventEmitter()
- @Output() public shortclick: EventEmitter = new EventEmitter()
+ public readonly longclick = output()
+ public readonly shortclick = output()
private downTimeout: NodeJS.Timeout
private done = false
diff --git a/ui/src/app/core/directives/plugins.markdown.directive.ts b/ui/src/app/core/directives/plugins.markdown.directive.ts
index 83f1dda15..9201bb1a5 100644
--- a/ui/src/app/core/directives/plugins.markdown.directive.ts
+++ b/ui/src/app/core/directives/plugins.markdown.directive.ts
@@ -1,13 +1,14 @@
-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)
+
+ constructor() {}
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..0ef9b8b8e 100644
--- a/ui/src/app/core/directives/rtl.directive.ts
+++ b/ui/src/app/core/directives/rtl.directive.ts
@@ -1,16 +1,17 @@
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 {
+ private $settings = inject(SettingsService)
+ private el = inject(ElementRef)
+
@Input() rtl: string
- constructor(
- private $settings: SettingsService,
- private el: ElementRef,
- ) {}
+ constructor() {}
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..5733ae3f2 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,9 +21,7 @@ export class LogService {
private elementResize: Subject | undefined
private pluginName: string
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
startTerminal(
targetElement: ElementRef,
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 d421ef493..b4782c70b 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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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..2b283841c 100644
--- a/ui/src/app/core/api.service.ts
+++ b/ui/src/app/core/api.service.ts
@@ -1,13 +1,15 @@
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)
+
+ constructor() {}
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..a71a924bf 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,12 @@ 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)
+
+ constructor() {}
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..63a6e7e9b 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,11 @@ 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)
+
+ constructor() {}
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..8bdc8c66f 100644
--- a/ui/src/app/core/components/information/information.component.ts
+++ b/ui/src/app/core/components/information/information.component.ts
@@ -1,10 +1,15 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class InformationComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() title: string
@Input() subtitle?: string
@Input() message: string
@@ -12,7 +17,5 @@ export class InformationComponent {
@Input() ctaButtonLink?: string
@Input() faIconClass: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..74a83b774 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,22 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
selector: 'app-windowcovering-manage',
templateUrl: './windowcovering.manage.component.html',
styleUrls: ['./windowcovering.component.scss'],
+ standalone: true,
+ 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 2c1826fd1..d3da741f8 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 { 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'],
+ standalone: true,
+ imports: [
+ SchemaFormComponent,
+ 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[]
@@ -49,16 +66,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('plugins/settings-ui')
@@ -120,7 +128,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..4a6e9f346 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,14 +10,14 @@ 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,
- ) {}
+ constructor() {}
async openSettings(plugin: any, schema: any) {
const pluginConfig = await this.loadPluginConfig(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..8994b09fd 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,14 @@ 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)
+
+ constructor() {}
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 be2c8c887..263a4ef89 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 +45,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..128b83498 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,14 @@ 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)
+
+ constructor() {}
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 }}
-
+ } @if (gshConfig && gshConfig.token) {
+
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..adf4279ad 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,37 @@
/* 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',
+ standalone: true,
+ 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..5b3f439d4 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,21 @@
-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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class DisablePluginComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() pluginName: string
@Input() isConfigured = false
@Input() isConfiguredDynamicPlatform = false
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
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..9d138fcbf 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,26 +1,31 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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 5053a20bf..52e29f804 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,113 @@
- {{ 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
-
+ 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..37b5f1f1b 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,40 @@ 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'],
+ standalone: true,
+ 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 +64,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 3668408b7..813d8c558 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'
@@ -23,7 +22,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,
@@ -38,18 +46,6 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
DisablePluginComponent,
HbUpdateConfirmComponent,
],
- 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 9802cdbfa..683b44b55 100644
--- a/ui/src/app/core/manage-plugins/manage-plugins.service.ts
+++ b/ui/src/app/core/manage-plugins/manage-plugins.service.ts
@@ -9,7 +9,7 @@ import { PluginConfigComponent } from '@/app/core/manage-plugins/plugin-config/p
import { ResetAccessoriesComponent } from '@/app/core/manage-plugins/reset-accessories/reset-accessories.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'
@@ -20,14 +20,14 @@ 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)
+
+ constructor() {}
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..f56991289 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,47 @@ 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'],
+ standalone: true,
+ 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,17 +64,7 @@ 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,
- ) {}
+ constructor() {}
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..403ff1b9e 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,19 @@
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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class PluginCompatibilityComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $settings = inject(SettingsService)
+
@Input() plugin: any
@Input() isValidNode: boolean
@Input() isValidHb: boolean
@@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit {
public hbMinVersion: SemVer
public hbInstalledVersion: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $settings: SettingsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node)
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 fdafc5871..2b933a822 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,30 +16,22 @@
- {{ block.name }}
+ @if (plugin.name !== 'homebridge-config-ui-x' && show === block.__uuid__) {
+ }
+ }
+ }
-
+ @if (pluginConfig.length && schema.singular) {
+
-
@@ -30,8 +37,35 @@ export interface PluginSchema {
@Component({
templateUrl: './plugin-config.component.html',
styleUrls: ['./plugin-config.component.scss'],
+ standalone: true,
+ imports: [
+ NgxMdModule,
+ PluginsMarkdownDirective,
+ NgbAccordionDirective,
+ NgbAccordionItem,
+ NgbAccordionHeader,
+ 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
@@ -44,15 +78,7 @@ export class PluginConfigComponent implements OnInit {
public childBridges: any[] = []
public isFirstSave = false
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $plugin: ManagePluginsService,
- private $modal: NgbModal,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.pluginAlias = this.schema.pluginAlias
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..a50169386 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,38 +2,32 @@ 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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
@HostListener('window:resize', ['$event'])
onWindowResize() {
@@ -49,7 +43,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) {
+
{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
-
+ @if (pluginAlias && pluginType) {
+
-
+ }
-
+ @if (hasChildBridges && removeChildBridges) {
+
{{ 'reset.bridges_single.list_1' | translate }}
{{ 'reset.bridges_single.list_2' | translate }}
-
+ } @if (!pluginAlias || !pluginType) {
+
{{ 'plugins.uninstall_remove_config_required' | translate }}
+ }
+ }
diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
index 91cd4098c..894bf14c9 100644
--- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
+++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts
@@ -1,16 +1,31 @@
import { ApiService } from '@/app/core/api.service'
import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component'
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 { Component, inject, Input, OnInit } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+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: './uninstall-plugin.component.html',
+ standalone: true,
+ imports: [
+ FormsModule,
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UninstallPluginComponent implements OnInit {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
@Input() plugin: any
@Input() childBridges: any[]
@Input() action: string
@@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit {
public pluginType: 'platform' | 'accessory'
public pluginAlias: string
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
async ngOnInit() {
try {
diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts
index ce61b9f09..d7122bbe6 100644
--- a/ui/src/app/core/pipes/convert-temp.pipe.ts
+++ b/ui/src/app/core/pipes/convert-temp.pipe.ts
@@ -1,11 +1,14 @@
import { SettingsService } from '@/app/core/settings.service'
-import { Pipe, PipeTransform } from '@angular/core'
+import { inject, Pipe, PipeTransform } from '@angular/core'
-@Pipe({ name: 'convertTemp' })
+@Pipe({
+ name: 'convertTemp',
+ standalone: true,
+})
export class ConvertTempPipe implements PipeTransform {
- constructor(
- private $settings: SettingsService,
- ) {}
+ private $settings = inject(SettingsService)
+
+ constructor() {}
transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number {
if (unit === 'f') {
diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts
index 0f80f2fa9..13fa8620c 100644
--- a/ui/src/app/core/pipes/external-link-icon.pipe.ts
+++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'externalLinkIcon',
+ standalone: true,
})
export class ExternalLinkIconPipe implements PipeTransform {
transform(value: string): unknown {
diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts
index fad8a9407..8a52083f8 100644
--- a/ui/src/app/core/pipes/replace.pipe.ts
+++ b/ui/src/app/core/pipes/replace.pipe.ts
@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core'
@Pipe({
name: 'replace',
+ standalone: true,
})
export class ReplacePipe implements PipeTransform {
transform(value: string, regexValue: string, replaceValue: string): any {
diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
index 234e6db57..07ddab7db 100644
--- a/ui/src/app/core/settings.service.ts
+++ b/ui/src/app/core/settings.service.ts
@@ -1,5 +1,5 @@
import { ApiService } from '@/app/core/api.service'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Title } from '@angular/platform-browser'
import { TranslateService } from '@ngx-translate/core'
import dayjs from 'dayjs'
@@ -49,6 +49,11 @@ interface AppSettingsInterface {
providedIn: 'root',
})
export class SettingsService {
+ private $api = inject(ApiService)
+ private $title = inject(Title)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public env: EnvInterface = {} as EnvInterface
public formAuth = true
public uiVersion: string
@@ -83,12 +88,7 @@ export class SettingsService {
public onSettingsLoaded = this.settingsLoadedSubject.pipe(first())
public settingsLoaded = false
- constructor(
- private $api: ApiService,
- private $title: Title,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.getAppSettings()
}
diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts
index 52f23e358..4f6231327 100644
--- a/ui/src/app/core/terminal.service.ts
+++ b/ui/src/app/core/terminal.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 TerminalService {
+ private $ws = inject(WsService)
+
public term: Terminal
private io: IoNamespace
@@ -18,9 +20,7 @@ export class TerminalService {
private resize: Subject
private elementResize: Subject | undefined
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
destroyTerminal() {
this.io.end()
diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts
index b2c57024b..6cf5bb91e 100644
--- a/ui/src/app/core/ws.service.ts
+++ b/ui/src/app/core/ws.service.ts
@@ -1,6 +1,6 @@
import { AuthService } from '@/app/core/auth/auth.service'
import { environment } from '@/environments/environment'
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
import { Observable, Subject } from 'rxjs'
import { io as ioFn, Socket } from 'socket.io-client'
@@ -15,11 +15,11 @@ export interface IoNamespace {
providedIn: 'root',
})
export class WsService {
+ private $auth = inject(AuthService)
+
private namespaceConnectionCache = {}
- constructor(
- private $auth: AuthService,
- ) {}
+ constructor() {}
/**
* Wrapper function to reuse the same connecting
diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts
index 0023a0d3c..816686698 100644
--- a/ui/src/app/modules/accessories/accessories-routing.module.ts
+++ b/ui/src/app/modules/accessories/accessories-routing.module.ts
@@ -1,11 +1,10 @@
-import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: AccessoriesComponent,
+ loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent),
},
]
diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts
index ea9834ad5..ade5e89f0 100644
--- a/ui/src/app/modules/accessories/accessories.component.ts
+++ b/ui/src/app/modules/accessories/accessories.component.ts
@@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service'
import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { SettingsService } from '@/app/core/settings.service'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
-import { Component, OnDestroy, OnInit } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { DragulaService } from 'ng2-dragula'
+import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
+import { DragulaModule, DragulaService } from 'ng2-dragula'
import { Subscription } from 'rxjs'
+import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component'
+import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component'
@Component({
selector: 'app-accessories',
templateUrl: './accessories.component.html',
styleUrls: ['./accessories.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgbTooltip,
+ NgClass,
+ DragulaModule,
+ NgFor,
+ NgSwitch,
+ AccessoryTileComponent,
+ DragHerePlaceholderComponent,
+ TranslatePipe,
+ ],
})
export class AccessoriesComponent implements OnInit, OnDestroy {
+ $auth = inject(AuthService)
+ private dragulaService = inject(DragulaService)
+ private $modal = inject(NgbModal)
+ $settings = inject(SettingsService)
+ private $md = inject(MobileDetectService)
+ protected $accessories = inject(AccessoriesService)
+
public isMobile: any = false
public hideHidden = true
private orderSubscription: Subscription
- constructor(
- public $auth: AuthService,
- private dragulaService: DragulaService,
- private $modal: NgbModal,
- public $settings: SettingsService,
- private $md: MobileDetectService,
- protected $accessories: AccessoriesService,
- ) {
+ constructor() {
+ const dragulaService = this.dragulaService
+
this.isMobile = this.$md.detect.mobile()
// disable drag and drop for everything except the room title
diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts
index e17d16cde..06aaae200 100644
--- a/ui/src/app/modules/accessories/accessories.module.ts
+++ b/ui/src/app/modules/accessories/accessories.module.ts
@@ -1,5 +1,5 @@
import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module'
-import { CoreModule } from '@/app/core/core.module'
+
import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module'
import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component'
import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component'
@@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core'
import { DragulaModule } from 'ng2-dragula'
@NgModule({
- declarations: [
- AccessoriesComponent,
- DragHerePlaceholderComponent,
- AddRoomComponent,
- ],
imports: [
CommonModule,
FormsModule,
NgbModule,
DragulaModule,
TranslateModule.forChild(),
- CoreModule,
AccessoriesCoreModule,
AccessoriesRoutingModule,
+ AccessoriesComponent,
+ DragHerePlaceholderComponent,
+ AddRoomComponent,
],
})
export class AccessoriesModule {}
diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts
index b7164bfbf..83ecc6f63 100644
--- a/ui/src/app/modules/accessories/add-room/add-room.component.ts
+++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts
@@ -1,13 +1,17 @@
-import { Component, Input } from '@angular/core'
+import { Component, inject, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './add-room.component.html',
+ standalone: true,
+ imports: [FormsModule, TranslatePipe],
})
export class AddRoomComponent {
+ $activeModal = inject(NgbActiveModal)
+
@Input() public roomName: string
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ constructor() {}
}
diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
index 1b3bf25d3..2722db692 100644
--- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
+++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts
@@ -1,9 +1,12 @@
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
selector: 'app-drag-here-placeholder',
templateUrl: './drag-here-placeholder.component.html',
styleUrls: ['./drag-here-placeholder.component.scss'],
+ standalone: true,
+ imports: [TranslatePipe],
})
export class DragHerePlaceholderComponent {
constructor() {}
diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
index 67c77acb8..dbd689577 100644
--- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts
@@ -1,4 +1,3 @@
-import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component'
import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver'
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
@@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router'
const routes: Routes = [
{
path: '',
- component: ConfigEditorComponent,
+ loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent),
resolve: {
config: ConfigEditorResolver,
},
diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html
index 8fee60893..96c59bea5 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.html
+++ b/ui/src/app/modules/config-editor/config-editor.component.html
@@ -4,6 +4,7 @@
{{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) {
+ } @if (originalConfig) {
+ } @if (!originalConfig) {
+ }
+ @if (!isMobile && !originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (!isMobile && originalConfig) {
{{ 'menu.config_json_editor' | translate }}
(keydown.meta.s)="$event.preventDefault(); onSave()"
>
-
+ } @if (isMobile) {
+ }
diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts
index 8c49afaa5..05b9df81e 100644
--- a/ui/src/app/modules/config-editor/config-editor.component.ts
+++ b/ui/src/app/modules/config-editor/config-editor.component.ts
@@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service'
import { MonacoEditorService } from '@/app/core/monaco-editor.service'
import { SettingsService } from '@/app/core/settings.service'
import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component'
-import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
import { ActivatedRoute } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { TranslateService } from '@ngx-translate/core'
+import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import json5 from 'json5'
-import { NgxEditorModel } from 'ngx-monaco-editor-v2'
+import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './config-editor.component.html',
+ standalone: true,
+ imports: [
+ NgbTooltip,
+ EditorComponent,
+ DiffEditorComponent,
+ FormsModule,
+ TranslatePipe,
+ ],
})
export class ConfigEditorComponent implements OnInit, OnDestroy {
+ private $api = inject(ApiService)
+ private $md = inject(MobileDetectService)
+ private $modal = inject(NgbModal)
+ private $monacoEditor = inject(MonacoEditorService)
+ private $route = inject(ActivatedRoute)
+ private $renderer = inject(Renderer2)
+ private $settings = inject(SettingsService)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeConfig: string
public originalConfig: string
public saveInProgress: boolean
@@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy {
private lastHeight: number
private visualViewPortEventCallback: () => void
- constructor(
- private $api: ApiService,
- private $md: MobileDetectService,
- private $modal: NgbModal,
- private $monacoEditor: MonacoEditorService,
- private $route: ActivatedRoute,
- private $renderer: Renderer2,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {
+ constructor() {
this.isMobile = this.$md.detect.mobile()
}
diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts
index 3991f1f9a..3e35c76a1 100644
--- a/ui/src/app/modules/config-editor/config-editor.module.ts
+++ b/ui/src/app/modules/config-editor/config-editor.module.ts
@@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core'
import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
@NgModule({
- declarations: [
- ConfigEditorComponent,
- ConfigRestoreComponent,
- ],
imports: [
CommonModule,
FormsModule,
@@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2'
NgbModule,
TranslateModule.forChild(),
ConfigEditorRoutingModule,
+ ConfigEditorComponent,
+ ConfigRestoreComponent,
],
providers: [
ConfigEditorResolver,
diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts
index 762226474..cb4933b2e 100644
--- a/ui/src/app/modules/config-editor/config-editor.resolver.ts
+++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs'
@Injectable()
export class ConfigEditorResolver 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)
+
+ constructor() {}
async resolve() {
try {
diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
index eef02f3fa..7d20661f9 100644
--- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
+++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html
@@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-
+ @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..9fc96a371 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,24 @@
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',
+ standalone: true,
+ 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit {
file: string
}[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
ngOnInit() {
this.$api.get('/config-editor/backups').subscribe({
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..56064ee48 100644
--- a/ui/src/app/modules/settings/settings.component.ts
+++ b/ui/src/app/modules/settings/settings.component.ts
@@ -9,18 +9,36 @@ 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',
+ standalone: true,
+ 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 +82,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,14 +95,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.isHbV2 = this.$settings.env.homebridgeVersion.startsWith('2')
diff --git a/ui/src/app/modules/settings/settings.module.ts b/ui/src/app/modules/settings/settings.module.ts
index 76f5c3967..74eb46bf5 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..2218e0a50 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,29 @@
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',
+ standalone: true,
+ imports: [
+ NgbAlert,
+ TranslatePipe,
+ ],
})
export class UnpairAllBridgesComponent {
+ $activeModal = inject(NgbActiveModal)
+ private $api = inject(ApiService)
+ private $route = inject(Router)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public clicked: boolean
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $route: Router,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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..909dcf480 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,26 +1,34 @@
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',
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
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..7be022bb9 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,37 @@ 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'],
+ standalone: true,
+ 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,15 +48,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.previousTitle = this.$title.getTitle()
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..c8f78bba1 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,10 @@ 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)
+
+ constructor() {}
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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module'
import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component'
import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard'
@@ -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..aa853da82 100644
--- a/ui/src/app/modules/status/credits/credits.component.ts
+++ b/ui/src/app/modules/status/credits/credits.component.ts
@@ -1,11 +1,14 @@
-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',
+ standalone: true,
+ imports: [TranslatePipe],
})
export class CreditsComponent {
- constructor(
- public $activeModal: NgbActiveModal,
- ) {}
+ $activeModal = inject(NgbActiveModal)
+
+ constructor() {}
}
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 df8be7442..a8e9a2974 100644
--- a/ui/src/app/modules/status/status.component.ts
+++ b/ui/src/app/modules/status/status.component.ts
@@ -5,17 +5,36 @@ 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'],
+ standalone: true,
+ 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,13 +45,7 @@ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('status')
diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts
index 37f9e98af..2df052251 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'
ChildBridgeWidgetComponent,
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 a438318cf..953ff2f8e 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,25 @@ import {
@Component({
templateUrl: './widget-control.component.html',
+ standalone: true,
+ 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit {
public networkInterfaces: string[] = []
- constructor(
- public $activeModal: NgbActiveModal,
- private $api: ApiService,
- private $http: HttpClient,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
public searchCountryCodes = (text$: Observable) =>
text$.pipe(
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/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
index 042d0bee5..cc5eee40c 100644
--- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts
@@ -1,25 +1,33 @@
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: './child-bridge-widget.component.html',
styleUrls: ['./child-bridge-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgbTooltip,
+ TranslatePipe,
+ ],
})
export class ChildBridgeWidgetComponent implements OnInit, OnDestroy {
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+ private $ws = inject(WsService)
+
@Input() widget: any
public childBridges = []
private io: IoNamespace
- constructor(
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit(): void {
this.io = this.$ws.connectToNamespace('child-bridges')
diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
index 70bd2dee6..152e2e668 100644
--- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts
@@ -1,8 +1,11 @@
+import { DatePipe } from '@angular/common'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './clock-widget.component.html',
+ standalone: true,
+ imports: [DatePipe],
})
export class ClockWidgetComponent implements OnInit, OnDestroy {
@Input() widget: any
diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
index 0c5a87b19..915d71a6b 100644
--- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
+++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html
@@ -17,13 +17,15 @@
-
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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './cpu-widget.component.html',
styleUrls: ['./cpu-widget.component.scss'],
+ standalone: true,
+ 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 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- public $settings: SettingsService,
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
@@ -48,9 +57,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..5d5af40f5 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $log: LogService,
- ) {}
+ constructor() {}
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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
index 52e9dce9f..1f1fc2d13 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -18,22 +18,21 @@
{{ 'menu.label_status' | translate }}
-
- {{ 'status.services.label_starting' | translate }}
-
-
+ @if (homebridgeStatus.status === 'pending') {
+ {{ 'status.services.label_starting' | translate }}
+ } @if (homebridgeStatus.status === 'up' && !widget.hidePort) {
+
{{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status === 'up' && widget.hidePort) {
+
{{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-
+ } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') {
+
{{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
+ }
@@ -41,39 +40,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 }}
+ }
@@ -82,39 +82,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 }}
+ }
@@ -123,35 +124,29 @@
{{ '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/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
index de5488e21..c6eef21de 100644
--- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
+++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -1,16 +1,30 @@
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 { TranslateService } from '@ngx-translate/core'
+import { NgClass } from '@angular/common'
+import { Component, inject, Input, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { TranslatePipe, TranslateService } from '@ngx-translate/core'
import { ToastrService } from 'ngx-toastr'
import { firstValueFrom } from 'rxjs'
@Component({
templateUrl: './homebridge-status-widget.component.html',
styleUrls: ['./homebridge-status-widget.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ RouterLink,
+ TranslatePipe,
+ ],
})
export class HomebridgeStatusWidgetComponent implements OnInit {
+ $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
@@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- public $plugin: ManagePluginsService,
- private $settings: SettingsService,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
async ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './memory-widget.component.html',
styleUrls: ['./memory-widget.component.scss'],
+ standalone: true,
+ 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 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs'
@Component({
templateUrl: './network-widget.component.html',
styleUrls: ['./network-widget.component.scss'],
+ standalone: true,
+ 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 }}
@@ -47,25 +56,18 @@
{{ 'status.widget.info.nodejs_version' | translate }}
-
+ @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning &&
+ !serverInfo.homebridgeRunningInSynologyPackage) {
+
{{ serverInfo.nodeVersion }}
-
+ } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+
{{ serverInfo.nodeVersion }}
-
- {{ serverInfo.nodeVersion }}
-
+ } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) {
+ {{ serverInfo.nodeVersion }}
+ }
@@ -88,15 +90,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 }}
@@ -105,7 +110,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 a3ad72f26..d38fca1bc 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,25 @@
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'],
+ standalone: true,
+ 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit {
private io: IoNamespace
- constructor(
- private $modal: NgbModal,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..a37f9da53 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,25 @@
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',
+ standalone: true,
+ 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 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy {
private fontSize = 15
private fontWeight: ITerminalOptions['fontWeight'] = '400'
- constructor(
- private $terminal: TerminalService,
- ) {}
+ constructor() {}
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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts
index 8ab593eb4..f303c9bcc 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,17 @@
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',
+ standalone: true,
+ imports: [NgClass, TranslatePipe],
})
export class UptimeWidgetComponent implements OnInit, OnDestroy {
+ private $ws = inject(WsService)
+
@Input() widget: any
public serverUptime: string
@@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
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..cc498be66 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,29 @@
+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',
+ standalone: true,
+ 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy {
private io: IoNamespace
private intervalSubscription: Subscription
- constructor(
- private $http: HttpClient,
- private $translate: TranslateService,
- private $ws: WsService,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.getExistingNamespace('status')
diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts
index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i
import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy {
private componentRef
- constructor(
- private appRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver,
- private el: ElementRef,
- private injector: Injector,
- ) {}
+ constructor() {}
ngOnInit() {
if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644
--- a/ui/src/app/modules/support/support.component.ts
+++ b/ui/src/app/modules/support/support.component.ts
@@ -1,7 +1,14 @@
+import { NgClass } from '@angular/common'
import { Component } from '@angular/core'
+import { TranslatePipe } from '@ngx-translate/core'
@Component({
templateUrl: './support.component.html',
+ standalone: true,
+ 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 a95c0aaf0..eb2886eda 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..5719f2930 100644
--- a/ui/src/app/modules/users/users.component.ts
+++ b/ui/src/app/modules/users/users.component.ts
@@ -4,27 +4,32 @@ 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',
+ standalone: true,
+ imports: [
+ TranslatePipe,
+ ],
})
export class UsersComponent implements OnInit {
+ private $api = inject(ApiService)
+ $auth = inject(AuthService)
+ private $modal = inject(NgbModal)
+ private $route = inject(ActivatedRoute)
+ private $toastr = inject(ToastrService)
+ private $translate = inject(TranslateService)
+
public homebridgeUsers: Array
- constructor(
- private $api: ApiService,
- public $auth: AuthService,
- private $modal: NgbModal,
- private $route: ActivatedRoute,
- private $toastr: ToastrService,
- private $translate: TranslateService,
- ) {}
+ constructor() {}
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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component'
import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component'
import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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)
+
+ constructor() {}
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..f4d7dd6f1 100644
--- a/ui/src/app/shared/layout/layout.component.ts
+++ b/ui/src/app/shared/layout/layout.component.ts
@@ -3,30 +3,38 @@ 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'],
+ standalone: true,
+ 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,
- ) {}
+ constructor() {}
ngOnInit() {
this.io = this.$ws.connectToNamespace('app')
diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html
index a2bb51907..4839f24a6 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.html
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html
@@ -57,7 +57,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 (isPwa) {
+
{{ 'menu.reload' | 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 7f5b33b66..f60592224 100644
--- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts
+++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts
@@ -3,18 +3,37 @@ 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'
import { isStandalonePWA } from 'is-standalone-pwa'
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgOptimizedImage,
+ NgClass,
+ 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
@@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit {
public freezeMenu = false
public isPwa = isStandalonePWA()
- 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss
index 3a4ddeeb4..c16cabb91 100644
--- a/ui/src/scss/components/accessories.scss
+++ b/ui/src/scss/components/accessories.scss
@@ -46,6 +46,9 @@
0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 15px;
+ -webkit-transition: all 0.15s ease-in-out;
+ transition: all 0.15s ease-in-out;
+
@media (max-width: 575px) {
height: 100px;
width: 100px;
@@ -57,9 +60,6 @@
transform: scale(1.15);
-ms-transform: scale(1.15);
}
-
- -webkit-transition: all 0.15s ease-in-out;
- transition: all 0.15s ease-in-out;
}
.accessory-svg {
diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss
index 82b0bc6d3..de8a5452e 100644
--- a/ui/src/scss/themes/themes-dark.scss
+++ b/ui/src/scss/themes/themes-dark.scss
@@ -224,6 +224,8 @@
}
a {
+ color: $darkModePrimary;
+
&.card-link {
color: #9e9e9e;
@@ -234,8 +236,6 @@
}
}
- color: $darkModePrimary;
-
@media (hover: hover) {
&:hover {
text-decoration: underline;
{{ '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..403ff1b9e 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,19 @@ 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', + standalone: true, + imports: [TranslatePipe], }) export class PluginCompatibilityComponent implements OnInit { + $activeModal = inject(NgbActiveModal) + private $settings = inject(SettingsService) + @Input() plugin: any @Input() isValidNode: boolean @Input() isValidHb: boolean @@ -17,10 +24,7 @@ export class PluginCompatibilityComponent implements OnInit { public hbMinVersion: SemVer public hbInstalledVersion: string - constructor( - public $activeModal: NgbActiveModal, - private $settings: SettingsService, - ) {} + constructor() {} ngOnInit(): void { this.nodeMinVersion = minVersion(this.plugin.updateEngines?.node) 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 fdafc5871..2b933a822 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,30 +16,22 @@+ } --
-
- + @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) { +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 738cc8a9d..2ef82734a 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 { 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+ } -+ }{{ 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) { + + } -('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, - ) {} + constructor() {} @HostListener('window:resize', ['$event']) onWindowResize() { @@ -49,7 +43,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) { +diff --git a/ui/src/app/modules/config-editor/config-editor.component.ts b/ui/src/app/modules/config-editor/config-editor.component.ts index 8c49afaa5..05b9df81e 100644 --- a/ui/src/app/modules/config-editor/config-editor.component.ts +++ b/ui/src/app/modules/config-editor/config-editor.component.ts @@ -4,19 +4,39 @@ import { MobileDetectService } from '@/app/core/mobile-detect.service' import { MonacoEditorService } from '@/app/core/monaco-editor.service' import { SettingsService } from '@/app/core/settings.service' import { ConfigRestoreComponent } from '@/app/modules/config-editor/config-restore/config.restore.component' -import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core' + +import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core' +import { FormsModule } from '@angular/forms' import { ActivatedRoute } from '@angular/router' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { TranslateService } from '@ngx-translate/core' +import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import json5 from 'json5' -import { NgxEditorModel } from 'ngx-monaco-editor-v2' +import { DiffEditorComponent, EditorComponent, NgxEditorModel } from 'ngx-monaco-editor-v2' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' @Component({ templateUrl: './config-editor.component.html', + standalone: true, + imports: [ + NgbTooltip, + EditorComponent, + DiffEditorComponent, + FormsModule, + TranslatePipe, + ], }) export class ConfigEditorComponent implements OnInit, OnDestroy { + private $api = inject(ApiService) + private $md = inject(MobileDetectService) + private $modal = inject(NgbModal) + private $monacoEditor = inject(MonacoEditorService) + private $route = inject(ActivatedRoute) + private $renderer = inject(Renderer2) + private $settings = inject(SettingsService) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public homebridgeConfig: string public originalConfig: string public saveInProgress: boolean @@ -30,17 +50,7 @@ export class ConfigEditorComponent implements OnInit, OnDestroy { private lastHeight: number private visualViewPortEventCallback: () => void - constructor( - private $api: ApiService, - private $md: MobileDetectService, - private $modal: NgbModal, - private $monacoEditor: MonacoEditorService, - private $route: ActivatedRoute, - private $renderer: Renderer2, - private $settings: SettingsService, - private $toastr: ToastrService, - private $translate: TranslateService, - ) { + constructor() { this.isMobile = this.$md.detect.mobile() } diff --git a/ui/src/app/modules/config-editor/config-editor.module.ts b/ui/src/app/modules/config-editor/config-editor.module.ts index 3991f1f9a..3e35c76a1 100644 --- a/ui/src/app/modules/config-editor/config-editor.module.ts +++ b/ui/src/app/modules/config-editor/config-editor.module.ts @@ -10,10 +10,6 @@ import { TranslateModule } from '@ngx-translate/core' import { MonacoEditorModule } from 'ngx-monaco-editor-v2' @NgModule({ - declarations: [ - ConfigEditorComponent, - ConfigRestoreComponent, - ], imports: [ CommonModule, FormsModule, @@ -22,6 +18,8 @@ import { MonacoEditorModule } from 'ngx-monaco-editor-v2' NgbModule, TranslateModule.forChild(), ConfigEditorRoutingModule, + ConfigEditorComponent, + ConfigRestoreComponent, ], providers: [ ConfigEditorResolver, diff --git a/ui/src/app/modules/config-editor/config-editor.resolver.ts b/ui/src/app/modules/config-editor/config-editor.resolver.ts index 762226474..cb4933b2e 100644 --- a/ui/src/app/modules/config-editor/config-editor.resolver.ts +++ b/ui/src/app/modules/config-editor/config-editor.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,12 @@ import { firstValueFrom } from 'rxjs' @Injectable() export class ConfigEditorResolver implements Resolve-{{ '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 (!isMobile && !originalConfig) {+ @if (loading) { +-+ } @if (!loading) { +diff --git a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts index 91cd4098c..894bf14c9 100644 --- a/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts +++ b/ui/src/app/core/manage-plugins/uninstall-plugin/uninstall-plugin.component.ts @@ -1,16 +1,31 @@ import { ApiService } from '@/app/core/api.service' import { ManagePluginComponent } from '@/app/core/manage-plugins/manage-plugin/manage-plugin.component' 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 { Component, inject, Input, OnInit } from '@angular/core' +import { FormsModule } from '@angular/forms' +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: './uninstall-plugin.component.html', + standalone: true, + imports: [ + FormsModule, + NgbAlert, + TranslatePipe, + ], }) export class UninstallPluginComponent implements OnInit { + $activeModal = inject(NgbActiveModal) + private $api = inject(ApiService) + private $modal = inject(NgbModal) + $settings = inject(SettingsService) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + @Input() plugin: any @Input() childBridges: any[] @Input() action: string @@ -24,14 +39,7 @@ export class UninstallPluginComponent implements OnInit { public pluginType: 'platform' | 'accessory' public pluginAlias: string - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $modal: NgbModal, - public $settings: SettingsService, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} + constructor() {} async ngOnInit() { try { diff --git a/ui/src/app/core/pipes/convert-temp.pipe.ts b/ui/src/app/core/pipes/convert-temp.pipe.ts index ce61b9f09..d7122bbe6 100644 --- a/ui/src/app/core/pipes/convert-temp.pipe.ts +++ b/ui/src/app/core/pipes/convert-temp.pipe.ts @@ -1,11 +1,14 @@ import { SettingsService } from '@/app/core/settings.service' -import { Pipe, PipeTransform } from '@angular/core' +import { inject, Pipe, PipeTransform } from '@angular/core' -@Pipe({ name: 'convertTemp' }) +@Pipe({ + name: 'convertTemp', + standalone: true, +}) export class ConvertTempPipe implements PipeTransform { - constructor( - private $settings: SettingsService, - ) {} + private $settings = inject(SettingsService) + + constructor() {} transform(value: number, unit: 'c' | 'f' = this.$settings.env.temperatureUnits): number { if (unit === 'f') { diff --git a/ui/src/app/core/pipes/external-link-icon.pipe.ts b/ui/src/app/core/pipes/external-link-icon.pipe.ts index 0f80f2fa9..13fa8620c 100644 --- a/ui/src/app/core/pipes/external-link-icon.pipe.ts +++ b/ui/src/app/core/pipes/external-link-icon.pipe.ts @@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core' @Pipe({ name: 'externalLinkIcon', + standalone: true, }) export class ExternalLinkIconPipe implements PipeTransform { transform(value: string): unknown { diff --git a/ui/src/app/core/pipes/replace.pipe.ts b/ui/src/app/core/pipes/replace.pipe.ts index fad8a9407..8a52083f8 100644 --- a/ui/src/app/core/pipes/replace.pipe.ts +++ b/ui/src/app/core/pipes/replace.pipe.ts @@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core' @Pipe({ name: 'replace', + standalone: true, }) export class ReplacePipe implements PipeTransform { transform(value: string, regexValue: string, replaceValue: string): any { diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts index 234e6db57..07ddab7db 100644 --- a/ui/src/app/core/settings.service.ts +++ b/ui/src/app/core/settings.service.ts @@ -1,5 +1,5 @@ import { ApiService } from '@/app/core/api.service' -import { Injectable } from '@angular/core' +import { inject, Injectable } from '@angular/core' import { Title } from '@angular/platform-browser' import { TranslateService } from '@ngx-translate/core' import dayjs from 'dayjs' @@ -49,6 +49,11 @@ interface AppSettingsInterface { providedIn: 'root', }) export class SettingsService { + private $api = inject(ApiService) + private $title = inject(Title) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public env: EnvInterface = {} as EnvInterface public formAuth = true public uiVersion: string @@ -83,12 +88,7 @@ export class SettingsService { public onSettingsLoaded = this.settingsLoadedSubject.pipe(first()) public settingsLoaded = false - constructor( - private $api: ApiService, - private $title: Title, - private $toastr: ToastrService, - private $translate: TranslateService, - ) { + constructor() { this.getAppSettings() } diff --git a/ui/src/app/core/terminal.service.ts b/ui/src/app/core/terminal.service.ts index 52f23e358..4f6231327 100644 --- a/ui/src/app/core/terminal.service.ts +++ b/ui/src/app/core/terminal.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 TerminalService { + private $ws = inject(WsService) + public term: Terminal private io: IoNamespace @@ -18,9 +20,7 @@ export class TerminalService { private resize: Subject+ }{{ 'plugins.uninstall_remove_confirmation' | translate: { pluginName: plugin.name } }}
--+ @if (pluginAlias && pluginType) { +
-
+ }+ @if (hasChildBridges && removeChildBridges) { + {{ 'reset.bridges_single.list_1' | translate }} -
{{ 'reset.bridges_single.list_2' | translate }}+ } @if (!pluginAlias || !pluginType) { + {{ 'plugins.uninstall_remove_config_required' | translate }} + }private elementResize: Subject | undefined - constructor( - private $ws: WsService, - ) {} + constructor() {} destroyTerminal() { this.io.end() diff --git a/ui/src/app/core/ws.service.ts b/ui/src/app/core/ws.service.ts index b2c57024b..6cf5bb91e 100644 --- a/ui/src/app/core/ws.service.ts +++ b/ui/src/app/core/ws.service.ts @@ -1,6 +1,6 @@ import { AuthService } from '@/app/core/auth/auth.service' import { environment } from '@/environments/environment' -import { Injectable } from '@angular/core' +import { inject, Injectable } from '@angular/core' import { Observable, Subject } from 'rxjs' import { io as ioFn, Socket } from 'socket.io-client' @@ -15,11 +15,11 @@ export interface IoNamespace { providedIn: 'root', }) export class WsService { + private $auth = inject(AuthService) + private namespaceConnectionCache = {} - constructor( - private $auth: AuthService, - ) {} + constructor() {} /** * Wrapper function to reuse the same connecting diff --git a/ui/src/app/modules/accessories/accessories-routing.module.ts b/ui/src/app/modules/accessories/accessories-routing.module.ts index 0023a0d3c..816686698 100644 --- a/ui/src/app/modules/accessories/accessories-routing.module.ts +++ b/ui/src/app/modules/accessories/accessories-routing.module.ts @@ -1,11 +1,10 @@ -import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component' import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' const routes: Routes = [ { path: '', - component: AccessoriesComponent, + loadComponent: () => import('@/app/modules/accessories/accessories.component').then(m => m.AccessoriesComponent), }, ] diff --git a/ui/src/app/modules/accessories/accessories.component.ts b/ui/src/app/modules/accessories/accessories.component.ts index ea9834ad5..ade5e89f0 100644 --- a/ui/src/app/modules/accessories/accessories.component.ts +++ b/ui/src/app/modules/accessories/accessories.component.ts @@ -3,29 +3,47 @@ import { AuthService } from '@/app/core/auth/auth.service' import { MobileDetectService } from '@/app/core/mobile-detect.service' import { SettingsService } from '@/app/core/settings.service' import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component' -import { Component, OnDestroy, OnInit } from '@angular/core' -import { NgbModal } from '@ng-bootstrap/ng-bootstrap' -import { DragulaService } from 'ng2-dragula' +import { NgClass, NgFor, NgIf, NgSwitch } from '@angular/common' +import { Component, inject, OnDestroy, OnInit } from '@angular/core' +import { NgbModal, NgbTooltip } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe } from '@ngx-translate/core' +import { DragulaModule, DragulaService } from 'ng2-dragula' import { Subscription } from 'rxjs' +import { AccessoryTileComponent } from '../../core/accessories/accessory-tile/accessory-tile.component' +import { DragHerePlaceholderComponent } from './drag-here-placeholder/drag-here-placeholder.component' @Component({ selector: 'app-accessories', templateUrl: './accessories.component.html', styleUrls: ['./accessories.component.scss'], + standalone: true, + imports: [ + NgIf, + NgbTooltip, + NgClass, + DragulaModule, + NgFor, + NgSwitch, + AccessoryTileComponent, + DragHerePlaceholderComponent, + TranslatePipe, + ], }) export class AccessoriesComponent implements OnInit, OnDestroy { + $auth = inject(AuthService) + private dragulaService = inject(DragulaService) + private $modal = inject(NgbModal) + $settings = inject(SettingsService) + private $md = inject(MobileDetectService) + protected $accessories = inject(AccessoriesService) + public isMobile: any = false public hideHidden = true private orderSubscription: Subscription - constructor( - public $auth: AuthService, - private dragulaService: DragulaService, - private $modal: NgbModal, - public $settings: SettingsService, - private $md: MobileDetectService, - protected $accessories: AccessoriesService, - ) { + constructor() { + const dragulaService = this.dragulaService + this.isMobile = this.$md.detect.mobile() // disable drag and drop for everything except the room title diff --git a/ui/src/app/modules/accessories/accessories.module.ts b/ui/src/app/modules/accessories/accessories.module.ts index e17d16cde..06aaae200 100644 --- a/ui/src/app/modules/accessories/accessories.module.ts +++ b/ui/src/app/modules/accessories/accessories.module.ts @@ -1,5 +1,5 @@ import { AccessoriesCoreModule } from '@/app/core/accessories/accessories.module' -import { CoreModule } from '@/app/core/core.module' + import { AccessoriesRoutingModule } from '@/app/modules/accessories/accessories-routing.module' import { AccessoriesComponent } from '@/app/modules/accessories/accessories.component' import { AddRoomComponent } from '@/app/modules/accessories/add-room/add-room.component' @@ -12,20 +12,17 @@ import { TranslateModule } from '@ngx-translate/core' import { DragulaModule } from 'ng2-dragula' @NgModule({ - declarations: [ - AccessoriesComponent, - DragHerePlaceholderComponent, - AddRoomComponent, - ], imports: [ CommonModule, FormsModule, NgbModule, DragulaModule, TranslateModule.forChild(), - CoreModule, AccessoriesCoreModule, AccessoriesRoutingModule, + AccessoriesComponent, + DragHerePlaceholderComponent, + AddRoomComponent, ], }) export class AccessoriesModule {} diff --git a/ui/src/app/modules/accessories/add-room/add-room.component.ts b/ui/src/app/modules/accessories/add-room/add-room.component.ts index b7164bfbf..83ecc6f63 100644 --- a/ui/src/app/modules/accessories/add-room/add-room.component.ts +++ b/ui/src/app/modules/accessories/add-room/add-room.component.ts @@ -1,13 +1,17 @@ -import { Component, Input } from '@angular/core' +import { Component, inject, Input } from '@angular/core' +import { FormsModule } from '@angular/forms' import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap' +import { TranslatePipe } from '@ngx-translate/core' @Component({ templateUrl: './add-room.component.html', + standalone: true, + imports: [FormsModule, TranslatePipe], }) export class AddRoomComponent { + $activeModal = inject(NgbActiveModal) + @Input() public roomName: string - constructor( - public $activeModal: NgbActiveModal, - ) {} + constructor() {} } diff --git a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts index 1b3bf25d3..2722db692 100644 --- a/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts +++ b/ui/src/app/modules/accessories/drag-here-placeholder/drag-here-placeholder.component.ts @@ -1,9 +1,12 @@ import { Component } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' @Component({ selector: 'app-drag-here-placeholder', templateUrl: './drag-here-placeholder.component.html', styleUrls: ['./drag-here-placeholder.component.scss'], + standalone: true, + imports: [TranslatePipe], }) export class DragHerePlaceholderComponent { constructor() {} diff --git a/ui/src/app/modules/config-editor/config-editor-routing.module.ts b/ui/src/app/modules/config-editor/config-editor-routing.module.ts index 67c77acb8..dbd689577 100644 --- a/ui/src/app/modules/config-editor/config-editor-routing.module.ts +++ b/ui/src/app/modules/config-editor/config-editor-routing.module.ts @@ -1,4 +1,3 @@ -import { ConfigEditorComponent } from '@/app/modules/config-editor/config-editor.component' import { ConfigEditorResolver } from '@/app/modules/config-editor/config-editor.resolver' import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' @@ -6,7 +5,7 @@ import { RouterModule, Routes } from '@angular/router' const routes: Routes = [ { path: '', - component: ConfigEditorComponent, + loadComponent: () => import('@/app/modules/config-editor/config-editor.component').then(m => m.ConfigEditorComponent), resolve: { config: ConfigEditorResolver, }, diff --git a/ui/src/app/modules/config-editor/config-editor.component.html b/ui/src/app/modules/config-editor/config-editor.component.html index 8fee60893..96c59bea5 100644 --- a/ui/src/app/modules/config-editor/config-editor.component.html +++ b/ui/src/app/modules/config-editor/config-editor.component.html @@ -4,6 +4,7 @@ {{ 'menu.config_json_editor' | translate }}
+ @if (!originalConfig) { + } @if (originalConfig) { + } @if (!originalConfig) { + }{{ 'menu.config_json_editor' | translate }} (keydown.meta.s)="$event.preventDefault(); onSave()" > - + } @if (!isMobile && originalConfig) {{{ 'menu.config_json_editor' | translate }} (keydown.meta.s)="$event.preventDefault(); onSave()" > - + } @if (isMobile) { + }{ - 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) + + constructor() {} async resolve() { try { diff --git a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html index eef02f3fa..7d20661f9 100644 --- a/ui/src/app/modules/config-editor/config-restore/config.restore.component.html +++ b/ui/src/app/modules/config-editor/config-restore/config.restore.component.html @@ -12,12 +12,15 @@ {{ 'config.restore.title_restore_homebridge_backup' | tr
-+ @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..9fc96a371 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,24 @@ 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', + standalone: true, + 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,12 +26,7 @@ export class ConfigRestoreComponent implements OnInit { file: string }[] = [] - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} + constructor() {} ngOnInit() { this.$api.get('/config-editor/backups').subscribe({ 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..56064ee48 100644 --- a/ui/src/app/modules/settings/settings.component.ts +++ b/ui/src/app/modules/settings/settings.component.ts @@ -9,18 +9,36 @@ 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', + standalone: true, + 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 +82,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..2218e0a50 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,29 @@ 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', + standalone: true, + imports: [ + NgbAlert, + TranslatePipe, + ], }) export class UnpairAllBridgesComponent { + $activeModal = inject(NgbActiveModal) + private $api = inject(ApiService) + private $route = inject(Router) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public clicked: boolean - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $route: Router, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} + constructor() {} 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..909dcf480 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,26 +1,34 @@ 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', + standalone: true, + 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, - ) {} + constructor() {} 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..7be022bb9 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,37 @@ 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'], + standalone: true, + 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,15 +48,7 @@ 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, - ) {} + constructor() {} ngOnInit(): void { this.previousTitle = this.$title.getTitle() 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..c8f78bba1 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,10 @@ 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) + + constructor() {} 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 45b71d690..024f4327c 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 { SetupWizardRoutingModule } from '@/app/modules/setup-wizard/setup-wizard-routing.module' import { SetupWizardComponent } from '@/app/modules/setup-wizard/setup-wizard.component' import { SetupWizardGuard } from '@/app/modules/setup-wizard/setup-wizard.guard' @@ -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..aa853da82 100644 --- a/ui/src/app/modules/status/credits/credits.component.ts +++ b/ui/src/app/modules/status/credits/credits.component.ts @@ -1,11 +1,14 @@ -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', + standalone: true, + imports: [TranslatePipe], }) export class CreditsComponent { - constructor( - public $activeModal: NgbActiveModal, - ) {} + $activeModal = inject(NgbActiveModal) + + constructor() {} } 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 }}
-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..d758179aa 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,24 @@ import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './cpu-widget.component.html', styleUrls: ['./cpu-widget.component.scss'], + standalone: true, + 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+ @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/status.component.ts b/ui/src/app/modules/status/status.component.ts index df8be7442..a8e9a2974 100644 --- a/ui/src/app/modules/status/status.component.ts +++ b/ui/src/app/modules/status/status.component.ts @@ -5,17 +5,36 @@ 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'], + standalone: true, + 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,13 +45,7 @@ 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, - ) {} + constructor() {} ngOnInit() { this.io = this.$ws.connectToNamespace('status') diff --git a/ui/src/app/modules/status/status.module.ts b/ui/src/app/modules/status/status.module.ts index 37f9e98af..2df052251 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' ChildBridgeWidgetComponent, 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 a438318cf..953ff2f8e 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,25 @@ import { @Component({ templateUrl: './widget-control.component.html', + standalone: true, + 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,12 +76,7 @@ export class WidgetControlComponent implements OnInit { public networkInterfaces: string[] = [] - constructor( - public $activeModal: NgbActiveModal, - private $api: ApiService, - private $http: HttpClient, - private $translate: TranslateService, - ) {} + constructor() {} public searchCountryCodes = (text$: Observable ) => text$.pipe( 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 }}
-diff --git a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts index 042d0bee5..cc5eee40c 100644 --- a/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts +++ b/ui/src/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component.ts @@ -1,25 +1,33 @@ 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: './child-bridge-widget.component.html', styleUrls: ['./child-bridge-widget.component.scss'], + standalone: true, + imports: [ + NgClass, + NgbTooltip, + TranslatePipe, + ], }) export class ChildBridgeWidgetComponent implements OnInit, OnDestroy { + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + private $ws = inject(WsService) + @Input() widget: any public childBridges = [] private io: IoNamespace - constructor( - private $toastr: ToastrService, - private $translate: TranslateService, - private $ws: WsService, - ) {} + constructor() {} ngOnInit(): void { this.io = this.$ws.connectToNamespace('child-bridges') diff --git a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts index 70bd2dee6..152e2e668 100644 --- a/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts +++ b/ui/src/app/modules/status/widgets/clock-widget/clock-widget.component.ts @@ -1,8 +1,11 @@ +import { DatePipe } from '@angular/common' import { Component, Input, OnDestroy, OnInit } from '@angular/core' import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './clock-widget.component.html', + standalone: true, + imports: [DatePipe], }) export class ClockWidgetComponent implements OnInit, OnDestroy { @Input() widget: any diff --git a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html index 0c5a87b19..915d71a6b 100644 --- a/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html +++ b/ui/src/app/modules/status/widgets/cpu-widget/cpu-widget.component.html @@ -17,13 +17,15 @@-
-
-
+ @if (availableWidgets.length) {
+
-
+ @for (widget of availableWidgets; track widget) {
+
- {{ widget.name }} + }
('widgetbackground') public cpu = {} as any public cpuTemperature = {} as any @@ -72,15 +80,12 @@ export class CpuWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - public $settings: SettingsService, - private $ws: WsService, - ) {} + constructor() {} 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 +119,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 @@ @@ -41,39 +40,40 @@-+ @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..90ce56e0e 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,24 @@ 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', + standalone: true, + 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,9 +29,7 @@ export class HapQrcodeWidgetComponent implements OnInit { private io: IoNamespace - constructor( - private $ws: WsService, - ) {} + constructor() {} ngOnInit() { this.io = this.$ws.getExistingNamespace('status') @@ -48,9 +57,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..5d5af40f5 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,25 @@ 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', + standalone: true, + 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 +30,14 @@ export class HomebridgeLogsWidgetComponent implements OnInit, OnDestroy { private fontSize = 15 private fontWeight: ITerminalOptions['fontWeight'] = '400' - constructor( - private $log: LogService, - ) {} + constructor() {} 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 +70,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/homebridge-status-widget/homebridge-status-widget.component.html b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html index 52e9dce9f..1f1fc2d13 100644 --- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html +++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html @@ -18,22 +18,21 @@ {{ 'menu.label_status' | translate }}
- - {{ 'status.services.label_starting' | translate }} - - + @if (homebridgeStatus.status === 'pending') { + {{ 'status.services.label_starting' | translate }} + } @if (homebridgeStatus.status === 'up' && !widget.hidePort) { + {{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }} - + } @if (homebridgeStatus.status === 'up' && widget.hidePort) { + {{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }} - + } @if (homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending') { + {{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }} + }-@@ -82,39 +82,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 }} + }@@ -123,35 +124,29 @@+ @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 }} + }diff --git a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts index de5488e21..c6eef21de 100644 --- a/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts +++ b/ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts @@ -1,16 +1,30 @@ 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 { TranslateService } from '@ngx-translate/core' +import { NgClass } from '@angular/common' +import { Component, inject, Input, OnInit } from '@angular/core' +import { RouterLink } from '@angular/router' +import { TranslatePipe, TranslateService } from '@ngx-translate/core' import { ToastrService } from 'ngx-toastr' import { firstValueFrom } from 'rxjs' @Component({ templateUrl: './homebridge-status-widget.component.html', styleUrls: ['./homebridge-status-widget.component.scss'], + standalone: true, + imports: [ + NgClass, + RouterLink, + TranslatePipe, + ], }) export class HomebridgeStatusWidgetComponent implements OnInit { + $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 @@ -21,13 +35,7 @@ export class HomebridgeStatusWidgetComponent implements OnInit { private io: IoNamespace - constructor( - public $plugin: ManagePluginsService, - private $settings: SettingsService, - private $toastr: ToastrService, - private $translate: TranslateService, - private $ws: WsService, - ) {} + constructor() {} async ngOnInit() { this.io = this.$ws.getExistingNamespace('status') 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..238ed941d 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,21 @@ import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './memory-widget.component.html', styleUrls: ['./memory-widget.component.scss'], + standalone: true, + 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{{ '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 }} + }('widgetbackground') public totalMemory: number public freeMemory: number @@ -71,15 +75,13 @@ export class MemoryWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $ws: WsService, - ) {} + constructor() {} 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 +115,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..fe67e4776 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,21 @@ import { interval, Subscription } from 'rxjs' @Component({ templateUrl: './network-widget.component.html', styleUrls: ['./network-widget.component.scss'], + standalone: true, + 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 +74,12 @@ export class NetworkWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $ws: WsService, - ) {} + constructor() {} 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 +119,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 +131,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 95ee18ce1..a5e9901bd 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 a3ad72f26..d38fca1bc 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,25 @@ 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'], + standalone: true, + 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,11 +27,7 @@ export class SystemInfoWidgetComponent implements OnInit { private io: IoNamespace - constructor( - private $modal: NgbModal, - private $translate: TranslateService, - private $ws: WsService, - ) {} + constructor() {} ngOnInit() { this.io = this.$ws.getExistingNamespace('status') 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..a37f9da53 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,25 @@ 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', + standalone: true, + 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 }} @@ -47,25 +56,18 @@{{ 'status.widget.info.nodejs_version' | translate }} - + @if (nodejsInfo.updateAvailable && !nodejsInfo.showNodeUnsupportedWarning && + !serverInfo.homebridgeRunningInSynologyPackage) { + {{ serverInfo.nodeVersion }} - + } @if (nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) { + {{ serverInfo.nodeVersion }} - - {{ serverInfo.nodeVersion }} - + } @if (!nodejsInfo.showNodeUnsupportedWarning && !nodejsInfo.updateAvailable) { + {{ serverInfo.nodeVersion }} + } @@ -88,15 +90,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 }} @@ -105,7 +110,9 @@ {{ 'status.widget.info.disabled' | translate }} ('widgetcontainer') + readonly titleElement = viewChild ('terminaltitle') + readonly termTarget = viewChild ('terminaloutput') @Input() widget: any @Input() resizeEvent: Subject @@ -27,16 +30,14 @@ export class TerminalWidgetComponent implements OnInit, OnDestroy { private fontSize = 15 private fontWeight: ITerminalOptions['fontWeight'] = '400' - constructor( - private $terminal: TerminalService, - ) {} + constructor() {} 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 +70,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/uptime-widget/uptime-widget.component.ts b/ui/src/app/modules/status/widgets/uptime-widget/uptime-widget.component.ts index 8ab593eb4..f303c9bcc 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,17 @@ 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', + standalone: true, + imports: [NgClass, TranslatePipe], }) export class UptimeWidgetComponent implements OnInit, OnDestroy { + private $ws = inject(WsService) + @Input() widget: any public serverUptime: string @@ -14,9 +20,7 @@ export class UptimeWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $ws: WsService, - ) {} + constructor() {} ngOnInit() { this.io = this.$ws.getExistingNamespace('status') 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) { +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..cc498be66 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,29 @@ +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', + standalone: true, + 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,11 +32,7 @@ export class WeatherWidgetComponent implements OnInit, OnDestroy { private io: IoNamespace private intervalSubscription: Subscription - constructor( - private $http: HttpClient, - private $translate: TranslateService, - private $ws: WsService, - ) {} + constructor() {} ngOnInit() { this.io = this.$ws.getExistingNamespace('status') diff --git a/ui/src/app/modules/status/widgets/widgets.component.ts b/ui/src/app/modules/status/widgets/widgets.component.ts index 874c8bdbf..acaf0b551 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 { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-i import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-widget/terminal-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,12 +44,7 @@ export class WidgetsComponent implements OnInit, OnDestroy { private componentRef - constructor( - private appRef: ApplicationRef, - private componentFactoryResolver: ComponentFactoryResolver, - private el: ElementRef, - private injector: Injector, - ) {} + constructor() {} ngOnInit() { if (Object.prototype.hasOwnProperty.call(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..d8464c6f8 100644 --- a/ui/src/app/modules/support/support.component.ts +++ b/ui/src/app/modules/support/support.component.ts @@ -1,7 +1,14 @@ +import { NgClass } from '@angular/common' import { Component } from '@angular/core' +import { TranslatePipe } from '@ngx-translate/core' @Component({ templateUrl: './support.component.html', + standalone: true, + 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 a95c0aaf0..eb2886eda 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..5719f2930 100644 --- a/ui/src/app/modules/users/users.component.ts +++ b/ui/src/app/modules/users/users.component.ts @@ -4,27 +4,32 @@ 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', + standalone: true, + imports: [ + TranslatePipe, + ], }) export class UsersComponent implements OnInit { + private $api = inject(ApiService) + $auth = inject(AuthService) + private $modal = inject(NgbModal) + private $route = inject(ActivatedRoute) + private $toastr = inject(ToastrService) + private $translate = inject(TranslateService) + public homebridgeUsers: Array+ }@@ -23,30 +24,21 @@-- constructor( - private $api: ApiService, - public $auth: AuthService, - private $modal: NgbModal, - private $route: ActivatedRoute, - private $toastr: ToastrService, - private $translate: TranslateService, - ) {} + constructor() {} 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 9424a05e2..2cfe90b7d 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 { Users2faDisableComponent } from '@/app/modules/users/users-2fa-disable/users-2fa-disable.component' import { Users2faEnableComponent } from '@/app/modules/users/users-2fa-enable/users-2fa-enable.component' import { UsersAddComponent } from '@/app/modules/users/users-add/users-add.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..69cfbee31 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,12 @@ 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) + + constructor() {} 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..f4d7dd6f1 100644 --- a/ui/src/app/shared/layout/layout.component.ts +++ b/ui/src/app/shared/layout/layout.component.ts @@ -3,30 +3,38 @@ 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'], + standalone: true, + 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, - ) {} + constructor() {} ngOnInit() { this.io = this.$ws.connectToNamespace('app') diff --git a/ui/src/app/shared/layout/sidebar/sidebar.component.html b/ui/src/app/shared/layout/sidebar/sidebar.component.html index a2bb51907..4839f24a6 100644 --- a/ui/src/app/shared/layout/sidebar/sidebar.component.html +++ b/ui/src/app/shared/layout/sidebar/sidebar.component.html @@ -57,7 +57,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 7f5b33b66..f60592224 100644 --- a/ui/src/app/shared/layout/sidebar/sidebar.component.ts +++ b/ui/src/app/shared/layout/sidebar/sidebar.component.ts @@ -3,18 +3,37 @@ 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' import { isStandalonePWA } from 'is-standalone-pwa' @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'], + standalone: true, + imports: [ + RouterLink, + NgOptimizedImage, + NgClass, + 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 @@ -23,17 +42,9 @@ export class SidebarComponent implements OnInit { public freezeMenu = false public isPwa = isStandalonePWA() - 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/src/scss/components/accessories.scss b/ui/src/scss/components/accessories.scss index 3a4ddeeb4..c16cabb91 100644 --- a/ui/src/scss/components/accessories.scss +++ b/ui/src/scss/components/accessories.scss @@ -46,6 +46,9 @@ 0 2px 10px 0 rgba(0, 0, 0, 0.12); padding: 15px; + -webkit-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; + @media (max-width: 575px) { height: 100px; width: 100px; @@ -57,9 +60,6 @@ transform: scale(1.15); -ms-transform: scale(1.15); } - - -webkit-transition: all 0.15s ease-in-out; - transition: all 0.15s ease-in-out; } .accessory-svg { diff --git a/ui/src/scss/themes/themes-dark.scss b/ui/src/scss/themes/themes-dark.scss index 82b0bc6d3..de8a5452e 100644 --- a/ui/src/scss/themes/themes-dark.scss +++ b/ui/src/scss/themes/themes-dark.scss @@ -224,6 +224,8 @@ } a { + color: $darkModePrimary; + &.card-link { color: #9e9e9e; @@ -234,8 +236,6 @@ } } - color: $darkModePrimary; - @media (hover: hover) { &:hover { text-decoration: underline;-+ @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 (isPwa) { +- -{{ 'menu.reload' | translate }}+ } @if ($settings.formAuth) { ++ }{{ 'menu.tooltip_logout' | translate }}
-