From 606e89b287c2b88d10bfee98fbbd4667c1290cac Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Wed, 25 Oct 2023 20:25:04 +0200
Subject: [PATCH] Visualize Active Schedule and schedules todo

---
 backend/.idea/workspace.xml                   |  13 +-
 .../api/controller/ScheduleController.java    |  30 ++++
 .../taskSchedule/ScheduleActivateInfo.java    |  21 +++
 .../taskSchedule/ScheduleInfo.java            |   2 +-
 .../BasicTaskScheduleRepository.java          |   4 +
 .../core/services/TaskScheduleService.java    |  16 ++
 frontend/src/api/.openapi-generator/FILES     |   1 +
 frontend/src/api/api/schedule.service.ts      | 116 ++++++++++++++
 frontend/src/api/model/models.ts              |   1 +
 .../src/api/model/scheduleActivateInfo.ts     |  20 +++
 frontend/src/app/app.module.ts                |   4 +-
 .../active-schedule.component.css             | 141 ++++++++++++++++++
 .../active-schedule.component.html            |  19 +++
 .../active-schedule.component.spec.ts         |  21 +++
 .../active-schedule.component.ts              |  51 +++++++
 .../app/dashboard/dashboard.component.html    |  11 +-
 .../src/app/dashboard/dashboard.component.ts  |  20 ++-
 openapi.yaml                                  |  78 +++++++++-
 18 files changed, 554 insertions(+), 15 deletions(-)
 create mode 100644 backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleActivateInfo.java
 create mode 100644 frontend/src/api/model/scheduleActivateInfo.ts
 create mode 100644 frontend/src/app/dashboard/active-schedule/active-schedule.component.css
 create mode 100644 frontend/src/app/dashboard/active-schedule/active-schedule.component.html
 create mode 100644 frontend/src/app/dashboard/active-schedule/active-schedule.component.spec.ts
 create mode 100644 frontend/src/app/dashboard/active-schedule/active-schedule.component.ts

diff --git a/backend/.idea/workspace.xml b/backend/.idea/workspace.xml
index cc8ba2d..90e4b44 100644
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@@ -4,7 +4,14 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Fix Foreign Key Constraint Fail when deleting Taskgroups" />
+    <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Fix Foreign Key Constraint Fail when deleting Taskgroups">
+      <change afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleActivateInfo.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleInfo.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleInfo.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/repositories/timemanager/BasicTaskScheduleRepository.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/repositories/timemanager/BasicTaskScheduleRepository.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -94,7 +101,7 @@
       <workItem from="1698067098771" duration="4770000" />
       <workItem from="1698127431684" duration="2039000" />
       <workItem from="1698164397550" duration="2329000" />
-      <workItem from="1698246651541" duration="1537000" />
+      <workItem from="1698246651541" duration="4710000" />
     </task>
     <task id="LOCAL-00001" summary="Structure Taskgroups in Hierarchies">
       <option name="closed" value="true" />
@@ -198,7 +205,7 @@
         </line-breakpoint>
         <line-breakpoint enabled="true" type="java-line">
           <url>file://$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java</url>
-          <line>41</line>
+          <line>42</line>
           <option name="timeStamp" value="2" />
         </line-breakpoint>
       </breakpoints>
diff --git a/backend/src/main/java/core/api/controller/ScheduleController.java b/backend/src/main/java/core/api/controller/ScheduleController.java
index 7a7f8dc..d4dd87b 100644
--- a/backend/src/main/java/core/api/controller/ScheduleController.java
+++ b/backend/src/main/java/core/api/controller/ScheduleController.java
@@ -3,6 +3,7 @@ package core.api.controller;
 import core.api.models.auth.SimpleStatusResponse;
 import core.api.models.timemanager.taskSchedule.BasicTaskScheduleEntityInfo;
 import core.api.models.timemanager.taskSchedule.BasicTaskScheduleFieldInfo;
