tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #12630 from ChantsovaEkaterina/improvement/datetime-period-validation 

Timewindow date-time period - improve behavior on changing start/end time
pull/12666/head
Andrew Shvayka 1 year ago
committed by GitHub
parent
40e576ee94 fc4edc0209
commit
1ca7e1de3e
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
2 changed files with 90 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      ui-ngx/src/app/shared/components/time/datetime-period.component.html
  2. 136
      ui-ngx/src/app/shared/components/time/datetime-period.component.ts

6
ui-ngx/src/app/shared/components/time/datetime-period.component.html
View File

@ -15,17 +15,17 @@
limitations under the License.
-->
<section class="tb-form-row column-xs no-border no-padding tb-standard-fields">
<section class="tb-form-row column-xs no-border no-padding tb-standard-fields" [formGroup]="dateTimePeriodFormGroup">
<mat-form-field class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>datetime.from</mat-label>
<mat-datetimepicker-toggle [for]="startDatePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #startDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input matInput [disabled]="disabled" [(ngModel)]="startDate" [matDatetimepicker]="startDatePicker" (ngModelChange)="onStartDateChange()">
<input matInput formControlName="startDate" [matDatetimepicker]="startDatePicker" [max]="maxStartDate">
</mat-form-field>
<mat-form-field class="flex" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>datetime.to</mat-label>
<mat-datetimepicker-toggle [for]="endDatePicker" matSuffix></mat-datetimepicker-toggle>
<mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input matInput [disabled]="disabled" [(ngModel)]="endDate" [matDatetimepicker]="endDatePicker" (ngModelChange)="onEndDateChange()">
<input matInput formControlName="endDate" [matDatetimepicker]="endDatePicker" [max]="maxEndDate">
</mat-form-field>
</section>

136
ui-ngx/src/app/shared/components/time/datetime-period.component.ts
View File

