From 376b5395f137be73ad2872ad007db3d9835eee76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Wed, 13 Mar 2024 23:05:28 +0100
Subject: [PATCH] Design UI functionality

---
 frontend/src/app/app.module.ts                |  4 ++++
 .../active-schedule.component.css             | 23 +++++++++++++++++++
 .../active-schedule.component.html            | 16 +++++++++++--
 .../active-schedule.component.ts              | 10 ++++++++
 frontend/src/index.html                       |  1 +
 5 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index d4d53e1..7cdfe19 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -86,6 +86,8 @@ import {NgApexchartsModule} from "ng-apexcharts";
 import { SimpleActivityDiagramComponent } from './statistics/taskgroup-activity/simple-activity-diagram/simple-activity-diagram.component';
 import { HeatmapActivityComponent } from './statistics/taskgroup-activity/heatmap-activity/heatmap-activity.component';
 import { ScheduleHistoryComponent } from './statistics/schedule-history/schedule-history.component';
+import {MatButtonToggleModule} from "@angular/material/button-toggle";
+import {MatGridListModule} from "@angular/material/grid-list";
 @NgModule({
   declarations: [
     AppComponent,
@@ -171,6 +173,8 @@ import { ScheduleHistoryComponent } from './statistics/schedule-history/schedule
     MatSliderModule,
     NgxSliderModule,
     NgApexchartsModule,
+    MatButtonToggleModule,
+    MatGridListModule,
   ],
   providers: [
     HttpClientModule,
diff --git a/frontend/src/app/dashboard/active-schedule/active-schedule.component.css b/frontend/src/app/dashboard/active-schedule/active-schedule.component.css
index ea0b6c2..fc3c2b5 100644
--- a/frontend/src/app/dashboard/active-schedule/active-schedule.component.css
+++ b/frontend/src/app/dashboard/active-schedule/active-schedule.component.css
@@ -139,3 +139,26 @@
   color: white;
   border-radius: 0;
 }
+
+::ng-deep mat-button-toggle.drop-down-button {
+  margin-left: 0;
+}
+
+.parent-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.right-container {
+  margin-top: -5px;
+}
+
+::ng-deep .small-button {
+  padding: 6px; /* Adjust padding as needed */
+  font-size: 10px; /* Adjust font size as needed */
+}
+
+.btn {
+  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
index 3e3470b..a686fba 100644
--- a/frontend/src/app/dashboard/active-schedule/active-schedule.component.html
+++ b/frontend/src/app/dashboard/active-schedule/active-schedule.component.html
@@ -13,7 +13,19 @@
     <p class="gray-text">Running for {{displayTime}}</p>
   </mat-card-content>
   <mat-card-actions>
-    <button mat-raised-button class="grayBtn" (click)="stopTask(false)">Stop</button>
-    <button mat-raised-button class="greenBtn" *ngIf="activeSchedule!.task.finishable" (click)="stopTask(true)">Finish</button>
+    <button class="btn btn-secondary" (click)="stopTask(false)">Stop</button>
+    <div class="btn-group">
+      <button type="button" class="btn btn-success">Finish</button>
+      <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+        <span class="visually-hidden">Toggle Dropdown</span>
+      </button>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#" (click)="abortSchedule()">Abort</a></li>
+        <li><a class="dropdown-item" href="#" (click)="finishManual()">Set manually stop time</a></li>
+      </ul>
+    </div>
+
+
+
   </mat-card-actions>
 </mat-card>
diff --git a/frontend/src/app/dashboard/active-schedule/active-schedule.component.ts b/frontend/src/app/dashboard/active-schedule/active-schedule.component.ts
index 5378df5..58cdfbe 100644
--- a/frontend/src/app/dashboard/active-schedule/active-schedule.component.ts
+++ b/frontend/src/app/dashboard/active-schedule/active-schedule.component.ts
@@ -89,6 +89,14 @@ export class ActiveScheduleComponent implements OnInit{
     this.activeSchedule = undefined
   }
 
+  abortSchedule() {
+
+  }
+
+  finishManual() {
+
+  }
+
   openForgettedActivityDialog() {
     const dialogRef = this.dialog.open(ForgottenTaskStartDialogComponent, {width: "400px"})
     dialogRef.afterClosed().subscribe(res => {
@@ -97,4 +105,6 @@ export class ActiveScheduleComponent implements OnInit{
       }
     })
   }
+
+
 }
diff --git a/frontend/src/index.html b/frontend/src/index.html
index fecc517..cf6d609 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -12,6 +12,7 @@
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
   <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </head>
 <body class="mat-typography">
   <app-root></app-root>