+import core.api.models.timemanager.taskSchedule.ScheduleActivateInfo;
 import core.api.models.timemanager.taskSchedule.ScheduleInfo;
 import core.entities.timemanager.BasicTaskSchedule;
 import core.entities.timemanager.ScheduleType;
@@ -139,4 +140,33 @@ public class ScheduleController {
             return ResponseEntity.ok(new BasicTaskScheduleEntityInfo(scheduleResult.getResult()));
         }
     }
+
+    @GetMapping("/schedules/active")
+    public ResponseEntity<?> getActiveSchedule() {
+        ServiceResult<BasicTaskSchedule> activeScheduleResult = taskScheduleService.getActiveSchedule(SecurityContextHolder.getContext().getAuthentication().getName());
+        if(activeScheduleResult.getExitCode() == ServiceExitCode.MISSING_ENTITY) {
+            return ResponseEntity.status(404).body(new SimpleStatusResponse("failed"));
+        } else {
+            return ResponseEntity.ok(new ScheduleInfo(activeScheduleResult.getResult()));
+        }
+    }
+
+    @PostMapping("/schedules/{scheduleID}/activate")
+    public ResponseEntity<?> activateSchedule(@PathVariable long scheduleID) {
+        PermissionResult<BasicTaskSchedule> schedulePermissionResult = taskScheduleService.getSchedulePermissions(scheduleID, SecurityContextHolder.getContext().getAuthentication().getName());
+        if(!schedulePermissionResult.isHasPermissions()) {
+            return ResponseEntity.status(403).body(new SimpleStatusResponse("failed"));
+        }
+
+        if(schedulePermissionResult.getExitCode() == ServiceExitCode.MISSING_ENTITY) {
+            return ResponseEntity.status(404).body(new SimpleStatusResponse("failed"));
+        }
+
+        ServiceResult<BasicTaskSchedule> scheduleActivateResult = taskScheduleService.activateSchedule(schedulePermissionResult.getResult());
+        if(scheduleActivateResult.getExitCode() == ServiceExitCode.ENTITY_ALREADY_EXIST) {
+            return ResponseEntity.status(409).body(new SimpleStatusResponse("failed"));
+        } else {
+            return ResponseEntity.ok(new ScheduleActivateInfo(scheduleActivateResult.getResult().getStartTime()));
+        }
+    }
 }
