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