feat: add power state to device details

fixes issue with tag editing as well

closes Show current power status on device details page #2283

Author: Mike

src/app/devices/device-toolbar/device-toolbar.component.html

@@ -1,38 +1,33 @@
 <mat-toolbar>
   @if (device?.useTLS && !isCloudMode) {
-    <div style="padding-right: 12px">
-      <button
-        [color]="isPinned() ? 'primary' : 'warn'"
-        mat-icon-button
-        [matTooltip]="isPinned() ? 'TLS w/ Pinned Certificate' : 'TLS (not pinned)'"
-        (click)="getDeviceCert()">
-        <mat-icon>lock</mat-icon>
-      </button>
-    </div>
+  <div style="padding-right: 12px">
+    <button [color]="isPinned() ? 'primary' : 'warn'" mat-icon-button [matTooltip]="isPinned() ? 'TLS w/ Pinned Certificate' : 'TLS (not pinned)'" (click)="getDeviceCert()">
+      <mat-icon>lock</mat-icon>
+    </button>
+  </div>
   }
   <span>
     @if (device?.friendlyName) {
-      <span>{{ device?.friendlyName }}</span>
+    <span>{{ device?.friendlyName }}</span>
     } @else {
-      <span>{{ device?.hostname }}</span>
+    <span>{{ device?.hostname }}</span>
     }
     <div class="mat-caption">
       @if (isCloudMode) {
-        {{ deviceId }}
+      {{ deviceId }}
       }
       @if (device?.friendlyName) {
-        <span>
-          @if (isCloudMode) {
-            -
-          }
-          {{ device?.hostname }}</span
-        >
+      <span>
+        @if (isCloudMode) {
+        -
+        }
+        {{ device?.hostname }}</span>
       }
     </div>
   </span>
   <mat-chip-set class="flex-1 pad-15">
     @for (tag of device?.tags; track tag) {
-      <mat-chip>{{ tag }}</mat-chip>
+    <mat-chip>{{ tag }}</mat-chip>
     }
   </mat-chip-set>
   <button mat-icon-button matTooltip="Edit device" (click)="editDevice()">
@@ -42,7 +37,9 @@
     <mat-icon>delete</mat-icon>
   </button>
   <mat-divider style="height: 40px" vertical="true"></mat-divider>
-
+  @if(!isLoading){
+  <mat-icon (click)="getPowerState()" style="padding:0 18px 0 12px;cursor: pointer;" [style.color]="powerState === 'Power: On' ? 'green' : powerState === 'Power: Sleep' ? 'yellow' : 'red'" [matTooltip]="powerState">mode_standby</mat-icon>
+  }
   <mat-divider style="height: 40px" vertical="true"></mat-divider>
   <button mat-icon-button matTooltip="Power up the device" (click)="sendPowerAction(2)">
     <mat-icon>power</mat-icon>
@@ -58,12 +55,12 @@
   </button>
   <mat-menu #menu="matMenu">
     @for (option of powerOptions; track option) {
-      <button mat-menu-item (click)="sendPowerAction(option.action)">
-        <span>{{ option.label }}</span>
-      </button>
+    <button mat-menu-item (click)="sendPowerAction(option.action)">
+      <span>{{ option.label }}</span>
+    </button>
     }
   </mat-menu>
 </mat-toolbar>
 @if (isLoading) {
-  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+<mat-progress-bar mode="indeterminate"></mat-progress-bar>
 }

src/app/devices/device-toolbar/device-toolbar.component.ts

@@ -55,6 +55,7 @@ export class DeviceToolbarComponent implements OnInit {
   amtFeatures?: AMTFeaturesResponse
   public isCloudMode = environment.cloud
   public device: Device | null = null
+  public powerState = ''
   public powerOptions = [
     {
       label: 'Hibernate',
@@ -110,9 +111,21 @@ export class DeviceToolbarComponent implements OnInit {
     this.devicesService.getDevice(this.deviceId).subscribe((data) => {
       this.device = data
       this.devicesService.device.next(this.device)
+      this.getPowerState()
+    })
+  }
+  getPowerState(): void {
+    this.isLoading = true
+    this.devicesService.getPowerState(this.deviceId).subscribe((powerState) => {
+      this.powerState =
+        powerState.powerstate.toString() === '2'
+          ? 'Power: On'
+          : powerState.powerstate.toString() === '3' || powerState.powerstate.toString() === '4'
+            ? 'Power: Sleep'
+            : 'Power: Off'
+      this.isLoading = false
     })
   }
-
   isPinned(): boolean {
     return this.device?.certHash != null && this.device?.certHash !== ''
   }

src/app/devices/devices.component.html

@@ -119,9 +119,9 @@ <h3 class="flex justify-center">
           Tags
         </mat-header-cell>
         <mat-cell class="tags" *matCellDef="let element">
-          <span>
+
             <mat-icon class="addTag" (click)="$event.stopPropagation(); editTagsForDevice(element.guid)">edit</mat-icon>
-          </span>
+
           <mat-chip-set>
             @for (tag of element?.tags; track tag) {
             <mat-chip [disableRipple]="true">{{ tag }}</mat-chip>

src/app/devices/devices.component.ts

@@ -276,7 +276,7 @@ export class DevicesComponent implements OnInit, AfterViewInit {
   editTagsForDevice(deviceId: string): void {
     const device = this.devices.data.find((d) => d.guid === deviceId)
     if (!device) return // device not found
-    const editedTags = [...device.tags]
+    const editedTags = device.tags == null ? [] : [...device.tags]
     const dialogRef = this.dialog.open(DeviceEditTagsComponent, { data: editedTags })
     dialogRef.afterClosed().subscribe((tagsChanged) => {
       if (tagsChanged) {