diff --git a/backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleActivateInfo.java b/backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleActivateInfo.java
new file mode 100644
index 0000000..74a07fb
--- /dev/null
+++ b/backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleActivateInfo.java
@@ -0,0 +1,21 @@
+package core.api.models.timemanager.taskSchedule;
+
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+
+public class ScheduleActivateInfo {
+
+    private LocalDateTime startTime;
+
+    public ScheduleActivateInfo(LocalDateTime startTime) {
+        this.startTime = startTime;
+    }
+
+    public LocalDateTime getStartTime() {
+        return startTime;
+    }
+
+    public void setStartTime(LocalDateTime startTime) {
+        this.startTime = startTime;
+    }
+}
diff --git a/backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleInfo.java b/backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleInfo.java
index fd0656d..f92eead 100644
--- a/backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleInfo.java
+++ b/backend/src/main/java/core/api/models/timemanager/taskSchedule/ScheduleInfo.java
@@ -32,7 +32,7 @@ public class ScheduleInfo {
         this.finishTime = basicTaskSchedule.getFinishedTime();
 
         if(this.finishTime == null && this.startTime != null) {
-            this.activeMinutes = (int) Duration.between(basicTaskSchedule.getStartTime(), LocalDate.now()).toMinutes();
+            this.activeMinutes = (int) Duration.between(basicTaskSchedule.getStartTime(), LocalDateTime.now()).toMinutes();
         } else if(this.startTime != null){
             this.activeMinutes = (int) Duration.between(basicTaskSchedule.getStartTime(), basicTaskSchedule.getFinishedTime()).toMinutes();
         }
diff --git a/backend/src/main/java/core/repositories/timemanager/BasicTaskScheduleRepository.java b/backend/src/main/java/core/repositories/timemanager/BasicTaskScheduleRepository.java
index 81e0fa9..facd866 100644
--- a/backend/src/main/java/core/repositories/timemanager/BasicTaskScheduleRepository.java
+++ b/backend/src/main/java/core/repositories/timemanager/BasicTaskScheduleRepository.java
@@ -11,6 +11,7 @@ import org.springframework.stereotype.Repository;
 import javax.transaction.Transactional;
 import java.time.LocalDate;
 import java.util.List;
+import java.util.Optional;
 
 @Repository
 public interface BasicTaskScheduleRepository extends CrudRepository<BasicTaskSchedule, Long> {
@@ -30,4 +31,7 @@ public interface BasicTaskScheduleRepository extends CrudRepository<BasicTaskSch
 
     @Query(value = "SELECT bts FROM BasicTaskSchedule bts WHERE bts.task.taskgroup.user = ?1 AND bts.scheduleDate = ?2")
     List<BasicTaskSchedule> findAllByUserAndDate(User user, LocalDate localDate);
+
+    @Query(value = "SELECT bts FROM BasicTaskSchedule bts WHERE bts.task.taskgroup.user.username = ?1 AND bts.startTime is not null  and bts.finishedTime is null")
+    Optional<BasicTaskSchedule> findActiveTaskSchedule(String username);
 }
diff --git a/backend/src/main/java/core/services/TaskScheduleService.java b/backend/src/main/java/core/services/TaskScheduleService.java
index a2a8407..be1f5cd 100644
--- a/backend/src/main/java/core/services/TaskScheduleService.java
+++ b/backend/src/main/java/core/services/TaskScheduleService.java
@@ -11,6 +11,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.time.LocalDate;
+import java.time.LocalDateTime;
 import java.util.List;
 import java.util.Optional;
 
@@ -80,4 +81,19 @@ public class TaskScheduleService {
     public void deleteScheduleByTask(Task task) {
         basicTaskScheduleRepository.deleteAllByTask(task);
     }
+
+    public ServiceResult<BasicTaskSchedule> getActiveSchedule(String username) {
+        Optional<BasicTaskSchedule> activeTaskScheduleResult = basicTaskScheduleRepository.findActiveTaskSchedule(username);
+        return activeTaskScheduleResult.map(ServiceResult::new).orElseGet(() -> new ServiceResult<>(ServiceExitCode.MISSING_ENTITY));
+    }
+
+    public ServiceResult<BasicTaskSchedule> activateSchedule(BasicTaskSchedule taskSchedule) {
+        if(getActiveSchedule(taskSchedule.getTask().getTaskgroup().getUser().getUsername()).getExitCode() == ServiceExitCode.MISSING_ENTITY) {
+            taskSchedule.setStartTime(LocalDateTime.now());
+            basicTaskScheduleRepository.save(taskSchedule);
+            return new ServiceResult<>(taskSchedule);
+        } else {
+            return new ServiceResult<>(ServiceExitCode.ENTITY_ALREADY_EXIST);
+        }
+    }
 }
diff --git a/frontend/src/api/.openapi-generator/FILES b/frontend/src/api/.openapi-generator/FILES
index 9f2926a..8041db9 100644
--- a/frontend/src/api/.openapi-generator/FILES
+++ b/frontend/src/api/.openapi-generator/FILES
@@ -28,6 +28,7 @@ model/passwordChangeRequest.ts
 model/propertiesInfo.ts
 model/propertyInfo.ts
 model/propertyUpdateRequest.ts
+model/scheduleActivateInfo.ts
 model/scheduleInfo.ts
 model/signUpRequest.ts
 model/simpleStatusResponse.ts
diff --git a/frontend/src/api/api/schedule.service.ts b/frontend/src/api/api/schedule.service.ts
index e5fb590..95c13ff 100644
--- a/frontend/src/api/api/schedule.service.ts
+++ b/frontend/src/api/api/schedule.service.ts
@@ -20,6 +20,7 @@ import { Observable }                                        from 'rxjs';
 
 import { BasicScheduleEntityInfo } from '../model/models';
 import { BasicScheduleFieldInfo } from '../model/models';
+import { ScheduleActivateInfo } from '../model/models';
 import { ScheduleInfo } from '../model/models';
 import { SimpleStatusResponse } from '../model/models';
 
@@ -88,6 +89,61 @@ export class ScheduleService {
         return httpParams;
     }
 
+    /**
+     * get active schedule
+     * get active schedule
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public schedulesActiveGet(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<ScheduleInfo>;
+    public schedulesActiveGet(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<ScheduleInfo>>;
+    public schedulesActiveGet(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<ScheduleInfo>>;
+    public schedulesActiveGet(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.get<ScheduleInfo>(`${this.configuration.basePath}/schedules/active`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * gets all schedules of user
      * gets all schedules of user
@@ -143,6 +199,66 @@ export class ScheduleService {
         );
     }
 
+    /**
+     * activates schedule
+     * activates schedule
+     * @param scheduleID internal id of schedule
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public schedulesScheduleIDActivatePost(scheduleID: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<ScheduleActivateInfo>;
+    public schedulesScheduleIDActivatePost(scheduleID: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpResponse<ScheduleActivateInfo>>;
+    public schedulesScheduleIDActivatePost(scheduleID: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<HttpEvent<ScheduleActivateInfo>>;
+    public schedulesScheduleIDActivatePost(scheduleID: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext}): Observable<any> {
+        if (scheduleID === null || scheduleID === undefined) {
+            throw new Error('Required parameter scheduleID was null or undefined when calling schedulesScheduleIDActivatePost.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        let localVarCredential: string | undefined;
+        // authentication (API_TOKEN) required
+        localVarCredential = this.configuration.lookupCredential('API_TOKEN');
+        if (localVarCredential) {
+            localVarHeaders = localVarHeaders.set('Authorization', 'Bearer ' + localVarCredential);
+        }
+
+        let localVarHttpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (localVarHttpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            localVarHttpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        let localVarHttpContext: HttpContext | undefined = options && options.context;
+        if (localVarHttpContext === undefined) {
+            localVarHttpContext = new HttpContext();
+        }
+
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(localVarHttpHeaderAcceptSelected && localVarHttpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.post<ScheduleActivateInfo>(`${this.configuration.basePath}/schedules/${encodeURIComponent(String(scheduleID))}/activate`,
+            null,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * reschedules task
      * reschedules a task
diff --git a/frontend/src/api/model/models.ts b/frontend/src/api/model/models.ts
index af77e58..c9d526d 100644
--- a/frontend/src/api/model/models.ts
+++ b/frontend/src/api/model/models.ts
@@ -12,6 +12,7 @@ export * from './passwordChangeRequest';
 export * from './propertiesInfo';
 export * from './propertyInfo';
 export * from './propertyUpdateRequest';
+export * from './scheduleActivateInfo';
 export * from './scheduleInfo';
 export * from './signUpRequest';
 export * from './simpleStatusResponse';
diff --git a/frontend/src/api/model/scheduleActivateInfo.ts b/frontend/src/api/model/scheduleActivateInfo.ts
new file mode 100644
index 0000000..c04a111
--- /dev/null
+++ b/frontend/src/api/model/scheduleActivateInfo.ts
@@ -0,0 +1,20 @@
+/**
+ * API Title
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface ScheduleActivateInfo { 
+    /**
+     * point in time at which the schedule was started
+     */
+    startTime: string;
+}
+
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index ae6b623..c107997 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -63,6 +63,7 @@ import {MatSelectModule} from "@angular/material/select";
 import { BasicSchedulerComponent } from './schedules/basic-scheduler/basic-scheduler.component';
 import { ScheduleDashboardComponent } from './schedules/schedule-dashboard/schedule-dashboard.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { ActiveScheduleComponent } from './dashboard/active-schedule/active-schedule.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -90,7 +91,8 @@ import { DashboardComponent } from './dashboard/dashboard.component';
     SchedulerComponent,
     BasicSchedulerComponent,
     ScheduleDashboardComponent,
