sebastian/timemanager
Template
1
0
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

issue-18 #28

Merged
sebastian merged 55 commits from issue-18 into master 2023-10-28 19:36:14 +02:00
Conversation 0 Commits 55 Files Changed 89 +111 -14
11 changed files with 111 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d4ca2a3fd2 - Show all commits

4
frontend/src/app/app.module.ts
View File

@ -66,6 +66,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
import { ActiveScheduleComponent } from './dashboard/active-schedule/active-schedule.component';
import {MatTreeModule} from "@angular/material/tree";
import { TaskgroupOverviewComponent } from './dashboard/taskgroup-overview/taskgroup-overview.component';
import { TaskOverviewComponent } from './dashboard/task-overview/task-overview.component';
@NgModule({
declarations: [
AppComponent,
@ -95,7 +96,8 @@ import { TaskgroupOverviewComponent } from './dashboard/taskgroup-overview/taskg
ScheduleDashboardComponent,
DashboardComponent,
ActiveScheduleComponent,
TaskgroupOverviewComponent
TaskgroupOverviewComponent,
TaskOverviewComponent
],
imports: [
BrowserModule,

3
frontend/src/app/dashboard/dashboard.component.css
View File

@ -75,8 +75,9 @@
}
.taskgroup-overview {
width: 25%;
width: 30%;
float: right;
margin-right: 20px;
}
.spacer {

7
frontend/src/app/dashboard/dashboard.component.html
View File

@ -38,10 +38,13 @@
</div>
</div>
<span class="spacer"></span>
<div class="taskgroup-overview">
<app-task-overview [tasks]="tasks"></app-task-overview>
</div>
<div class="taskgroup-overview">
<app-taskgroup-overview></app-taskgroup-overview>
<app-taskgroup-overview (taskgroupSelected)="onSelectTaskgroup($event)"></app-taskgroup-overview>
</div>

10
frontend/src/app/dashboard/dashboard.component.ts
View File

@ -1,7 +1,8 @@
import {Component, OnInit, ViewChild} from '@angular/core';
import {ScheduleInfo, ScheduleService} from "../../api";
import {ScheduleInfo, ScheduleService, TaskOverviewInfo} from "../../api";
import {ActiveScheduleComponent} from "./active-schedule/active-schedule.component";
import {StopActiveScheduleInfo} from "./active-schedule/StopActiveScheduleInfo";
import {TaskOverviewComponent} from "./task-overview/task-overview.component";
@Component({
selector: 'app-dashboard',
@ -14,6 +15,8 @@ export class DashboardComponent implements OnInit{
schedules: ScheduleInfo[] = []
workedMinutesToday: number = 0
tasks: TaskOverviewInfo[] = []
@ViewChild('activeSchedule') activeScheduleComponent: ActiveScheduleComponent | undefined
constructor(private scheduleService: ScheduleService) {
}
@ -44,4 +47,9 @@ export class DashboardComponent implements OnInit{
}
protected readonly TaskOverviewComponent = TaskOverviewComponent;
onSelectTaskgroup(tasks: TaskOverviewInfo[]) {
this.tasks = tasks;
}
}

28
frontend/src/app/dashboard/task-overview/task-overview.component.css Normal file
View File

@ -0,0 +1,28 @@
.greenBtn {
background-color: #00bc8c;
color: white;
}
.btn-without-radius {
border-radius: 0;
}
.task-info {
line-height: .75em;
}
.progress {
margin-bottom: 10px;
margin-top: -5px;
}
.long-btn {
width: 100%;
}
.yellowBtn {
background-color: #f39c12;
color: white;
border-radius: 0;
}

14
frontend/src/app/dashboard/task-overview/task-overview.component.html Normal file
View File

@ -0,0 +1,14 @@
<button mat-raised-button class="greenBtn long-btn" *ngIf="tasks.length > 0">Add</button>
<mat-card *ngFor="let task of tasks">
<mat-card-content>
<h3>{{task.taskName}}</h3>
<mat-progress-bar mode="determinate" value="{{task.activeTime}}" class="progress"></mat-progress-bar>
<p class="task-info"><i>ETA: </i>{{task.activeTime}} / {{task.eta}}</p>
<p class="task-info"><i>Limit: </i>{{task.limit}}</p>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="primary" class="btn-without-radius">Start now</button>
<button mat-raised-button class="yellowBtn btn-without-radius">Schedule</button>
<button mat-raised-button class="greenBtn btn-without-radius">Finish</button>
</mat-card-actions>
</mat-card>

21
frontend/src/app/dashboard/task-overview/task-overview.component.spec.ts Normal file
View File

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

12
frontend/src/app/dashboard/task-overview/task-overview.component.ts Normal file
View File

@ -0,0 +1,12 @@
import {Component, Input} from '@angular/core';
import {TaskOverviewInfo} from "../../../api";
@Component({
selector: 'app-task-overview',
templateUrl: './task-overview.component.html',
styleUrls: ['./task-overview.component.css']
})
export class TaskOverviewComponent {
@Input() tasks: TaskOverviewInfo[] = []
}

2
frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.css
View File

@ -163,5 +163,5 @@
}
.overdue-taskgroup {
background-color: #ff6354;
background-color: #ff695b;
}

5
frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.html
View File

@ -7,7 +7,7 @@
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
<div class="treenode-content-container">
<button mat-button class="node-name">{{node.name}}</button>
<button mat-button class="node-name" (click)="onSelectTaskgroup(node.tasks)">{{node.name}}</button>
<span class="spacer"></span>
<div class="task-number">{{node.activeTasks}}</div>
</div>
@ -21,10 +21,9 @@
</mat-icon>
</button>
<div class="treenode-content-container">
<button mat-button class="node-name">{{node.name}}</button>
<button mat-button class="node-name" (click)="onSelectTaskgroup(node.tasks)">{{node.name}}</button>
<span class="spacer"></span>
<div class="task-number">{{node.activeTasks}}</div>
</div>
</mat-tree-node>
</mat-tree>

19
frontend/src/app/dashboard/taskgroup-overview/taskgroup-overview.component.ts
View File

@ -1,9 +1,10 @@
import { Component } from '@angular/core';
import {Component, EventEmitter, Output} from '@angular/core';
import {MatIconModule} from "@angular/material/icon";
import {MatButtonModule} from "@angular/material/button";
import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule} from "@angular/material/tree";
import {FlatTreeControl} from "@angular/cdk/tree";
import {RecursiveTaskgroupInfo, TaskgroupService} from "../../../api";
import {RecursiveTaskgroupInfo, TaskgroupService, TaskOverviewInfo} from "../../../api";
import {TaskOverviewComponent} from "../task-overview/task-overview.component";
@ -11,10 +12,11 @@ import {RecursiveTaskgroupInfo, TaskgroupService} from "../../../api";
/** Flat node with expandable and level information */
interface ExampleFlatNode {
expandable: boolean;
name: string;
level: number;
name: string
activeTasks: number;
hasOverdueTask: boolean
hasOverdueTask: boolean;
tasks: TaskOverviewInfo[];
}
@Component({
selector: 'app-taskgroup-overview',
@ -22,13 +24,16 @@ interface ExampleFlatNode {
styleUrls: ['./taskgroup-overview.component.css']
})
export class TaskgroupOverviewComponent {
@Output('taskgroupSelected') taskgroupSelected: EventEmitter<TaskOverviewInfo[]> = new EventEmitter<TaskOverviewInfo[]>();
private _transformer = (node: RecursiveTaskgroupInfo, level: number) => {
return {
expandable: !!node.childTaskgroups && node.childTaskgroups.length > 0,
name: node.taskgroupName,
level: level,
activeTasks: node.amountActiveTasks,
hasOverdueTask: node.hasOverdueTask
hasOverdueTask: node.hasOverdueTask,
tasks: node.activeTasks
};
};
@ -59,4 +64,8 @@ export class TaskgroupOverviewComponent {
}
hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
onSelectTaskgroup(tasks: TaskOverviewInfo[]) {
this.taskgroupSelected.emit(tasks)
}
}