Design Missed Schedules Component and manage routing to it

frontend/src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import {UserSettingsComponent} from "./user-settings/user-settings.component";
 import {TaskgroupDashboardComponent} from "./taskgroups/taskgroup-dashboard/taskgroup-dashboard.component";
 import {TaskDetailOverviewComponent} from "./tasks/task-detail-overview/task-detail-overview.component";
 import {SchedulerComponent} from "./schedules/scheduler/scheduler.component";
+import {MissedSchedulesComponent} from "./missed-schedules/missed-schedules.component";
 
 const routes: Routes = [
   {path: '', component: MainComponent},
@@ -16,7 +17,8 @@ const routes: Routes = [
   {path: 'taskgroups/:taskgroupID', component: TaskgroupDashboardComponent},
   {path: 'taskgroups/:taskgroupID/tasks/:taskID', component: TaskDetailOverviewComponent},
   {path: 'taskgroups/:taskgroupID/tasks/:taskID/schedule', component: SchedulerComponent},
-  {path: 'taskgroups/:taskgroupID/tasks/:taskID/schedule/:scheduleID', component: SchedulerComponent}
+  {path: 'taskgroups/:taskgroupID/tasks/:taskID/schedule/:scheduleID', component: SchedulerComponent},
+  {path: 'reschedule', component: MissedSchedulesComponent}
 ];
 
 @NgModule({

frontend/src/app/app.component.html

@@ -4,6 +4,7 @@
   <button mat-button aria-label="Organize" *ngIf="authService.hasKey" [matMenuTriggerFor]="organizeMenu">Organize &#9662;</button>
   <mat-menu #organizeMenu=matMenu>
     <button mat-menu-item routerLink="taskgroups/" aria-label="Task groups">Taskgroups</button>
+    <button mat-menu-item routerLink="reschedule/" aria-label="Missed Schedules">Missed Schedules</button>
   </mat-menu>
   <span class="example-spacer"></span>
 

frontend/src/app/missed-schedules/missed-schedules.component.css

@@ -0,0 +1,37 @@
+.container {
+  margin: 20px auto;
+  width: 70%;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
+
+.originally-planned-container {
+  border-style: solid;
+  border-color: #e1e1e1;
+  border-width: 1px;
+  margin-top: 10px;
+  border-radius: 5px;
+  padding: 10px;
+
+}
+
+.reschedule-actions-container {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  text-align: center;
+}
+
+.forget-all-btn {
+  margin-top: 20px;
+}

frontend/src/app/missed-schedules/missed-schedules.component.html

@@ -0,0 +1,19 @@
+<div class="container">
+  <app-navigation-link-list [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
+  <mat-card *ngFor="let schedule of missedSchedules">
+    <mat-card-content>
+      <h3><a *ngFor="let taskgroup of schedule.taskgroupPath">{{taskgroup.taskgroupName}} / </a><a>{{schedule.task.taskName}}</a></h3>
+      <mat-progress-bar mode="determinate" [value]="schedule.activeMinutes"></mat-progress-bar>
+      <div class="originally-planned-container">
+        <div style="width: 100%">
+          <p style="display: inline-block"><i>Originally planned:</i> {{schedule.schedule.scheduleDate}}</p>
+        </div>
+        <div style="width: 100%" class="reschedule-actions-container">
+          <button mat-raised-button color="primary" class="rescheduleBtn">Reschedule</button>
+          <button mat-raised-button color="warn" class="deleteBtn">Forget</button>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+  <button mat-raised-button color="warn" class="forget-all-btn"><mat-icon>delete</mat-icon>Forget All</button>
+</div>

frontend/src/app/missed-schedules/missed-schedules.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MissedSchedulesComponent } from './missed-schedules.component';
+
+describe('MissedSchedulesComponent', () => {
+  let component: MissedSchedulesComponent;
+  let fixture: ComponentFixture<MissedSchedulesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MissedSchedulesComponent]
+    });
+    fixture = TestBed.createComponent(MissedSchedulesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/missed-schedules/missed-schedules.component.ts

@@ -0,0 +1,33 @@
+import {Component, OnInit} from '@angular/core';
+import {ScheduleInfo, ScheduleService} from "../../api";
+import {NavigationLink} from "../navigation-link-list/navigation-link-list.component";
+
+@Component({
+  selector: 'app-missed-schedules',
+  templateUrl: './missed-schedules.component.html',
+  styleUrls: ['./missed-schedules.component.css']
+})
+export class MissedSchedulesComponent implements OnInit{
+
+  missedSchedules: ScheduleInfo[] = []
+  defaultNavigationLinkPath: NavigationLink[] = [
+    {
+      linkText: "Dashboard",
+      routerLink: ['/']
+    },
+    {
+      linkText: "Missed Schedules",
+      routerLink: ["/reschedule"]
+    }
+  ]
+  constructor(private scheduleService: ScheduleService) {
+  }
+
+  ngOnInit() {
+    this.scheduleService.schedulesMissedGet().subscribe({
+      next: resp => {
+        this.missedSchedules = resp;
+      }
+    })
+  }
+}