From 966c896ae03aaf144c0cbaca45644bc10ea7eed2 Mon Sep 17 00:00:00 2001
From: Sebastian <s.boeckelmann3@gmail.com>
Date: Sun, 29 Oct 2023 10:34:02 +0100
Subject: [PATCH] Design Missed Schedules Component and manage routing to it

---
 frontend/src/app/app-routing.module.ts        |  4 +-
 frontend/src/app/app.component.html           |  1 +
 .../missed-schedules.component.css            | 37 +++++++++++++++++++
 .../missed-schedules.component.html           | 19 ++++++++++
 .../missed-schedules.component.spec.ts        | 21 +++++++++++
 .../missed-schedules.component.ts             | 33 +++++++++++++++++
 6 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/missed-schedules/missed-schedules.component.css
 create mode 100644 frontend/src/app/missed-schedules/missed-schedules.component.html
 create mode 100644 frontend/src/app/missed-schedules/missed-schedules.component.spec.ts
 create mode 100644 frontend/src/app/missed-schedules/missed-schedules.component.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 076bea8..66a658a 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/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({
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index b4f5177..e37af02 100644
--- a/frontend/src/app/app.component.html
+++ b/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>
 
diff --git a/frontend/src/app/missed-schedules/missed-schedules.component.css b/frontend/src/app/missed-schedules/missed-schedules.component.css
new file mode 100644
index 0000000..2b618a5
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/app/missed-schedules/missed-schedules.component.html b/frontend/src/app/missed-schedules/missed-schedules.component.html
new file mode 100644
index 0000000..39c5ec8
--- /dev/null
+++ b/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>
diff --git a/frontend/src/app/missed-schedules/missed-schedules.component.spec.ts b/frontend/src/app/missed-schedules/missed-schedules.component.spec.ts
new file mode 100644
index 0000000..4547946
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/frontend/src/app/missed-schedules/missed-schedules.component.ts b/frontend/src/app/missed-schedules/missed-schedules.component.ts
new file mode 100644
index 0000000..2e7ebba
--- /dev/null
+++ b/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;
+      }
+    })
+  }
+}