add UI details to status widget (#1789)

homebridge · Nov 22, 2023 · 6e83bc4 · 6e83bc4
1 parent 453ee32
commit 6e83bc4
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ All notable changes to homebridge-config-ui-x will be documented in this file.
 - Add Child Bridge Pin Code (#1739)
 - standardise modal footers (#1753)
 - Fix table width, avoid overflow (#1758) (@jsiegenthaler)
+- add UI details to status widget (#1789)
 
 ### Translation Changes
 

diff --git a/src/modules/plugins/plugins.service.ts b/src/modules/plugins/plugins.service.ts
@@ -587,6 +587,14 @@ export class PluginsService {
     return true;
   }
 
+  /**
+   * Gets the Homebridge UI package details
+   */
+  public async getHomebridgeUiPackage(): Promise<HomebridgePlugin> {
+    const plugins = await this.getInstalledPlugins();
+    return plugins.find((x: HomebridgePlugin) => x.name === this.configService.name);
+  }
+
   /**
    * Gets the npm module details
    */

diff --git a/src/modules/status/status.gateway.ts b/src/modules/status/status.gateway.ts
@@ -47,6 +47,15 @@ export class StatusGateway {
     }
   }
 
+  @SubscribeMessage('homebridge-ui-version-check')
+  async homebridgeUiVersionCheck(client, payload) {
+    try {
+      return await this.pluginsService.getHomebridgeUiPackage();
+    } catch (e) {
+      return new WsException(e.message);
+    }
+  }
+
   @SubscribeMessage('npm-version-check')
   async npmVersionCheck(client, payload) {
     try {

diff --git a/ui/src/app/core/settings.service.ts b/ui/src/app/core/settings.service.ts
@@ -13,6 +13,7 @@ interface EnvInterface {
   enableTerminalAccess: boolean;
   homebridgeInstanceName: string;
   homebridgeVersion?: string;
+  homebridgeUiVersion?: string;
   nodeVersion: string;
   packageName: string;
   packageVersion: string;

diff --git a/...p/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html b/...p/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html
@@ -42,31 +42,55 @@
             *ngIf="homebridgePkg.installedVersion && (homebridgePkg.updateAvailable || homebridgePkg.betaUpdateAvailable)"></i>
         </div>
         <div class="align-self-center">
-          <span *ngIf="!homebridgePkg.installedVersion"
-            [translate]="'status.homebridge.label_checking_for_updates'">
-            Checking for updates...
-          </span>
-          <span *ngIf="homebridgePkg.installedVersion">
-            <a href="javascript:void(0)" (click)="$plugin.installPreviousVersion(homebridgePkg)" class="card-link card-link-title">
-              v{{ homebridgePkg.installedVersion }}
-            </a>
-          </span>
+          <a href="javascript:void(0)" (click)="$plugin.installPreviousVersion(homebridgePkg)" *ngIf="homebridgePkg.installedVersion" class="card-link card-link-title">
+            Homebridge
+          </a>
+          <span *ngIf="!homebridgePkg.installedVersion">Homebridge</span>
           <br>
           <span class="grey-text">
+            <span *ngIf="!homebridgePkg.installedVersion">
+              {{ 'status.homebridge.label_checking_for_updates' | translate }}
+            </span>
             <span *ngIf="homebridgePkg.installedVersion && !homebridgePkg.updateAvailable && !homebridgePkg.betaUpdateAvailable"
               [translate]="'status.homebridge.label_up_to_date'">
               Up To Date
             </span>
-            <a href="javascript:void(0)" (click)="$plugin.upgradeHomebridge(homebridgePkg)" class="primary-text"
-              *ngIf="homebridgePkg.installedVersion && homebridgePkg.updateAvailable && !homebridgePkg.betaUpdateAvailable"
-              [translate]="'status.homebridge.label_update_available'" [translateParams]="homebridgePkg"
-              ngbTooltip="{{'plugins.button_upgrade' | translate}} Homebridge">
+            <a href="javascript:void(0)" (click)="$plugin.upgradeHomebridge(homebridgePkg, homebridgePkg.betaUpdateAvailable ? 'beta' : 'latest')"
+               class="primary-text" *ngIf="homebridgePkg.installedVersion && (homebridgePkg.updateAvailable || homebridgePkg.betaUpdateAvailable)"
+              [translate]="'status.homebridge.label_update_available'" [translateParams]="homebridgePkg">
               Update Available
             </a>
-            <a href="javascript:void(0)" (click)="$plugin.upgradeHomebridge(homebridgePkg, 'beta')" class="primary-text"
-              *ngIf="homebridgePkg.installedVersion && !homebridgePkg.updateAvailable && homebridgePkg.betaUpdateAvailable"
-              [translate]="'status.homebridge.label_update_available'" [translateParams]="homebridgePkg"
-              ngbTooltip="{{'plugins.button_upgrade' | translate}} Homebridge">
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="hb-status-item d-flex flex-row mr-4 pr-4">
+      <div class="d-flex">
+        <div class="mb-0 px-3 py-2 hb-status-icon">
+          <i class="fas fa-fw fa-cog fa-spin primary-text" *ngIf="!homebridgeUiPkg.installedVersion"></i>
+          <i class="fas fa-fw fa-check-circle primary-text"
+             *ngIf="homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable && !homebridgeUiPkg.betaUpdateAvailable"></i>
+          <i class="fas fa-fw fa-arrow-alt-circle-up primary-text"
+             *ngIf="homebridgeUiPkg.installedVersion && (homebridgeUiPkg.updateAvailable || homebridgeUiPkg.betaUpdateAvailable)"></i>
+        </div>
+        <div class="align-self-center">
+          <a href="javascript:void(0)" (click)="$plugin.installPreviousVersion(homebridgeUiPkg)" *ngIf="homebridgeUiPkg.installedVersion" class="card-link card-link-title">
+            Homebridge UI
+          </a>
+          <span *ngIf="!homebridgeUiPkg.installedVersion">Homebridge UI</span>
+          <br>
+          <span class="grey-text">
+            <span *ngIf="!homebridgeUiPkg.installedVersion">
+              {{ 'status.homebridge.label_checking_for_updates' | translate }}
+            </span>
+            <span *ngIf="homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable && !homebridgeUiPkg.betaUpdateAvailable"
+              [translate]="'status.homebridge.label_up_to_date'">
+              Up To Date
+            </span>
+            <a href="javascript:void(0)" (click)="$plugin.upgradeHomebridge(homebridgeUiPkg, homebridgeUiPkg.betaUpdateAvailable ? 'beta' : 'latest')"
+               class="primary-text" *ngIf="homebridgeUiPkg.installedVersion && (homebridgeUiPkg.updateAvailable || homebridgeUiPkg.betaUpdateAvailable)"
+               [translate]="'status.homebridge.label_update_available'" [translateParams]="homebridgeUiPkg">
               Update Available
             </a>
           </span>

diff --git a/...app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts b/...app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts
@@ -10,9 +10,10 @@ import { WsService } from '@/app/core/ws.service';
   styleUrls: ['./homebridge-status-widget.component.scss'],
 })
 export class HomebridgeStatusWidgetComponent implements OnInit {
-  @Input() widget;
+  @Input() widget: any;
 
   public homebridgePkg = {} as any;
+  public homebridgeUiPkg = {} as any;
   public homebridgeStatus = {} as any;
   public homebridgePluginStatus = [] as any;
 
@@ -31,47 +32,57 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
     });
 
     this.io.connected.subscribe(async () => {
-      await this.getHomebridgeStatus();
-      await this.checkHomebridgeVersion();
-      await this.getOutOfDatePlugins();
+      await Promise.all([
+        this.getHomebridgeStatus(),
+        this.checkHomebridgeVersion(),
+        this.checkHomebridgeUiVersion(),
+        this.getOutOfDatePlugins(),
+      ]);
     });
 
     if (this.io.socket.connected) {
-      await this.getHomebridgeStatus();
-      await this.checkHomebridgeVersion();
-      await this.getOutOfDatePlugins();
+      await Promise.all([
+        this.getHomebridgeStatus(),
+        this.checkHomebridgeVersion(),
+        this.checkHomebridgeUiVersion(),
+        this.getOutOfDatePlugins(),
+      ]);
     }
 
     this.io.socket.on('disconnect', () => {
       this.homebridgeStatus.status = 'down';
     });
   }
 
-  getHomebridgeStatus() {
-    return this.io.request('get-homebridge-status').toPromise()
-      .then((response) => {
-        this.homebridgeStatus = response;
-      });
+  async getHomebridgeStatus() {
+    this.homebridgeStatus = await this.io.request('get-homebridge-status').toPromise();
   }
 
-  checkHomebridgeVersion() {
-    return this.io.request('homebridge-version-check').toPromise()
-      .then((response) => {
-        this.homebridgePkg = response;
-        this.$settings.env.homebridgeVersion = response.installedVersion;
-      })
-      .catch((err) => {
-        this.$toastr.error(err.message);
-      });
+  async checkHomebridgeVersion() {
+    try {
+      const response = await this.io.request('homebridge-version-check').toPromise();
+      this.homebridgePkg = response;
+      this.$settings.env.homebridgeVersion = response.installedVersion;
+    } catch (err) {
+      this.$toastr.error(err.message);
+    }
   }
 
-  getOutOfDatePlugins() {
-    return this.io.request('get-out-of-date-plugins').toPromise()
-      .then((response) => {
-        this.homebridgePluginStatus = response;
-      })
-      .catch((err) => {
-        this.$toastr.error(err.message);
-      });
+  async checkHomebridgeUiVersion() {
+    try {
+      const response = await this.io.request('homebridge-ui-version-check').toPromise();
+      this.homebridgeUiPkg = response;
+      this.$settings.env.homebridgeUiVersion = response.installedVersion;
+    } catch (err) {
+      this.$toastr.error(err.message);
+    }
+  }
+
+  async getOutOfDatePlugins() {
+    try {
+      this.homebridgePluginStatus = await this.io.request('get-out-of-date-plugins').toPromise();
+    } catch (err) {
+      this.$toastr.error(err.message);
+    }
   }
 }