0.3.0 refactor

ui: adds overlay layer to patch-db-client

ui: getting towards mocks

ui: cleans up factory init

ui: nice type hack

ui: live api for patch

ui: api service source + http

starts up

ui: api source + http

ui: rework patchdb config, pass stashTimeout into patchDbModel

wires in temp patching into api service

ui: example of wiring patchdbmodel into page

begin integration

remove unnecessary method

linting

first data rendering

rework app initialization

http source working for ssh delete call

temp patches working

entire Embassy tab complete

not in kansas anymore

ripping, saving progress

progress for API request response types and endoint defs

Update data-model.ts

shambles, but in a good way

progress

big progress

progress

installed list working

big progress

progress

progress

begin marketplace redesign

Update api-types.ts

Update api-types.ts

marketplace improvements

cosmetic

dependencies and recommendations

begin nym auth approach

install wizard

restore flow and donations

ui/src/app/pages/server-routes/server-backup/server-backup.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { ServerBackupPage } from './server-backup.page'
+import { RouterModule, Routes } from '@angular/router'
+import { BackupConfirmationComponentModule } from 'src/app/modals/backup-confirmation/backup-confirmation.component.module'
+import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ServerBackupPage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    BackupConfirmationComponentModule,
+    PwaBackComponentModule,
+  ],
+  declarations: [
+    ServerBackupPage,
+  ],
+})
+export class ServerBackupPageModule { }

ui/src/app/pages/server-routes/server-backup/server-backup.page.html

@@ -0,0 +1,69 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <pwa-back-button></pwa-back-button>
+    </ion-buttons>
+    <ion-title>Create Backup</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="doRefresh()" color="primary">
+        <ion-icon slot="icon-only" name="reload-outline"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding-top">
+
+  <ion-item *ngIf="error" style="margin-bottom: 16px;">
+    <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
+  </ion-item>
+
+  <ion-item class="ion-margin-bottom">
+    <ion-label class="ion-text-wrap">
+      <p><ion-text color="dark">About</ion-text></p>
+      <p>
+        Select a location to back up your Embassy. Because are diff-based, so your first backup will likely take much longer than subsequent backups.
+      </p>
+      <br />
+      <p>
+        During backup, your Embassy will be unusable.
+      </p>
+    </ion-label>
+  </ion-item>
+
+  <ion-spinner *ngIf="loading; else loaded" name="lines" color="warning" class="center"></ion-spinner>
+
+  <ng-template #loaded>
+
+    <ion-item *ngIf="allPartitionsMounted">
+      <ion-text *ngIf="type === 'create'" class="ion-text-wrap" color="warning">No partitions available. To begin a backup, insert a storage device into your Embassy.</ion-text>
+      <ion-text *ngIf="type === 'restore'" class="ion-text-wrap" color="warning">No partitions available. Insert the storage device containing the backup you wish to restore.</ion-text>
+    </ion-item>
+
+    <ion-card *ngFor="let disk of disks | keyvalue">
+      <ion-card-header>
+        <ion-card-title>
+          {{ disk.value.size }}
+        </ion-card-title>
+        <ion-card-subtitle>
+          {{ disk.key }}
+        </ion-card-subtitle>
+      </ion-card-header>
+      <ion-card-content>
+        <ion-item-group>
+          <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key, partition.value)">
+            <ion-icon slot="start" name="save-outline"></ion-icon>
+            <ion-label>
+              <h2>{{ partition.value.label || partition.key }} ({{ partition.value.size || 'unknown size' }})</h2>
+              <p *ngIf="!partition.value['is-mounted']; else unavailable"><ion-text color="success">Available</ion-text></p>
+              <ng-template #unavailable>
+                <p><ion-text color="danger">Unavailable</ion-text></p>
+              </ng-template>
+            </ion-label>
+          </ion-item>
+        </ion-item-group>
+      </ion-card-content>
+    </ion-card>
+  </ng-template>
+
+</ion-content>

ui/src/app/pages/server-routes/server-backup/server-backup.page.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core'
+import { LoadingController, ModalController } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/api.service'
+import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
+import { DiskInfo, PartitionInfoEntry } from 'src/app/services/api/api-types'
+
+@Component({
+  selector: 'server-backup',
+  templateUrl: './server-backup.page.html',
+  styleUrls: ['./server-backup.page.scss'],
+})
+export class ServerBackupPage {
+  disks: DiskInfo
+  loading = true
+  error: string
+  allPartitionsMounted: boolean
+
+  constructor (
+    private readonly modalCtrl: ModalController,
+    private readonly apiService: ApiService,
+    private readonly loadingCtrl: LoadingController,
+  ) { }
+
+  ngOnInit () {
+    this.getExternalDisks()
+  }
+
+  async doRefresh () {
+    this.loading = true
+    await this.getExternalDisks()
+  }
+
+  async getExternalDisks (): Promise<void> {
+    try {
+      this.disks = await this.apiService.getDisks({ })
+      this.allPartitionsMounted = Object.values(this.disks).every(d => Object.values(d.partitions).every(p => p['is-mounted']))
+    } catch (e) {
+      console.error(e)
+      this.error = e.message
+    } finally {
+      this.loading = false
+    }
+  }
+
+  async presentModal (logicalname: string, partition: PartitionInfoEntry): Promise<void> {
+    const m = await this.modalCtrl.create({
+      componentProps: {
+        name: partition.label || logicalname,
+      },
+      cssClass: 'alertlike-modal',
+      component: BackupConfirmationComponent,
+      backdropDismiss: false,
+    })
+
+    m.onWillDismiss().then(res => {
+      const data = res.data
+      if (data.cancel) return
+      this.create(logicalname, data.password)
+    })
+
+    return await m.present()
+  }
+
+  private async create (logicalname: string, password: string): Promise<void> {
+    this.error = ''
+
+    const loader = await this.loadingCtrl.create({
+      spinner: 'lines',
+    })
+    await loader.present()
+
+    try {
+      await this.apiService.createBackup({ logicalname, password })
+    } catch (e) {
+      console.error(e)
+      this.error = e.message
+    } finally {
+      loader.dismiss()
+    }
+  }
+}