-    DashboardComponent
+    DashboardComponent,
+    ActiveScheduleComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/dashboard/active-schedule/active-schedule.component.css b/frontend/src/app/dashboard/active-schedule/active-schedule.component.css
new file mode 100644
index 0000000..ea0b6c2
--- /dev/null
+++ b/frontend/src/app/dashboard/active-schedule/active-schedule.component.css
@@ -0,0 +1,141 @@
+.container {
+  margin: 20px auto;
+  width: 70%;
+  display: flex;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
+
+.today-worked-info {
+  margin-left: 20px;
+  background-color: #e1e1e1;
+  padding-right: 5px;
+  padding-left: 5px;
+  border-radius: 5px;
+}
+
+.red-card {
+  background-color: #e54c3c;
+  color: white;
+}
+
+.green-card {
+  background-color: #00bc8c;
+  color: white;
+}
+
+.main-container {
+  width: 45%;
+  margin-right: 20px;
+}
+
+.btn-link {
+  text-decoration: underline;
+  color: white;
+  margin-left: 20px;
+}
+
+.dashboard-heading {
+  margin-top: 20px;
+  font-size: 2.5em;
+}
+
+.today-worked-info {
+  font-size: .8em;
+}
+
+
+.lightBlueBtn {
+  background-color: #3498db;
+  color: white;
+}
+
+.grayBtn {
+  background-color: #444444;
+  color: white;
+  border-radius: 0;
+}
+
+::ng-deep .mat-mdc-list-base {
+  --mdc-list-list-item-label-text-color: white
+}
+
+::ng-deep .mat-mdc-list-base .taskgroup-btn, ::ng-deep .mat-mdc-list-base .taskgroup-last-btn  {
+  --mdc-list-list-item-label-text-color: black
+}
+
+.taskgroup-overview {
+  width: 25%;
+  float: right;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.taskgroup-btn {
+  background-color: #f3f3f3;
+  border: 0 solid #000000;
+  border-bottom-width: 1px;
+}
+
+.taskgroup-last-btn {
+  background-color: #f3f3f3;
+}
+
+.link-no-deco {
+  text-decoration: none;
+  color: black;
+}
+
+.link-no-deco:hover{
+  text-decoration: underline;
+}
+
+.gray-text {
+  color: #6e6e6e;
+}
+
+.yellowBtn {
+  background-color: #f39c12;
+  color: white;
+  border-radius: 0;
+}
+
+.primaryBtn {
+  border-radius: 0;
+}
+
+
+::ng-deep .mat-mdc-card-header-text {
+  display: block;
+  width: 100%;
+}
+
+.schedule-del-btn {
+  margin-top: 10px;
+}
+
+.left-actions {
+  float: left;
+}
+
+.right-actions {
+  float: right;
+}
+
+.greenBtn {
+  background-color: #00bc8c;
+  color: white;
+  border-radius: 0;
+}
diff --git a/frontend/src/app/dashboard/active-schedule/active-schedule.component.html b/frontend/src/app/dashboard/active-schedule/active-schedule.component.html
new file mode 100644
index 0000000..10a1c1f
--- /dev/null
+++ b/frontend/src/app/dashboard/active-schedule/active-schedule.component.html
@@ -0,0 +1,19 @@
+<mat-card class="green-card" *ngIf="activeSchedule == undefined">
+  <mat-card-content>
+    <p>Currently there is no task in progress.</p>
+    <a class="btn-link" routerLink="/">Did you forget to start an activity?</a>
+  </mat-card-content>
+</mat-card>
+<mat-card *ngIf="activeSchedule != undefined">
+  <mat-card-header>
+    <mat-card-title><a routerLink="/" class="link-no-deco">{{activeSchedule!.task.taskName}}</a></mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <span *ngFor="let taskgroupPath of activeSchedule!.taskgroupPath">{{taskgroupPath.taskgroupName}} /</span>
+    <p class="gray-text" *ngIf="activeSchedule!.scheduleType==='BASIC'">Running for {{displayTime}}</p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-raised-button class="grayBtn">Stop</button>
+    <button mat-raised-button class="greenBtn">Finish</button>
+  </mat-card-actions>
+</mat-card>
diff --git a/frontend/src/app/dashboard/active-schedule/active-schedule.component.spec.ts b/frontend/src/app/dashboard/active-schedule/active-schedule.component.spec.ts
new file mode 100644
index 0000000..b00144b
--- /dev/null
+++ b/frontend/src/app/dashboard/active-schedule/active-schedule.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActiveScheduleComponent } from './active-schedule.component';
+
+describe('ActiveScheduleComponent', () => {
+  let component: ActiveScheduleComponent;
+  let fixture: ComponentFixture<ActiveScheduleComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ActiveScheduleComponent]
+    });
+    fixture = TestBed.createComponent(ActiveScheduleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/dashboard/active-schedule/active-schedule.component.ts b/frontend/src/app/dashboard/active-schedule/active-schedule.component.ts
new file mode 100644
index 0000000..40b2412
--- /dev/null
+++ b/frontend/src/app/dashboard/active-schedule/active-schedule.component.ts
@@ -0,0 +1,51 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ScheduleInfo, ScheduleService} from "../../../api";
+
+@Component({
+  selector: 'app-active-schedule',
+  templateUrl: './active-schedule.component.html',
+  styleUrls: ['./active-schedule.component.css']
+})
+export class ActiveScheduleComponent implements OnInit{
+  activeSchedule: ScheduleInfo | undefined
+
+  startTime: number = 0;
+  currentTime: number = 0;
+  displayTime: string = "00:00:00"
+
+  constructor(private scheduleService: ScheduleService) {
+
+
+  }
+
+
+  updateTime() {
+    const now = Date.now();
+    const elapsed = this.activeSchedule != undefined ? now - this.startTime + this.currentTime : this.currentTime;
+    this.displayTime = this.formatTime(elapsed);
+    console.log("Update!")
+    requestAnimationFrame(() => this.updateTime());
+  }
+
+  formatTime(milliseconds: number): string {
+    const seconds = Math.floor((milliseconds / 1000) % 60);
+    const minutes = Math.floor((milliseconds / 1000 / 60) % 60);
+    const hours = Math.floor(milliseconds / 1000 / 60 / 60);
+    return `${this.padNumber(hours)}:${this.padNumber(minutes)}:${this.padNumber(seconds)}`;
+  }
+  padNumber(num: number): string {
+    return num < 10 ? `0${num}` : `${num}`;
+  }
+
+  ngOnInit(): void {
+    this.scheduleService.schedulesActiveGet().subscribe({
+      next: resp => {
+        this.activeSchedule = resp;
+        this.startTime = new Date(this.activeSchedule.startTime).getTime();
+        this.updateTime()
+      }
+    })
+  }
+
+
+}
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 2b0ee4f..36181bc 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -8,12 +8,7 @@
     </mat-card>
     <h1 class="dashboard-heading">Now<b class="today-worked-info">Today: 0 min</b></h1>
 
