313 lines
10 KiB
TypeScript
313 lines
10 KiB
TypeScript
///
|
|
/// Copyright © 2016-2019 The Thingsboard Authors
|
|
///
|
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|
/// you may not use this file except in compliance with the License.
|
|
/// You may obtain a copy of the License at
|
|
///
|
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
|
///
|
|
/// Unless required by applicable law or agreed to in writing, software
|
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
/// See the License for the specific language governing permissions and
|
|
/// limitations under the License.
|
|
///
|
|
|
|
import { Component, OnInit, Input, ViewChild, AfterViewInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
|
|
import { Store } from '@ngrx/store';
|
|
import { AppState } from '@core/core.state';
|
|
import { PageComponent } from '@shared/components/page.component';
|
|
import { AuthUser } from '@shared/models/user.model';
|
|
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
|
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
import { Timewindow } from '@shared/models/time/time.models';
|
|
import { TimeService } from '@core/services/time.service';
|
|
import { GridsterComponent, GridsterConfig, GridsterItemComponent } from 'angular-gridster2';
|
|
import { GridsterResizable } from 'angular-gridster2/lib/gridsterResizable.service';
|
|
import { IDashboardComponent, DashboardConfig, DashboardWidget } from '../../models/dashboard-component.models';
|
|
import { MatSort } from '@angular/material/sort';
|
|
import { Observable, ReplaySubject, merge } from 'rxjs';
|
|
import { map, share, tap } from 'rxjs/operators';
|
|
import { WidgetLayout } from '@shared/models/dashboard.models';
|
|
import { DialogService } from '@core/services/dialog.service';
|
|
import { Widget } from '@app/shared/models/widget.models';
|
|
import { MatTab } from '@angular/material/tabs';
|
|
import { animatedScroll, isDefined } from '@app/core/utils';
|
|
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
|
|
import { MediaBreakpoints } from '@shared/models/constants';
|
|
|
|
@Component({
|
|
selector: 'tb-dashboard',
|
|
templateUrl: './dashboard.component.html',
|
|
styleUrls: ['./dashboard.component.scss']
|
|
})
|
|
export class DashboardComponent extends PageComponent implements IDashboardComponent, OnInit, AfterViewInit {
|
|
|
|
authUser: AuthUser;
|
|
|
|
@Input()
|
|
options: DashboardConfig;
|
|
|
|
gridsterOpts: GridsterConfig;
|
|
|
|
dashboardLoading = true;
|
|
|
|
highlightedMode = false;
|
|
highlightedWidget: DashboardWidget = null;
|
|
selectedWidget: DashboardWidget = null;
|
|
|
|
isWidgetExpanded = false;
|
|
isMobileSize = false;
|
|
|
|
@ViewChild('gridster', {static: true}) gridster: GridsterComponent;
|
|
|
|
@ViewChildren(GridsterItemComponent) gridsterItems: QueryList<GridsterItemComponent>;
|
|
|
|
widgets$: Observable<Array<DashboardWidget>>;
|
|
|
|
widgets: Array<DashboardWidget>;
|
|
|
|
constructor(protected store: Store<AppState>,
|
|
private timeService: TimeService,
|
|
private dialogService: DialogService,
|
|
private breakpointObserver: BreakpointObserver) {
|
|
super(store);
|
|
this.authUser = getCurrentAuthUser(store);
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
if (!this.options.dashboardTimewindow) {
|
|
this.options.dashboardTimewindow = this.timeService.defaultTimewindow();
|
|
}
|
|
this.gridsterOpts = {
|
|
gridType: 'scrollVertical',
|
|
keepFixedHeightInMobile: true,
|
|
pushItems: false,
|
|
swap: false,
|
|
maxRows: 100,
|
|
minCols: this.options.columns ? this.options.columns : 24,
|
|
outerMargin: true,
|
|
outerMarginLeft: this.options.margins ? this.options.margins[0] : 10,
|
|
outerMarginRight: this.options.margins ? this.options.margins[0] : 10,
|
|
outerMarginTop: this.options.margins ? this.options.margins[1] : 10,
|
|
outerMarginBottom: this.options.margins ? this.options.margins[1] : 10,
|
|
minItemCols: 1,
|
|
minItemRows: 1,
|
|
defaultItemCols: 8,
|
|
defaultItemRows: 6,
|
|
resizable: {enabled: this.options.isEdit},
|
|
draggable: {enabled: this.options.isEdit}
|
|
};
|
|
|
|
this.updateGridsterOpts();
|
|
|
|
this.loadDashboard();
|
|
|
|
merge(this.breakpointObserver
|
|
.observe(MediaBreakpoints['gt-sm']), this.options.layoutChange$).subscribe(
|
|
() => {
|
|
this.updateGridsterOpts();
|
|
this.sortWidgets(this.widgets);
|
|
}
|
|
);
|
|
}
|
|
|
|
loadDashboard() {
|
|
this.widgets$ = this.options.widgetsData.pipe(
|
|
map(widgetsData => {
|
|
const dashboardWidgets = new Array<DashboardWidget>();
|
|
let maxRows = this.gridsterOpts.maxRows;
|
|
widgetsData.widgets.forEach(
|
|
(widget) => {
|
|
let widgetLayout: WidgetLayout;
|
|
if (widgetsData.widgetLayouts && widget.id) {
|
|
widgetLayout = widgetsData.widgetLayouts[widget.id];
|
|
}
|
|
const dashboardWidget = new DashboardWidget(this, widget, widgetLayout);
|
|
const bottom = dashboardWidget.y + dashboardWidget.rows;
|
|
maxRows = Math.max(maxRows, bottom);
|
|
dashboardWidgets.push(dashboardWidget);
|
|
}
|
|
);
|
|
this.sortWidgets(dashboardWidgets);
|
|
this.gridsterOpts.maxRows = maxRows;
|
|
return dashboardWidgets;
|
|
}),
|
|
tap((widgets) => {
|
|
this.widgets = widgets;
|
|
this.dashboardLoading = false;
|
|
})
|
|
);
|
|
}
|
|
|
|
reload() {
|
|
this.loadDashboard();
|
|
}
|
|
|
|
sortWidgets(widgets?: Array<DashboardWidget>) {
|
|
if (widgets) {
|
|
widgets.sort((widget1, widget2) => {
|
|
const row1 = widget1.widgetOrder;
|
|
const row2 = widget2.widgetOrder;
|
|
let res = row1 - row2;
|
|
if (res === 0) {
|
|
res = widget1.x - widget2.x;
|
|
}
|
|
return res;
|
|
});
|
|
}
|
|
}
|
|
|
|
ngAfterViewInit(): void {
|
|
}
|
|
|
|
isAutofillHeight(): boolean {
|
|
if (this.isMobileSize) {
|
|
return isDefined(this.options.mobileAutofillHeight) ? this.options.mobileAutofillHeight : false;
|
|
} else {
|
|
return isDefined(this.options.autofillHeight) ? this.options.autofillHeight : false;
|
|
}
|
|
}
|
|
|
|
loading(): Observable<boolean> {
|
|
return this.isLoading$.pipe(
|
|
map(loading => (!this.options.ignoreLoading && loading) || this.dashboardLoading),
|
|
share()
|
|
);
|
|
}
|
|
|
|
openDashboardContextMenu($event: Event) {
|
|
// TODO:
|
|
// this.dialogService.todo();
|
|
}
|
|
|
|
openWidgetContextMenu($event: Event, widget: DashboardWidget) {
|
|
// TODO:
|
|
// this.dialogService.todo();
|
|
}
|
|
|
|
onWidgetFullscreenChanged(expanded: boolean, widget: DashboardWidget) {
|
|
this.isWidgetExpanded = expanded;
|
|
}
|
|
|
|
widgetMouseDown($event: Event, widget: DashboardWidget) {
|
|
if (this.options.onWidgetMouseDown) {
|
|
this.options.onWidgetMouseDown($event, widget.widget);
|
|
}
|
|
}
|
|
|
|
widgetClicked($event: Event, widget: DashboardWidget) {
|
|
if (this.options.onWidgetClicked) {
|
|
this.options.onWidgetClicked($event, widget.widget);
|
|
}
|
|
}
|
|
|
|
editWidget($event: Event, widget: DashboardWidget) {
|
|
if ($event) {
|
|
$event.stopPropagation();
|
|
}
|
|
if (this.options.isEditActionEnabled && this.options.onEditWidget) {
|
|
this.options.onEditWidget($event, widget.widget);
|
|
}
|
|
}
|
|
|
|
exportWidget($event: Event, widget: DashboardWidget) {
|
|
if ($event) {
|
|
$event.stopPropagation();
|
|
}
|
|
if (this.options.isExportActionEnabled && this.options.onExportWidget) {
|
|
this.options.onExportWidget($event, widget.widget);
|
|
}
|
|
}
|
|
|
|
removeWidget($event: Event, widget: DashboardWidget) {
|
|
if ($event) {
|
|
$event.stopPropagation();
|
|
}
|
|
if (this.options.isRemoveActionEnabled && this.options.onRemoveWidget) {
|
|
this.options.onRemoveWidget($event, widget.widget);
|
|
}
|
|
}
|
|
|
|
highlightWidget(widget: DashboardWidget, delay?: number) {
|
|
if (!this.highlightedMode || this.highlightedWidget !== widget) {
|
|
this.highlightedMode = true;
|
|
this.highlightedWidget = widget;
|
|
this.scrollToWidget(widget, delay);
|
|
}
|
|
}
|
|
|
|
selectWidget(widget: DashboardWidget, delay?: number) {
|
|
if (this.selectedWidget !== widget) {
|
|
this.selectedWidget = widget;
|
|
this.scrollToWidget(widget, delay);
|
|
}
|
|
}
|
|
|
|
resetHighlight() {
|
|
this.highlightedMode = false;
|
|
this.highlightedWidget = null;
|
|
this.selectedWidget = null;
|
|
}
|
|
|
|
isHighlighted(widget: DashboardWidget) {
|
|
return (this.highlightedMode && this.highlightedWidget === widget) || (this.selectedWidget === widget);
|
|
}
|
|
|
|
isNotHighlighted(widget: DashboardWidget) {
|
|
return this.highlightedMode && this.highlightedWidget !== widget;
|
|
}
|
|
|
|
scrollToWidget(widget: DashboardWidget, delay?: number) {
|
|
if (this.gridsterItems) {
|
|
const gridsterItem = this.gridsterItems.find((item => item.item === widget));
|
|
const offset = (this.gridster.curHeight - gridsterItem.height) / 2;
|
|
let scrollTop = gridsterItem.top;
|
|
if (offset > 0) {
|
|
scrollTop -= offset;
|
|
}
|
|
const parentElement = this.gridster.el as HTMLElement;
|
|
animatedScroll(parentElement, scrollTop, delay);
|
|
}
|
|
}
|
|
|
|
private updateGridsterOpts() {
|
|
this.isMobileSize = this.checkIsMobileSize();
|
|
const mobileBreakPoint = this.isMobileSize ? 20000 : 0;
|
|
this.gridsterOpts.mobileBreakpoint = mobileBreakPoint;
|
|
const rowSize = this.detectRowSize(this.isMobileSize);
|
|
if (this.gridsterOpts.fixedRowHeight !== rowSize) {
|
|
this.gridsterOpts.fixedRowHeight = rowSize;
|
|
}
|
|
if (this.isAutofillHeight()) {
|
|
this.gridsterOpts.gridType = 'fit';
|
|
} else {
|
|
this.gridsterOpts.gridType = this.isMobileSize ? 'fixed' : 'scrollVertical';
|
|
}
|
|
if (this.gridster && this.gridster.options) {
|
|
this.gridster.optionsChanged();
|
|
}
|
|
}
|
|
|
|
private detectRowSize(isMobile: boolean): number | null {
|
|
let rowHeight = null;
|
|
if (!this.isAutofillHeight()) {
|
|
if (isMobile) {
|
|
rowHeight = isDefined(this.options.mobileRowHeight) ? this.options.mobileRowHeight : 70;
|
|
}
|
|
}
|
|
return rowHeight;
|
|
}
|
|
|
|
private checkIsMobileSize(): boolean {
|
|
const isMobileDisabled = this.options.isMobileDisabled === true;
|
|
let isMobileSize = this.options.isMobile === true && !isMobileDisabled;
|
|
if (!isMobileSize && !isMobileDisabled) {
|
|
isMobileSize = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']);
|
|
}
|
|
return isMobileSize;
|
|
}
|
|
|
|
}
|