backup modal - move generate now button to list

CHANGELOG.md

@@ -16,6 +16,7 @@ All notable changes to `homebridge-config-ui-x` will be documented in this file.
 - option to delete a scheduled backup file
 - option to restore a scheduled backup file
   - without the need to download and upload it
+- backup modal - move generate now button to list
 
 ### Other Changes
 

config.schema.json

@@ -410,7 +410,10 @@
         "placeholder": 28800,
         "minimum": 600,
         "maximum": 86400000,
-        "description": "The number of seconds before a user session will timeout. Defaults to 8 hours."
+        "description": "The number of seconds before a user session will timeout. Defaults to 8 hours.",
+        "condition": {
+          "functionBody": "return model.auth === 'form'"
+        }
       },
       "log": {
         "type": "object",
@@ -593,7 +596,10 @@
         "title": "Scheduled backup destination path",
         "description": "The full path to where the service should save daily scheduled backups archives",
         "type": "string",
-        "placeholder": "eg. /home/pi/homebridge-backups"
+        "placeholder": "eg. /home/pi/homebridge-backups",
+        "condition": {
+          "functionBody": "return !model.scheduledBackupDisable"
+        }
       },
       "scheduledBackupDisable": {
         "title": "Disable Scheduled Backups",

ui/package.json

@@ -31,7 +31,7 @@
     "@zajsf/core": "17.2.4",
     "angular-gridster2": "18.0.1",
     "bootstrap": "4.6.2",
-    "chart.js": "4.4.4",
+    "chart.js": "4.4.5",
     "dayjs": "1.11.13",
     "emoji-js": "3.8.0",
     "file-saver": "2.0.5",
@@ -52,7 +52,7 @@
     "rxjs": "7.8.1",
     "semver": "7.6.3",
     "socket.io-client": "4.8.0",
-    "tslib": "2.7.0",
+    "tslib": "2.8.0",
     "uuid": "10.0.0",
     "xterm": "4.19.0",
     "xterm-addon-fit": "0.5.0",

ui/src/app/core/components/information/information.component.html

@@ -48,7 +48,7 @@ <h5 class="mb-0">{{ subtitle }}</h5>
         *ngIf="ctaButtonLink"
         class="btn btn-primary text-decoration-none"
         target="_blank"
-        href="{{ ctaButtonLink }}"
+        [href]="ctaButtonLink"
         rel="noopener noreferrer"
       >
         {{ ctaButtonLabel }} <i class="fas fa-fw fa-external-link-alt"></i>

ui/src/app/modules/config-editor/config-editor.component.html

@@ -13,7 +13,7 @@ <h3 class="primary-text m-0">{{ 'menu.config_json_editor' | translate }}</h3>
         triggers="hover"
         *ngIf="!originalConfig"
         [attr.aria-label]="'form.button_download' | translate"
-        ngbTooltip="{{ 'form.button_download' | translate }}"
+        [ngbTooltip]="'form.button_download' | translate"
       >
         <i class="fas fa-fw fa-download"></i>
       </button>
@@ -26,7 +26,7 @@ <h3 class="primary-text m-0">{{ 'menu.config_json_editor' | translate }}</h3>
         placement="bottom"
         openDelay="150"
         triggers="hover"
-        ngbTooltip="{{ 'form.button_cancel' | translate }}"
+        [ngbTooltip]="'form.button_cancel' | translate"
         [attr.aria-label]="'form.button_cancel' | translate"
       >
         <i class="fas fa-fw fa-times"></i>
@@ -40,7 +40,7 @@ <h3 class="primary-text m-0">{{ 'menu.config_json_editor' | translate }}</h3>
         triggers="hover"
         *ngIf="!originalConfig"
         [attr.aria-label]="'form.button_restore' | translate"
-        ngbTooltip="{{ 'form.button_restore' | translate }}"
+        [ngbTooltip]="'form.button_restore' | translate"
       >
         <i class="fas fa-fw fa-history"></i>
       </button>
@@ -52,7 +52,7 @@ <h3 class="primary-text m-0">{{ 'menu.config_json_editor' | translate }}</h3>
         placement="bottom"
         openDelay="150"
         triggers="hover"
-        ngbTooltip="{{ 'form.button_save' | translate }}"
+        [ngbTooltip]="'form.button_save' | translate"
         [attr.aria-label]="'form.button_save' | translate"
       >
         <i *ngIf="!saveInProgress" class="fas fa-fw fa-floppy-disk"></i>

ui/src/app/modules/plugins/plugin-card/plugin-info/plugin-info.component.html

@@ -46,7 +46,7 @@ <h4>{{ plugin.displayName || plugin.name }}</h4>
         *ngIf="plugin.links.homepage || plugin.links.npm"
         class="btn btn-primary text-decoration-none"
         target="_blank"
-        href="{{ plugin.links.homepage || plugin.links.npm }}"
+        [href]="plugin.links.homepage || plugin.links.npm"
         rel="noopener noreferrer"
       >
         {{ 'plugins.button_homepage' | translate }} <i class="fas fa-fw fa-external-link-alt"></i>

ui/src/app/modules/power-options/power-options.component.html

@@ -19,7 +19,7 @@ <h3 class="primary-text m-0">{{ 'menu.restart.title' | translate }}</h3>
       container="body"
       openDelay="150"
       triggers="hover"
-      ngbTooltip="{{ 'reset.force_restart_hb_help_text' | translate }}"
+      [ngbTooltip]="'reset.force_restart_hb_help_text' | translate"
     >
       {{ 'menu.hbrestart.confirm_ui' | translate }}
     </button>

ui/src/app/modules/settings/backup/backup.component.html

@@ -7,7 +7,7 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
       data-dismiss="modal"
       [attr.aria-label]="'form.button_close' | translate"
       (click)="$activeModal.dismiss('Dismiss')"
-      [disabled]="deleting"
+      [disabled]="clicked || deleting"
     >
       <span aria-hidden="true">&times;</span>
     </button>
@@ -16,25 +16,43 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
     <div class="text-center mt-2 mb-3">
       <i class="fas fa-fw fa-hard-drive primary-text" style="font-size: 75px"></i>
     </div>
-    <p>{{ 'backup.backup_help_one' | translate }}</p>
-    <p>{{ 'backup.backup_help_two' | translate }}</p>
-    <p>{{ 'backup.backup_warning' | translate }}</p>
-    <div class="text-center mb-3">
-      <button
-        type="button"
-        class="btn btn-primary"
-        data-dismiss="modal"
-        (click)="onDownloadBackupClick()"
-        [disabled]="clicked"
-      >
-        <i *ngIf="clicked" class="fa fa-fw fa-circle-notch fa-spin"></i>
-        <span *ngIf="!clicked">{{ 'backup.archive.download' | translate }}</span>
-      </button>
-    </div>
-    <p *ngIf="backupTime">
-      {{ 'backup.scheduled_backup_time' | translate:{ backupTime: backupTime | date:'shortTime', dayCount: 7 } }}
-    </p>
-    <ul class="list-group list-group-box mt-2" *ngIf="scheduledBackups && scheduledBackups.length">
+    <ul>
+      <li>{{ 'backup.backup_help_one' | translate }}</li>
+      <li>{{ 'backup.backup_help_two' | translate }}</li>
+      <li>{{ 'backup.backup_warning' | translate }}</li>
+      <li *ngIf="backupTime">
+        {{ 'backup.scheduled_backup_time' | translate:{ backupTime: backupTime | date:'shortTime', dayCount: 7 } }}
+      </li>
+    </ul>
+    <ul class="list-group list-group-box mt-2">
+      <li class="list-group-item d-flex justify-content-between align-items-center">
+        <span>
+          <span> {{ Date.now() | date:'mediumDate' }} </span>
+          <br />
+          <small class="grey-text">{{ Date.now() | date:'shortTime' }} &middot; {{ 'backup.now' | translate }}</small>
+        </span>
+        <span style="display: flex; flex-wrap: nowrap">
+          <button class="btn btn-primary ml-3" disabled [attr.aria-label]="'form.button_restore' | translate">
+            <i class="fas fa-fw fa-history"></i>
+          </button>
+          <button
+            class="btn btn-primary ml-1"
+            (click)="onDownloadBackupClick()"
+            [disabled]="clicked"
+            [ngbTooltip]="'form.button_download' | translate"
+            placement="bottom"
+            container="modal"
+            openDelay="150"
+            triggers="hover"
+            [attr.aria-label]="'form.button_download' | translate"
+          >
+            <i class="fas fa-fw" [ngClass]="{'fa-download': !clicked, 'fa-cog fa-spin': clicked}"></i>
+          </button>
+          <button class="btn btn-danger ml-1" disabled [attr.aria-label]="'form.button_delete' | translate">
+            <i class="fas fa-fw fa-trash"></i>
+          </button>
+        </span>
+      </li>
       <li
         *ngFor="let backup of scheduledBackups"
         class="list-group-item d-flex justify-content-between align-items-center"
@@ -48,7 +66,7 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
             {{ backup.timestamp | date:'shortTime' }} &middot;
             <span
               *ngIf="backup.size > backup.maxBackupSize"
-              ngbTooltip="{{ 'backup.backup_exceeds_max_size' | translate: { backupSize: backup.size + 'MB', maxBackupSizeText: backup.maxBackupSizeText } }}"
+              [ngbTooltip]="'backup.backup_exceeds_max_size' | translate: { backupSize: backup.size + 'MB', maxBackupSizeText: backup.maxBackupSizeText }"
               container="modal"
               openDelay="150"
               triggers="hover"
@@ -64,8 +82,8 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
           <button
             class="btn btn-primary ml-3"
             (click)="restore(backup)"
-            [disabled]="deleting || backup.size > backup.maxBackupSize"
-            ngbTooltip="{{ 'form.button_restore' | translate }}"
+            [disabled]="clicked || deleting || backup.size > backup.maxBackupSize"
+            [ngbTooltip]="'form.button_restore' | translate"
             placement="bottom"
             container="modal"
             openDelay="150"
@@ -77,8 +95,8 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
           <button
             class="btn btn-primary ml-1"
             (click)="download(backup)"
-            [disabled]="deleting"
-            ngbTooltip="{{ 'form.button_download' | translate }}"
+            [disabled]="clicked || deleting"
+            [ngbTooltip]="'form.button_download' | translate"
             placement="bottom"
             container="modal"
             openDelay="150"
@@ -90,8 +108,8 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
           <button
             class="btn btn-danger ml-1"
             (click)="delete(backup)"
-            [disabled]="deleting"
-            ngbTooltip="{{ 'form.button_delete' | translate }}"
+            [disabled]="clicked || deleting"
+            [ngbTooltip]="'form.button_delete' | translate"
             placement="bottom"
             container="modal"
             openDelay="150"
@@ -107,12 +125,6 @@ <h5 class="modal-title">{{ 'backup.title_backup' | translate }}</h5>
       </li>
     </ul>
 
-    <div *ngIf="!scheduledBackups.length && !errorMessage">
-      <div class="alert" role="alert">
-        {{ 'backup.scheduled_backup_none' | translate:{ backupTime: backupTime | date:'shortTime' } }}
-      </div>
-    </div>
-
     <div *ngIf="errorMessage">
       <div class="alert alert-error" role="alert">
         <h4 class="alert-heading">{{ 'toast.title_error' | translate }}</h4>
@@ -129,7 +141,7 @@ <h4 class="alert-heading">{{ 'toast.title_error' | translate }}</h4>
         class="btn btn-elegant"
         data-dismiss="modal"
         (click)="$activeModal.dismiss('Dismiss')"
-        [disabled]="deleting"
+        [disabled]="clicked || deleting"
       >
         {{ 'form.button_close' | translate }}
       </button>

ui/src/app/modules/settings/backup/backup.component.ts

@@ -121,4 +121,6 @@ export class BackupComponent implements OnInit {
       },
     })
   }
