refactor status and child bridge widgets

CHANGELOG.md

@@ -34,6 +34,7 @@ Plugin developers:
 - add plugin config validation functionality
 - switch from a top menu to a sidebar menu
 - show pairing status for bridges around the ui
+- refactor status and child bridge widgets
 
 ### Other Changes
 

src/modules/status/status.service.ts

@@ -286,6 +286,7 @@ export class StatusService {
       pin: this.configService.homebridgeConfig.bridge.pin,
       setupUri: this.serverService.setupCode,
       packageVersion: this.configService.package.version,
+      paired: this.serverService.paired,
     }
   }
 

ui/src/app/modules/status/status.module.ts

@@ -6,12 +6,12 @@ import { StatusComponent } from '@/app/modules/status/status.component'
 import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
 import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
 import { AccessoriesWidgetComponent } from '@/app/modules/status/widgets/accessories-widget/accessories-widget.component'
-import { ChildBridgeWidgetComponent } from '@/app/modules/status/widgets/child-bridge-widget/child-bridge-widget.component'
 import { ClockWidgetComponent } from '@/app/modules/status/widgets/clock-widget/clock-widget.component'
 import { CpuWidgetComponent } from '@/app/modules/status/widgets/cpu-widget/cpu-widget.component'
 import { HapQrcodeWidgetComponent } from '@/app/modules/status/widgets/hap-qrcode-widget/hap-qrcode-widget.component'
 import { HomebridgeLogsWidgetComponent } from '@/app/modules/status/widgets/homebridge-logs-widget/homebridge-logs-widget.component'
 import { HomebridgeStatusWidgetComponent } from '@/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component'
+import { HomekitBridgesWidgetComponent } from '@/app/modules/status/widgets/homekit-bridges-widget/homekit-bridges-widget.component'
 import { MemoryWidgetComponent } from '@/app/modules/status/widgets/memory-widget/memory-widget.component'
 import { NetworkWidgetComponent } from '@/app/modules/status/widgets/network-widget/network-widget.component'
 import { SystemInfoWidgetComponent } from '@/app/modules/status/widgets/system-info-widget/system-info-widget.component'
@@ -47,7 +47,7 @@ import { DragulaModule } from 'ng2-dragula'
     WeatherWidgetComponent,
     AccessoriesWidgetComponent,
     ClockWidgetComponent,
