andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

use date picker in visualization page

Browse Source
This commit is contained in:
Andreas Huber
2024-05-05 10:22:45 +02:00
parent a99a884423
commit 21a84b5223
13 changed files with 856 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
pdb-js/src/app/components/datepicker/date-picker.component.ts
View File

@@ -12,7 +12,7 @@ import {
Validators,
} from "@angular/forms";
export type DateType = "quick" | "relative" | "absolute";
export type DateType = "QUICK" | "RELATIVE" | "ABSOLUTE";
export class DateValue {
constructor(
@@ -63,7 +63,7 @@ export class DatePickerComponent implements ControlValueAccessor {
);
datePickerControl = new FormControl(
new DateValue("quick", "BE/EM", "this month"),
new DateValue("QUICK", "BM/EM", "this month"),
);
@Input()
@@ -82,15 +82,19 @@ export class DatePickerComponent implements ControlValueAccessor {
constructor() {}
getDateValue(): DateValue {
return this.datePickerControl.value!;
}
writeValue(obj: DateValue): void {
this.datePickerControl.setValue(obj);
switch (obj.type) {
case "quick":
case "QUICK":
break;
case "absolute":
case "ABSOLUTE":
this.dateRange.setValue(obj.value);
break;
case "relative":
case "RELATIVE":
const x = this.relativeTimeRange;
// obj.value looks like "P1Y2M3DT4H5M6S" or "PT4H5M6S" or "P1Y2M3D" or "P1YT6S" or ...
const matches = obj.value.match(
@@ -125,7 +129,7 @@ export class DatePickerComponent implements ControlValueAccessor {
//(<any> window).initSimpleDatePicker(); // breaks form control
}
_setDateValue(dateValue: DateValue) {
setDateValue(dateValue: DateValue) {
this.datePickerControl.setValue(dateValue);
this._onChange(dateValue);
this.dateValueSelected.emit(new DatePickerChange(dateValue));
@@ -133,8 +137,8 @@ export class DatePickerComponent implements ControlValueAccessor {
}
applyQuick(value: string, display: string) {
const newValue = new DateValue("quick", value, display);
this._setDateValue(newValue);
const newValue = new DateValue("QUICK", value, display);
this.setDateValue(newValue);
this.isOpen = false;
}
@@ -143,26 +147,25 @@ export class DatePickerComponent implements ControlValueAccessor {
}
applyRelativeTimeRange() {
const x = this.relativeTimeRange;
const years = x.years ? x.years + "Y" : "";
const months = x.months ? x.months + "M" : "";
const days = x.days ? x.days + "D" : "";
const time = x.hours || x.minutes || x.seconds ? "T" : "";
const hours = x.hours ? x.hours + "H" : "";
const minutes = x.minutes ? x.minutes + "M" : "";
const seconds = x.seconds ? x.seconds + "S" : "";
const isoTimeRange =
`P${years}${months}${days}${time}${hours}${minutes}${seconds}`;
const newValue = new DateValue("relative", isoTimeRange, isoTimeRange);
this._setDateValue(newValue);
const x = this.relativeTimeRange;
const years = x.years ? "-"+x.years + "Y" : "";
const months = x.months ? "-"+x.months + "M" : "";
const days = x.days ? "-"+x.days + "D" : "";
const hours = x.hours ? "-"+x.hours + "H" : "";
const minutes = x.minutes ? "-"+x.minutes + "m" : "";
const timeRange = `B${years}${months}${days}${hours}${minutes}/Bm`;
const newValue = new DateValue("RELATIVE", timeRange, timeRange);
this.setDateValue(newValue);
this.isOpen = false;
}
applyAbsoluteTime() {
const value = <string> this.dateRange.value;
const newValue = new DateValue("absolute", value, value);
this._setDateValue(newValue);
const newValue = new DateValue("ABSOLUTE", value, value);
this.setDateValue(newValue);
this.isOpen = false;
}