-    <mat-card class="green-card" *ngIf="!taskRunning">
-      <mat-card-content>
-        <p>Currently there is no task in progress.</p>
-        <a class="btn-link" routerLink="/">Did you forget to start an activity?</a>
-      </mat-card-content>
-    </mat-card>
+    <app-active-schedule #activeSchedule></app-active-schedule>
 
     <h1 class="dashboard-heading">Scheduled for today</h1>
     <mat-card class="green-card" *ngIf="schedules.length == 0">
@@ -22,6 +17,8 @@
       </mat-card-content>
     </mat-card>
 
+
+
     <div>
       <mat-card *ngFor="let schedule of schedules">
         <mat-card-header>
@@ -34,7 +31,7 @@
           <p class="gray-text" *ngIf="schedule.scheduleType==='BASIC'">To be done sometime today</p>
         </mat-card-content>
         <mat-card-actions>
-          <button mat-raised-button color="primary" class="primaryBtn">Start now</button>
+          <button mat-raised-button color="primary" class="primaryBtn" (click)="startSchedule(schedule)" [disabled]="activeScheduleComponent!.activeSchedule != undefined">Start now</button>
           <button mat-raised-button class="yellowBtn">Reschedule</button>
         </mat-card-actions>
       </mat-card>
diff --git a/frontend/src/app/dashboard/dashboard.component.ts b/frontend/src/app/dashboard/dashboard.component.ts
index 3442273..c0ffd44 100644
--- a/frontend/src/app/dashboard/dashboard.component.ts
+++ b/frontend/src/app/dashboard/dashboard.component.ts
@@ -1,5 +1,6 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {ScheduleInfo, ScheduleService} from "../../api";
+import {ActiveScheduleComponent} from "./active-schedule/active-schedule.component";
 
 @Component({
   selector: 'app-dashboard',
@@ -9,9 +10,9 @@ import {ScheduleInfo, ScheduleService} from "../../api";
 export class DashboardComponent implements OnInit{
 
   missedSchedules: boolean = true
-  taskRunning: boolean = false
   schedules: ScheduleInfo[] = []
 
+  @ViewChild('activeSchedule') activeScheduleComponent: ActiveScheduleComponent | undefined
   constructor(private scheduleService: ScheduleService) {
   }
 
@@ -21,5 +22,20 @@ export class DashboardComponent implements OnInit{
         this.schedules = resp;
       }
     })
+
+
   }