-    ChildBridgeWidgetComponent,
+    HomekitBridgesWidgetComponent,
     CreditsComponent,
   ],
   imports: [

ui/src/app/modules/status/widget-control/widget-control.component.html

@@ -52,21 +52,6 @@ <h5 class="modal-title">{{ 'status.widget.title_manage_widget' | translate }}</h
           {{ 'status.widget.accessories.choose_accessories' | translate }}
         </p>
       </div>
-      <div *ngSwitchCase="'HomebridgeStatusWidgetComponent'">
-        <div class="form-group my-2 row align-items-center">
-          <label class="col-6 col-form-label">{{ 'status.widget.homebridge_port' | translate }}</label>
-          <div class="col-6 text-right">
-            <input
-              type="checkbox"
-              class="rendux-input"
-              id="hidePort"
-              [(ngModel)]="widget.hidePort"
-              [attr.aria-label]="'status.widget.homebridge_port' | translate"
-            />
-            <label for="hidePort" class="rendux-label ml-3" style="min-width: 50px"></label>
-          </div>
-        </div>
-      </div>
       <div *ngSwitchCase="'HomebridgeLogsWidgetComponent'">
         <div class="form-group my-2 row align-items-center">
           <label class="col-6 col-form-label">{{ 'status.widget.font_size' | translate }}</label>

ui/src/app/modules/status/widget-visibility/widget-visibility.component.ts

@@ -50,7 +50,7 @@ export class WidgetVisibilityComponent implements OnInit {
         hideOnMobile: false,
       },
       {
-        name: 'Child Bridge Status',
+        name: this.$translate.instant('child_bridge.bridges'),
         component: 'ChildBridgeWidgetComponent',
         hidden: !this.$settings.env.serviceMode,
         cols: 5,

ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.html

@@ -1,46 +1,11 @@
-<div class="flex-column d-flex align-items-stretch h-100 w-100 pb-1">
-  <div class="drag-handler p-2" [ngClass]="{ 'widget-cursor': widget.draggable }">Homebridge</div>
-  <div class="d-flex flex-wrap w-100 pr-3 pl-2 justify-content-start gridster-item-content overflow-auto no-scrollbars">
-    <div class="hb-status-item d-flex flex-row" style="min-width: max(25%, 225px)">
-      <div class="d-flex">
-        <div class="mb-0 px-3 py-1 hb-status-icon">
-          <i
-            class="fas fa-fw primary-text"
-            [ngClass]="{
-            'fa-exclamation-circle red-text': homebridgeStatus.status === 'down',
-            'fa-cog fa-spin': homebridgeStatus.status === 'pending',
-            'fa-check-circle': homebridgeStatus.status === 'up'
-          }"
-          ></i>
-        </div>
-        <div class="align-self-center">
-          <a href="javascript:void(0)" routerLink="/logs" class="card-link card-link-title">
-            {{ 'menu.label_status' | translate }}
-          </a>
-          <br />
-          <span class="grey-text" *ngIf="homebridgeStatus.status === 'pending'">
-            {{ 'status.services.label_starting' | translate }}
-          </span>
-          <span class="grey-text" *ngIf="homebridgeStatus.status === 'up' && !widget.hidePort">
-            {{ 'status.services.label_running_on_port' | translate: { port: homebridgeStatus.port } }}
-          </span>
-          <span class="grey-text" *ngIf="homebridgeStatus.status === 'up' && widget.hidePort">
-            {{ 'status.services.label_running' | translate: { port: homebridgeStatus.port } }}
-          </span>
-          <a
-            routerLink="/logs"
-            class="primary-text"
-            *ngIf="homebridgeStatus.status !== 'up' && homebridgeStatus.status !== 'pending'"
-          >
-            {{ 'status.services.label_not_running' | translate }} - {{ 'menu.tooltip_view_logs' | translate }}
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <div class="hb-status-item d-flex flex-row" style="min-width: max(25%, 225px)">
+<div class="flex-column d-flex align-items-stretch h-100 w-100 pb-3">
+  <div class="drag-handler p-2" [ngClass]="{ 'widget-cursor': widget.draggable }">
+    {{ 'status.services.updates' | translate }}
+  </div>
+  <div class="d-flex flex-wrap w-100 mb-2 justify-content-start gridster-item-content overflow-auto no-scrollbars">
+    <div class="hb-status-item d-flex flex-row mt-2" style="min-width: max(25%, 175px)">
       <div class="d-flex">
-        <div class="mb-0 px-3 py-1 hb-status-icon">
+        <div class="mb-0 px-3 hb-status-icon d-flex align-items-center">
           <i class="fas fa-fw fa-cog fa-spin primary-text" *ngIf="!homebridgePkg.installedVersion"></i>
           <i
             class="fas fa-fw fa-check-circle primary-text"
@@ -57,11 +22,12 @@
             (click)="$plugin.installAlternateVersion(homebridgePkg)"
             *ngIf="homebridgePkg.installedVersion"
             class="card-link card-link-title"
-            >Homebridge</a
           >
+            Homebridge
+          </a>
           <span *ngIf="!homebridgePkg.installedVersion">Homebridge</span>
           <br />
-          <span class="grey-text">
+          <span class="grey-text small">
             <span *ngIf="!homebridgePkg.installedVersion"> {{ 'status.homebridge.checking' | translate }} </span>
             <span *ngIf="homebridgePkg.installedVersion && !homebridgePkg.updateAvailable">
               {{ 'status.homebridge.up_to_date' | translate }}
@@ -79,9 +45,9 @@
       </div>
     </div>
 
-    <div class="hb-status-item d-flex flex-row" style="min-width: max(25%, 225px)">
+    <div class="hb-status-item d-flex flex-row mt-2" style="min-width: max(25%, 175px)">
       <div class="d-flex">
-        <div class="mb-0 px-3 py-1 hb-status-icon">
+        <div class="mb-0 px-3 hb-status-icon d-flex align-items-center">
           <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"
@@ -102,7 +68,7 @@
           >
           <span *ngIf="!homebridgeUiPkg.installedVersion">Homebridge UI</span>
           <br />
-          <span class="grey-text">
+          <span class="grey-text small">
             <span *ngIf="!homebridgeUiPkg.installedVersion"> {{ 'status.homebridge.checking' | translate }} </span>
             <span *ngIf="homebridgeUiPkg.installedVersion && !homebridgeUiPkg.updateAvailable">
               {{ 'status.homebridge.up_to_date' | translate }}
@@ -120,9 +86,9 @@
       </div>
     </div>
 
-    <div class="hb-status-item d-flex flex-row" style="min-width: max(25%, 225px)">
+    <div class="hb-status-item d-flex flex-row mt-2" style="min-width: max(25%, 175px)">
       <div class="d-flex">
-        <div class="mb-0 px-3 py-1 hb-status-icon">
+        <div class="mb-0 px-3 hb-status-icon d-flex align-items-center">
           <i class="fas fa-fw fa-cog fa-spin primary-text" *ngIf="!homebridgePluginStatusDone"></i>
           <i
             class="fas fa-fw fa-arrow-alt-circle-up primary-text"
@@ -138,18 +104,18 @@
             {{ 'menu.label_plugins' | translate }}
           </a>
           <br />
-          <span class="grey-text" *ngIf="!homebridgePluginStatusDone">
+          <span class="grey-text small" *ngIf="!homebridgePluginStatusDone">
             {{ 'status.homebridge.checking' | translate }}
           </span>
           <a
             routerLink="/plugins"
-            class="primary-text"
+            class="primary-text small"
             *ngIf="homebridgePluginStatusDone && homebridgePluginStatus.length"
           >
             {{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' |
             translate) : ('status.plugins_out_of_date' | translate) }}
           </a>