@ -14,10 +14,17 @@
/// limitations under the License.
///
import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { FixedWindow } from '@shared/models/time/time.models';
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DAY, FixedWindow, MINUTE } from '@shared/models/time/time.models';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { distinctUntilChanged } from 'rxjs/operators';
interface DateTimePeriod {
startDate: Date;
endDate: Date;
}
@Component({
selector: 'tb-datetime-period',
@ -31,7 +38,7 @@ import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-
}
]
})
export class DatetimePeriodComponent implements OnInit, ControlValueAccessor {
export class DatetimePeriodComponent implements ControlValueAccessor {
@Input() disabled: boolean;
@ -41,25 +48,45 @@ export class DatetimePeriodComponent implements OnInit, ControlValueAccessor {
@Input()
appearance: MatFormFieldAppearance = 'fill';
modelValue: FixedWindow;
startDate: Date;
endDate: Date;
endTime: any;
private modelValue: FixedWindow;
maxStartDate: Date;
minEndDate: Date;
maxEndDate: Date;
changePending = false;
private maxStartDateTs: number;
private minEndDateTs: number;
private maxStartTs: number;
private maxEndTs: number;
private propagateChange = null;
private timeShiftMs = MINUTE;
constructor() {
}
dateTimePeriodFormGroup = this.fb.group({
startDate: this.fb.control<Date>(null),
endDate: this.fb.control<Date>(null)
});
private changePending = false;
ngOnInit(): void {
private propagateChange = null;
constructor(private fb: FormBuilder) {
this.dateTimePeriodFormGroup.valueChanges.pipe(
distinctUntilChanged((prevDateTimePeriod, dateTimePeriod) =>
prevDateTimePeriod.startDate === dateTimePeriod.startDate && prevDateTimePeriod.endDate === dateTimePeriod.endDate),
takeUntilDestroyed()
).subscribe((dateTimePeriod: DateTimePeriod) => {
this.updateMinMaxDates(dateTimePeriod);
this.updateView();
});
this.dateTimePeriodFormGroup.get('startDate').valueChanges.pipe(
distinctUntilChanged(),
takeUntilDestroyed()
).subscribe(startDate => this.onStartDateChange(startDate));
this.dateTimePeriodFormGroup.get('endDate').valueChanges.pipe(
distinctUntilChanged(),
takeUntilDestroyed()
).subscribe(endDate => this.onEndDateChange(endDate));
}
registerOnChange(fn: any): void {
@ -75,35 +102,38 @@ export class DatetimePeriodComponent implements OnInit, ControlValueAccessor {
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
if (this.disabled) {
this.dateTimePeriodFormGroup.disable({emitEvent: false});
} else {
this.dateTimePeriodFormGroup.enable({emitEvent: false});
}
}
writeValue(datePeriod: FixedWindow): void {
this.modelValue = datePeriod;
if (this.modelValue) {
this.startDate = new Date(this.modelValue.startTimeMs);
this.endDate = new Date(this.modelValue.endTimeMs);
this.dateTimePeriodFormGroup.patchValue({
startDate: new Date(this.modelValue.startTimeMs),
endDate: new Date(this.modelValue.endTimeMs)
}, {emitEvent: false});
} else {
const date = new Date();
this.startDate = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() - 1,
date.getHours(),
date.getMinutes(),
date.getSeconds(),
date.getMilliseconds());
this.endDate = date;
this.dateTimePeriodFormGroup.patchValue({
startDate: new Date(date.getTime() - DAY),
endDate: date
}, {emitEvent: false});
this.updateView();
}
this.updateMinMaxDates();
this.updateMinMaxDates(this.dateTimePeriodFormGroup.value);
}
updateView() {
private updateView() {
let value: FixedWindow = null;
if (this.startDate && this.endDate) {
const dateTimePeriod = this.dateTimePeriodFormGroup.value;
if (dateTimePeriod.startDate && dateTimePeriod.endDate) {
value = {
startTimeMs: this.startDate.getTime(),
endTimeMs: this.endDate.getTime()
startTimeMs: dateTimePeriod.startDate.getTime(),
endTimeMs: dateTimePeriod.endDate.getTime()
};
}
this.modelValue = value;
@ -114,32 +144,40 @@ export class DatetimePeriodComponent implements OnInit, ControlValueAccessor {
}
}
updateMinMaxDates() {
this.maxStartDate = new Date(this.endDate.getTime() - 1000);
this.minEndDate = new Date(this.startDate.getTime() + 1000);
private updateMinMaxDates(dateTimePeriod: Partial<DateTimePeriod>) {
this.maxEndDate = new Date();
this.maxEndTs = this.maxEndDate.getTime();
this.maxStartTs = this.maxEndTs - this.timeShiftMs;
this.maxStartDate = new Date(this.maxStartTs);
if (dateTimePeriod.endDate) {
this.maxStartDateTs = dateTimePeriod.endDate.getTime() - this.timeShiftMs;
}
if (dateTimePeriod.startDate) {
this.minEndDateTs = dateTimePeriod.startDate.getTime() + this.timeShiftMs;
}
}
onStartDateChange() {
if (this.startDate) {
if (this.startDate.getTime() > this.maxStartDate.getTime()) {
this.startDate = new Date(this.maxStartDate.getTime());
private onStartDateChange(startDate: Date) {
if (startDate) {
if (startDate.getTime() > this.maxStartTs) {
this.dateTimePeriodFormGroup.get('startDate').patchValue(new Date(this.maxStartTs), { emitEvent: false });
}
if (startDate.getTime() > this.maxStartDateTs) {
this.dateTimePeriodFormGroup.get('endDate').patchValue(new Date(startDate.getTime() + this.timeShiftMs), { emitEvent: false });
}
this.updateMinMaxDates();
}
this.updateView();
}
onEndDateChange() {
if (this.endDate) {
if (this.endDate.getTime() < this.minEndDate.getTime()) {
this.endDate = new Date(this.minEndDate.getTime());
} else if (this.endDate.getTime() > this.maxEndDate.getTime()) {
this.endDate = new Date(this.maxEndDate.getTime());
private onEndDateChange(endDate: Date) {
if (endDate) {
if (endDate.getTime() > this.maxEndTs) {
this.dateTimePeriodFormGroup.get('endDate').patchValue(new Date(this.maxEndTs), { emitEvent: false });
}
if (endDate.getTime() < this.minEndDateTs) {
this.dateTimePeriodFormGroup.get('startDate').patchValue(new Date(endDate.getTime() - this.timeShiftMs), { emitEvent: false });
}
this.updateMinMaxDates();
}
this.updateView();
}
}

Write Preview
Loading…
Cancel
Save