drives page

ui/src/app/pages/server-routes/external-drives/external-drives.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { ExternalDrivesPage } from './external-drives.page'
+import { Routes, RouterModule } from '@angular/router'
+import { SharingModule } from 'src/app/modules/sharing.module'
+import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
+import { ObjectConfigComponentModule } from 'src/app/components/object-config/object-config.component.module'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExternalDrivesPage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    SharingModule,
+    ObjectConfigComponentModule,
+    RouterModule.forChild(routes),
+    PwaBackComponentModule,
+    BadgeMenuComponentModule,
+  ],
+  declarations: [ExternalDrivesPage],
+})
+export class ExternalDrivesPageModule { }

ui/src/app/pages/server-routes/external-drives/external-drives.page.html

@@ -0,0 +1,38 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <pwa-back-button></pwa-back-button>
+    </ion-buttons>
+    <ion-title>External Drives</ion-title>
+    <ion-buttons slot="end">
+      <badge-menu-button></badge-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content *ngIf="!($loading$ | async)" class="ion-padding-top">
+  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content pullingIcon="lines" refreshingSpinner="lines"></ion-refresher-content>
+  </ion-refresher>
+
+  <ion-item-divider>
+    Storage
+  </ion-item-divider>
+
+  <ion-item-group>
+    <!-- <ion-list> -->
+      <ion-item *ngFor="let d of disks; let i = index">
+        <ion-icon slot="start" name="save-outline"></ion-icon>
+        <ion-label>{{d.logicalname}}</ion-label>
+        <ion-button *ngIf="!(d.$ejecting$ | async)" slot="end" fill="clear" color="medium" (click)="ejectDisk(i)">
+          <ion-icon color="primary" class="icon" src="/assets/icon/eject.svg"></ion-icon>
+        </ion-button>
+        <ion-spinner *ngIf="d.$ejecting$ | async" name="lines" color="medium"></ion-spinner>
+      </ion-item>
+    <!-- </ion-list> -->
+  </ion-item-group>
+</ion-content>
+
+<ion-content *ngIf="$loading$ | async" class="ion-padding-top">
+  <ion-spinner class="center" name="lines" color="warning"></ion-spinner>
+</ion-content>

ui/src/app/pages/server-routes/external-drives/external-drives.page.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core'
+import { pauseFor } from 'src/app/util/misc.util'
+import { ApiService } from 'src/app/services/api/api.service'
+import { DiskInfo } from 'src/app/models/server-model'
+import { markAsLoadingDuring$, markAsLoadingDuringAsync, markAsLoadingDuringP } from 'src/app/services/loader.service'
+import { BehaviorSubject } from 'rxjs'
+import { AlertController } from '@ionic/angular'
+
+type Ejectable<T> = T & { $ejecting$: BehaviorSubject<boolean> }
+
+@Component({
+  selector: 'external-drives',
+  templateUrl: './external-drives.page.html',
+  styleUrls: ['./external-drives.page.scss'],
+})
+export class ExternalDrivesPage {
+  disks: Ejectable<DiskInfo>[] = []
+  $loading$ = new BehaviorSubject(false)
+
+  constructor (
+    private readonly apiService: ApiService,
+    private readonly alertCtrl: AlertController,
+  ) { }
+
+  ngOnInit () {
+    markAsLoadingDuringP(this.$loading$, this.fetchDisks())
+  }
+
+  async doRefresh (event: any) {
+    await Promise.all([
+      this.fetchDisks(),
+      pauseFor(600),
+    ])
+    event.target.complete()
+  }
+
+  async fetchDisks () {
+    return this.apiService.getExternalDisks().then(ds => {
+      this.disks = ds.map(d => ({ ...d, $ejecting$: new BehaviorSubject(false)})).sort( (a, b) => a.logicalname < b.logicalname ? -1 : 1 )
+    })
+  }
+
+  async ejectDisk (diskIndex: number) {
+    const d = this.disks[diskIndex]
+    markAsLoadingDuringP(d.$ejecting$, this.apiService.ejectExternalDisk(d.logicalname))
+      .then(() => this.disks.splice(diskIndex, 1))
+      .catch((e: Error) => {
+        this.alertError(`Could not eject ${d.logicalname}: ${e.message}`)
+      })
+  }
+
+  async alertError (desc: string) {
+    const alert = await this.alertCtrl.create({
+      backdropDismiss: true,
+      message: desc,
+      cssClass: 'alert-error-message',
+    })
+    await alert.present()
+  }
+}
+

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

@@ -37,7 +37,7 @@ const routes: Routes = [
     path: 'developer',
     canActivate: [AuthGuard],
     loadChildren: () => import('./developer-routes/developer-routing.module').then( m => m.DeveloperRoutingModule),
-  },
+  }
 ]
 
 @NgModule({