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

16
pdb-js/src/app/components/datepicker/date-picker-test.component.html
View File

@@ -1,5 +1,15 @@
<style>
<style></style>
</style>
<form>
<app-date-picker
[formControl]="datePicker"
(dateValueSelected)="(dateChanged)"
></app-date-picker>
<app-date-picker></app-date-picker>
Type: {{ datePicker.value?.type }}<br />
value: {{ datePicker.value?.value }}<br />
display: {{ datePicker.value?.display }}<br />
</form>
<button (click)="readValue()">read value</button>
<div>{{ output }}</div>

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

@@ -1,12 +1,29 @@
import { Component} from '@angular/core';
import { Component } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { DateValue } from "./date-picker.component";
@Component({
selector: 'app-date-picker-test',
templateUrl: './date-picker-test.component.html'
selector: "app-date-picker-test",
templateUrl: "./date-picker-test.component.html",
})
export class DatePickerTestComponent {
constructor(){
datePicker = new FormControl<DateValue>(
new DateValue(
"ABSOLUTE",
"2019-10-05 12:34:56 - 2019-10-11 23:59:59",
"2019-10-05 12:34:56 - 2019-10-11 23:59:59",
),
);
output = "";
readValue() {
this.output = this.datePicker.value?.type + " " +
this.datePicker.value?.value;
}
dateChanged(e: any) {
console.log("dateChanged", e);
this.output += "dateChanged: " + e;
}
}

7
pdb-js/src/app/components/datepicker/date-picker.component.html
View File

@@ -58,10 +58,10 @@
<mat-tab label="Quick">
<div class="tab-quick">
<div class="tab-quick-column">
<button mat-button (click)="applyQuick('BD/P1D', 'today')">
<button mat-button (click)="applyQuick('BD/E1D', 'today')">
Today
</button>
<button mat-button (click)="applyQuick('B-1D/P1D', 'yesterday')">
<button mat-button (click)="applyQuick('B-1D/E-1D', 'yesterday')">
Yesterday
</button>
<button mat-button (click)="applyQuick('BW/EW', 'this week')">
@@ -70,9 +70,6 @@
<button mat-button (click)="applyQuick('BM/EM', 'this month')">
This Month
</button>
<button mat-button (click)="applyQuick('BQ/EQ', 'this quarter')">
This Quarter
</button>
<button mat-button (click)="applyQuick('BY/EY', 'this year')">
This Year
</button>

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;
}