update disks type, bring back server name, and better gifs for loading and updating

ui/src/app/modals/app-restore/app-restore.component.html

@@ -13,39 +13,50 @@
 
 <ion-content class="ion-padding-top">
 
-  <text-spinner *ngIf="loading" text="Loading Drives"></text-spinner>
+  <!-- submitting -->
   <text-spinner *ngIf="submitting" text="Initiating Backup"></text-spinner>
 
-  <ion-content *ngIf="!loading && !submitting">
-    <ion-item class="ion-margin-bottom">
+  <!-- not submitting -->
+  <ion-item *ngIf="!submitting" class="ion-margin-bottom">
+    <ion-label>
+      <h2>
+        Select the drive containing the backup you would like to restore.
+        <br />
+        <br />
+        <ion-text color="warning">
+          Warning! All current data for {{ patch.data['package-data'][pkgId].manifest.title }} will be overwritten by the backup.
+        </ion-text>
+      </h2>
+    </ion-label>
+  </ion-item>
+
+  <!-- loading -->
+  <ng-container *ngIf="loading">
+    <ion-item-divider>
+      <ion-skeleton-text animated style="width: 120px; height: 16px;"></ion-skeleton-text>
+    </ion-item-divider>
+    <ion-item>
+      <ion-avatar slot="start" style="margin-right: 24px;">
+        <ion-skeleton-text animated style="width: 30px; height: 30px; border-radius: 0;"></ion-skeleton-text>
+      </ion-avatar>
       <ion-label>
-        <h2>
-          Select the drive containing the backup you would like to restore.
-          <br />
-          <br />
-          <ion-text color="warning">
-            Warning! All current data for {{ patch.data['package-data'][pkgId].manifest.title }} will be overwritten by the backup.
-          </ion-text>
-        </h2>
+        <ion-skeleton-text animated style="width: 100px; height: 20px; margin-bottom: 12px;"></ion-skeleton-text>
+        <ion-skeleton-text animated style="width: 50px; height: 16px; margin-bottom: 16px;"></ion-skeleton-text>
+        <ion-skeleton-text animated style="width: 100px;"></ion-skeleton-text>
       </ion-label>
     </ion-item>
+  </ng-container>
 
-    <ion-item *ngIf="allPartitionsMounted">
-      <ion-text class="ion-text-wrap" color="warning">No drives found containing a valid backup for {{ patch.data['package-data'][pkgId].manifest.title }}. Insert the storage device containing the backup you intend to restore.</ion-text>
-    </ion-item>
-
+  <!-- not loading and not submitting -->
+  <ion-content *ngIf="!loading && !submitting">
     <ion-item-group>
-      <div *ngFor="let disk of disks | keyvalue">
-        <ion-item-divider>{{ disk.key }} - {{ disk.value.size }}</ion-item-divider>
-        <ion-item button *ngFor="let partition of disk.value.partitions | keyvalue" [disabled]="partition.value['is-mounted']" (click)="presentModal(partition.key)">
+      <div *ngFor="let disk of disks">
+        <ion-item-divider>{{ disk.logicalname }} - {{ disk.capacity | convertBytes }}</ion-item-divider>
+        <ion-item button *ngFor="let partition of disk.partitions" (click)="presentModal(partition.logicalname)">
           <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
           <ion-label>
-            <h1>{{ partition.value.label || partition.key }}</h1>
-            <h2>{{ 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>
+            <h1>{{ partition.label || partition.logicalname }}</h1>
+            <h2>{{ partition.capacity | convertBytes }}</h2>
           </ion-label>
         </ion-item>
       </div>

ui/src/app/modals/app-restore/app-restore.component.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { AppRestoreComponent } from './app-restore.component'
-import { BackupConfirmationComponentModule } from '../backup-confirmation/backup-confirmation.component.module'
 import { SharingModule } from '../../modules/sharing.module'
 
 @NgModule({
@@ -10,7 +9,6 @@ import { SharingModule } from '../../modules/sharing.module'
   imports: [
     CommonModule,
     IonicModule,
-    BackupConfirmationComponentModule,
     SharingModule,
   ],
   exports: [AppRestoreComponent],

ui/src/app/modals/app-restore/app-restore.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { BackupConfirmationComponent } from 'src/app/modals/backup-confirmation/backup-confirmation.component'
+import { GenericInputComponent } from 'src/app/modals/generic-input/generic-input.component'
 import { DiskInfo } from 'src/app/services/api/api.types'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
@@ -13,7 +13,7 @@ import { ErrorToastService } from 'src/app/services/error-toast.service'
 })
 export class AppRestoreComponent {
   @Input() pkgId: string
-  disks: DiskInfo
+  disks: DiskInfo[]
   loading = true
   submitting = false
   allPartitionsMounted: boolean
@@ -39,7 +39,6 @@ export class AppRestoreComponent {
   async getExternalDisks (): Promise<void> {
     try {
       this.disks = await this.embassyApi.getDisks({ })
-      this.allPartitionsMounted = Object.values(this.disks).every(d => Object.values(d.partitions).every(p => p['is-mounted']))
     } catch (e) {
       this.errToast.present(e)
     } finally {
@@ -59,7 +58,7 @@ export class AppRestoreComponent {
       },
       cssClass: 'alertlike-modal',
       presentingElement: await this.modalCtrl.getTop(),
-      component: BackupConfirmationComponent,
+      component: GenericInputComponent,
     })
 
     modal.onWillDismiss().then(res => {

ui/src/app/modals/generic-input/generic-input.component.module.ts

@@ -1,20 +1,20 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { BackupConfirmationComponent } from './backup-confirmation.component'
+import { GenericInputComponent } from './generic-input.component'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule } from '@angular/router'
 import { SharingModule } from 'src/app/modules/sharing.module'
 import { FormsModule } from '@angular/forms'
 
 @NgModule({
-  declarations: [BackupConfirmationComponent],
+  declarations: [GenericInputComponent],
   imports: [
     CommonModule,
     IonicModule,
+    FormsModule,
     RouterModule.forChild([]),
     SharingModule,
-    FormsModule,
   ],
-  exports: [BackupConfirmationComponent],
+  exports: [GenericInputComponent],
 })
-export class BackupConfirmationComponentModule { }
+export class GenericInputComponentModule { }

ui/src/app/modals/generic-input/generic-input.component.ts

@@ -3,11 +3,11 @@ import { IonicSafeString, LoadingController, ModalController } from '@ionic/angu
 import { getErrorMessage } from 'src/app/services/error-toast.service'
 
 @Component({
-  selector: 'backup-confirmation',
-  templateUrl: './backup-confirmation.component.html',
-  styleUrls: ['./backup-confirmation.component.scss'],
+  selector: 'generic-input',
+  templateUrl: './generic-input.component.html',
+  styleUrls: ['./generic-input.component.scss'],
 })
-export class BackupConfirmationComponent {
+export class GenericInputComponent {
   @Input() title: string
   @Input() message: string
   @Input() label = 'Enter value'

ui/src/app/modals/os-welcome/os-welcome.page.html

@@ -8,8 +8,7 @@
   <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
     <h2>A Whole New Embassy</h2>
     <div class="main-content">
-      <p>Version {{ version }} is something new.</p>
-      <p>This release also enables displaying Service license information and contains utilities to facilitate the next major release of EmbassyOS.</p>
+      <p>New features and more new features!</p>
     </div>
 
     <div class="close-button">