Small changes in widgets (#1637)

homebridge · Nov 7, 2023 · 0d8aa29 · 0d8aa29
1 parent 306f4fc
commit 0d8aa29
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 72 deletions.
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
@@ -15,4 +15,4 @@
       </p>
     </div>
   </div>
-</div>
+</div>
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
@@ -1,59 +1,17 @@
 <div class="flex-column d-flex align-items-stretch h-100 w-100 pb-1">
   <div style="cursor: move;" class="drag-handler pl-2 pt-1 pb-1 pr-2">Homebridge</div>
   <div class="d-flex flex-wrap w-100 pr-3 pl-2 justify-content-start gridster-item-content">
-    <div class="hb-status-item d-flex flex-row mr-4">
+    <div class="hb-status-item d-flex flex-row mr-5">
       <div class="d-flex">
-        <div class="mb-0 p-3 hb-status-icon">
-          <i class="fas fa-cog fa-spin primary-text" *ngIf="!homebridgePkg.installedVersion"></i>
-          <i class="fas fa-check-circle primary-text"
-            *ngIf="homebridgePkg.installedVersion && !homebridgePkg.updateAvailable && !homebridgePkg.betaUpdateAvailable"></i>
-          <i class="fas fa-cloud-upload-alt primary-text"
-            *ngIf="homebridgePkg.installedVersion && (homebridgePkg.updateAvailable || homebridgePkg.betaUpdateAvailable)"></i>
-        </div>
-        <div class="align-self-center">
-          <span class="grey-text" *ngIf="!homebridgePkg.installedVersion"
-            [translate]="'status.homebridge.label_checking_for_updates'">
-            Checking for updates...
-          </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" href="javascript:void(0)">
-            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" href="javascript:void(0)">
-             Update Available
-          </a>
-          <br>
-          <span class="grey-text" *ngIf="homebridgePkg.installedVersion">
-            <a href="javascript:void(0)" (click)="$plugin.installPreviousVersion(homebridgePkg)"
-              class="grey-text card-link">
-              v{{ homebridgePkg.installedVersion }}
-            </a>
-          </span>
-        </div>
-
-      </div>
-    </div>
-
-    <div class="hb-status-item d-flex flex-row mr-4">
-      <div class="d-flex">
-        <div class="mb-0 p-3 hb-status-icon">
+        <div class="mb-0 px-3 py-1 hb-status-icon">
           <i class="fas 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">
-          <span>Homebridge</span>
+          <span>System</span>
           <br>
           <span class="grey-text" *ngIf="homebridgeStatus.status === 'pending'"
             [translate]="'status.services.label_starting'">Starting...</span>
@@ -71,17 +29,60 @@
         </div>
       </div>
     </div>
+
+    <div class="hb-status-item d-flex flex-row mr-5">
+      <div class="d-flex">
+        <div class="mb-0 px-3 py-1 hb-status-icon">
+          <i class="fas fa-cog fa-spin primary-text" *ngIf="!homebridgePkg.installedVersion"></i>
+          <i class="fas fa-check-circle primary-text"
+            *ngIf="homebridgePkg.installedVersion && !homebridgePkg.updateAvailable && !homebridgePkg.betaUpdateAvailable"></i>
+          <i class="fas fa-cloud-upload-alt primary-text"
+            *ngIf="homebridgePkg.installedVersion && (homebridgePkg.updateAvailable || homebridgePkg.betaUpdateAvailable)"></i>
+        </div>
+        <div class="align-self-center">
+          <span>Homebridge </span>        
+          <span *ngIf="homebridgePkg.installedVersion">
+            <a href="javascript:void(0)" (click)="$plugin.installPreviousVersion(homebridgePkg)"
+              class="grey-text card-link">
+              v{{ homebridgePkg.installedVersion }}
+            </a>
+          </span>
+          <br>
+          <span class="grey-text">
+            <span class="grey-text" *ngIf="!homebridgePkg.installedVersion"
+            [translate]="'status.homebridge.label_checking_for_updates'">
+            Checking for updates...
+            </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" href="javascript:void(0)">
+            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" href="javascript:void(0)">
+             Update Available
+            </a>
+          </span>
+        </div>
+      </div>
+    </div>
 
     <div class="hb-status-item d-flex flex-row">
       <div class="d-flex">
-        <div class="mb-0 p-3 hb-status-icon">
+        <div class="mb-0 px-3 py-1 hb-status-icon">
           <i class="fas fa-exclamation-circle primary-text" *ngIf="homebridgePluginStatus.length"></i>
           <i class="fas fa-check-circle primary-text" *ngIf="!homebridgePluginStatus.length"></i>
         </div>
         <div class="align-self-center">
           <span [translate]="'menu.label_plugins'">Plugins</span>
           <br>
-
           <a routerLink="/plugins" class="primary-text" *ngIf="homebridgePluginStatus.length">
             {{ homebridgePluginStatus.length }} {{ homebridgePluginStatus.length === 1 ? ('status.plugin_out_of_date' | translate) : ('status.plugins_out_of_date' | translate) }}
           </a>
@@ -92,6 +93,6 @@
         </div>
       </div>
     </div>
-
+    
   </div>
-</div>
+</div>
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
@@ -5,10 +5,6 @@
   <div class="d-flex flex-wrap w-100 pl-1 pr-1" *ngIf="serverInfo">
     <table class="table table-sm table-borderless gridster-item-content ">
       <tbody>
-        <tr>
-          <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_timezone'">Timezone</th>
-          <td>{{ serverInfo.time.timezone }}</td>
-        </tr>
         <tr *ngIf="serverInfo.os">
           <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_os'">OS</th>
           <td [ngSwitch]="serverInfo.os.platform" *ngIf="!serverInfo.homebridgeRunningInSynologyPackage">
@@ -25,23 +21,7 @@
           <td *ngIf="serverInfo.homebridgeRunningInSynologyPackage">
             Synology DSM
           </td>
-        </tr>
-        <tr *ngIf="serverInfo.os">
-          <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_hostname'">Hostname</th>
-          <td>{{ serverInfo.os.hostname }}</td>
-        </tr>
-        <tr *ngIf="serverInfo.network.ip4">
-          <th scope="row" class="text-nowrap">
-            {{ 'status.widget.systeminfo.label_ipv4' | translate }} ({{ serverInfo.network.iface }})
-          </th>
-          <td>{{ serverInfo.network.ip4 }}</td>
-        </tr>
-        <tr *ngIf="serverInfo.network.ip6">
-          <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_timezone'">
-            {{ 'status.widget.systeminfo.label_ipv6' | translate }} ({{ serverInfo.network.iface }})
-          </th>
-          <td>{{ serverInfo.network.ip6 }}</td>
-        </tr>
+        </tr>   
         <tr *ngIf="serverInfo.glibcVersion">
           <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_glibc_version'">GLIBC Version</th>
           <td>
@@ -61,14 +41,30 @@
             <a href="https://homebridge.io/w/JTKEF" rel="noopener noreferrer" target="_blank" class="system-info-link"
               ngbTooltip="{{ nodejsInfo.updateAvailable ? ('plugins.status_update_available' | translate) + ' - ' + nodejsInfo.latestVersion : ''}}">
               {{ serverInfo.nodeVersion }}
-              <i *ngIf="nodejsInfo.showUpdateWarning" class="primary-text fas fa-info-circle"></i>
+              <i *ngIf="nodejsInfo.showUpdateWarning" class="primary-text fas fa-circle-up"></i>
             </a>
           </td>
         </tr>
         <tr>
           <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_nodejs_path'">Node.js Path</th>
           <td>{{ nodejsInfo.installPath }}</td>
         </tr>
+        <tr *ngIf="serverInfo.network.ip4">
+          <th scope="row" class="text-nowrap">
+            {{ 'status.widget.systeminfo.label_ipv4' | translate }} ({{ serverInfo.network.iface }})
+          </th>
+          <td>{{ serverInfo.network.ip4 }}</td>
+        </tr>
+        <tr *ngIf="serverInfo.network.ip6">
+          <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_timezone'">
+            {{ 'status.widget.systeminfo.label_ipv6' | translate }} ({{ serverInfo.network.iface }})
+          </th>
+          <td>{{ serverInfo.network.ip6 }}</td>
+        </tr>
+        <tr *ngIf="serverInfo.os">
+          <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_hostname'">Hostname</th>
+          <td>{{ serverInfo.os.hostname }}</td>
+        </tr>
         <tr>
           <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_service_user'">User</th>
           <td>{{ serverInfo.serviceUser }}</td>
@@ -94,6 +90,10 @@
             Synology Package</th>
           <td>Yes</td>
         </tr>
+        <tr>
+          <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_timezone'">Timezone</th>
+          <td>{{ serverInfo.time.timezone }}</td>
+        </tr>
         <tr *ngIf="serverInfo.homebridgeServiceMode">
           <th scope="row" class="text-nowrap" [translate]="'status.widget.systeminfo.label_service_mode'">Service Mode</th>
           <td>Yes</td>