From c9d77e99afb9c96f921e28c0e2bdec4e032e841d Mon Sep 17 00:00:00 2001
From: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Date: Wed, 1 Dec 2021 17:18:48 -0700
Subject: [PATCH] loading progress NaN fix

---
 .../components/status/status.component.html   |  7 ++--
 .../components/status/status.component.scss   |  4 ---
 .../app-list-icon.component.scss              |  2 +-
 .../app-list-icon/app-list-icon.component.ts  | 20 +++++------
 .../app-list-reorder.component.html           |  2 +-
 .../marketplace-list.page.html                |  2 +-
 .../marketplace-show.page.html                |  2 +-
 ui/src/app/pipes/install-state.pipe.ts        |  2 +-
 .../services/api/embassy-mock-api.service.ts  | 35 +++++++------------
 ui/src/app/util/package-loading-progress.ts   |  4 ++-
 10 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/ui/src/app/components/status/status.component.html b/ui/src/app/components/status/status.component.html
index ed8323acb..f1e4a8d6c 100644
--- a/ui/src/app/components/status/status.component.html
+++ b/ui/src/app/components/status/status.component.html
@@ -6,15 +6,14 @@
 >
   <span *ngIf= "!installProgress">
     {{ disconnected ? 'Unknown' : rendering.display }}
-    <ion-spinner *ngIf="rendering.showDots" class="dots" name="dots"></ion-spinner>
+    <span *ngIf="rendering.showDots">...</span>
   </span>
   <span *ngIf="installProgress">
     <span *ngIf="installProgress < 99">
-      Installing
-      <ion-spinner class="dots" name="dots"></ion-spinner>{{ installProgress }}%
+      Installing... {{ installProgress }}%
     </span>
     <span *ngIf="installProgress >= 99">
-      Finalizing install. This could take a minute<ion-spinner class="dots" name="dots"></ion-spinner>
+      Finalizing install. This could take a minute...
     </span>
   </span>
 
