improving task ui

src/frontend/app/ui/settings/tasks/progress/progress.tasks.settings.component.html

@@ -22,8 +22,7 @@
         aria-valuemax="100"
         style="min-width: 2em;"
         [style.width.%]="(progress.progress/(progress.left+progress.progress))*100">
-        {{progress.progress}}
-        /{{progress.progress + progress.left}}
+        {{progress.progress}}/{{progress.progress + progress.left}}
       </div>
       <div
         *ngIf="progress.progress + progress.left === 0"

src/frontend/app/ui/settings/tasks/progress/progress.tasks.settings.component.ts

@@ -1,21 +1,22 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnChanges, OnDestroy} from '@angular/core';
 import {TaskProgressDTO, TaskState} from '../../../../../../common/entities/settings/TaskProgressDTO';
+import {Subscription, timer} from 'rxjs';
 
 @Component({
   selector: 'app-settings-tasks-progress',
   templateUrl: './progress.tasks.settings.component.html',
   styleUrls: ['./progress.tasks.settings.component.css']
 })
-export class TasksProgressComponent {
+export class TasksProgressComponent implements OnDestroy, OnChanges {
 
   @Input() progress: TaskProgressDTO;
   TaskState = TaskState;
+  timeCurrentCopy: number;
+  private timerSub: Subscription;
 
   constructor() {
-
   }
 
-
   get TimeAll(): number {
     if (!this.progress) {
       return 0;
@@ -35,9 +36,30 @@ export class TasksProgressComponent {
     if (!this.progress) {
       return 0;
     }
-    return (this.progress.time.current - this.progress.time.start);
+    return (this.timeCurrentCopy - this.progress.time.start);
   }
 
+  ngOnChanges(): void {
+    if (!this.progress) {
+      return;
+    }
+    this.timeCurrentCopy = this.progress.time.current;
+    if (!this.timerSub) {
+      this.timerSub = timer(0, 1000).subscribe(() => {
+        if (this.progress) {
+          this.timeCurrentCopy += 1000;
+        }
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.timerSub) {
+      this.timerSub.unsubscribe();
+    }
+  }
+
+
 }