frontend/src/app/dashboard/dashboard.component.css

@@ -92,3 +92,44 @@
 .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;
+}

frontend/src/app/dashboard/dashboard.component.html

@@ -21,6 +21,25 @@
         <p>There is no scheduled Task for today</p>
       </mat-card-content>
     </mat-card>
+
+    <div>
+      <mat-card *ngFor="let schedule of schedules">
+        <mat-card-header>
+          <mat-card-title>
+            <a routerLink="/" class="link-no-deco">{{schedule.task.taskName}}</a>
+          </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <span *ngFor="let taskgroupPath of schedule.taskgroupPath">{{taskgroupPath.taskgroupName}} /</span>
+          <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 class="yellowBtn">Reschedule</button>
+        </mat-card-actions>
+      </mat-card>
+    </div>
+
   </div>
   <span class="spacer"></span>
   <div class="taskgroup-overview">

frontend/src/app/dashboard/dashboard.component.ts

@@ -1,14 +1,25 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
-import {ScheduleInfo} from "../../api";
+import {ScheduleInfo, ScheduleService} from "../../api";
 
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css']
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit{
 
   missedSchedules: boolean = true
   taskRunning: boolean = false
   schedules: ScheduleInfo[] = []
+
+  constructor(private scheduleService: ScheduleService) {
+  }
+
+  ngOnInit() {
+    this.scheduleService.schedulesTodayGet().subscribe({
+      next: resp => {
+        this.schedules = resp;
+      }
+    })
+  }
 }