+
+  protected readonly Date = Date
 }

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

@@ -22,7 +22,7 @@
         <div style="min-width: 48px" class="grey-text text-right">
           <!-- <a *ngIf="!bridge.restartInProgress && bridge.paired === false" href="javascript:void(0)"
             (click)="restartChildBridge(bridge)" class="grey-text mr-1"
-            ngbTooltip="{{ 'child_bridge.bridge_connect' | translate }}" container="body" openDelay="150" triggers="hover"
+            [ngbTooltip]="'child_bridge.bridge_connect' | translate" container="body" openDelay="150" triggers="hover"
             [placement]="['left', 'top', 'bottom']">
             <i class="fa-fw icon-button fas fa-fw fa-qrcode"></i>
           </a> -->
@@ -31,7 +31,7 @@
             href="javascript:void(0)"
             (click)="restartChildBridge(bridge)"
             class="grey-text"
-            ngbTooltip="{{ 'menu.tooltip_restart' | translate }}"
+            [ngbTooltip]="'menu.tooltip_restart' | translate"
             container="body"
             openDelay="150"
             triggers="hover"

ui/src/app/shared/layout/layout.component.html

@@ -59,7 +59,7 @@
           class="nav-item waves-effect waves-light"
           routerLinkActive="active"
           placement="bottom"
