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

UI: Refactoring timewindow component

Browse Source
This commit is contained in:
Artem Dzhereleiko 2023-02-07 17:45:03 +02:00
parent 82b9e861a3
commit 9d709bb58a
3 changed files with 128 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { Component, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core';
import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';
import {
aggregationTranslations,
AggregationType,
@ -25,14 +25,12 @@ import {
Timewindow,
TimewindowType
} from '@shared/models/time/time.models';
import { OverlayRef } from '@angular/cdk/overlay';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { TimeService } from '@core/services/time.service';
export const TIMEWINDOW_PANEL_DATA = new InjectionToken<any>('TimewindowPanelData');
import { isDefined } from '@core/utils';
export interface TimewindowPanelData {
historyOnly: boolean;
@ -50,6 +48,12 @@ export interface TimewindowPanelData {
})
export class TimewindowPanelComponent extends PageComponent implements OnInit {
@Input()
data: any;
@Input()
onClose: (result: Timewindow | null) => void;
historyOnly = false;
quickIntervalOnly = false;
@ -62,8 +66,6 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
timewindow: Timewindow;
result: Timewindow;
timewindowForm: FormGroup;
historyTypes = HistoryWindowType;
@ -78,22 +80,23 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
aggregationTypesTranslations = aggregationTranslations;
constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
public overlayRef: OverlayRef,
protected store: Store<AppState>,
private result: Timewindow;
constructor(protected store: Store<AppState>,
public fb: FormBuilder,
private timeService: TimeService,
public viewContainerRef: ViewContainerRef) {
super(store);
this.historyOnly = data.historyOnly;
this.quickIntervalOnly = data.quickIntervalOnly;
this.timewindow = data.timewindow;
this.aggregation = data.aggregation;
this.timezone = data.timezone;
this.isEdit = data.isEdit;
}
ngOnInit(): void {
this.historyOnly = this.data.historyOnly;
this.quickIntervalOnly = this.data.quickIntervalOnly;
this.timewindow = this.data.timewindow;
this.aggregation = this.data.aggregation;
this.timezone = this.data.timezone;
this.isEdit = this.data.isEdit;
const hideInterval = this.timewindow.hideInterval || false;
const hideLastInterval = this.timewindow.hideLastInterval || false;
const hideQuickInterval = this.timewindow.hideQuickInterval || false;
@ -101,77 +104,60 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
const hideAggInterval = this.timewindow.hideAggInterval || false;
const hideTimezone = this.timewindow.hideTimezone || false;
const realtime = this.timewindow.realtime;
const history = this.timewindow.history;
const aggregation = this.timewindow.aggregation;
this.timewindowForm = this.fb.group({
realtime: this.fb.group(
{
realtimeType: this.fb.control({
value: this.timewindow.realtime && typeof this.timewindow.realtime.realtimeType !== 'undefined'
? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
realtime: this.fb.group({
realtimeType: [{
value: this.defined(realtime, realtime.realtimeType) ? this.timewindow.realtime.realtimeType : RealtimeWindowType.LAST_INTERVAL,
disabled: hideInterval
}),
timewindowMs: this.fb.control({
value: this.timewindow.realtime && typeof this.timewindow.realtime.timewindowMs !== 'undefined'
? this.timewindow.realtime.timewindowMs : null,
}],
timewindowMs: [{
value: this.defined(realtime, realtime.timewindowMs) ? this.timewindow.realtime.timewindowMs : null,
disabled: hideInterval || hideLastInterval
}),
interval: [
this.timewindow.realtime && typeof this.timewindow.realtime.interval !== 'undefined'
? this.timewindow.realtime.interval : null
],
quickInterval: this.fb.control({
value: this.timewindow.realtime && typeof this.timewindow.realtime.quickInterval !== 'undefined'
? this.timewindow.realtime.quickInterval : null,
}],
interval: [this.defined(realtime, realtime.interval) ? this.timewindow.realtime.interval : null],
quickInterval: [{
value: this.defined(realtime, realtime.quickInterval) ? this.timewindow.realtime.quickInterval : null,
disabled: hideInterval || hideQuickInterval
})
}
),
history: this.fb.group(
{
historyType: this.fb.control({
value: this.timewindow.history && typeof this.timewindow.history.historyType !== 'undefined'
? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL,
disabled: hideInterval
}]
}),
timewindowMs: this.fb.control({
value: this.timewindow.history && typeof this.timewindow.history.timewindowMs !== 'undefined'
? this.timewindow.history.timewindowMs : null,
history: this.fb.group({
historyType: [{
value: this.defined(history, history.historyType) ? this.timewindow.history.historyType : HistoryWindowType.LAST_INTERVAL,
disabled: hideInterval
}),
interval: [
this.timewindow.history && typeof this.timewindow.history.interval !== 'undefined'
? this.timewindow.history.interval : null
}],
timewindowMs: [{
value: this.defined(history, history.timewindowMs) ? this.timewindow.history.timewindowMs : null,
disabled: hideInterval
}],
interval: [ this.defined(history, history.interval) ? this.timewindow.history.interval : null
],
fixedTimewindow: this.fb.control({
value: this.timewindow.history && typeof this.timewindow.history.fixedTimewindow !== 'undefined'
? this.timewindow.history.fixedTimewindow : null,
fixedTimewindow: [{
value: this.defined(history, history.fixedTimewindow) ? this.timewindow.history.fixedTimewindow : null,
disabled: hideInterval
}],
quickInterval: [{
value: this.defined(history, history.quickInterval) ? this.timewindow.history.quickInterval : null,
disabled: hideInterval
}]
}),
quickInterval: this.fb.control({
value: this.timewindow.history && typeof this.timewindow.history.quickInterval !== 'undefined'
? this.timewindow.history.quickInterval : null,
disabled: hideInterval
})
}
),
aggregation: this.fb.group(
{
type: this.fb.control({
value: this.timewindow.aggregation && typeof this.timewindow.aggregation.type !== 'undefined'
? this.timewindow.aggregation.type : null,
aggregation: this.fb.group({
type: [{
value: this.defined(aggregation, aggregation.type) ? this.timewindow.aggregation.type : null,
disabled: hideAggregation
}),
limit: this.fb.control({
value: this.timewindow.aggregation && typeof this.timewindow.aggregation.limit !== 'undefined'
? this.checkLimit(this.timewindow.aggregation.limit) : null,
}],
limit: [{
value: this.defined(aggregation, aggregation.limit) ? this.checkLimit(this.timewindow.aggregation.limit) : null,
disabled: hideAggInterval
}, [])
}
),
timezone: this.fb.control({
value: this.timewindow.timezone !== 'undefined'
? this.timewindow.timezone : null,
}, []]
}),
timezone: [{
value: isDefined(this.timewindow.timezone) ? this.timewindow.timezone : null,
disabled: hideTimezone
})
}]
});
this.updateValidators();
this.timewindowForm.get('aggregation.type').valueChanges.subscribe(() => {
@ -179,6 +165,10 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
});
}
private defined(arg1, arg2) {
return arg1 && isDefined(arg2);
}
private checkLimit(limit?: number): number {
if (!limit || limit < this.minDatapointsLimit()) {
return this.minDatapointsLimit();
@ -224,11 +214,13 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
this.timewindow.timezone = timewindowFormValue.timezone;
}
this.result = this.timewindow;
this.overlayRef.dispose();
this.cancel(this.result);
}
cancel() {
this.overlayRef.dispose();
cancel(result: Timewindow | null = null) {
if (this.onClose) {
this.onClose(result);
}
}
minDatapointsLimit() {

18
ui-ngx/src/app/shared/components/time/timewindow.component.html
View File

@ -15,30 +15,34 @@
limitations under the License.
-->
<button *ngIf="asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin" [disabled]="timewindowDisabled"
<button *ngIf="asButton"
[disabled]="timewindowDisabled"
type="button"
mat-raised-button color="primary" (click)="openEditMode()">
mat-raised-button color="primary"
(click)="toggleTimewindow($event)">
<mat-icon class="material-icons">query_builder</mat-icon>
<span>{{innerValue?.displayValue}}</span>
</button>
<section *ngIf="!asButton" cdkOverlayOrigin #timewindowPanelOrigin="cdkOverlayOrigin"
class="tb-timewindow" fxLayout="row" fxLayoutAlign="start center">
<section *ngIf="!asButton"
class="tb-timewindow"
fxLayout="row"
fxLayoutAlign="start center">
<button *ngIf="direction === 'left'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
type="button"
(click)="openEditMode()"
(click)="toggleTimewindow($event)"
matTooltip="{{ 'timewindow.edit' | translate }}"
[matTooltipPosition]="tooltipPosition">
<mat-icon class="material-icons">query_builder</mat-icon>
</button>
<span [fxHide]="hideLabel()"
(click)="openEditMode()"
(click)="toggleTimewindow($event)"
matTooltip="{{ 'timewindow.edit' | translate }}"
[matTooltipPosition]="tooltipPosition">
{{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue.displayTimezoneAbbr}}</span></span>
</span>
<button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
type="button"
(click)="openEditMode()"
(click)="toggleTimewindow($event)"
matTooltip="{{ 'timewindow.edit' | translate }}"
[matTooltipPosition]="tooltipPosition">
<mat-icon class="material-icons">query_builder</mat-icon>

123
ui-ngx/src/app/shared/components/time/timewindow.component.ts
View File

@ -18,13 +18,10 @@ import {
ChangeDetectorRef,
Component,
forwardRef,
Inject,
Injector,
Input,
OnDestroy,
OnInit,
StaticProvider,
ViewChild,
Renderer2,
ViewContainerRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@ -40,21 +37,15 @@ import {
Timewindow,
TimewindowType
} from '@shared/models/time/time.models';
import { DatePipe, DOCUMENT } from '@angular/common';
import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import {
TIMEWINDOW_PANEL_DATA,
TimewindowPanelComponent,
TimewindowPanelData
} from '@shared/components/time/timewindow-panel.component';
import { ComponentPortal } from '@angular/cdk/portal';
import { DatePipe } from '@angular/common';
import { TimewindowPanelComponent } from '@shared/components/time/timewindow-panel.component';
import { MediaBreakpoints } from '@shared/models/constants';
import { BreakpointObserver } from '@angular/cdk/layout';
import { WINDOW } from '@core/services/window.service';
import { TimeService } from '@core/services/time.service';
import { TooltipPosition } from '@angular/material/tooltip';
import { deepClone, isDefinedAndNotNull } from '@core/utils';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { TbPopoverService } from '@shared/components/popover.service';
// @dynamic
@Component({
@ -174,8 +165,6 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
@Input() disabled: boolean;
@ViewChild('timewindowPanelOrigin') timewindowPanelOrigin: CdkOverlayOrigin;
innerValue: Timewindow;
timewindowDisabled: boolean;
@ -186,12 +175,11 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
private timeService: TimeService,
private millisecondsToTimeStringPipe: MillisecondsToTimeStringPipe,
private datePipe: DatePipe,
private overlay: Overlay,
private cd: ChangeDetectorRef,
private popoverService: TbPopoverService,
private renderer: Renderer2,
public viewContainerRef: ViewContainerRef,
public breakpointObserver: BreakpointObserver,
@Inject(DOCUMENT) private document: Document,
@Inject(WINDOW) private window: Window) {
public breakpointObserver: BreakpointObserver) {
}
ngOnInit(): void {
@ -200,98 +188,39 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
ngOnDestroy(): void {
}
openEditMode() {
if (this.timewindowDisabled) {
return;
toggleTimewindow($event: Event) {
if ($event) {
$event.stopPropagation();
}
const isGtXs = this.breakpointObserver.isMatched(MediaBreakpoints['gt-xs']);
const position = this.overlay.position();
const config = new OverlayConfig({
panelClass: 'tb-timewindow-panel',
backdropClass: 'cdk-overlay-transparent-backdrop',
hasBackdrop: isGtXs,
});
if (isGtXs) {
config.minWidth = '417px';
config.maxHeight = '550px';
const panelHeight = 375;
const panelWidth = 417;
const el = this.timewindowPanelOrigin.elementRef.nativeElement;
const offset = el.getBoundingClientRect();
const scrollTop = this.window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop || 0;
const scrollLeft = this.window.pageXOffset || this.document.documentElement.scrollLeft || this.document.body.scrollLeft || 0;
const bottomY = offset.bottom - scrollTop;
const leftX = offset.left - scrollLeft;
let originX;
let originY;
let overlayX;
let overlayY;
const wHeight = this.document.documentElement.clientHeight;
const wWidth = this.document.documentElement.clientWidth;
if (bottomY + panelHeight > wHeight) {
originY = 'top';
overlayY = 'bottom';
const trigger = ($event.target || $event.srcElement || $event.currentTarget) as Element;
if (this.popoverService.hasPopover(trigger)) {
this.popoverService.hidePopover(trigger);
} else {
originY = 'bottom';
overlayY = 'top';
}
if (leftX + panelWidth > wWidth) {
originX = 'end';
overlayX = 'end';
} else {
originX = 'start';
overlayX = 'start';
}
const connectedPosition: ConnectedPosition = {
originX,
originY,
overlayX,
overlayY
};
config.positionStrategy = position.flexibleConnectedTo(this.timewindowPanelOrigin.elementRef)
.withPositions([connectedPosition]);
} else {
config.minWidth = '100%';
config.minHeight = '100%';
config.positionStrategy = position.global().top('0%').left('0%')
.right('0%').bottom('0%');
}
const overlayRef = this.overlay.create(config);
overlayRef.backdropClick().subscribe(() => {
overlayRef.dispose();
});
const injector = this._createTimewindowPanelInjector(
overlayRef,
const timewindowPopover = this.popoverService.displayPopover(trigger, this.renderer,
this.viewContainerRef, TimewindowPanelComponent, 'leftTop', true, null,
{
data: {
timewindow: deepClone(this.innerValue),
historyOnly: this.historyOnly,
quickIntervalOnly: this.quickIntervalOnly,
aggregation: this.aggregation,
timezone: this.timezone,
isEdit: this.isEdit
}
);
const componentRef = overlayRef.attach(new ComponentPortal(TimewindowPanelComponent, this.viewContainerRef, injector));
componentRef.onDestroy(() => {
if (componentRef.instance.result) {
this.innerValue = componentRef.instance.result;
},
onClose: (result: Timewindow) => {
timewindowPopover.hide();
if (result) {
this.innerValue = result;
this.timewindowDisabled = this.isTimewindowDisabled();
this.updateDisplayValue();
this.notifyChanged();
}
});
}
private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): Injector {
const providers: StaticProvider[] = [
{provide: TIMEWINDOW_PANEL_DATA, useValue: data},
{provide: OverlayRef, useValue: overlayRef}
];
return Injector.create({parent: this.viewContainerRef.injector, providers});
},
{maxHeight: '100vh', height: '100%', padding: '10px'},
{minWidth: '100%', maxWidth: '100%'}, {}, false);
timewindowPopover.tbComponentRef.instance.popoverComponent = timewindowPopover;
}
}
private onHistoryOnlyChanged(): boolean {