diff --git a/ui-ngx/package-lock.json b/ui-ngx/package-lock.json index 19e65a601c..7a5069a590 100644 --- a/ui-ngx/package-lock.json +++ b/ui-ngx/package-lock.json @@ -1349,6 +1349,20 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.3.tgz", "integrity": "sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==" }, + "@flowjs/flow.js": { + "version": "2.13.2", + "resolved": "https://registry.npmjs.org/@flowjs/flow.js/-/flow.js-2.13.2.tgz", + "integrity": "sha512-N2uoQ+F8E/l3JiSoU/hIwUPEjCPDUvWeCJei0S5vA3guqSY8JtgIZacuhNC6B6TYY5cGWGR/qCOSR6v6S/K0aA==" + }, + "@flowjs/ngx-flow": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@flowjs/ngx-flow/-/ngx-flow-0.4.3.tgz", + "integrity": "sha512-6k+jLebR1RAoSGt4NHtlVPaGdmGeVocQdgsRAov2OEXcKrAH48yd0FcZI2mNMqLd2zeFyeURKbklqpoCv4gIwg==", + "requires": { + "@types/flowjs": "2.13.1", + "tslib": "^1.9.0" + } + }, "@mat-datetimepicker/core": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@mat-datetimepicker/core/-/core-2.0.1.tgz", @@ -1572,6 +1586,11 @@ "@types/jquery": "*" } }, + "@types/flowjs": { + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/@types/flowjs/-/flowjs-2.13.1.tgz", + "integrity": "sha512-cPuORQrWmJV7pmiSt1ApDOsQSooVka53Ugr3LB0MW/bsG/fDtOXSxsT5Aiej98VD3eCIZNyABfk3NBWU7CorsQ==" + }, "@types/glob": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", diff --git a/ui-ngx/package.json b/ui-ngx/package.json index ce64c8037e..57760a98e3 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -25,6 +25,8 @@ "@angular/router": "~8.2.11", "@auth0/angular-jwt": "^3.0.0", "@date-io/date-fns": "^1.3.11", + "@flowjs/flow.js": "^2.13.2", + "@flowjs/ngx-flow": "^0.4.3", "@mat-datetimepicker/core": "^2.0.1", "@material-ui/core": "^4.5.1", "@material-ui/icons": "^4.5.1", diff --git a/ui-ngx/src/app/core/core.module.ts b/ui-ngx/src/app/core/core.module.ts index 343592ac64..6e202cbef0 100644 --- a/ui-ngx/src/app/core/core.module.ts +++ b/ui-ngx/src/app/core/core.module.ts @@ -38,7 +38,7 @@ import { FlexLayoutModule } from '@angular/flex-layout'; import { TranslateDefaultCompiler } from '@core/translate/translate-default-compiler'; import { AlertDialogComponent } from '@core/services/dialog/alert-dialog.component'; import { WINDOW_PROVIDERS } from '@core/services/window.service'; -import {TodoDialogComponent} from "@core/services/dialog/todo-dialog.component"; +import {TodoDialogComponent} from '@core/services/dialog/todo-dialog.component'; import { HotkeyModule } from 'angular2-hotkeys'; export function HttpLoaderFactory(http: HttpClient) { diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts index 9ae6eac9f5..d965912a12 100644 --- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts +++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts @@ -24,7 +24,7 @@ import { DashboardState, DashboardConfiguration, DashboardLayoutInfo, - DashboardLayoutsInfo + DashboardLayoutsInfo, DashboardLayoutId, WidgetLayout, GridSettings } from '@shared/models/dashboard.models'; import { isUndefined, isDefined, isString } from '@core/utils'; import { DatasourceType, Widget, Datasource } from '@app/shared/models/widget.models'; @@ -91,6 +91,7 @@ export class DashboardUtilsService { } else if (state.root) { rootFound = true; } + this.validateAndUpdateState(state); } if (!rootFound) { const firstStateId = Object.keys(states)[0]; @@ -216,13 +217,17 @@ export class DashboardUtilsService { public createDefaultLayoutData(): DashboardLayout { return { widgets: {}, - gridSettings: { - backgroundColor: '#eeeeee', - color: 'rgba(0,0,0,0.870588)', - columns: 24, - margins: [10, 10], - backgroundSizeMode: '100%' - } + gridSettings: this.createDefaultGridSettings() + }; + } + + private createDefaultGridSettings(): GridSettings { + return { + backgroundColor: '#eeeeee', + color: 'rgba(0,0,0,0.870588)', + columns: 24, + margin: 10, + backgroundSizeMode: '100%' }; } @@ -240,6 +245,65 @@ export class DashboardUtilsService { }; } + private validateAndUpdateState(state: DashboardState) { + if (!state.layouts) { + state.layouts = this.createDefaultLayouts(); + } + for (const l of Object.keys(state.layouts)) { + const layout = state.layouts[l as DashboardLayoutId]; + this.validateAndUpdateLayout(layout); + } + } + + private validateAndUpdateLayout(layout: DashboardLayout) { + if (!layout.gridSettings) { + layout.gridSettings = this.createDefaultGridSettings(); + } + if (layout.gridSettings.margins && layout.gridSettings.margins.length === 2) { + layout.gridSettings.margin = layout.gridSettings.margins[0]; + delete layout.gridSettings.margins; + } + layout.gridSettings.margin = layout.gridSettings.margin || 10; + } + + public setLayouts(dashboard: Dashboard, targetState: string, newLayouts: DashboardStateLayouts) { + const dashboardConfiguration = dashboard.configuration; + const states = dashboardConfiguration.states; + const state = states[targetState]; + let addedCount = 0; + let removedCount = 0; + for (const l of Object.keys(state.layouts)) { + if (!newLayouts[l]) { + removedCount++; + } + } + for (const l of Object.keys(newLayouts)) { + if (!state.layouts[l]) { + addedCount++; + } + } + state.layouts = newLayouts; + const layoutsCount = Object.keys(state.layouts).length; + let newColumns; + if (addedCount) { + for (const l of Object.keys(state.layouts)) { + newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount; + if (newColumns > 0) { + state.layouts[l].gridSettings.columns = newColumns; + } + } + } + if (removedCount) { + for (const l of Object.keys(state.layouts)) { + newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount; + if (newColumns > 0) { + state.layouts[l].gridSettings.columns = newColumns; + } + } + } + this.removeUnusedWidgets(dashboard); + } + public getRootStateId(states: {[id: string]: DashboardState }): string { for (const stateId of Object.keys(states)) { const state = states[stateId]; @@ -261,12 +325,12 @@ export class DashboardUtilsService { const layout: DashboardLayout = state.layouts[l]; if (layout) { result[l] = { - widgets: [], + widgetIds: [], widgetLayouts: {}, gridSettings: {} } as DashboardLayoutInfo; for (const id of Object.keys(layout.widgets)) { - result[l].widgets.push(allWidgets[id]); + result[l].widgetIds.push(id); } result[l].widgetLayouts = layout.widgets; result[l].gridSettings = layout.gridSettings; @@ -289,6 +353,154 @@ export class DashboardUtilsService { return widgetsArray; } + public addWidgetToLayout(dashboard: Dashboard, + targetState: string, + targetLayout: DashboardLayoutId, + widget: Widget, + originalColumns?: number, + originalSize?: {sizeX: number, sizeY: number}, + row?: number, + column?: number): void { + const dashboardConfiguration = dashboard.configuration; + const states = dashboardConfiguration.states; + const state = states[targetState]; + const layout = state.layouts[targetLayout]; + const layoutCount = Object.keys(state.layouts).length; + if (!widget.id) { + widget.id = this.utils.guid(); + } + if (!dashboardConfiguration.widgets[widget.id]) { + dashboardConfiguration.widgets[widget.id] = widget; + } + const widgetLayout: WidgetLayout = { + sizeX: originalSize ? originalSize.sizeX : widget.sizeX, + sizeY: originalSize ? originalSize.sizeY : widget.sizeY, + mobileOrder: widget.config.mobileOrder, + mobileHeight: widget.config.mobileHeight + }; + if (isUndefined(originalColumns)) { + originalColumns = 24; + } + const gridSettings = layout.gridSettings; + let columns = 24; + if (gridSettings && gridSettings.columns) { + columns = gridSettings.columns; + } + columns = columns * layoutCount; + if (columns !== originalColumns) { + const ratio = columns / originalColumns; + widgetLayout.sizeX *= ratio; + widgetLayout.sizeY *= ratio; + } + + if (row > -1 && column > - 1) { + widgetLayout.row = row; + widgetLayout.col = column; + } else { + row = 0; + for (const w of Object.keys(layout.widgets)) { + const existingLayout = layout.widgets[w]; + const wRow = existingLayout.row ? existingLayout.row : 0; + const wSizeY = existingLayout.sizeY ? existingLayout.sizeY : 1; + const bottom = wRow + wSizeY; + row = Math.max(row, bottom); + } + widgetLayout.row = row; + widgetLayout.col = 0; + } + layout.widgets[widget.id] = widgetLayout; + } + + public removeWidgetFromLayout(dashboard: Dashboard, + targetState: string, + targetLayout: DashboardLayoutId, + widgetId: string) { + const dashboardConfiguration = dashboard.configuration; + const states = dashboardConfiguration.states; + const state = states[targetState]; + const layout = state.layouts[targetLayout]; + delete layout.widgets[widgetId]; + this.removeUnusedWidgets(dashboard); + } + + public isSingleLayoutDashboard(dashboard: Dashboard): {state: string, layout: DashboardLayoutId} { + const dashboardConfiguration = dashboard.configuration; + const states = dashboardConfiguration.states; + const stateKeys = Object.keys(states); + if (stateKeys.length === 1) { + const state = states[stateKeys[0]]; + const layouts = state.layouts; + const layoutKeys = Object.keys(layouts); + if (layoutKeys.length === 1) { + return { + state: stateKeys[0], + layout: layoutKeys[0] as DashboardLayoutId + }; + } + } + return null; + } + + public updateLayoutSettings(layout: DashboardLayout, gridSettings: GridSettings) { + const prevGridSettings = layout.gridSettings; + let prevColumns = prevGridSettings ? prevGridSettings.columns : 24; + if (!prevColumns) { + prevColumns = 24; + } + const columns = gridSettings.columns || 24; + const ratio = columns / prevColumns; + layout.gridSettings = gridSettings; + let maxRow = 0; + for (const w of Object.keys(layout.widgets)) { + const widget = layout.widgets[w]; + if (!widget.sizeX) { + widget.sizeX = 1; + } + if (!widget.sizeY) { + widget.sizeY = 1; + } + maxRow = Math.max(maxRow, widget.row + widget.sizeY); + } + const newMaxRow = Math.round(maxRow * ratio); + for (const w of Object.keys(layout.widgets)) { + const widget = layout.widgets[w]; + if (widget.row + widget.sizeY === maxRow) { + widget.row = Math.round(widget.row * ratio); + widget.sizeY = newMaxRow - widget.row; + } else { + widget.row = Math.round(widget.row * ratio); + widget.sizeY = Math.round(widget.sizeY * ratio); + } + widget.sizeX = Math.round(widget.sizeX * ratio); + widget.col = Math.round(widget.col * ratio); + if (widget.col + widget.sizeX > columns) { + widget.sizeX = columns - widget.col; + } + } + } + + private removeUnusedWidgets(dashboard: Dashboard) { + const dashboardConfiguration = dashboard.configuration; + const states = dashboardConfiguration.states; + const widgets = dashboardConfiguration.widgets; + for (const widgetId of Object.keys(widgets)) { + let found = false; + for (const s of Object.keys(states)) { + const state = states[s]; + for (const l of Object.keys(state.layouts)) { + const layout = state.layouts[l]; + if (layout.widgets[widgetId]) { + found = true; + break; + } + } + } + if (!found) { + delete dashboardConfiguration.widgets[widgetId]; + } + } + } + private validateAndUpdateEntityAliases(configuration: DashboardConfiguration, datasourcesByAliasId: {[aliasId: string]: Array}, targetDevicesByAliasId: {[aliasId: string]: Array>}): DashboardConfiguration { diff --git a/ui-ngx/src/app/core/services/item-buffer.service.ts b/ui-ngx/src/app/core/services/item-buffer.service.ts index edcca2701b..a7dd4db778 100644 --- a/ui-ngx/src/app/core/services/item-buffer.service.ts +++ b/ui-ngx/src/app/core/services/item-buffer.service.ts @@ -16,20 +16,347 @@ import { Injectable } from '@angular/core'; import { Dashboard, DashboardLayoutId } from '@app/shared/models/dashboard.models'; +import { EntityAlias, EntityAliasFilter, EntityAliases, EntityAliasInfo } from '@shared/models/alias.models'; +import { DatasourceType, Widget, WidgetPosition, WidgetSize } from '@shared/models/widget.models'; +import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; +import { deepClone } from '@core/utils'; +import * as equal from 'deep-equal'; +import { UtilsService } from '@core/services/utils.service'; +import { Observable, of, throwError } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const WIDGET_ITEM = 'widget_item'; +const WIDGET_REFERENCE = 'widget_reference'; +const RULE_NODES = 'rule_nodes'; + +export interface AliasesInfo { + datasourceAliases: {[datasourceIndex: number]: EntityAliasInfo}; + targetDeviceAliases: {[targetDeviceAliasIndex: number]: EntityAliasInfo}; +} + +export interface WidgetItem { + widget: Widget; + aliasesInfo: AliasesInfo; + originalSize: WidgetSize; + originalColumns: number; +} + +export interface WidgetReference { + dashboardId: string; + sourceState: string; + sourceLayout: DashboardLayoutId; + widgetId: string; + originalSize: WidgetSize; + originalColumns: number; +} @Injectable({ providedIn: 'root' }) export class ItemBufferService { - constructor() {} + + private namespace = 'tbBufferStore'; + private delimiter = '.'; + + constructor(private dashboardUtils: DashboardUtilsService, + private utils: UtilsService) {} + + public prepareWidgetItem(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget): WidgetItem { + const aliasesInfo: AliasesInfo = { + datasourceAliases: {}, + targetDeviceAliases: {} + }; + const originalColumns = this.getOriginalColumns(dashboard, sourceState, sourceLayout); + const originalSize = this.getOriginalSize(dashboard, sourceState, sourceLayout, widget); + if (widget.config && dashboard.configuration + && dashboard.configuration.entityAliases) { + let entityAlias: EntityAlias; + if (widget.config.datasources) { + for (let i = 0; i < widget.config.datasources.length; i++) { + const datasource = widget.config.datasources[i]; + if (datasource.type === DatasourceType.entity && datasource.entityAliasId) { + entityAlias = dashboard.configuration.entityAliases[datasource.entityAliasId]; + if (entityAlias) { + aliasesInfo.datasourceAliases[i] = this.prepareAliasInfo(entityAlias); + } + } + } + } + if (widget.config.targetDeviceAliasIds) { + for (let i = 0; i < widget.config.targetDeviceAliasIds.length; i++) { + const targetDeviceAliasId = widget.config.targetDeviceAliasIds[i]; + if (targetDeviceAliasId) { + entityAlias = dashboard.configuration.entityAliases[targetDeviceAliasId]; + if (entityAlias) { + aliasesInfo.targetDeviceAliases[i] = this.prepareAliasInfo(entityAlias); + } + } + } + } + } + return { + widget, + aliasesInfo, + originalSize, + originalColumns + }; + } + + public copyWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget): void { + const widgetItem = this.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget); + this.storeSet(WIDGET_ITEM, JSON.stringify(widgetItem)); + } + + public copyWidgetReference(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget): void { + const widgetReference = this.prepareWidgetReference(dashboard, sourceState, sourceLayout, widget); + this.storeSet(WIDGET_REFERENCE, JSON.stringify(widgetReference)); + } public hasWidget(): boolean { - // TODO: - return false; + return this.storeHas(WIDGET_ITEM); } public canPasteWidgetReference(dashboard: Dashboard, state: string, layout: DashboardLayoutId): boolean { - // TODO: + const widgetReferenceJson = this.storeGet(WIDGET_REFERENCE); + if (widgetReferenceJson) { + const widgetReference: WidgetReference = JSON.parse(widgetReferenceJson); + if (widgetReference.dashboardId === dashboard.id.id) { + if ((widgetReference.sourceState !== state || widgetReference.sourceLayout !== layout) + && dashboard.configuration.widgets[widgetReference.widgetId]) { + return true; + } + } + } return false; } + + public pasteWidget(targetDashboard: Dashboard, targetState: string, + targetLayout: DashboardLayoutId, position: WidgetPosition, + onAliasesUpdateFunction: () => void): Observable { + const widgetItemJson = this.storeGet(WIDGET_ITEM); + if (widgetItemJson) { + const widgetItem: WidgetItem = JSON.parse(widgetItemJson); + const widget = widgetItem.widget; + const aliasesInfo = widgetItem.aliasesInfo; + const originalColumns = widgetItem.originalColumns; + const originalSize = widgetItem.originalSize; + let targetRow = -1; + let targetColumn = -1; + if (position) { + targetRow = position.row; + targetColumn = position.column; + } + widget.id = this.utils.guid(); + return this.addWidgetToDashboard(targetDashboard, targetState, + targetLayout, widget, aliasesInfo, + onAliasesUpdateFunction, originalColumns, + originalSize, targetRow, targetColumn).pipe( + map(() => widget) + ); + } else { + return throwError('Failed to read widget from buffer!'); + } + } + + public pasteWidgetReference(targetDashboard: Dashboard, targetState: string, + targetLayout: DashboardLayoutId, position: WidgetPosition): Observable { + const widgetReferenceJson = this.storeGet(WIDGET_REFERENCE); + if (widgetReferenceJson) { + const widgetReference: WidgetReference = JSON.parse(widgetReferenceJson); + const widget = targetDashboard.configuration.widgets[widgetReference.widgetId]; + if (widget) { + const originalColumns = widgetReference.originalColumns; + const originalSize = widgetReference.originalSize; + let targetRow = -1; + let targetColumn = -1; + if (position) { + targetRow = position.row; + targetColumn = position.column; + } + return this.addWidgetToDashboard(targetDashboard, targetState, + targetLayout, widget, null, + null, originalColumns, + originalSize, targetRow, targetColumn).pipe( + map(() => widget) + ); + } else { + return throwError('Failed to read widget reference from buffer!'); + } + } else { + return throwError('Failed to read widget reference from buffer!'); + } + } + + public addWidgetToDashboard(dashboard: Dashboard, targetState: string, + targetLayout: DashboardLayoutId, widget: Widget, + aliasesInfo: AliasesInfo, + onAliasesUpdateFunction: () => void, + originalColumns: number, + originalSize: WidgetSize, + row: number, + column: number): Observable { + let theDashboard: Dashboard; + if (dashboard) { + theDashboard = dashboard; + } else { + theDashboard = {}; + } + theDashboard = this.dashboardUtils.validateAndUpdateDashboard(theDashboard); + let callAliasUpdateFunction = false; + if (aliasesInfo) { + const newEntityAliases = this.updateAliases(theDashboard, widget, aliasesInfo); + const aliasesUpdated = !equal(newEntityAliases, theDashboard.configuration.entityAliases); + if (aliasesUpdated) { + theDashboard.configuration.entityAliases = newEntityAliases; + if (onAliasesUpdateFunction) { + callAliasUpdateFunction = true; + } + } + } + this.dashboardUtils.addWidgetToLayout(theDashboard, targetState, targetLayout, widget, + originalColumns, originalSize, row, column); + if (callAliasUpdateFunction) { + onAliasesUpdateFunction(); + } + return of(theDashboard); + } + + private getOriginalColumns(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId): number { + let originalColumns = 24; + let gridSettings = null; + const state = dashboard.configuration.states[sourceState]; + const layoutCount = Object.keys(state.layouts).length; + if (state) { + const layout = state.layouts[sourceLayout]; + if (layout) { + gridSettings = layout.gridSettings; + + } + } + if (gridSettings && + gridSettings.columns) { + originalColumns = gridSettings.columns; + } + originalColumns = originalColumns * layoutCount; + return originalColumns; + } + + private getOriginalSize(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget): WidgetSize { + const layout = dashboard.configuration.states[sourceState].layouts[sourceLayout]; + const widgetLayout = layout.widgets[widget.id]; + return { + sizeX: widgetLayout.sizeX, + sizeY: widgetLayout.sizeY + }; + } + + private prepareAliasInfo(entityAlias: EntityAlias): EntityAliasInfo { + return { + alias: entityAlias.alias, + filter: entityAlias.filter + }; + } + + private prepareWidgetReference(dashboard: Dashboard, sourceState: string, + sourceLayout: DashboardLayoutId, widget: Widget): WidgetReference { + const originalColumns = this.getOriginalColumns(dashboard, sourceState, sourceLayout); + const originalSize = this.getOriginalSize(dashboard, sourceState, sourceLayout, widget); + return { + dashboardId: dashboard.id.id, + sourceState, + sourceLayout, + widgetId: widget.id, + originalSize, + originalColumns + }; + } + + private updateAliases(dashboard: Dashboard, widget: Widget, aliasesInfo: AliasesInfo): EntityAliases { + const entityAliases = deepClone(dashboard.configuration.entityAliases); + let aliasInfo: EntityAliasInfo; + let newAliasId: string; + for (const datasourceIndexStr of Object.keys(aliasesInfo.datasourceAliases)) { + const datasourceIndex = Number(datasourceIndexStr); + aliasInfo = aliasesInfo.datasourceAliases[datasourceIndex]; + newAliasId = this.getEntityAliasId(entityAliases, aliasInfo); + widget.config.datasources[datasourceIndex].entityAliasId = newAliasId; + } + for (const targetDeviceAliasIndexStr of Object.keys(aliasesInfo.targetDeviceAliases)) { + const targetDeviceAliasIndex = Number(targetDeviceAliasIndexStr); + aliasInfo = aliasesInfo.targetDeviceAliases[targetDeviceAliasIndex]; + newAliasId = this.getEntityAliasId(entityAliases, aliasInfo); + widget.config.targetDeviceAliasIds[targetDeviceAliasIndex] = newAliasId; + } + return entityAliases; + } + + private isEntityAliasEqual(alias1: EntityAliasInfo, alias2: EntityAliasInfo): boolean { + return equal(alias1.filter, alias2.filter); + } + + private getEntityAliasId(entityAliases: EntityAliases, aliasInfo: EntityAliasInfo): string { + let newAliasId: string; + for (const aliasId of Object.keys(entityAliases)) { + if (this.isEntityAliasEqual(entityAliases[aliasId], aliasInfo)) { + newAliasId = aliasId; + break; + } + } + if (!newAliasId) { + const newAliasName = this.createEntityAliasName(entityAliases, aliasInfo.alias); + newAliasId = this.utils.guid(); + entityAliases[newAliasId] = {id: newAliasId, alias: newAliasName, filter: aliasInfo.filter}; + } + return newAliasId; + } + + private createEntityAliasName(entityAliases: EntityAliases, alias: string): string { + let c = 0; + let newAlias = alias; + let unique = false; + while (!unique) { + unique = true; + for (const entAliasId of Object.keys(entityAliases)) { + const entAlias = entityAliases[entAliasId]; + if (newAlias === entAlias.alias) { + c++; + newAlias = alias + c; + unique = false; + } + } + } + return newAlias; + } + + private storeSet(key: string, elem: any) { + localStorage.setItem(this.getNamespacedKey(key), JSON.stringify(elem)); + } + + private storeGet(key: string): any { + let obj = null; + const saved = localStorage.getItem(this.getNamespacedKey(key)); + try { + if (typeof saved === 'undefined' || saved === 'undefined') { + obj = undefined; + } else { + obj = JSON.parse(saved); + } + } catch (e) { + this.storeRemove(key); + } + return obj; + } + + private storeHas(key: string): boolean { + const saved = localStorage.getItem(this.getNamespacedKey(key)); + return typeof saved !== 'undefined' && saved !== 'undefined' && saved !== null; + } + + private storeRemove(key: string) { + localStorage.removeItem(this.getNamespacedKey(key)); + } + + private getNamespacedKey(key: string): string { + return [this.namespace, key].join(this.delimiter); + } } diff --git a/ui-ngx/src/app/core/services/utils.service.ts b/ui-ngx/src/app/core/services/utils.service.ts index 26a9ade0ba..3bbd97e30e 100644 --- a/ui-ngx/src/app/core/services/utils.service.ts +++ b/ui-ngx/src/app/core/services/utils.service.ts @@ -17,7 +17,7 @@ import { Inject, Injectable, NgZone } from '@angular/core'; import { WINDOW } from '@core/services/window.service'; import { ExceptionData } from '@app/shared/models/error.models'; -import { deepClone, deleteNullProperties, isDefined, isUndefined } from '@core/utils'; +import { deepClone, deleteNullProperties, guid, isDefined, isUndefined } from '@core/utils'; import { WindowMessage } from '@shared/models/window-message.model'; import { TranslateService } from '@ngx-translate/core'; import { customTranslationsPrefix } from '@app/shared/models/constants'; @@ -263,13 +263,7 @@ export class UtilsService { } public guid(): string { - function s4(): string { - return Math.floor((1 + Math.random()) * 0x10000) - .toString(16) - .substring(1); - } - return s4() + s4() + '-' + s4() + '-' + s4() + '-' + - s4() + '-' + s4() + s4() + s4(); + return guid(); } public validateDatasources(datasources: Array): Array { diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 394ed143df..9960b5bbf4 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -353,3 +353,13 @@ export function deepClone(target: T): T { } return target; } + +export function guid(): string { + function s4(): string { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + } + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + + s4() + '-' + s4() + s4() + s4(); +} diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html index 6fe9e3f2bc..73945b8602 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.html @@ -17,6 +17,7 @@ -->
@@ -114,7 +115,7 @@ close diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss index 409a4444d1..4a75664657 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.scss @@ -17,6 +17,7 @@ :host { .mat-chip.mat-standard-chip { .tb-attribute-chip { + max-width: 100%; color: rgb(66, 66, 66); font-weight: normal; font-size: 16px; diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html index f143856ec3..b285e2d5ba 100644 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.html @@ -16,6 +16,7 @@ --> + + + +
+
+ + +
+
+
+ + + +
+ diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.ts new file mode 100644 index 0000000000..7614f13a60 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/add-widget-dialog.component.ts @@ -0,0 +1,137 @@ +/// +/// 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, Inject, OnInit, SkipSelf } from '@angular/core'; +import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms'; +import { Router } from '@angular/router'; +import { DialogComponent } from '@app/shared/components/dialog.component'; +import { Widget, widgetTypesData } from '@shared/models/widget.models'; +import { UtilsService } from '@core/services/utils.service'; +import { TranslateService } from '@ngx-translate/core'; +import { EntityService } from '@core/http/entity.service'; +import { Dashboard } from '@app/shared/models/dashboard.models'; +import { IAliasController } from '@core/api/widget-api.models'; +import { WidgetConfigComponentData, WidgetInfo } from '@home/models/widget-component.models'; +import { isDefined, isString } from '@core/utils'; + +export interface AddWidgetDialogData { + dashboard: Dashboard; + aliasController: IAliasController; + widget: Widget; + widgetInfo: WidgetInfo; +} + +@Component({ + selector: 'tb-add-widget-dialog', + templateUrl: './add-widget-dialog.component.html', + providers: [{provide: ErrorStateMatcher, useExisting: AddWidgetDialogComponent}], + styleUrls: [] +}) +export class AddWidgetDialogComponent extends DialogComponent + implements OnInit, ErrorStateMatcher { + + widgetFormGroup: FormGroup; + + dashboard: Dashboard; + aliasController: IAliasController; + widget: Widget; + + submitted = false; + + constructor(protected store: Store, + protected router: Router, + @Inject(MAT_DIALOG_DATA) public data: AddWidgetDialogData, + @SkipSelf() private errorStateMatcher: ErrorStateMatcher, + public dialogRef: MatDialogRef, + private fb: FormBuilder, + private utils: UtilsService, + private translate: TranslateService, + private entityService: EntityService) { + super(store, router, dialogRef); + + this.dashboard = this.data.dashboard; + this.aliasController = this.data.aliasController; + this.widget = this.data.widget; + + const widgetInfo = this.data.widgetInfo; + + const rawSettingsSchema = widgetInfo.typeSettingsSchema || widgetInfo.settingsSchema; + const rawDataKeySettingsSchema = widgetInfo.typeDataKeySettingsSchema || widgetInfo.dataKeySettingsSchema; + const typeParameters = widgetInfo.typeParameters; + const actionSources = widgetInfo.actionSources; + const isDataEnabled = isDefined(widgetInfo.typeParameters) ? !widgetInfo.typeParameters.useCustomDatasources : true; + let settingsSchema; + if (!rawSettingsSchema || rawSettingsSchema === '') { + settingsSchema = {}; + } else { + settingsSchema = isString(rawSettingsSchema) ? JSON.parse(rawSettingsSchema) : rawSettingsSchema; + } + let dataKeySettingsSchema; + if (!rawDataKeySettingsSchema || rawDataKeySettingsSchema === '') { + dataKeySettingsSchema = {}; + } else { + dataKeySettingsSchema = isString(rawDataKeySettingsSchema) ? JSON.parse(rawDataKeySettingsSchema) : rawDataKeySettingsSchema; + } + const widgetConfig: WidgetConfigComponentData = { + config: this.widget.config, + layout: {}, + widgetType: this.widget.type, + typeParameters, + actionSources, + isDataEnabled, + settingsSchema, + dataKeySettingsSchema + }; + + this.widgetFormGroup = this.fb.group({ + widgetConfig: [widgetConfig, []] + } + ); + } + + ngOnInit(): void { + } + + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { + const originalErrorState = this.errorStateMatcher.isErrorState(control, form); + const customErrorState = !!(control && control.invalid && this.submitted); + return originalErrorState || customErrorState; + } + + helpLinkIdForWidgetType(): string { + let link = 'widgetsConfig'; + if (this.widget && this.widget.type) { + link = widgetTypesData.get(this.widget.type).configHelpLinkId; + } + return link; + } + + cancel(): void { + this.dialogRef.close(null); + } + + add(): void { + this.submitted = true; + const widgetConfig: WidgetConfigComponentData = this.widgetFormGroup.get('widgetConfig').value; + this.widget.config = widgetConfig.config; + this.widget.config.mobileOrder = widgetConfig.layout.mobileOrder; + this.widget.config.mobileHeight = widgetConfig.layout.mobileHeight; + this.dialogRef.close(this.widget); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html index 6556cb219e..7a13498ee7 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.html @@ -132,26 +132,13 @@
-
- - -
- - + + + + +
@@ -194,6 +194,37 @@ + + + +
+
+ {{ 'widgets-bundle.current' | translate }} + + +
+
+ + + + +
(DashboardSettingsDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + settings: deepClone(this.dashboard.configuration.settings), + gridSettings + } + }).afterClosed().subscribe((data) => { + if (data) { + this.dashboard.configuration.settings = data.settings; + const newGridSettings = data.gridSettings; + if (newGridSettings) { + const layout = this.dashboard.configuration.states[layoutKeys.state].layouts[layoutKeys.layout]; + this.dashboardUtils.updateLayoutSettings(layout, newGridSettings); + this.updateLayouts(); + } + } + }); } public manageDashboardStates($event: Event) { @@ -491,8 +518,23 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC if ($event) { $event.stopPropagation(); } - // TODO: - this.dialogService.todo(); + this.dialog.open(ManageDashboardLayoutsDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + layouts: deepClone(this.dashboard.configuration.states[this.dashboardCtx.state].layouts) + } + }).afterClosed().subscribe((layouts) => { + if (layouts) { + this.updateDashboardLayouts(layouts); + } + }); + } + + private updateDashboardLayouts(newLayouts: DashboardStateLayouts) { + this.dashboardUtils.setLayouts(this.dashboard, this.dashboardCtx.state, newLayouts); + this.updateLayouts(); } private importWidget($event: Event) { @@ -526,7 +568,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.notifyDashboardUpdated(); } - public openDashboardState(state: string, openRightLayout: boolean) { + public openDashboardState(state: string, openRightLayout?: boolean) { const layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, state); if (layoutsData) { this.dashboardCtx.state = state; @@ -546,21 +588,21 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC } } this.isRightLayoutOpened = openRightLayout ? true : false; - this.updateLayouts(layoutsData, layoutVisibilityChanged); + this.updateLayouts(layoutsData); } } - private updateLayouts(layoutsData: DashboardLayoutsInfo, layoutVisibilityChanged: boolean) { + private updateLayouts(layoutsData?: DashboardLayoutsInfo) { + if (!layoutsData) { + layoutsData = this.dashboardUtils.getStateLayoutsData(this.dashboard, this.dashboardCtx.state); + } for (const l of Object.keys(this.layouts)) { const layout: DashboardPageLayout = this.layouts[l]; if (layoutsData[l]) { const layoutInfo: DashboardLayoutInfo = layoutsData[l]; - if (layout.layoutCtx.id === 'main') { - layout.layoutCtx.ctrl.setResizing(layoutVisibilityChanged); - } this.updateLayout(layout, layoutInfo); } else { - this.updateLayout(layout, {widgets: [], widgetLayouts: {}, gridSettings: null}); + this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null}); } } } @@ -569,7 +611,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC if (layoutInfo.gridSettings) { layout.layoutCtx.gridSettings = layoutInfo.gridSettings; } - layout.layoutCtx.widgets = layoutInfo.widgets; + layout.layoutCtx.widgets.setWidgetIds(layoutInfo.widgetIds); layout.layoutCtx.widgetLayouts = layoutInfo.widgetLayouts; if (layout.show && layout.layoutCtx.ctrl) { layout.layoutCtx.ctrl.reload(); @@ -594,6 +636,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.dashboardConfiguration = this.dashboard.configuration; this.dashboardCtx.dashboardTimewindow = this.dashboardConfiguration.timewindow; this.entityAliasesUpdated(); + this.updateLayouts(); } else { this.dashboard.configuration.timewindow = this.dashboardCtx.dashboardTimewindow; } @@ -617,7 +660,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC private notifyDashboardUpdated() { if (this.widgetEditMode) { - const widget = this.layouts.main.layoutCtx.widgets[0]; + const widget = this.layouts.main.layoutCtx.widgets.widgetByIndex(0); const layout = this.layouts.main.layoutCtx.widgetLayouts[widget.id]; widget.sizeX = layout.sizeX; widget.sizeY = layout.sizeY; @@ -643,8 +686,86 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC if ($event) { $event.stopPropagation(); } - // TODO: - this.dialogService.todo(); + this.isAddingWidget = true; + this.addingLayoutCtx = layoutCtx; + } + + onAddWidgetClosed() { + this.isAddingWidget = false; + } + + private addWidgetToLayout(widget: Widget, layoutId: DashboardLayoutId) { + this.dashboardUtils.addWidgetToLayout(this.dashboard, this.dashboardCtx.state, layoutId, widget); + this.layouts[layoutId].layoutCtx.widgets.addWidgetId(widget.id); + } + + private selectTargetLayout(): Observable { + const layouts = this.dashboardConfiguration.states[this.dashboardCtx.state].layouts; + const layoutIds = Object.keys(layouts); + if (layoutIds.length > 1) { + return this.dialog.open(SelectTargetLayoutDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] + }).afterClosed(); + } else { + return of(layoutIds[0] as DashboardLayoutId); + } + } + + private addWidgetToDashboard(widget: Widget) { + if (this.addingLayoutCtx) { + this.addWidgetToLayout(widget, this.addingLayoutCtx.id); + this.addingLayoutCtx = null; + } else { + this.selectTargetLayout().subscribe((layoutId) => { + if (layoutId) { + this.addWidgetToLayout(widget, layoutId); + } + }); + } + } + + addWidgetFromType(widget: Widget) { + this.onAddWidgetClosed(); + this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType).subscribe( + (widgetTypeInfo) => { + const config: WidgetConfig = JSON.parse(widgetTypeInfo.defaultConfig); + config.title = 'New ' + widgetTypeInfo.widgetName; + config.datasources = []; + const newWidget: Widget = { + isSystemType: widget.isSystemType, + bundleAlias: widget.bundleAlias, + typeAlias: widgetTypeInfo.alias, + type: widgetTypeInfo.type, + title: 'New widget', + sizeX: widgetTypeInfo.sizeX, + sizeY: widgetTypeInfo.sizeY, + config, + row: 0, + col: 0 + }; + if (widgetTypeInfo.typeParameters.useCustomDatasources) { + this.addWidgetToDashboard(newWidget); + } else { + this.dialog.open(AddWidgetDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + dashboard: this.dashboard, + aliasController: this.dashboardCtx.aliasController, + widget: newWidget, + widgetInfo: widgetTypeInfo + } + }).afterClosed().subscribe((addedWidget) => { + if (addedWidget) { + this.addWidgetToDashboard(addedWidget); + } + }); + } + } + ); } onRevertWidgetEdit() { @@ -660,14 +781,12 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC const widget = deepClone(this.editingWidget); const widgetLayout = deepClone(this.editingWidgetLayout); const id = this.editingWidgetOriginal.id; - const index = this.editingLayoutCtx.widgets.indexOf(this.editingWidgetOriginal); this.dashboardConfiguration.widgets[id] = widget; this.editingWidgetOriginal = widget; this.editingWidgetLayoutOriginal = widgetLayout; - this.editingLayoutCtx.widgets[index] = widget; this.editingLayoutCtx.widgetLayouts[widget.id] = widgetLayout; setTimeout(() => { - this.editingLayoutCtx.ctrl.highlightWidget(index, 0); + this.editingLayoutCtx.ctrl.highlightWidget(widget.id, 0); }, 0); } @@ -683,7 +802,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.forceDashboardMobileMode = false; } - editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { $event.stopPropagation(); if (this.editingWidgetOriginal === widget) { this.onEditWidgetClosed(); @@ -701,52 +820,73 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC const delayOffset = transition ? 350 : 0; const delay = transition ? 400 : 300; setTimeout(() => { - layoutCtx.ctrl.highlightWidget(index, delay); + layoutCtx.ctrl.highlightWidget(widget.id, delay); }, delayOffset); } } } copyWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { - // TODO: - this.dialogService.todo(); + this.itembuffer.copyWidget(this.dashboard, + this.dashboardCtx.state, layoutCtx.id, widget); } copyWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { - // TODO: - this.dialogService.todo(); + this.itembuffer.copyWidgetReference(this.dashboard, + this.dashboardCtx.state, layoutCtx.id, widget); } pasteWidget($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition) { - // TODO: - this.dialogService.todo(); + this.itembuffer.pasteWidget(this.dashboard, this.dashboardCtx.state, layoutCtx.id, + pos, this.entityAliasesUpdated.bind(this)).subscribe( + (widget) => { + layoutCtx.widgets.addWidgetId(widget.id); + }); } pasteWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition) { - // TODO: - this.dialogService.todo(); + this.itembuffer.pasteWidgetReference(this.dashboard, this.dashboardCtx.state, layoutCtx.id, + pos).subscribe( + (widget) => { + layoutCtx.widgets.addWidgetId(widget.id); + }); } removeWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { - // TODO: - this.dialogService.todo(); + let title = widget.config.title; + if (!title || title.length === 0) { + title = this.widgetComponentService.getInstantWidgetInfo(widget).widgetName; + } + const confirmTitle = this.translate.instant('widget.remove-widget-title', {widgetTitle: title}); + const confirmContent = this.translate.instant('widget.remove-widget-text'); + this.dialogService.confirm(confirmTitle, + confirmContent, + this.translate.instant('action.no'), + this.translate.instant('action.yes'), + ).subscribe((res) => { + if (res) { + if (layoutCtx.widgets.removeWidgetId(widget.id)) { + this.dashboardUtils.removeWidgetFromLayout(this.dashboard, this.dashboardCtx.state, layoutCtx.id, widget.id); + } + } + }); } - exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { $event.stopPropagation(); // TODO: this.dialogService.todo(); } - widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { if (this.isEditingWidget) { - this.editWidget($event, layoutCtx, widget, index); + this.editWidget($event, layoutCtx, widget); } } - widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { if (this.isEdit && !this.isEditingWidget) { - layoutCtx.ctrl.selectWidget(index, 0); + layoutCtx.ctrl.selectWidget(widget.id, 0); } } @@ -795,13 +935,13 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC return dashboardContextActions; } - prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number): Array { + prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget): Array { const widgetContextActions: Array = []; if (this.isEdit && !this.isEditingWidget) { widgetContextActions.push( { action: (event, currentWidget) => { - this.editWidget(event, layoutCtx, currentWidget, index); + this.editWidget(event, layoutCtx, currentWidget); }, enabled: true, value: 'action.edit', diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts index 3e829681ec..490b8d2b89 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.models.ts @@ -15,14 +15,13 @@ /// import { DashboardLayoutId, GridSettings, WidgetLayout, Dashboard, WidgetLayouts } from '@app/shared/models/dashboard.models'; -import { Widget } from '@app/shared/models/widget.models'; +import { Widget, WidgetPosition } from '@app/shared/models/widget.models'; import { Timewindow } from '@shared/models/time/time.models'; import { IAliasController, IStateController } from '@core/api/widget-api.models'; import { ILayoutController } from './layout/layout.models'; import { DashboardContextMenuItem, - WidgetContextMenuItem, - WidgetPosition + WidgetContextMenuItem } from '@home/models/dashboard-component.models'; import { Observable } from 'rxjs'; import { ChangeDetectorRef } from '@angular/core'; @@ -43,13 +42,13 @@ export interface IDashboardController { openRightLayout(); openDashboardState(stateId: string, openRightLayout: boolean); addWidget($event: Event, layoutCtx: DashboardPageLayoutContext); - editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number); - exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number); + editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); + exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); removeWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); - widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number); - widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number); + widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); + widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); prepareDashboardContextMenu(layoutCtx: DashboardPageLayoutContext): Array; - prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number): Array; + prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget): Array; copyWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); copyWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); pasteWidget($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition); @@ -58,7 +57,7 @@ export interface IDashboardController { export interface DashboardPageLayoutContext { id: DashboardLayoutId; - widgets: Array; + widgets: LayoutWidgetsArray; widgetLayouts: WidgetLayouts; gridSettings: GridSettings; ctrl: ILayoutController; @@ -73,3 +72,69 @@ export interface DashboardPageLayout { export declare type DashboardPageLayouts = {[key in DashboardLayoutId]: DashboardPageLayout}; +export class LayoutWidgetsArray implements Iterable { + + private widgetIds: string[] = []; + private pointer = 0; + + constructor(private dashboard: Dashboard) { + } + + size() { + return this.widgetIds.length; + } + + setWidgetIds(widgetIds: string[]) { + this.widgetIds = widgetIds; + } + + addWidgetId(widgetId: string) { + this.widgetIds.push(widgetId); + } + + removeWidgetId(widgetId: string): boolean { + const index = this.widgetIds.indexOf(widgetId); + if (index > -1) { + this.widgetIds.splice(index, 1); + return true; + } + return false; + } + + [Symbol.iterator](): Iterator { + let pointer = 0; + const widgetIds = this.widgetIds; + const dashboard = this.dashboard; + return { + next(value?: any): IteratorResult { + if (pointer < widgetIds.length) { + const widgetId = widgetIds[pointer++]; + const widget = dashboard.configuration.widgets[widgetId]; + return { + done: false, + value: widget + }; + } else { + return { + done: true, + value: null + }; + } + } + }; + } + + public widgetByIndex(index: number): Widget { + const widgetId = this.widgetIds[index]; + if (widgetId) { + return this.widgetById(widgetId); + } else { + return null; + } + } + + private widgetById(widgetId: string): Widget { + return this.dashboard.configuration.widgets[widgetId]; + } + +} diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.html new file mode 100644 index 0000000000..d49d0161d5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.html @@ -0,0 +1,167 @@ + +
+ +

{{settings ? 'dashboard.settings' : 'layout.settings'}}

+ + + + + +
+
+
+ + dashboard.state-controller + + + {{stateControllerId}} + + + +
+ + {{ 'dashboard.toolbar-always-open' | translate }} + + + {{ 'dashboard.display-title' | translate }} + + + +
+
+ + {{ 'dashboard.display-dashboards-selection' | translate }} + + + {{ 'dashboard.display-entities-selection' | translate }} + + + {{ 'dashboard.display-dashboard-timewindow' | translate }} + + + {{ 'dashboard.display-dashboard-export' | translate }} + +
+
+
+ + + + dashboard.columns-count + + + {{ 'dashboard.columns-count-required' | translate }} + + + {{ 'dashboard.min-columns-count-message' | translate }} + + + {{ 'dashboard.max-columns-count-message' | translate }} + + + + dashboard.widgets-margins + + + {{ 'dashboard.margin-required' | translate }} + + + {{ 'dashboard.min-margin-message' | translate }} + + + {{ 'dashboard.max-margin-message' | translate }} + + + + {{ 'dashboard.autofill-height' | translate }} + + + + + + + dashboard.background-size-mode + + Fit width + Fit height + Cover + Contain + Original size + + + dashboard.mobile-layout +
+ + {{ 'dashboard.autofill-height' | translate }} + + + dashboard.mobile-row-height + + + {{ 'dashboard.mobile-row-height-required' | translate }} + + + {{ 'dashboard.min-mobile-row-height-message' | translate }} + + + {{ 'dashboard.max-mobile-row-height-message' | translate }} + + +
+
+
+
+
+ + + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.ts new file mode 100644 index 0000000000..c6b90373c1 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-settings-dialog.component.ts @@ -0,0 +1,137 @@ +/// +/// 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, Inject, OnInit, SkipSelf } from '@angular/core'; +import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { DialogComponent } from '@app/shared/components/dialog.component'; +import { UtilsService } from '@core/services/utils.service'; +import { TranslateService } from '@ngx-translate/core'; +import { DashboardSettings, GridSettings, StateControllerId } from '@app/shared/models/dashboard.models'; +import { isUndefined } from '@core/utils'; +import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; +import { StatesControllerService } from './states/states-controller.service'; + +export interface DashboardSettingsDialogData { + settings?: DashboardSettings; + gridSettings?: GridSettings; +} + +@Component({ + selector: 'tb-dashboard-settings-dialog', + templateUrl: './dashboard-settings-dialog.component.html', + providers: [{provide: ErrorStateMatcher, useExisting: DashboardSettingsDialogComponent}], + styleUrls: [] +}) +export class DashboardSettingsDialogComponent extends DialogComponent + implements OnInit, ErrorStateMatcher { + + settings: DashboardSettings; + gridSettings: GridSettings; + + settingsFormGroup: FormGroup; + gridSettingsFormGroup: FormGroup; + + stateControllerIds: string[]; + + submitted = false; + + constructor(protected store: Store, + protected router: Router, + @Inject(MAT_DIALOG_DATA) public data: DashboardSettingsDialogData, + @SkipSelf() private errorStateMatcher: ErrorStateMatcher, + public dialogRef: MatDialogRef, + private fb: FormBuilder, + private utils: UtilsService, + private dashboardUtils: DashboardUtilsService, + private translate: TranslateService, + private statesControllerService: StatesControllerService) { + super(store, router, dialogRef); + + this.stateControllerIds = Object.keys(this.statesControllerService.getStateControllers()); + + this.settings = this.data.settings; + this.gridSettings = this.data.gridSettings; + + if (this.settings) { + this.settingsFormGroup = this.fb.group({ + stateControllerId: [isUndefined(this.settings.stateControllerId) ? 'entity' : this.settings.stateControllerId, []], + toolbarAlwaysOpen: [isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen, []], + showTitle: [isUndefined(this.settings.showTitle) ? true : this.settings.showTitle, []], + titleColor: [isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor, []], + showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []], + showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []], + showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []], + showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []] + }); + this.settingsFormGroup.get('stateControllerId').valueChanges.subscribe( + (stateControllerId: StateControllerId) => { + if (stateControllerId !== 'default') { + this.settingsFormGroup.get('toolbarAlwaysOpen').setValue(true); + } + } + ); + } else { + this.settingsFormGroup = this.fb.group({}); + } + + if (this.gridSettings) { + this.gridSettingsFormGroup = this.fb.group({ + color: [this.gridSettings.color || 'rgba(0,0,0,0.870588)', []], + columns: [this.gridSettings.columns || 24, [Validators.required, Validators.min(10), Validators.max(1000)]], + margin: [this.gridSettings.margin || 10, [Validators.required, Validators.min(0), Validators.max(50)]], + autoFillHeight: [isUndefined(this.gridSettings.autoFillHeight) ? false : this.gridSettings.autoFillHeight, []], + backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []], + backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []], + backgroundSizeMode: [this.gridSettings.backgroundSizeMode || '100%', []], + mobileAutoFillHeight: [isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight, []], + mobileRowHeight: [isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight, + [Validators.required, Validators.min(5), Validators.max(200)]] + }); + } else { + this.gridSettingsFormGroup = this.fb.group({}); + } + } + + ngOnInit(): void { + } + + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { + const originalErrorState = this.errorStateMatcher.isErrorState(control, form); + const customErrorState = !!(control && control.invalid && this.submitted); + return originalErrorState || customErrorState; + } + + cancel(): void { + this.dialogRef.close(null); + } + + save(): void { + this.submitted = true; + let settings: DashboardSettings = null; + let gridSettings: GridSettings = null; + if (this.settings) { + settings = {...this.settings, ...this.settingsFormGroup.value}; + } + if (this.gridSettings) { + gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.value}; + } + this.dialogRef.close({settings, gridSettings}); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.html new file mode 100644 index 0000000000..5af2b11456 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.html @@ -0,0 +1,84 @@ + +
+ + + + + + + + + + + + + + + + + + widgets-bundle.empty + widget.select-widgets-bundle +
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.scss b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.scss new file mode 100644 index 0000000000..8017698448 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.scss @@ -0,0 +1,23 @@ +/** + * 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. + */ +:host ::ng-deep { + .mat-tab-group { + .mat-tab-body-wrapper { + height: 100%; + } + } +} + diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.ts new file mode 100644 index 0000000000..8058facc94 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-widget-select.component.ts @@ -0,0 +1,144 @@ +/// +/// 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, + OnDestroy, + OnInit, + ViewEncapsulation, + Input, + Output, + EventEmitter, + OnChanges, + SimpleChanges +} from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; +import { IAliasController } from '@core/api/widget-api.models'; +import { NULL_UUID } from '@shared/models/id/has-uuid'; +import { WidgetService } from '@core/http/widget.service'; +import { widgetType, Widget } from '@shared/models/widget.models'; +import { toWidgetInfo } from '@home/models/widget-component.models'; +import { DashboardCallbacks } from '../../models/dashboard-component.models'; + +@Component({ + selector: 'tb-dashboard-widget-select', + templateUrl: './dashboard-widget-select.component.html', + styleUrls: ['./dashboard-widget-select.component.scss'] +}) +export class DashboardWidgetSelectComponent implements OnInit, OnChanges { + + @Input() + widgetsBundle: WidgetsBundle; + + @Input() + aliasController: IAliasController; + + @Output() + widgetSelected: EventEmitter = new EventEmitter(); + + timeseriesWidgetTypes: Array = []; + latestWidgetTypes: Array = []; + rpcWidgetTypes: Array = []; + alarmWidgetTypes: Array = []; + staticWidgetTypes: Array = []; + + callbacks: DashboardCallbacks = { + onWidgetClicked: this.onWidgetClicked.bind(this) + }; + + constructor(private widgetsService: WidgetService) { + } + + ngOnInit(): void { + } + + ngOnChanges(changes: SimpleChanges): void { + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (change.currentValue !== change.previousValue && change.currentValue) { + if (propName === 'widgetsBundle') { + this.loadLibrary(); + } + } + } + } + + private loadLibrary() { + this.timeseriesWidgetTypes.length = 0; + this.latestWidgetTypes.length = 0; + this.rpcWidgetTypes.length = 0; + this.alarmWidgetTypes.length = 0; + this.staticWidgetTypes.length = 0; + const bundleAlias = this.widgetsBundle.alias; + const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID; + this.widgetsService.getBundleWidgetTypes(bundleAlias, + isSystem).subscribe( + (types) => { + types = types.sort((a, b) => b.createdTime - a.createdTime); + let top = 0; + types.forEach((type) => { + const widgetTypeInfo = toWidgetInfo(type); + const widget: Widget = { + typeId: type.id, + isSystemType: isSystem, + bundleAlias, + typeAlias: widgetTypeInfo.alias, + type: widgetTypeInfo.type, + title: widgetTypeInfo.widgetName, + sizeX: widgetTypeInfo.sizeX, + sizeY: widgetTypeInfo.sizeY, + row: top, + col: 0, + config: JSON.parse(widgetTypeInfo.defaultConfig) + }; + widget.config.title = widgetTypeInfo.widgetName; + switch (widgetTypeInfo.type) { + case widgetType.timeseries: + this.timeseriesWidgetTypes.push(widget); + break; + case widgetType.latest: + this.latestWidgetTypes.push(widget); + break; + case widgetType.rpc: + this.rpcWidgetTypes.push(widget); + break; + case widgetType.alarm: + this.alarmWidgetTypes.push(widget); + break; + case widgetType.static: + this.staticWidgetTypes.push(widget); + break; + } + top += widget.sizeY; + }); + } + ); + } + + hasWidgetTypes() { + return this.timeseriesWidgetTypes.length > 0 || + this.latestWidgetTypes.length > 0 || + this.rpcWidgetTypes.length > 0 || + this.alarmWidgetTypes.length > 0 || + this.staticWidgetTypes.length > 0; + } + + private onWidgetClicked($event: Event, widget: Widget, index: number): void { + this.widgetSelected.emit(widget); + } + +} diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts index 8193132db1..c2df50b36a 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts @@ -29,13 +29,22 @@ import { DashboardToolbarComponent } from './dashboard-toolbar.component'; import { StatesControllerModule } from '@home/pages/dashboard/states/states-controller.module'; import { DashboardLayoutComponent } from './layout/dashboard-layout.component'; import { EditWidgetComponent } from './edit-widget.component'; +import { DashboardWidgetSelectComponent } from './dashboard-widget-select.component'; +import { AddWidgetDialogComponent } from './add-widget-dialog.component'; +import { ManageDashboardLayoutsDialogComponent } from './layout/manage-dashboard-layouts-dialog.component'; +import { SelectTargetLayoutDialogComponent } from './layout/select-target-layout-dialog.component'; +import { DashboardSettingsDialogComponent } from './dashboard-settings-dialog.component'; @NgModule({ entryComponents: [ DashboardFormComponent, DashboardTabsComponent, ManageDashboardCustomersDialogComponent, - MakeDashboardPublicDialogComponent + MakeDashboardPublicDialogComponent, + AddWidgetDialogComponent, + ManageDashboardLayoutsDialogComponent, + SelectTargetLayoutDialogComponent, + DashboardSettingsDialogComponent ], declarations: [ DashboardFormComponent, @@ -45,7 +54,12 @@ import { EditWidgetComponent } from './edit-widget.component'; DashboardToolbarComponent, DashboardPageComponent, DashboardLayoutComponent, - EditWidgetComponent + EditWidgetComponent, + DashboardWidgetSelectComponent, + AddWidgetDialogComponent, + ManageDashboardLayoutsDialogComponent, + SelectTargetLayoutDialogComponent, + DashboardSettingsDialogComponent ], imports: [ CommonModule, diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts index adb3fa2bfe..6d62a40b1c 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts @@ -132,26 +132,4 @@ export class EditWidgetComponent extends PageComponent implements OnInit, OnChan }; this.widgetFormGroup.reset({widgetConfig: this.widgetConfig}); } - - private createEntityAlias(alias: string, allowedEntityTypes: Array): Observable { - const singleEntityAlias: EntityAlias = {id: null, alias, filter: {resolveMultiple: false}}; - return this.dialog.open(EntityAliasDialogComponent, { - disableClose: true, - panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], - data: { - isAdd: true, - allowedEntityTypes, - entityAliases: this.dashboard.configuration.entityAliases, - alias: singleEntityAlias - } - }).afterClosed().pipe( - tap((entityAlias) => { - if (entityAlias) { - this.dashboard.configuration.entityAliases[entityAlias.id] = entityAlias; - this.aliasController.updateEntityAliases(this.dashboard.configuration.entityAliases); - } - }) - ); - } } diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.html index 85b3a2ce9e..8fbaa37d54 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.html +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.html @@ -17,14 +17,9 @@ -->
-
+
@@ -37,18 +32,12 @@ {{ 'dashboard.add-widget' | translate }}
- , private hotkeysService: HotkeysService, private translate: TranslateService, - private itembuffer: ItemBufferService) { + private itembuffer: ItemBufferService, + private sanitizer: DomSanitizer) { super(store); } @@ -165,54 +172,67 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo ); } - reload() { + private loadDashboardStyle() { + this.dashboardStyle = {'background-color': this.layoutCtx.gridSettings.backgroundColor, + 'background-repeat': 'no-repeat', + 'background-attachment': 'scroll', + 'background-size': this.layoutCtx.gridSettings.backgroundSizeMode || '100%', + 'background-position': '0% 0%'}; + this.backgroundImage = this.layoutCtx.gridSettings.backgroundImageUrl ? + this.sanitizer.bypassSecurityTrustStyle('url(' + this.layoutCtx.gridSettings.backgroundImageUrl + ')') : 'none'; } - setResizing(layoutVisibilityChanged: boolean) { + reload() { + this.loadDashboardStyle(); + this.dashboard.pauseChangeNotifications(); + setTimeout(() => { + this.dashboard.resumeChangeNotifications(); + this.dashboard.notifyLayoutUpdated(); + }, 0); } resetHighlight() { this.dashboard.resetHighlight(); } - highlightWidget(index: number, delay?: number) { - this.dashboard.highlightWidget(index, delay); + highlightWidget(widgetId: string, delay?: number) { + this.dashboard.highlightWidget(widgetId, delay); } - selectWidget(index: number, delay?: number) { - this.dashboard.selectWidget(index, delay); + selectWidget(widgetId: string, delay?: number) { + this.dashboard.selectWidget(widgetId, delay); } addWidget($event: Event) { this.layoutCtx.dashboardCtrl.addWidget($event, this.layoutCtx); } - onEditWidget($event: Event, widget: Widget, index: number): void { - this.layoutCtx.dashboardCtrl.editWidget($event, this.layoutCtx, widget, index); + onEditWidget($event: Event, widget: Widget): void { + this.layoutCtx.dashboardCtrl.editWidget($event, this.layoutCtx, widget); } - onExportWidget($event: Event, widget: Widget, index: number): void { - this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget, index); + onExportWidget($event: Event, widget: Widget): void { + this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget); } - onRemoveWidget($event: Event, widget: Widget, index: number): void { + onRemoveWidget($event: Event, widget: Widget): void { return this.layoutCtx.dashboardCtrl.removeWidget($event, this.layoutCtx, widget); } - onWidgetMouseDown($event: Event, widget: Widget, index: number): void { - this.layoutCtx.dashboardCtrl.widgetMouseDown($event, this.layoutCtx, widget, index); + onWidgetMouseDown($event: Event, widget: Widget): void { + this.layoutCtx.dashboardCtrl.widgetMouseDown($event, this.layoutCtx, widget); } - onWidgetClicked($event: Event, widget: Widget, index: number): void { - this.layoutCtx.dashboardCtrl.widgetClicked($event, this.layoutCtx, widget, index); + onWidgetClicked($event: Event, widget: Widget): void { + this.layoutCtx.dashboardCtrl.widgetClicked($event, this.layoutCtx, widget); } prepareDashboardContextMenu($event: Event): Array { return this.layoutCtx.dashboardCtrl.prepareDashboardContextMenu(this.layoutCtx); } - prepareWidgetContextMenu($event: Event, widget: Widget, index: number): Array { - return this.layoutCtx.dashboardCtrl.prepareWidgetContextMenu(this.layoutCtx, widget, index); + prepareWidgetContextMenu($event: Event, widget: Widget): Array { + return this.layoutCtx.dashboardCtrl.prepareWidgetContextMenu(this.layoutCtx, widget); } copyWidget($event: Event, widget: Widget) { diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/layout-button.scss b/ui-ngx/src/app/modules/home/pages/dashboard/layout/layout-button.scss new file mode 100644 index 0000000000..7d1b9d2512 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/layout-button.scss @@ -0,0 +1,31 @@ +/** + * 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. + */ +:host ::ng-deep { + button.tb-layout-button { + width: 100%; + max-width: 240px; + height: 100%; + .mat-button-wrapper { + padding: 40px; + line-height: 18px; + span { + font-size: 18px; + font-weight: 400; + white-space: normal; + } + } + } +} diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/layout.models.ts b/ui-ngx/src/app/modules/home/pages/dashboard/layout/layout.models.ts index 54b91a04d7..53478cdde5 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/layout/layout.models.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/layout.models.ts @@ -19,10 +19,9 @@ import { WidgetLayout } from '@shared/models/dashboard.models'; export interface ILayoutController { reload(); - setResizing(layoutVisibilityChanged: boolean); resetHighlight(); - highlightWidget(index: number, delay?: number); - selectWidget(index: number, delay?: number); + highlightWidget(widgetId: string, delay?: number); + selectWidget(widgetId: string, delay?: number); pasteWidget($event: MouseEvent); pasteWidgetReference($event: MouseEvent); } diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.html new file mode 100644 index 0000000000..eb0382187a --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.html @@ -0,0 +1,71 @@ + +
+ +

layout.manage

+ + + + + +
+
+
+ + {{ 'layout.main' | translate }} + + + {{ 'layout.right' | translate }} + +
+
+ + +
+
+
+
+ + + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.ts new file mode 100644 index 0000000000..15f38c0905 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/manage-dashboard-layouts-dialog.component.ts @@ -0,0 +1,125 @@ +/// +/// 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, Inject, OnInit, SkipSelf } from '@angular/core'; +import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms'; +import { Router } from '@angular/router'; +import { DialogComponent } from '@app/shared/components/dialog.component'; +import { Widget, widgetTypesData } from '@shared/models/widget.models'; +import { UtilsService } from '@core/services/utils.service'; +import { TranslateService } from '@ngx-translate/core'; +import { EntityService } from '@core/http/entity.service'; +import { Dashboard, DashboardLayoutId, DashboardStateLayouts } from '@app/shared/models/dashboard.models'; +import { IAliasController } from '@core/api/widget-api.models'; +import { WidgetConfigComponentData, WidgetInfo } from '@home/models/widget-component.models'; +import { deepClone, isDefined, isString } from '@core/utils'; +import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; +import { MatDialog } from '@angular/material/dialog'; +import { + DashboardSettingsDialogComponent, + DashboardSettingsDialogData +} from '@home/pages/dashboard/dashboard-settings-dialog.component'; + +export interface ManageDashboardLayoutsDialogData { + layouts: DashboardStateLayouts; +} + +@Component({ + selector: 'tb-manage-dashboard-layouts-dialog', + templateUrl: './manage-dashboard-layouts-dialog.component.html', + providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardLayoutsDialogComponent}], + styleUrls: ['./layout-button.scss'] +}) +export class ManageDashboardLayoutsDialogComponent extends DialogComponent + implements OnInit, ErrorStateMatcher { + + layoutsFormGroup: FormGroup; + + layouts: DashboardStateLayouts; + + submitted = false; + + constructor(protected store: Store, + protected router: Router, + @Inject(MAT_DIALOG_DATA) public data: ManageDashboardLayoutsDialogData, + @SkipSelf() private errorStateMatcher: ErrorStateMatcher, + public dialogRef: MatDialogRef, + private fb: FormBuilder, + private utils: UtilsService, + private dashboardUtils: DashboardUtilsService, + private translate: TranslateService, + private dialog: MatDialog) { + super(store, router, dialogRef); + + this.layouts = this.data.layouts; + this.layoutsFormGroup = this.fb.group({ + main: [{value: isDefined(this.layouts.main), disabled: true}, []], + right: [isDefined(this.layouts.right), []], + } + ); + for (const l of Object.keys(this.layoutsFormGroup.controls)) { + const control = this.layoutsFormGroup.controls[l]; + if (!this.layouts[l]) { + this.layouts[l] = this.dashboardUtils.createDefaultLayoutData(); + } + } + } + + ngOnInit(): void { + } + + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { + const originalErrorState = this.errorStateMatcher.isErrorState(control, form); + const customErrorState = !!(control && control.invalid && this.submitted); + return originalErrorState || customErrorState; + } + + openLayoutSettings(layoutId: DashboardLayoutId) { + const gridSettings = deepClone(this.layouts[layoutId].gridSettings); + this.dialog.open(DashboardSettingsDialogComponent, { + disableClose: true, + panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], + data: { + settings: null, + gridSettings + } + }).afterClosed().subscribe((data) => { + if (data && data.gridSettings) { + this.dashboardUtils.updateLayoutSettings(this.layouts[layoutId], data.gridSettings); + this.layoutsFormGroup.markAsDirty(); + } + }); + } + + cancel(): void { + this.dialogRef.close(null); + } + + save(): void { + this.submitted = true; + for (const l of Object.keys(this.layoutsFormGroup.controls)) { + const control = this.layoutsFormGroup.controls[l]; + if (!control.value) { + delete this.layouts[l]; + } + } + this.dialogRef.close(this.layouts); + } +} diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/select-target-layout-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/layout/select-target-layout-dialog.component.html new file mode 100644 index 0000000000..712bf47c35 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/select-target-layout-dialog.component.html @@ -0,0 +1,48 @@ + +
+ +

layout.select

+ + + + + +
+
+
+ + +
+
+
+
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/select-target-layout-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/layout/select-target-layout-dialog.component.ts new file mode 100644 index 0000000000..29a4b28729 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/select-target-layout-dialog.component.ts @@ -0,0 +1,50 @@ +/// +/// 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 } from '@angular/core'; +import { MatDialogRef } from '@angular/material'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { Router } from '@angular/router'; +import { DialogComponent } from '@app/shared/components/dialog.component'; +import { DashboardLayoutId } from '@app/shared/models/dashboard.models'; + +@Component({ + selector: 'tb-select-target-layout-dialog', + templateUrl: './select-target-layout-dialog.component.html', + styleUrls: ['./layout-button.scss'] +}) +export class SelectTargetLayoutDialogComponent extends DialogComponent + implements OnInit { + + constructor(protected store: Store, + protected router: Router, + public dialogRef: MatDialogRef) { + super(store, router, dialogRef); + } + + ngOnInit(): void { + } + + selectLayout(layoutId: DashboardLayoutId) { + this.dialogRef.close(layoutId); + } + + cancel(): void { + this.dialogRef.close(null); + } + +} diff --git a/ui-ngx/src/app/shared/components/image-input.component.html b/ui-ngx/src/app/shared/components/image-input.component.html new file mode 100644 index 0000000000..6b306552ba --- /dev/null +++ b/ui-ngx/src/app/shared/components/image-input.component.html @@ -0,0 +1,45 @@ + +
+ + +
+
+
dashboard.no-image
+ +
+
+ +
+
+ + +
+
+ +
diff --git a/ui-ngx/src/app/shared/components/image-input.component.scss b/ui-ngx/src/app/shared/components/image-input.component.scss new file mode 100644 index 0000000000..c0480d9a00 --- /dev/null +++ b/ui-ngx/src/app/shared/components/image-input.component.scss @@ -0,0 +1,104 @@ +/** + * 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 "../../../scss/constants"; + +$previewSize: 100px !default; + +:host { + + .tb-container { + margin-top: 0px; + label.tb-title { + display: block; + padding-bottom: 8px; + } + } + + .tb-image-select-container { + position: relative; + width: 100%; + height: $previewSize; + } + + .tb-image-preview { + width: auto; + max-width: $previewSize; + height: auto; + max-height: $previewSize; + } + + .tb-image-preview-container { + position: relative; + float: left; + width: $previewSize; + height: $previewSize; + margin-right: 12px; + vertical-align: top; + border: solid 1px; + + div { + width: 100%; + font-size: 18px; + text-align: center; + } + + div, + .tb-image-preview { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + } + + .tb-image-clear-container { + position: relative; + float: right; + width: 48px; + height: $previewSize; + } + + .tb-image-clear-btn { + position: absolute !important; + top: 50%; + transform: translate(0%, -50%) !important; + } + + .file-input { + display: none; + } + + .tb-flow-drop { + position: relative; + height: $previewSize; + overflow: hidden; + border: dashed 2px; + + label { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 100%; + font-size: 16px; + text-align: center; + + @media #{$mat-gt-sm} { + font-size: 24px; + } + } + } +} diff --git a/ui-ngx/src/app/shared/components/image-input.component.ts b/ui-ngx/src/app/shared/components/image-input.component.ts new file mode 100644 index 0000000000..1b54aaa542 --- /dev/null +++ b/ui-ngx/src/app/shared/components/image-input.component.ts @@ -0,0 +1,143 @@ +/// +/// 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, ElementRef, forwardRef, Input, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { DataKey, DatasourceType } from '@shared/models/widget.models'; +import { + ControlValueAccessor, + FormBuilder, + FormControl, + FormGroup, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + Validator, + Validators +} from '@angular/forms'; +import { UtilsService } from '@core/services/utils.service'; +import { TranslateService } from '@ngx-translate/core'; +import { MatDialog } from '@angular/material/dialog'; +import { EntityService } from '@core/http/entity.service'; +import { DataKeysCallbacks } from '@home/components/widget/data-keys.component.models'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; +import { Observable, of, Subscription } from 'rxjs'; +import { map, mergeMap, tap } from 'rxjs/operators'; +import { alarmFields } from '@shared/models/alarm.models'; +import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { DialogService } from '@core/services/dialog.service'; +import { FlowDirective } from '@flowjs/ngx-flow'; +import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; + +@Component({ + selector: 'tb-image-input', + templateUrl: './image-input.component.html', + styleUrls: ['./image-input.component.scss'], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ImageInputComponent), + multi: true + } + ] +}) +export class ImageInputComponent extends PageComponent implements AfterViewInit, OnDestroy, ControlValueAccessor { + + @Input() + label: string; + + private requiredValue: boolean; + get required(): boolean { + return this.requiredValue; + } + @Input() + set required(value: boolean) { + const newVal = coerceBooleanProperty(value); + if (this.requiredValue !== newVal) { + this.requiredValue = newVal; + } + } + + @Input() + disabled: boolean; + + imageUrl: string; + safeImageUrl: SafeUrl; + + @ViewChild('flow', {static: true}) + flow: FlowDirective; + + autoUploadSubscription: Subscription; + + private propagateChange = null; + + constructor(protected store: Store, + private sanitizer: DomSanitizer) { + super(store); + } + + ngAfterViewInit() { + this.autoUploadSubscription = this.flow.events$.subscribe(event => { + if (event.type === 'fileAdded') { + const file = (event.event[0] as flowjs.FlowFile).file; + const reader = new FileReader(); + reader.onload = (loadEvent) => { + if (typeof reader.result === 'string' && reader.result.startsWith('data:image/')) { + this.imageUrl = reader.result; + this.safeImageUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageUrl); + this.updateModel(); + } + }; + reader.readAsDataURL(file); + } + }); + } + + ngOnDestroy() { + this.autoUploadSubscription.unsubscribe(); + } + + registerOnChange(fn: any): void { + this.propagateChange = fn; + } + + registerOnTouched(fn: any): void { + } + + setDisabledState(isDisabled: boolean): void { + this.disabled = isDisabled; + } + + writeValue(value: string): void { + this.imageUrl = value; + if (this.imageUrl) { + this.safeImageUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageUrl); + } else { + this.safeImageUrl = null; + } + } + + private updateModel() { + this.propagateChange(this.imageUrl); + } + + clearImage() { + this.imageUrl = null; + this.safeImageUrl = null; + this.updateModel(); + } +} diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html index b7d093706e..d8e94e6227 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html @@ -16,6 +16,7 @@ -->