diff --git a/ui/src/app/components/status/status.component.scss b/ui/src/app/components/status/status.component.scss
index fa7ddb2a7..e69de29bb 100644
--- a/ui/src/app/components/status/status.component.scss
+++ b/ui/src/app/components/status/status.component.scss
@@ -1,4 +0,0 @@
-.dots {
-  position: absolute;
-  bottom: 3px;
-}
\ No newline at end of file
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss
index 07f9ae8ee..c4b5c04ad 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss
@@ -15,7 +15,7 @@
 .warning-icon {
   position: absolute !important;
   left: 6px !important;
-  top: 0 !important;
+  top: 6px !important;
   font-size: 12px;
   border-radius: 100%;
   padding: 1px;
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts
index bc1ea9184..b48b2dd51 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts
@@ -1,22 +1,22 @@
-import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
-import { PkgInfo } from "src/app/util/get-package-info";
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { PkgInfo } from 'src/app/util/get-package-info'
 
 @Component({
-  selector: "app-list-icon",
-  templateUrl: "app-list-icon.component.html",
-  styleUrls: ["app-list-icon.component.scss"],
+  selector: 'app-list-icon',
+  templateUrl: 'app-list-icon.component.html',
+  styleUrls: ['app-list-icon.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppListIconComponent {
   @Input()
-  pkg: PkgInfo;
+  pkg: PkgInfo
 
   @Input()
-  connectionFailure = false;
+  connectionFailure = false
 
-  get color(): string {
+  get color (): string {
     return this.connectionFailure
-      ? "var(--ion-color-dark)"
-      : "var(--ion-color-" + this.pkg.primaryRendering.color + ")";
+      ? 'var(--ion-color-dark)'
+      : 'var(--ion-color-' + this.pkg.primaryRendering.color + ')'
   }
 }
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html
index 635fbf06e..c85849b82 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html
@@ -14,7 +14,7 @@
 <ion-list *ngIf="reordering; else grid">
   <ion-reorder-group disabled="false" (ionItemReorder)="reorder($any($event))">
     <ion-reorder *ngFor="let item of pkgs">
-      <ion-item *ngIf="item | packageInfo | async as pkg" class="item">
+      <ion-item color="light" *ngIf="item | packageInfo | async as pkg" class="item">
         <app-list-icon
           slot="start"
           [pkg]="pkg"
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
index 6bcbb2045..0d5d1a4bd 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
@@ -109,7 +109,7 @@
                   <ion-text *ngIf="(pkg.manifest.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
                 </p>
                 <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
-                  <ion-text color="primary">{{ localPkg.state | titlecase }}...
+                  <ion-text color="primary">
                     <span>{{ (localPkg['install-progress'] | installState).display }}</span>
                   </ion-text>
                 </p>
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
index 5983cebca..9aeb5d347 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -32,7 +32,7 @@
                   </p>
                   <!-- installing, updating -->
                   <p *ngIf="[PackageState.Installing, PackageState.Updating] | includes : localPkg.state">
-                    <ion-text color="primary">{{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).display }}</ion-text>
+                    <ion-text color="primary">{{ (localPkg['install-progress'] | installState).display }}</ion-text>
                   </p>
                   <!-- removing -->
                   <p *ngIf="localPkg.state === PackageState.Removing">
diff --git a/ui/src/app/pipes/install-state.pipe.ts b/ui/src/app/pipes/install-state.pipe.ts
index e186dfd47..0bdffcaaf 100644
--- a/ui/src/app/pipes/install-state.pipe.ts
+++ b/ui/src/app/pipes/install-state.pipe.ts
@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { InstallProgress } from '../services/patch-db/data-model'
-import { packageLoadingProgress, ProgressData } from '../util/package-loading-progress';
+import { packageLoadingProgress, ProgressData } from '../util/package-loading-progress'
 
 @Pipe({
   name: 'installState',
diff --git a/ui/src/app/services/api/embassy-mock-api.service.ts b/ui/src/app/services/api/embassy-mock-api.service.ts
index 1850417b4..b5f8f068f 100644
--- a/ui/src/app/services/api/embassy-mock-api.service.ts
+++ b/ui/src/app/services/api/embassy-mock-api.service.ts
@@ -646,38 +646,29 @@ export class MockApiService extends ApiService {
         if (i === initialProgress.size) {
           initialProgress[phase.completion] = true
         }
-        let patch: any
-        if (initialProgress['unpack-complete']) {
-          patch = [
-            {
-              op: PatchOp.REMOVE,
-              path: `/package-data/${id}/install-progress`,
-            },
-            // {
-            //   op: PatchOp.REMOVE,
-            //   path: `/recovered-packages/${id}`,
-            // } as RemoveOperation,
-          ]
-        } else {
-          patch = [
-            {
-              op: PatchOp.REPLACE,
-              path: `/package-data/${id}/install-progress`,
-              value: initialProgress,
-            },
-          ]
-        }
+
+        const patch = [
+          {
+            op: PatchOp.REPLACE,
+            path: `/package-data/${id}/install-progress`,
+            value: initialProgress,
+          },
+        ]
         this.updateMock(patch)
       }
     }
 
     setTimeout(() => {
-      const patch2 = [
+      const patch2: any = [
         {
           op: PatchOp.REPLACE,
           path: `/package-data/${id}`,
           value: Mock.LocalPkgs[id],
         },
+        {
+          op: PatchOp.REMOVE,
+          path: `/package-data/${id}/install-progress`,
+        },
       ]
       this.updateMock(patch2)
     }, 1000)
diff --git a/ui/src/app/util/package-loading-progress.ts b/ui/src/app/util/package-loading-progress.ts
index 7a0da7cf0..2a7d08133 100644
--- a/ui/src/app/util/package-loading-progress.ts
+++ b/ui/src/app/util/package-loading-progress.ts
@@ -28,17 +28,19 @@ export function packageLoadingProgress (
       unpackWeight * unpacked,
   )
 
+
   const denominator = Math.floor(
     size * (downloadWeight + validateWeight + unpackWeight),
   )
   const totalProgress = Math.floor(100 * numerator / denominator)
+
   return {
     totalProgress,
     downloadProgress: Math.floor((100 * downloaded) / size),
     validateProgress: Math.floor((100 * validated) / size),
     unpackProgress: Math.floor((100 * unpacked) / size),
     isComplete: downloadComplete && validationComplete && unpackComplete,
-    display: totalProgress > 98 ? 'Finalizing' : `${totalProgress}%`,
+    display: totalProgress > 98 ? 'Finalizing...' : `Installing... ${totalProgress}%`,
   }
 }