-          <span class="grey-text" *ngIf="homebridgePluginStatusDone && !homebridgePluginStatus.length">
+          <span class="grey-text small" *ngIf="homebridgePluginStatusDone && !homebridgePluginStatus.length">
             {{ 'status.homebridge.up_to_date' | translate }}
           </span>
         </div>

ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.scss

@@ -1,5 +1,5 @@
 .hb-status-icon {
-  font-size: 35px;
+  font-size: 20px;
 }
 
 .hb-status-item {

ui/src/app/modules/status/widgets/homebridge-status-widget/homebridge-status-widget.component.ts

@@ -15,7 +15,6 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
 
   public homebridgePkg = {} as any
   public homebridgeUiPkg = {} as any
-  public homebridgeStatus = {} as any
   public homebridgePluginStatus = [] as any
   public homebridgePluginStatusDone = false as boolean
 
@@ -31,13 +30,9 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
 
   async ngOnInit() {
     this.io = this.$ws.getExistingNamespace('status')
-    this.io.socket.on('homebridge-status', (data) => {
-      this.homebridgeStatus = data
-    })
 
     this.io.connected.subscribe(async () => {
       await Promise.all([
-        this.getHomebridgeStatus(),
         this.checkHomebridgeVersion(),
         this.checkHomebridgeUiVersion(),
         this.getOutOfDatePlugins(),
@@ -46,20 +41,11 @@ export class HomebridgeStatusWidgetComponent implements OnInit {
 
     if (this.io.socket.connected) {
       await Promise.all([
-        this.getHomebridgeStatus(),
         this.checkHomebridgeVersion(),
         this.checkHomebridgeUiVersion(),
         this.getOutOfDatePlugins(),
       ])
     }
-
-    this.io.socket.on('disconnect', () => {
-      this.homebridgeStatus.status = 'down'
-    })
-  }
-
-  async getHomebridgeStatus() {
-    this.homebridgeStatus = await firstValueFrom(this.io.request('get-homebridge-status'))
   }
 
   async checkHomebridgeVersion() {