dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: start introducing custom interval option instead of advanced option

Browse Source
This commit is contained in:
Chantsova Ekaterina 2024-08-02 18:31:07 +03:00
parent a9b350ff76
commit d464b317a4
4 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ui-ngx/src/app/shared/components/time/timeinterval.component.html
View File

@ -20,8 +20,18 @@
<label class="tb-small hide-label" translate>timewindow.hide</label>
<mat-checkbox [(ngModel)]="hideFlag" (ngModelChange)="onHideFlagChange()"></mat-checkbox>
</section>
<section class="interval-section" fxLayout="column" fxFlex [fxShow]="advanced && (isEdit || !hideFlag)">
<section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px">
<section class="interval-section" fxLayout="column" fxFlex fxLayoutGap="16px">
<section fxLayout="row" fxFlex [fxShow]="isEdit || !hideFlag">
<mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
<mat-select [disabled]="hideFlag || disabled" [(ngModel)]="interval" (ngModelChange)="onIntervalChange()" style="min-width: 150px;">
<mat-option *ngFor="let interval of intervals" [value]="interval.value">
{{ interval.name | translate:interval.translateParams }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
<section fxLayout="row wrap" fxLayoutAlign="start start" fxFlex fxLayoutGap="6px" [fxShow]="advanced && (isEdit || !hideFlag)">
<mat-form-field class="number-input" [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label translate>timeinterval.days</mat-label>
<input matInput [disabled]="hideFlag || disabled" type="number" step="1" min="0" [(ngModel)]="days" (ngModelChange)="onTimeInputChange('days')"/>
@ -40,16 +50,6 @@
</mat-form-field>
</section>
</section>
<section fxLayout="row" fxFlex [fxShow]="!advanced && (isEdit || !hideFlag)">
<mat-form-field fxFlex [subscriptSizing]="subscriptSizing" [appearance]="appearance">
<mat-label *ngIf="predefinedName" translate>{{ predefinedName }}</mat-label>
<mat-select [disabled]="hideFlag || disabled" [(ngModel)]="interval" (ngModelChange)="onIntervalChange()" style="min-width: 150px;">
<mat-option *ngFor="let interval of intervals" [value]="interval.value">
{{ interval.name | translate:interval.translateParams }}
</mat-option>
</mat-select>
</mat-form-field>
</section>
<section fxLayout="column" fxLayoutAlign="center center" [fxShow]="(isEdit || !hideFlag) && !disabledAdvanced">
<label class="tb-small advanced-label" translate>timeinterval.advanced</label>
<mat-slide-toggle [disabled]="hideFlag || disabled" class="advanced-switch" [(ngModel)]="advanced" (ngModelChange)="onAdvancedChange()"></mat-slide-toggle>

21
ui-ngx/src/app/shared/components/time/timeinterval.component.ts
View File

@ -22,6 +22,7 @@ import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-
import { coerceBoolean } from '@shared/decorators/coercion';
import { Interval, IntervalMath, TimeInterval } from '@shared/models/time/time.models';
import { isDefined } from '@core/utils';
import { IntervalType } from '@shared/models/telemetry/telemetry.models';
@Component({
selector: 'tb-timeinterval',
@ -98,6 +99,12 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
advanced = false;
customTimeInterval: TimeInterval = {
name: 'timeinterval.custom',
translateParams: {},
value: IntervalType.CUSTOM
};
private modelValue: Interval;
private rendered = false;
private propagateChangeValue: any;
@ -134,8 +141,14 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
const min = this.timeService.boundMinInterval(this.minValue);
const max = this.timeService.boundMaxInterval(this.maxValue);
if (IntervalMath.numberValue(this.modelValue) >= min && IntervalMath.numberValue(this.modelValue) <= max) {
this.advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue, this.useCalendarIntervals);
this.setInterval(this.modelValue);
const advanced = !this.timeService.matchesExistingInterval(this.minValue, this.maxValue, this.modelValue,
this.useCalendarIntervals);
if (advanced && this.disabledAdvanced) {
this.boundInterval();
} else {
this.advanced = advanced;
this.setInterval(this.modelValue);
}
} else {
this.boundInterval();
}
@ -143,9 +156,9 @@ export class TimeintervalComponent implements OnInit, ControlValueAccessor {
}
private setInterval(interval: Interval) {
if (!this.advanced) {
// if (!this.advanced) {
this.interval = interval;
}
// }
const intervalSeconds = Math.floor(IntervalMath.numberValue(interval) / 1000);
this.days = Math.floor(intervalSeconds / 86400);
this.hours = Math.floor((intervalSeconds % 86400) / 3600);

3
ui-ngx/src/app/shared/models/telemetry/telemetry.models.ts
View File

@ -186,7 +186,8 @@ export enum IntervalType {
WEEK = 'WEEK',
WEEK_ISO = 'WEEK_ISO',
MONTH = 'MONTH',
QUARTER = 'QUARTER'
QUARTER = 'QUARTER',
CUSTOM = 'CUSTOM'
}
export class TimeseriesSubscriptionCmd extends SubscriptionCmd {

1
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -4609,6 +4609,7 @@
"minutes": "Minutes",
"seconds": "Seconds",
"advanced": "Advanced",
"custom": "Custom",
"predefined": {
"yesterday": "Yesterday",
"day-before-yesterday": "Day before yesterday",