chore: add backups info

web/projects/ui/src/app/routes/portal/routes/service/components/backups.component.ts

@@ -1,19 +1,26 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { I18nPluralPipe } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core'
 import { RouterLink } from '@angular/router'
+import { PackageDataEntry } from '@startos'
 import { TuiButtonModule } from '@taiga-ui/experimental'
 
 @Component({
   selector: 'service-backups',
   template: `
-    <div>
+    <div [style.flex]="1">
       <small>Last backup</small>
-      6 days ago
+      {{ previous() | i18nPlural: ago }}
     </div>
-    <div>
+    <div [style.flex]="1">
       <small>Next backup</small>
-      Not scheduled
+      {{ next() | i18nPlural: in }}
     </div>
-    <div>
+    <div [style.min-width.%]="100">
       <a
         tuiButton
         iconLeft="tuiIconPlusSquare"
@@ -31,11 +38,7 @@ import { TuiButtonModule } from '@taiga-ui/experimental'
       gap: 1rem;
       flex-wrap: wrap;
       white-space: nowrap;
-
-      > :last-child {
-        min-width: 100%;
-        padding-bottom: 1rem;
-      }
+      padding-bottom: 1rem;
 
       small {
         display: block;
@@ -46,6 +49,34 @@ import { TuiButtonModule } from '@taiga-ui/experimental'
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [TuiButtonModule, RouterLink],
+  imports: [TuiButtonModule, RouterLink, I18nPluralPipe],
 })
-export class ServiceBackupsComponent {}
+export class ServiceBackupsComponent {
+  pkg = input.required<PackageDataEntry>()
+
+  readonly previous = computed(() =>
+    daysBetween(new Date(), new Date(this.pkg().lastBackup || new Date())),
+  )
+
+  readonly next = computed(() =>
+    daysBetween(new Date(), new Date(this.pkg().nextBackup || new Date())),
+  )
+
+  readonly ago = {
+    '=0': 'Never performed',
+    '=1': 'day ago',
+    other: '# days ago',
+  }
+
+  readonly in = {
+    '=0': 'Not scheduled',
+    '=1': 'Tomorrow',
+    other: 'In # days',
+  }
+}
+
+function daysBetween(one: Date, two: Date): number {
+  return Math.abs(
+    Math.round((one.valueOf() - two.valueOf()) / (1000 * 60 * 60 * 24)),
+  )
+}

web/projects/ui/src/app/routes/portal/routes/service/routes/service.component.ts

@@ -65,7 +65,7 @@ import { DependencyInfo } from '../types/dependency-info'
       @if (isInstalled(service)) {
         <section [style.grid-column]="'span 3'">
           <h3>Backups</h3>
-          <service-backups />
+          <service-backups [pkg]="service.pkg" />
         </section>
 
         <section [style.grid-column]="'span 6'">

web/projects/ui/src/app/services/api/api.fixures.ts

@@ -913,7 +913,7 @@ export module Mock {
                   integer: false,
                 }),
               }),
-              displayAs: 'I\'m {{last-name}}, {{first-name}} {{last-name}}',
+              displayAs: `I'm {{last-name}}, {{first-name}} {{last-name}}`,
               uniqueBy: 'last-name',
             },
           ),
@@ -1295,6 +1295,7 @@ export module Mock {
     icon: '/assets/img/service-icons/bitcoind.svg',
     installedAt: new Date().toISOString(),
     lastBackup: null,
+    nextBackup: null,
     status: {
       configured: true,
       main: {
@@ -1539,6 +1540,7 @@ export module Mock {
     icon: '/assets/img/service-icons/btc-rpc-proxy.png',
     installedAt: new Date().toISOString(),
     lastBackup: null,
+    nextBackup: null,
     status: {
       configured: false,
       main: {
@@ -1681,6 +1683,7 @@ export module Mock {
     icon: '/assets/img/service-icons/lnd.png',
     installedAt: new Date().toISOString(),
     lastBackup: null,
+    nextBackup: null,
     status: {
       configured: true,
       main: {

web/projects/ui/src/app/services/api/mock-patch.ts

@@ -146,7 +146,8 @@ export const mockPatchData: DataModel = {
       },
       icon: '/assets/img/service-icons/bitcoind.svg',
       installedAt: new Date().toISOString(),
-      lastBackup: null,
+      lastBackup: new Date(new Date().valueOf() - 604800001).toISOString(),
+      nextBackup: new Date(new Date().valueOf() + 100000000).toISOString(),
       status: {
         configured: true,
         main: {
@@ -419,6 +420,7 @@ export const mockPatchData: DataModel = {
       icon: '/assets/img/service-icons/lnd.png',
       installedAt: new Date().toISOString(),
       lastBackup: null,
+      nextBackup: null,
       status: {
         configured: true,
         main: {

web/projects/ui/src/app/services/patch-db/data-model.ts

@@ -131,6 +131,7 @@ export type PackageDataEntry<T extends StateInfo = StateInfo> =
     stateInfo: T
     installedAt: string
     outboundProxy: string | null
+    nextBackup: string | null
   }
 
 export type StateInfo = InstalledState | InstallingState | UpdatingState