frontend/src/app/tasks/task-detail-overview/task-detail-overview.component.html

@@ -14,7 +14,14 @@
     </mat-card-header>
     <mat-card-content>
       <p>ETA: {{task!.eta}} Minuten - Deadline: {{task!.deadline}}</p>
-      <mat-progress-bar [mode]="'determinate'" [value]="task!.workTime"></mat-progress-bar>
+      <div class="progress-stacked" >
+        <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" [style.width]=currentProgress>
+          <div class="progress-bar">{{currentProgress}}</div>
+        </div>
+        <div class="progress" role="progressbar" aria-label="Segment two" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" [style.width]=futureProgress>
+          <div class="progress-bar bg-success">{{futureProgress}}</div>
+        </div>
+      </div>
     </mat-card-content>
     <mat-card-actions *ngIf="taskgroup != undefined && task != undefined">
       <div style="width: 100%">

frontend/src/app/tasks/task-detail-overview/task-detail-overview.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {NavigationLink, NavigationLinkListComponent} from "../../navigation-link-list/navigation-link-list.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {
+  AdvancedScheduleInfo,
   ScheduleInfo,
   ScheduleService,
   TaskEntityInfo,
@@ -44,6 +45,8 @@ export class TaskDetailOverviewComponent implements OnInit {
   schedulesLoaded: boolean = false;
 
   taskStatus: string = "🟢"
+  currentProgress: string = "0";
+  futureProgress: string = "0";
 
   constructor(private activatedRoute: ActivatedRoute,
               private taskgroupService: TaskgroupService,
@@ -84,12 +87,14 @@ export class TaskDetailOverviewComponent implements OnInit {
           next: resp => {
             this.task = resp;
             this.taskStatus = this.getStatusOfTask(resp)
+            this.calcProgress();
           }
         });
         this.scheduleService.schedulesTaskIDGet(Number(params.get('taskID'))).subscribe({
           next: resp => {
             this.schedules = resp;
             this.schedulesLoaded = true;
+            this.calcProgress();
           }
         })
       }
@@ -106,6 +111,28 @@ export class TaskDetailOverviewComponent implements OnInit {
     }
   }
 
+  calcProgress() {
+    if(this.task != undefined && this.task!.eta > 0) {
+      const currentProgress = this.task!.workTime / this.task!.eta * 100;
+
+      let futureProgress = 0;
+      this.schedules.forEach(schedule => {
+        if(schedule.scheduleType == "ADVANCED" && schedule.startTime == null) {
+          let advancedSchedule: AdvancedScheduleInfo = schedule as AdvancedScheduleInfo;
+          if(moment(advancedSchedule.scheduleStartTime).isBefore(moment())) {
+            const duration = moment.duration(moment(advancedSchedule.scheduleStopTime).diff(moment(advancedSchedule.scheduleStartTime)));
+            const plannedMinutes = duration.asMinutes();
+            futureProgress += plannedMinutes;
+          }
+        }
+      })
+
+      this.futureProgress = (futureProgress) / this.task!.eta *100 + "%";
+      this.currentProgress = currentProgress + "%";
+    }
+
+  }
+
   openTaskEditor() {
     if(this.task != undefined) {
       const taskEditorInfo: TaskEditorData = {