Progress bar (#377)

* looking for unnecessary watches

* on init data initialization

* prog pipe

* install progress everywhere

* titlecase status

* include updateing state in app show for install progress

Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>

ui/src/app/pages/apps-routes/app-instructions/app-instructions.page.ts

@@ -26,7 +26,7 @@ export class AppInstructionsPage {
   async ngOnInit () {
     const pkgId = this.route.snapshot.paramMap.get('pkgId')
 
-    const url = this.patch.data['package-data'][pkgId]['static-files'].instructions
+    const url = this.patch.getData()['package-data'][pkgId]['static-files'].instructions
 
     try {
       this.instructions = await this.embassyApi.getStatic(url)

ui/src/app/pages/apps-routes/app-list/app-list.page.html

@@ -36,7 +36,8 @@
             <img *ngIf="!connectionFailure" [class]="pkg.value.bulb.class" [src]="pkg.value.bulb.img" />
 
             <ion-card-header>
-              <status [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
+              <status *ngIf="[PackageState.Installed, PackageState.Removing] | includes : pkg.value.entry.state" [rendering]="pkg.value.statusRendering" size="calc(8px + .4vw)" weight="bold"></status>
+              <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.value.entry.state" class="installing-status"><ion-text color="primary">{{ pkg.value.entry.state | titlecase }}...{{ (pkg.value.entry['install-progress'] | installState).totalProgress }}%</ion-text></p>
               <ion-card-title>{{ pkg.value.entry.manifest.title }}</ion-card-title>
             </ion-card-header>
           </ion-card>

ui/src/app/pages/apps-routes/app-list/app-list.page.scss

@@ -78,3 +78,9 @@
   position: absolute;
   right: 0px;
 }
+
+.installing-status {
+  font-size: calc(8px + .4vw);
+  font-weight: bold;
+  margin: 0;
+}

ui/src/app/pages/apps-routes/app-list/app-list.page.ts

@@ -2,10 +2,10 @@ import { Component } from '@angular/core'
 import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionFailure, ConnectionService } from 'src/app/services/connection.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { Subscription } from 'rxjs'
 import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
-import { distinctUntilChanged, filter } from 'rxjs/operators'
+import { filter } from 'rxjs/operators'
 
 @Component({
   selector: 'app-list',
@@ -24,6 +24,7 @@ export class AppListPage {
     statusRendering: PkgStatusRendering | null
     sub: Subscription | null
   }} = { }
+  PackageState = PackageState
 
   constructor (
     private readonly config: ConfigService,
@@ -41,7 +42,6 @@ export class AppListPage {
       )
       .subscribe(pkgs => {
         const ids = Object.keys(pkgs)
-        console.log('PKGSPKGS', ids)
 
         Object.keys(this.pkgs).forEach(id => {
           if (!ids.includes(id)) {

ui/src/app/pages/apps-routes/app-show/app-show.page.html

@@ -25,7 +25,7 @@
           <h5>{{ pkg.manifest.version | displayEmver }}</h5>
         </ion-label>
       </ion-item>
-
+      
       <div class="status-readout">
         <status size="large" weight="500" [rendering]="rendering"></status>
         <ion-button *ngIf="rendering.feStatus === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
@@ -41,13 +41,36 @@
           Start
         </ion-button>
       </div>
-  
-      <ion-button size="small" *ngIf="pkg | hasUi" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
-        Launch Web Interface
-        <ion-icon slot="end" name="rocket-outline"></ion-icon>
-      </ion-button>
+
+      <ng-container *ngIf="pkg.state === PackageState.Installed">
+        <ion-button size="small" *ngIf="(pkg | hasUi)" [disabled]="!(pkg | isLaunchable)" class="launch-button" expand="block" (click)="launchUiTab()">
+          Launch Web Interface
+          <ion-icon slot="end" name="rocket-outline"></ion-icon>
+        </ion-button>
+      </ng-container>
     </div>
 
+    <div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
+      <p>Downloading: {{ (pkg['install-progress'] | installState).downloadProgress }}%</p>
+      <ion-progress-bar 
+        [color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'" 
+        [value]="(pkg['install-progress'] | installState).downloadProgress / 100"
+      ></ion-progress-bar>
+
+      <p>Validating: {{ (pkg['install-progress'] | installState).validateProgress }}%</p>
+      <ion-progress-bar
+        [color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'" 
+        [value]="(pkg['install-progress'] | installState).validateProgress / 100"
+      ></ion-progress-bar>
+
+      <p>Installing: {{ (pkg['install-progress'] | installState).unpackProgress }}%</p>
+      <ion-progress-bar 
+        [color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'" 
+        [value]="(pkg['install-progress'] | installState).unpackProgress / 100"
+      ></ion-progress-bar>
+    </div>
+
+
     <ng-container *ngIf="!([FeStatus.Installing, FeStatus.Updating, FeStatus.Removing] | includes : rendering.feStatus)">
       <ion-grid class="ion-text-center" style="margin: 0 6px;">
         <ion-row>

ui/src/app/pages/apps-routes/app-show/app-show.page.ts

@@ -28,6 +28,7 @@ export class AppShowPage {
   PackageState = PackageState
   DependencyErrorType = DependencyErrorType
   rendering: PkgStatusRendering
+  Math = Math
 
   @ViewChild(IonContent) content: IonContent
   subs: Subscription[] = []