From 44d58f3b6ee486d4d738efc78ba81871b7e5fcca Mon Sep 17 00:00:00 2001
From: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Date: Wed, 30 Jun 2021 17:31:57 -0600
Subject: [PATCH] loading polish

---
 .../src/app/pages/home/home.page.html         | 44 ++++++++++--------
 setup-wizard/src/app/pages/home/home.page.ts  | 23 ++++++++--
 .../src/app/pages/recover/recover.page.html   | 45 +++++++++++--------
 .../src/app/pages/recover/recover.page.ts     |  8 +++-
 .../src/app/services/api/mock-api.service.ts  | 18 ++++----
 .../src/app/services/state.service.ts         |  3 +-
 6 files changed, 90 insertions(+), 51 deletions(-)

diff --git a/setup-wizard/src/app/pages/home/home.page.html b/setup-wizard/src/app/pages/home/home.page.html
index ba8e793d1..153a8e4ca 100644
--- a/setup-wizard/src/app/pages/home/home.page.html
+++ b/setup-wizard/src/app/pages/home/home.page.html
@@ -6,25 +6,31 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <div *ngIf="!stateService.dataDrive">
-    <h2 color="light">Select Data Drive</h2>
-    <ion-card 
-      *ngFor="let drive of dataDrives"
-      (click)="selectDrive(drive)"
-      button="true"
-      [class.selected]="selectedDrive?.logicalname === drive.logicalname"
-      color="light"
-    >
-      <ion-card-header>
-        <ion-card-title>{{drive.logicalname}}</ion-card-title>
-        <ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
-      </ion-card-header>
-    
-      <ion-card-content>
-        Currently using {{drive.used}} out of {{drive.capacity}} bytes.
-      </ion-card-content>
-    </ion-card>
-    <ion-button (click)="warn()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+  <div *ngIf="!stateService.dataDrive && dataDrives">
+    <div *ngIf="!dataDrives.length">
+      <h2 color="light">No data drives found</h2>
+      <p color="light">Please connect a data drive to your embassy and refresh the page.</p>
+    </div>
+    <div *ngIf="dataDrives.length">
+      <h2 color="light">Select Data Drive</h2>
+      <ion-card 
+        *ngFor="let drive of dataDrives"
+        (click)="selectDrive(drive)"
+        button="true"
+        [class.selected]="selectedDrive?.logicalname === drive.logicalname"
+        color="light"
+      >
+        <ion-card-header>
+          <ion-card-title>{{drive.logicalname}}</ion-card-title>
+          <ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
+        </ion-card-header>
+      
+        <ion-card-content>
+          Currently using {{drive.used}} out of {{drive.capacity}} bytes.
+        </ion-card-content>
+      </ion-card>
+      <ion-button (click)="warn()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+    </div>
   </div>
   <div *ngIf="stateService.dataDrive">
     <ion-card
