From e1936fb3b87bef5616e1a668439cb47797b15a93 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Mon, 23 Dec 2019 23:50:31 +0100
Subject: [PATCH] improving task progressbar design, fixing task starting issue

---
 src/backend/model/tasks/tasks/DBResetTask.ts             | 1 +
 src/backend/model/tasks/tasks/Task.ts                    | 9 ++++++++-
 .../app/ui/settings/photo/photo.settings.component.ts    | 8 ++++----
 src/frontend/app/ui/settings/scheduled-tasks.service.ts  | 6 +++---
 .../progress/progress.tasks.settings.component.html      | 7 +++++++
 5 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/backend/model/tasks/tasks/DBResetTask.ts b/src/backend/model/tasks/tasks/DBResetTask.ts
index 743dd753..c573f28a 100644
--- a/src/backend/model/tasks/tasks/DBResetTask.ts
+++ b/src/backend/model/tasks/tasks/DBResetTask.ts
@@ -10,6 +10,7 @@ const LOG_TAG = '[DBRestTask]';
 export class DBRestTask extends Task {
   public readonly Name = DefaultsTasks[DefaultsTasks['Database Reset']];
   public readonly ConfigTemplate: ConfigTemplateEntry[] = null;
+  protected readonly IsInstant = true;
 
   public get Supported(): boolean {
     return Config.Server.Database.type !== ServerConfig.DatabaseType.memory;
diff --git a/src/backend/model/tasks/tasks/Task.ts b/src/backend/model/tasks/tasks/Task.ts
index 039b5663..4436370d 100644
--- a/src/backend/model/tasks/tasks/Task.ts
+++ b/src/backend/model/tasks/tasks/Task.ts
@@ -11,12 +11,14 @@ export abstract class Task<T = void> implements ITask<T> {
   protected state = TaskState.idle;
   protected config: T;
   protected prResolve: () => void;
+  protected IsInstant = false;
 
 
   public abstract get Supported(): boolean;
 
   public abstract get Name(): string;
 
+
   public abstract get ConfigTemplate(): ConfigTemplateEntry[];
 
 
@@ -44,6 +46,9 @@ export abstract class Task<T = void> implements ITask<T> {
       this.init().catch(console.error);
       this.state = TaskState.running;
       this.run();
+      if (!this.IsInstant) { // if instant, wait for execution, otherwise, return right away
+        return Promise.resolve();
+      }
       return pr;
     } else {
       Logger.info('[Task]', 'Task already running: ' + this.Name);
@@ -71,7 +76,9 @@ export abstract class Task<T = void> implements ITask<T> {
   private onFinish(): void {
     this.progress = null;
     Logger.info('[Task]', 'Task finished: ' + this.Name);
-    this.prResolve();
+    if (this.IsInstant) {
+      this.prResolve();
+    }
   }
 
   private run() {
diff --git a/src/frontend/app/ui/settings/photo/photo.settings.component.ts b/src/frontend/app/ui/settings/photo/photo.settings.component.ts
index 8ae9df17..ca67938f 100644
--- a/src/frontend/app/ui/settings/photo/photo.settings.component.ts
+++ b/src/frontend/app/ui/settings/photo/photo.settings.component.ts
@@ -68,16 +68,16 @@ export class PhotoSettingsComponent extends SettingsComponent<{
     try {
       await this.tasksService.start(DefaultsTasks[DefaultsTasks['Photo Converting']]);
       this.notification.info(this.i18n('Photo converting started'));
-      this.inProgress = false;
       return true;
     } catch (err) {
       console.log(err);
       if (err.message) {
         this.error = (<ErrorDTO>err).message;
       }
+    } finally {
+      this.inProgress = false;
     }
 
-    this.inProgress = false;
     return false;
   }
 
@@ -87,16 +87,16 @@ export class PhotoSettingsComponent extends SettingsComponent<{
     try {
       await this.tasksService.stop(DefaultsTasks[DefaultsTasks['Photo Converting']]);
       this.notification.info(this.i18n('Photo converting interrupted'));
-      this.inProgress = false;
       return true;
     } catch (err) {
       console.log(err);
       if (err.message) {
         this.error = (<ErrorDTO>err).message;
       }
+    } finally {
+      this.inProgress = false;
     }
 
-    this.inProgress = false;
     return false;
   }
 }
diff --git a/src/frontend/app/ui/settings/scheduled-tasks.service.ts b/src/frontend/app/ui/settings/scheduled-tasks.service.ts
index c191f81b..bdbc88f3 100644
--- a/src/frontend/app/ui/settings/scheduled-tasks.service.ts
+++ b/src/frontend/app/ui/settings/scheduled-tasks.service.ts
@@ -36,8 +36,8 @@ export class ScheduledTasksService {
     this.decSubscribers();
   }
 
-  public forceUpdate() {
-    return this.getProgress();
+  public async forceUpdate(): Promise<void> {
+    return await this.getProgress();
   }
 
   public async start(id: string, config?: any): Promise<void> {
@@ -50,7 +50,7 @@ export class ScheduledTasksService {
     this.forceUpdate();
   }
 
-  protected async getProgress() {
+  protected async getProgress(): Promise<void> {
     const prevPrg = this.progress.value;
     this.progress.next(await this._networkService.getJson<{ [key: string]: TaskProgressDTO }>('/admin/tasks/scheduled/progress'));
     for (const prg in prevPrg) {
diff --git a/src/frontend/app/ui/settings/tasks/progress/progress.tasks.settings.component.html b/src/frontend/app/ui/settings/tasks/progress/progress.tasks.settings.component.html
index 38be99c0..9fa616bf 100644
--- a/src/frontend/app/ui/settings/tasks/progress/progress.tasks.settings.component.html
+++ b/src/frontend/app/ui/settings/tasks/progress/progress.tasks.settings.component.html
@@ -14,6 +14,7 @@
     <div class="col-1 text-right" title="time elapsed" i18n-title>{{TimeElapsed| duration}}</div>
     <div class="progress col-10 ">
       <div
+        *ngIf="progress.progress + progress.left >0"
         class="progress-bar d-inline-block progress-bar-success {{progress.state === TaskState.stopping ? 'bg-secondary' : ''}}"
         role="progressbar"
         aria-valuenow="2"
@@ -24,6 +25,12 @@
         {{progress.progress}}
         /{{progress.progress + progress.left}}
       </div>
+      <div
+        *ngIf="progress.progress + progress.left === 0"
+        class="progress-bar d-inline-block progress-bar-success  progress-bar-striped progress-bar-animated  {{progress.state === TaskState.stopping ? 'bg-secondary' : ''}}"
+        role="progressbar" aria-valuenow="100"
+        aria-valuemin="0" aria-valuemax="100" style="width: 100%">
+      </div>
     </div>
     <div class="col-1" title="time left" i18n-title>{{TimeAll| duration}}</div>
   </div>