+
+  startSchedule(schedule: ScheduleInfo) {
+    this.scheduleService.schedulesScheduleIDActivatePost(schedule.scheduleID).subscribe({
+      next: resp => {
+        schedule.startTime = resp.startTime;
+        if(this.activeScheduleComponent != undefined) {
+          this.activeScheduleComponent.activeSchedule = schedule;
+        }
+      }
+    })
+  }
+
+
 }
diff --git a/openapi.yaml b/openapi.yaml
index b72835b..00fd525 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -1417,6 +1417,73 @@ paths:
               schema:
                 type: object
                 $ref: "#/components/schemas/SimpleStatusResponse"
+  /schedules/active: 
+    get:
+      security:
+        - API_TOKEN: []
+      tags:
+        - schedule
+      description: get active schedule
+      summary: get active schedule
+      responses:
+        200:
+          description: operation successfull
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ScheduleInfo'
+        404:
+          description: there is no active schedule
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SimpleStatusResponse'
+  /schedules/{scheduleID}/activate:
+    post:
+      security:
+        - API_TOKEN: []
+      tags:
+        - schedule
+      description: activates schedule
+      summary: activates schedule
+      parameters:
+        - name: scheduleID
+          in: path
+          description: internal id of schedule
+          required: true
+          schema:
+            type: number
+            example: 1
+      responses:
+        200:
+          description: Operation successfull
+          content:
+            application/json:
+              schema:
+                type: object
+                $ref: '#/components/schemas/ScheduleActivateInfo'
+        403:
+          description: No permission
+          content:
+            'application/json':
+              schema:
+                type: object
+                $ref: "#/components/schemas/SimpleStatusResponse"
+        404:
+          description: Schedule does not exist
+          content:
+            'application/json':
+              schema:
+                type: object
+                $ref: "#/components/schemas/SimpleStatusResponse"
+        409:
+          description: Task is already running
+          content:
+            'application/json':
+              schema:
+                type: object
+                $ref: "#/components/schemas/SimpleStatusResponse"
+      
       
       
 components:
@@ -1833,4 +1900,13 @@ components:
         taskName:
           type: string
           description: name of task
-          example: "Vorlesung zusammenfassen"
\ No newline at end of file
+          example: "Vorlesung zusammenfassen"
+    ScheduleActivateInfo:
+      required:
+        - startTime
+      additionalProperties: false
+      properties:
+        startTime:
+          type: string
+          format: date-time
+          description: point in time at which the schedule was started
\ No newline at end of file