improving task progressbar design, fixing task starting issue

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;

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,8 +76,10 @@ export abstract class Task<T = void> implements ITask<T> {
   private onFinish(): void {
     this.progress = null;
     Logger.info('[Task]', 'Task finished: ' + this.Name);
+    if (this.IsInstant) {
       this.prResolve();
     }
+  }
 
   private run() {
     process.nextTick(async () => {

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;
   }
 }

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

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>