diff --git a/setup-wizard/src/app/pages/home/home.page.ts b/setup-wizard/src/app/pages/home/home.page.ts
index a4388fb2e..15cce0683 100644
--- a/setup-wizard/src/app/pages/home/home.page.ts
+++ b/setup-wizard/src/app/pages/home/home.page.ts
@@ -10,7 +10,7 @@ import { PasswordPage } from '../password/password.page'
   styleUrls: ['home.page.scss'],
 })
 export class HomePage {
-  dataDrives = []
+  dataDrives = null
   selectedDrive: DataDrive = null
 
   constructor(
@@ -22,8 +22,16 @@ export class HomePage {
   ) {}
 
   async ngOnInit() {
+    const loader = await this.loadingCtrl.create({
+      message: 'Selecting data drive'
+    })
     if(!this.stateService.dataDrive) {
+      const loader = await this.loadingCtrl.create({
+        message: 'Fetching data drives'
+      })
+      await loader.present()
       this.dataDrives = await this.apiService.getDataDrives()
+      loader.dismiss()
     }
   }
 
@@ -61,8 +69,17 @@ export class HomePage {
   }
 
   async chooseDrive() {
-    await this.apiService.selectDataDrive(this.selectedDrive.logicalname)
-    this.stateService.dataDrive = this.selectedDrive
+    const loader = await this.loadingCtrl.create({
+      message: 'Selecting data drive'
+    })
+    await loader.present()
+    try {
+      await this.apiService.selectDataDrive(this.selectedDrive.logicalname)
+      this.stateService.dataDrive = this.selectedDrive
+    } catch (e) {
+    } finally {
+      loader.dismiss()
+    }
   }
 
   async presentPasswordModal() {
diff --git a/setup-wizard/src/app/pages/recover/recover.page.html b/setup-wizard/src/app/pages/recover/recover.page.html
index 7ea070ea8..8cd541d6d 100644
--- a/setup-wizard/src/app/pages/recover/recover.page.html
+++ b/setup-wizard/src/app/pages/recover/recover.page.html
@@ -6,25 +6,32 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <div *ngIf="!stateService.recoveryDrive">
-    <h2 color="light">Select Recovery Drive</h2>
-    <ion-card 
-      *ngFor="let drive of dataDrives"
-      (click)="selectDrive(drive)"
-      button="true"
-      [class.selected]="selectedDrive?.logicalname === drive.logicalname"
-      color="light"
-    >
-      <ion-card-header>
-        <ion-card-title>{{drive.logicalname}}</ion-card-title>
-        <ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
-      </ion-card-header>
-
-      <ion-card-content>
-        Currently running {{drive.version}}
-      </ion-card-content>
-    </ion-card>
-    <ion-button (click)="chooseDrive()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+  <div *ngIf="!stateService.recoveryDrive && dataDrives?.length">
+    <div *ngIf="!dataDrives.length">
+      <h2 color="light">No recovery drives found</h2>
+      <p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
+    </div>
+    <div>
+      <h2 color="light">Select Recovery Drive</h2>
+      <ion-card 
+        *ngFor="let drive of dataDrives"
+        (click)="selectDrive(drive)"
+        button="true"
+        [class.selected]="selectedDrive?.logicalname === drive.logicalname"
+        color="light"
+      >
+        <ion-card-header>
+          <ion-card-title>{{drive.logicalname}}</ion-card-title>
+          <ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
+        </ion-card-header>
+  
+        <ion-card-content>
+          Currently running {{drive.version}}
+        </ion-card-content>
+      </ion-card>
+      <ion-button (click)="chooseDrive()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+    </div>
+    
   </div>
   <div *ngIf="stateService.recoveryDrive">
     <h2>Progress: {{ 100 * stateService.dataProgress }}% <ion-spinner *ngIf="stateService.dataProgress !== 1"></ion-spinner> </h2>
diff --git a/setup-wizard/src/app/pages/recover/recover.page.ts b/setup-wizard/src/app/pages/recover/recover.page.ts
index 3c795d1b6..d05af0ee5 100644
--- a/setup-wizard/src/app/pages/recover/recover.page.ts
+++ b/setup-wizard/src/app/pages/recover/recover.page.ts
@@ -10,7 +10,7 @@ import { PasswordPage } from '../password/password.page'
   styleUrls: ['recover.page.scss'],
 })
 export class RecoverPage {
-  dataDrives = []
+  dataDrives = null
   selectedDrive: RecoveryDrive = null
 
   constructor(
@@ -23,7 +23,13 @@ export class RecoverPage {
 
   async ngOnInit() {
     if(!this.stateService.recoveryDrive) {
+      const loader = await this.loadingCtrl.create({
+        message: 'Fetching recovery drives'
+      })
+      await loader.present()
       this.dataDrives = await this.apiService.getRecoveryDrives()
+
+      loader.dismiss()
     } else {
       this.stateService.pollDataTransferProgress()
     }
diff --git a/setup-wizard/src/app/services/api/mock-api.service.ts b/setup-wizard/src/app/services/api/mock-api.service.ts
index ea9042c2e..e78aab3b5 100644
--- a/setup-wizard/src/app/services/api/mock-api.service.ts
+++ b/setup-wizard/src/app/services/api/mock-api.service.ts
@@ -14,14 +14,16 @@ export class MockApiService extends ApiService {
   async getState() {
     await pauseFor(2000)
     return {
-      'data-drive': null,
-      // {
-      //   logicalname: 'name1',
-      //   labels: ['label 1', 'label 2'],
-      //   capacity: 1600,
-      //   used: 200,
-      // },
-      'recovery-drive': null,
+      'data-drive': 
+      // null,
+      {
+        logicalname: 'name1',
+        labels: ['label 1', 'label 2'],
+        capacity: 1600,
+        used: 200,
+      },
+      'recovery-drive': 
+      null,
       // {
       //   logicalname: 'name1',
       //   version: '0.3.3',
diff --git a/setup-wizard/src/app/services/state.service.ts b/setup-wizard/src/app/services/state.service.ts
index f0fd4a7f2..3dbaf4812 100644
--- a/setup-wizard/src/app/services/state.service.ts
+++ b/setup-wizard/src/app/services/state.service.ts
@@ -27,6 +27,8 @@ export class StateService {
   }
 
   async pollDataTransferProgress() {
+    await pauseFor(7000)
+
     if (
       this.dataTransferProgress?.totalBytes &&
       this.dataTransferProgress.bytesTransfered === this.dataTransferProgress.totalBytes
@@ -40,7 +42,6 @@ export class StateService {
     if (this.dataTransferProgress.totalBytes) {
       this.dataProgress = this.dataTransferProgress.bytesTransfered / this.dataTransferProgress.totalBytes
     }
-    await pauseFor(7000)
     this.pollDataTransferProgress()
   }
 }