Design UI functionality
All checks were successful
Java CI with Maven / test (push) Successful in 36s
Java CI with Maven / build-and-push-frontend (push) Successful in 8s
Java CI with Maven / build-and-push-backend (push) Successful in 7s

This commit is contained in:
Sebastian Böckelmann 2024-03-13 23:05:28 +01:00
parent 8e41085008
commit 376b5395f1
5 changed files with 52 additions and 2 deletions

View File

@ -86,6 +86,8 @@ import {NgApexchartsModule} from "ng-apexcharts";
import { SimpleActivityDiagramComponent } from './statistics/taskgroup-activity/simple-activity-diagram/simple-activity-diagram.component'; 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 { HeatmapActivityComponent } from './statistics/taskgroup-activity/heatmap-activity/heatmap-activity.component';
import { ScheduleHistoryComponent } from './statistics/schedule-history/schedule-history.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({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
@ -171,6 +173,8 @@ import { ScheduleHistoryComponent } from './statistics/schedule-history/schedule
MatSliderModule, MatSliderModule,
NgxSliderModule, NgxSliderModule,
NgApexchartsModule, NgApexchartsModule,
MatButtonToggleModule,
MatGridListModule,
], ],
providers: [ providers: [
HttpClientModule, HttpClientModule,

View File

@ -139,3 +139,26 @@
color: white; color: white;
border-radius: 0; 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;
}

View File

@ -13,7 +13,19 @@
<p class="gray-text">Running for {{displayTime}}</p> <p class="gray-text">Running for {{displayTime}}</p>
</mat-card-content> </mat-card-content>
<mat-card-actions> <mat-card-actions>
<button mat-raised-button class="grayBtn" (click)="stopTask(false)">Stop</button> <button class="btn btn-secondary" (click)="stopTask(false)">Stop</button>
<button mat-raised-button class="greenBtn" *ngIf="activeSchedule!.task.finishable" (click)="stopTask(true)">Finish</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-actions>
</mat-card> </mat-card>

View File

@ -89,6 +89,14 @@ export class ActiveScheduleComponent implements OnInit{
this.activeSchedule = undefined this.activeSchedule = undefined
} }
abortSchedule() {
}
finishManual() {
}
openForgettedActivityDialog() { openForgettedActivityDialog() {
const dialogRef = this.dialog.open(ForgottenTaskStartDialogComponent, {width: "400px"}) const dialogRef = this.dialog.open(ForgottenTaskStartDialogComponent, {width: "400px"})
dialogRef.afterClosed().subscribe(res => { dialogRef.afterClosed().subscribe(res => {
@ -97,4 +105,6 @@ export class ActiveScheduleComponent implements OnInit{
} }
}) })
} }
} }

View File

@ -12,6 +12,7 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <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 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"/> <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> </head>
<body class="mat-typography"> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>