single modal for showing/hiding widgets

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 - updates to `ru.json` language file (#2207) (@SeregaTarasov)
 - add plugin list modal for updating to hb v2.0
 - change placement of page header tooltips to bottom
+- single modal for showing/hiding widgets
 
 ### Other Changes
 

ui/src/app/core/manage-plugins/manage-version/manage-version.component.html

@@ -52,13 +52,13 @@ <h5 class="modal-title">{{ 'plugins.manage.install' | translate }}: {{ plugin.di
           </button>
         </li>
         <li class="list-group-item d-flex justify-content-between align-items-center">
-          <span class="text-left">
+          <div class="text-left" style="min-width: 50%">
             {{ 'plugins.manage.all_versions' | translate }}
             <br />
-            <select class="custom-select" style="font-size: 0.875rem" [(ngModel)]="versionSelect">
+            <select class="custom-select w-100" style="font-size: 0.875rem" [(ngModel)]="versionSelect">
               <option *ngFor="let version of versions" [value]="version.version">v{{ version.version }}</option>
             </select>
-          </span>
+          </div>
           <button
             class="btn btn-primary ml-3"
             [disabled]="!versionSelect"

ui/src/app/core/manage-plugins/reset-accessories/reset-accessories.component.html

@@ -37,7 +37,10 @@ <h5 class="modal-title">{{ 'child_bridge.reset_accessories' | translate }}</h5>
             (click)="removeAccessories(item._id)"
             [disabled]="deleting || deleted.includes(item._id)"
           >
-            <i class="fas" [ngClass]="{'fa-broom': item._id !== deleting, 'fa-cog fa-spin': item._id === deleting}"></i>
+            <i
+              class="fas fa-fw"
+              [ngClass]="{'fa-broom': item._id !== deleting, 'fa-cog fa-spin': item._id === deleting}"
+            ></i>
           </button>
         </li>
       </ul>

ui/src/app/modules/settings/remove-bridge-accessories/remove-bridge-accessories.component.html

@@ -40,7 +40,10 @@ <h5 class="modal-title">{{ 'reset.clear_cache_bridge.title' | translate }}</h5>
             (click)="removeAccessories(item._id)"
             [disabled]="deleting || deleted.includes(item._id)"
           >
-            <i class="fas" [ngClass]="{'fa-trash': item._id !== deleting, 'fa-cog fa-spin': item._id === deleting}"></i>
+            <i
+              class="fas fa-fw"
+              [ngClass]="{'fa-trash': item._id !== deleting, 'fa-cog fa-spin': item._id === deleting}"
+            ></i>
           </button>
         </li>
       </ul>

ui/src/app/modules/settings/remove-single-accessory/remove-single-accessory.component.html

@@ -41,7 +41,7 @@ <h5 class="modal-title">{{ 'reset.clear_cache_single.title' | translate }}</h5>
           </span>
           <button class="btn btn-danger ml-3" (click)="removeAccessory(item)" [disabled]="deleting">
             <i
-              class="fas"
+              class="fas fa-fw"
               [ngClass]="{'fa-trash': item.UUID !== deleting, 'fa-cog fa-spin': item.UUID === deleting}"
             ></i>
           </button>

ui/src/app/modules/settings/unpair-single-bridge/unpair-single-bridge.component.html

@@ -35,7 +35,7 @@ <h5 class="modal-title">{{ 'reset.bridges_single.title' | translate }}</h5>
           </span>
           <button class="btn btn-danger" (click)="removeAccessory(item._id)" [disabled]="deleting">
             <i
-              class="fas"
+              class="fas fa-fw"
               [ngClass]="{'fa-link-slash': item._id !== deleting, 'fa-cog fa-spin': item._id === deleting}"
             ></i>
           </button>

ui/src/app/modules/status/status.component.html

@@ -9,9 +9,14 @@ <h3 class="primary-text m-0">{{ 'menu.label_status' | translate }}</h3>
         class="btn btn-elegant status-button my-0"
         [hidden]="!options.draggable.enabled"
         (click)="addWidget()"
-        [attr.aria-label]="'status.widget.add_widget' | translate"
+        container="body"
+        placement="bottom"
+        openDelay="150"
+        triggers="hover"
+        [ngbTooltip]="'status.widget.show_hide' | translate"
+        [attr.aria-label]="'status.widget.show_hide' | translate"
       >
-        <i class="fas fa-fw fa-plus"></i>
+        <i class="fas fa-fw fa-eye-low-vision"></i>
       </button>
     </div>
     <div class="btn-group" role="group" *ngIf="consoleStatus === 'up' && $auth.user.admin">

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

@@ -4,8 +4,8 @@ import { NotificationService } from '@/app/core/notification.service'
 import { SettingsService } from '@/app/core/settings.service'
 import { IoNamespace, WsService } from '@/app/core/ws.service'
 import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
-import { WidgetsAddComponent } from '@/app/modules/status/widgets-add/widgets-add.component'
-import { WidgetsControlComponent } from '@/app/modules/status/widgets-control/widgets-control.component'
+import { WidgetControlComponent } from '@/app/modules/status/widget-control/widget-control.component'
+import { WidgetVisibilityComponent } from '@/app/modules/status/widget-visibility/widget-visibility.component'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { GridsterConfig, GridsterItem } from 'angular-gridster2'
@@ -209,7 +209,7 @@ export class StatusComponent implements OnInit, OnDestroy {
   }
 
   addWidget() {
-    const ref = this.$modal.open(WidgetsAddComponent, {
+    const ref = this.$modal.open(WidgetVisibilityComponent, {
       size: 'lg',
       backdrop: 'static',
     })
@@ -221,6 +221,15 @@ export class StatusComponent implements OnInit, OnDestroy {
 
     ref.result
       .then((widget) => {
+        const index = this.dashboard.findIndex(x => x.component === widget.component)
+        if (index > -1) {
+          // Widget already exists, remove it
+          this.dashboard.splice(index, 1)
+          this.gridChangedEvent()
+          return
+        }
+
+        // Add the widget
         const item = {
           x: undefined,
           y: undefined,
@@ -251,24 +260,11 @@ export class StatusComponent implements OnInit, OnDestroy {
   }
 
   manageWidget(item) {
-    const ref = this.$modal.open(WidgetsControlComponent, {
+    const ref = this.$modal.open(WidgetControlComponent, {
       size: 'lg',
       backdrop: 'static',
     })
     ref.componentInstance.widget = item
-
-    ref.result
-      .then((action) => {
-        if (action === 'remove') {
-          const index = this.dashboard.findIndex(x => x === item)
-          this.dashboard.splice(index, 1)
-          this.gridChangedEvent()
-        }
-      })
-      .catch(() => {
-        this.gridChangedEvent()
-        item.$configureEvent.next(undefined)
-      })
   }
 
   openCreditsModal() {

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

@@ -3,6 +3,8 @@ import { CoreModule } from '@/app/core/core.module'
 import { ManagePluginsModule } from '@/app/core/manage-plugins/manage-plugins.module'
 import { CreditsComponent } from '@/app/modules/status/credits/credits.component'
 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'
@@ -17,8 +19,6 @@ import { TerminalWidgetComponent } from '@/app/modules/status/widgets/terminal-w
 import { UptimeWidgetComponent } from '@/app/modules/status/widgets/uptime-widget/uptime-widget.component'
 import { WeatherWidgetComponent } from '@/app/modules/status/widgets/weather-widget/weather-widget.component'
 import { WidgetsComponent } from '@/app/modules/status/widgets/widgets.component'
-import { WidgetsAddComponent } from '@/app/modules/status/widgets-add/widgets-add.component'
-import { WidgetsControlComponent } from '@/app/modules/status/widgets-control/widgets-control.component'
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -33,8 +33,8 @@ import { DragulaModule } from 'ng2-dragula'
   declarations: [
     StatusComponent,
     WidgetsComponent,
-    WidgetsAddComponent,
-    WidgetsControlComponent,
+    WidgetVisibilityComponent,
+    WidgetControlComponent,
     HapQrcodeWidgetComponent,
     HomebridgeLogsWidgetComponent,
     TerminalWidgetComponent,