loading polish

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

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() {

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>

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()
     }

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',

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()
   }
 }