Change classes with parameter property to use inject()

frontend/src/operator/webui/src/app/device-pane/device-pane.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {DeviceService} from '../device.service';
 import {DisplaysService} from '../displays.service';
 import {filter, first, mergeMap} from 'rxjs/operators';
@@ -12,19 +12,14 @@ import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
   styleUrls: ['./device-pane.component.scss'],
 })
 export class DevicePaneComponent {
-  groups;
-  devices;
+  private deviceService = inject(DeviceService);
+  displaysService = inject(DisplaysService);
+  private groupService = inject(GroupService);
+  private activatedRoute = inject(ActivatedRoute);
+  private router = inject(Router);
 
-  constructor(
-    private deviceService: DeviceService,
-    public displaysService: DisplaysService,
-    private groupService: GroupService,
-    private activatedRoute: ActivatedRoute,
-    private router: Router
-  ) {
-    this.groups = this.groupService.getGroups();
-    this.devices = this.deviceService.getDevices();
-  }
+  groups = this.groupService.getGroups();
+  devices = this.deviceService.getDevices();
 
   ngOnInit(): void {
     this.router.events

frontend/src/operator/webui/src/app/device.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {combineLatestWith, map, mergeMap, shareReplay} from 'rxjs/operators';
 import {Observable, Subject, BehaviorSubject} from 'rxjs';
 import {HttpClient} from '@angular/common/http';
@@ -10,6 +10,9 @@ import {DeviceItem} from './device-item.interface';
   providedIn: 'root',
 })
 export class DeviceService {
+  private readonly httpClient = inject(HttpClient);
+  private sanitizer = inject(DomSanitizer);
+
   private refreshSubject = new BehaviorSubject<void>(undefined);
 
   private groupIdSubject = new Subject<string | null>();
@@ -25,23 +28,16 @@ export class DeviceService {
     shareReplay(1)
   );
 
-  private allDeviceFromServer;
+  private allDeviceFromServer = this.httpClient
+    .get<DeviceItem[]>('./devices')
+    .pipe(map(this.sortDevices));
 
   private getDevicesByGroupIdFromServer(groupId: string) {
     return this.httpClient
       .get<DeviceItem[]>(`./devices?groupId=${groupId}`)
       .pipe(map(this.sortDevices));
   }
 
-  constructor(
-    private readonly httpClient: HttpClient,
-    private sanitizer: DomSanitizer
-  ) {
-    this.allDeviceFromServer = this.httpClient
-      .get<DeviceItem[]>('./devices')
-      .pipe(map(this.sortDevices));
-  }
-
   private sortDevices(devices: DeviceItem[]) {
     return devices.sort((a: DeviceItem, b: DeviceItem) =>
       a['device_id'].localeCompare(b['device_id'], undefined, {numeric: true})

frontend/src/operator/webui/src/app/displays.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Subject, merge} from 'rxjs';
 import {map, mergeMap} from 'rxjs/operators';
 import {DeviceService} from './device.service';
@@ -7,29 +7,17 @@ import {DeviceService} from './device.service';
   providedIn: 'root',
 })
 export class DisplaysService {
-  private devices;
+  private deviceService = inject(DeviceService);
 
-  private visibleDeviceIds: string[] = [];
-  private visibleDevicesChanged;
+  private devices = this.deviceService.getDevices();
 
-  private deviceVisibilityInfos;
-  private displayInfoChanged;
+  private visibleDeviceIds: string[] = [];
+  private visibleDevicesChanged = new Subject<void>();
 
-  constructor(private deviceService: DeviceService) {
-    this.devices = this.deviceService.getDevices();
-    this.visibleDevicesChanged = new Subject<void>();
-    this.deviceVisibilityInfos = merge(
-      this.devices,
-      this.visibleDevicesChanged.pipe(mergeMap(() => this.devices))
-    ).pipe(
-    map(devices =>
-        devices.map(({device_id: deviceId}) => {
-          return {id: deviceId, visible: this.isVisibleDevice(deviceId)};
-        })
-       )
-    );
-    this.displayInfoChanged = new Subject<any>();
-  }
+  private deviceVisibilityInfos = merge(this.devices, this.visibleDevicesChanged.pipe(mergeMap(() => this.devices))).pipe(map(devices => devices.map(({ device_id: deviceId }) => {
+    return { id: deviceId, visible: this.isVisibleDevice(deviceId) };
+  })));
+  private displayInfoChanged = new Subject<any>();
 
   toggleVisibility(deviceId: string): void {
     if (this.isVisibleDevice(deviceId)) {

frontend/src/operator/webui/src/app/group.service.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {map, mergeMap, shareReplay} from 'rxjs/operators';
 import {Subject, merge} from 'rxjs';
 import {HttpClient} from '@angular/common/http';
@@ -8,25 +8,13 @@ import {DomSanitizer} from '@angular/platform-browser';
   providedIn: 'root',
 })
 export class GroupService {
-  private refreshSubject = new Subject<void>();
-  private groupsFromServer;
-  private groups;
+  private readonly httpClient = inject(HttpClient);
 
-  constructor(
-    private readonly httpClient: HttpClient,
-  ) {
-    this.groupsFromServer = this.httpClient
+  private refreshSubject = new Subject<void>();
+  private groupsFromServer = this.httpClient
     .get<string[]>('./groups')
-    .pipe(
-      map((deviceIds: string[]) =>
-          deviceIds.sort((a, b) => a.localeCompare(b, undefined, {numeric: true}))
-         )
-    );
-    this.groups = merge(
-      this.groupsFromServer,
-      this.refreshSubject.pipe(mergeMap(() => this.groupsFromServer))
-    ).pipe(shareReplay(1));
-  }
+    .pipe(map((deviceIds: string[]) => deviceIds.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))));
+  private groups = merge(this.groupsFromServer, this.refreshSubject.pipe(mergeMap(() => this.groupsFromServer))).pipe(shareReplay(1));
 
   refresh(): void {
     this.refreshSubject.next();