From fd4012ec90295e7b3d6a3ecda4543dd8589a58f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= Date: Sun, 12 Nov 2023 09:13:12 +0100 Subject: [PATCH] Progressbar vor advanced scheduler --- .../advanced-scheduler.component.html | 9 +++ .../advanced-scheduler.component.ts | 72 ++++++++++++++++-- .../scheduler/scheduler.component.html | 5 +- .../scheduler/scheduler.component.ts | 75 ++++++++++++++++++- frontend/src/index.html | 3 +- 5 files changed, 154 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.html b/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.html index 22ac923..cfda2b6 100644 --- a/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.html +++ b/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.html @@ -7,6 +7,15 @@ +
+
+
{{currentProgress}}
+
+
+
{{futureProgress}}
+
+
+ diff --git a/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.ts b/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.ts index 1034079..6e0af56 100644 --- a/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.ts +++ b/frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.ts @@ -1,6 +1,5 @@ -import {Component, Input, ViewChild} from '@angular/core'; -import {TaskgroupEntityInfo, TaskShortInfo} from "../../../api"; -import {FormControl, Validators} from "@angular/forms"; +import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {TaskEntityInfo, TaskgroupEntityInfo} from "../../../api"; import {DateTimePickerComponent} from "../../date-time-picker/date-time-picker.component"; @Component({ @@ -8,18 +7,26 @@ import {DateTimePickerComponent} from "../../date-time-picker/date-time-picker.c templateUrl: './advanced-scheduler.component.html', styleUrls: ['./advanced-scheduler.component.css'] }) -export class AdvancedSchedulerComponent { - - @Input() task: TaskShortInfo | undefined; +export class AdvancedSchedulerComponent implements OnInit{ + @Input() task: TaskEntityInfo | undefined; @Input() taskgroup: TaskgroupEntityInfo | undefined @ViewChild('startTimePicker') startTimePicker?: DateTimePickerComponent; @ViewChild('stopTimePicker') stopTimePicker?: DateTimePickerComponent; - + @Output('onStartTimeSet') startTimeEmitter : EventEmitter = new EventEmitter(); + @Output('onEndTimeSet') endTimeEmitter : EventEmitter = new EventEmitter(); selectedStartTime: Date | undefined selectedStopTime: Date | undefined + currentProgress: string = "30%"; + futureProgress: string = "60%" + + ngOnInit() { + this.calcFutureProgress(); + this.calcCurrentProgress(); + } + setDate(clickedDate: Date) { if(this.selectedStartTime == undefined) { this.startTimePicker!.setDateTime(clickedDate); @@ -28,13 +35,64 @@ export class AdvancedSchedulerComponent { this.stopTimePicker!.setDateTime(clickedDate); this.selectedStopTime = clickedDate; } + + this.calcFutureProgress(); + } + + setStopTime(selectedDate: Date) { + this.selectedStopTime = selectedDate + this.stopTimePicker!.setDateTime(selectedDate); + + this.calcFutureProgress(); + } + setStartTime(selectedDate: Date) { + this.selectedStartTime = selectedDate; + this.startTimePicker!.setDateTime(selectedDate); + + this.calcFutureProgress(); } onStartTimeSet(selectedDate: Date) { this.selectedStartTime = selectedDate; + this.startTimeEmitter.emit(selectedDate) + + this.calcFutureProgress(); } onStopTimeSet(selectedDate: Date) { this.selectedStopTime = selectedDate; + this.endTimeEmitter.emit(selectedDate); + + this.calcFutureProgress(); } + + calcCurrentProgress() { + if(this.task!.eta == 0) { + this.currentProgress = "0%"; + } else { + const fraction = this.task!.workTime / this.task!.eta * 100; + this.currentProgress = fraction + "%"; + } + } + + calcFutureProgress() { + //const currentProgressNumber = parseFloat(this.currentProgress.slice(0, -1)) / 100; + if(this.selectedStartTime != undefined && this.selectedStopTime != undefined) { + const fraction = this.dateDiffInDays(this.selectedStartTime, this.selectedStopTime) / this.task!.eta * 100 + this.futureProgress = fraction + "%"; + } else { + this.futureProgress = "0%"; + } + + + } + + dateDiffInDays(a: Date, b: Date) { + const diffMs = b.getTime() - a.getTime(); + return Math.floor((diffMs / 1000) / 60); + } + + + + } diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.html b/frontend/src/app/schedules/scheduler/scheduler.component.html index dd32174..41b9109 100644 --- a/frontend/src/app/schedules/scheduler/scheduler.component.html +++ b/frontend/src/app/schedules/scheduler/scheduler.component.html @@ -16,9 +16,12 @@ - + diff --git a/frontend/src/app/schedules/scheduler/scheduler.component.ts b/frontend/src/app/schedules/scheduler/scheduler.component.ts index 4e1b256..f68b9f0 100644 --- a/frontend/src/app/schedules/scheduler/scheduler.component.ts +++ b/frontend/src/app/schedules/scheduler/scheduler.component.ts @@ -8,13 +8,14 @@ import { TaskService, TaskShortInfo } from "../../../api"; import {ActivatedRoute, Router} from "@angular/router"; -import {CalendarDateFormatter, CalendarEvent, CalendarView} from "angular-calendar"; +import {CalendarDateFormatter, CalendarEvent, CalendarEventTimesChangedEvent, CalendarView} from "angular-calendar"; import { Subject } from 'rxjs'; import {CalendarDatePipe} from "angular-calendar/modules/common/calendar-date/calendar-date.pipe"; import {BasicSchedulerComponent} from "../basic-scheduler/basic-scheduler.component"; import * as events from "events"; import { EventColor } from 'calendar-utils'; import {AdvancedSchedulerComponent} from "../advanced-scheduler/advanced-scheduler.component"; +import * as moment from "moment"; const colors: Record = { red: { @@ -126,9 +127,35 @@ export class SchedulerComponent implements OnInit{ this.basicScheduler.setDate(clickedDate) } else if(this.advancedScheduler != undefined && this.scheduleStrategy === 3) { this.advancedScheduler.setDate(clickedDate) + const endDate: Date = moment(clickedDate).add(30, 'm').toDate(); + this.advancedScheduler.setDate(endDate); + this.events.push({ + title: this.computeTaskPath(this.taskgroupPath, this.task!), + start: clickedDate, + end: endDate, + color: colors['yellow'], + resizable: { + beforeStart: true, + afterEnd: true + } + }) + this.refresh.next(); } } + eventTimesChanged({ + event, + newStart, + newEnd, + }: CalendarEventTimesChangedEvent): void { + event.start = newStart; + event.end = newEnd; + this.refresh.next(); + + this.advancedScheduler!.setStartTime(event.start); + this.advancedScheduler!.setStopTime(event.end!); + } + onBasicSchedule(scheduleInfo: BasicScheduleEntityInfo) { this.events.push({ start: new Date(scheduleInfo.scheduleDate), @@ -182,4 +209,50 @@ export class SchedulerComponent implements OnInit{ return result; } + findTaskByTaskPathString(taskgroupPathString: string) :TaskShortInfo { + return this.task!; + } + + findEventByTaskPath(taskPath: string) { + return this.events.find(event => event.title == taskPath); + } + + eventTimesExternalChange(selectedDate: Date, start: boolean) { + const event: CalendarEvent| undefined = this.findEventByTaskPath(this.computeTaskPath(this.taskgroupPath, this.task!)); + if(event == undefined) { + if(start) { + this.events.push({ + title: this.computeTaskPath(this.taskgroupPath, this.task!), + start: selectedDate, + color: colors['yellow'], + resizable: { + beforeStart: true, + afterEnd: true + } + }) + } else { + const updatedDate = moment(selectedDate).subtract(30, 'm').toDate(); + this.events.push({ + title: this.computeTaskPath(this.taskgroupPath, this.task!), + start: updatedDate, + color: colors['yellow'], + resizable: { + beforeStart: true, + afterEnd: true + } + }) + this.advancedScheduler!.setStartTime(updatedDate); + } + + } else { + if(start) { + event.start = selectedDate; + } else { + event.end = selectedDate + } + } + + this.refresh.next(); + + } } diff --git a/frontend/src/index.html b/frontend/src/index.html index 90ebf21..018656c 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -10,7 +10,8 @@ - + +