-          ngbTooltip="{{ 'menu.tooltip_view_logs' | translate }}"
+          [ngbTooltip]="'menu.tooltip_view_logs' | translate"
           container="body"
           openDelay="150"
           triggers="hover"
@@ -72,7 +72,7 @@
           class="nav-item waves-effect waves-light"
           routerLinkActive="active"
           placement="bottom"
-          ngbTooltip="{{ 'menu.tooltip_restart' | translate }}"
+          [ngbTooltip]="'menu.tooltip_restart' | translate"
           container="body"
           openDelay="150"
           triggers="hover"

ui/src/i18n/bg.json

@@ -50,7 +50,6 @@
   "accessories.settings_link": "You can access the Homebridge Settings at any time from the main menu",
   "accessories.show_on_dashboard": "Show in dashboard widget",
   "accessories.title_accessories": "Аксесоари",
-  "backup.archive.download": "Download Backup",
   "backup.backup_delete_failed": "Backup deletion failed. See logs for details.",
   "backup.backup_download_failed": "Backup download failed.",
   "backup.backup_exceeds_max_size": "Backup ({{ backupSize }}) exceeds maximum restore file size of {{ maxBackupSizeText }}",
@@ -62,12 +61,12 @@
   "backup.label_choose_backup_file_to_restore": "Choose backup file to restore…",
   "backup.label_uploading": "Uploading…",
   "backup.load_error": "Failed to load config backup.",
+  "backup.now": "Now",
   "backup.restore_failed": "Restore Failed",
   "backup.restore_help_one": "Restore a backup archive you previously made using the Homebridge UI. Your Homebridge config, cached accessories, HomeKit pairings and Homebridge UI user accounts will be restored. Any Homebridge plugins you had installed will also be downloaded from the npm registry.",
   "backup.restore_help_two": "You will need to login to the Homebridge UI after doing a restore using the credentials from the restored instance.",
   "backup.restore_max_size": "You can restore a backup archive up to {{ maxBackupSizeText }} in size.",
   "backup.restore_warning": "Restoring from a backup will irreversibly overwrite the current Homebridge configuration.",
-  "backup.scheduled_backup_none": "No scheduled backups have been created yet. The next automated backup is scheduled to be taken at {{ backupTime }} server time.",
   "backup.scheduled_backup_time": "A full backup of the Homebridge instance is automatically created every day at {{ backupTime }} and kept for {{ dayCount }} days.",
   "backup.title_backup": "Backup",
   "child_bridge.about": "Homebridge allows you to run your plugin's platform or accessory as an isolated child bridge. This can improve the general responsiveness and reliability of Homebridge.",