From f579add9a777237acb1fb7b94e11f99838000ab0 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Thu, 31 Oct 2019 18:33:51 +0200 Subject: [PATCH] Layout improvements. --- .../dashboard/dashboard.component.ts | 4 + .../action/manage-widget-actions.component.ts | 18 +- .../widget/data-keys.component.html | 2 +- .../widget/data-keys.component.scss | 19 +- .../widget/legend-config-panel.component.html | 8 +- .../widget/widget-config.component.html | 5 +- .../widget/widget-config.component.scss | 3 + .../widget/widget-config.component.ts | 8 +- .../dashboard/dashboard-page.component.html | 184 +++++++++--------- .../dashboard/dashboard-page.component.scss | 38 +--- .../dashboard/dashboard-page.component.ts | 29 +++ .../pages/dashboard/dashboard-page.models.ts | 11 ++ .../pages/dashboard/edit-widget.component.ts | 3 + .../layout/dashboard-layout.component.html | 7 +- .../shared/components/js-func.component.html | 4 +- .../json-object-edit.component.html | 2 +- .../mat-chip-draggable.directive.ts | 4 +- .../time/timewindow-panel.component.html | 170 ++++++++-------- 18 files changed, 279 insertions(+), 240 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index ee18b6adc9..47ef73c300 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -184,6 +184,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo swap: false, maxRows: 100, minCols: this.columns ? this.columns : 24, + maxCols: 3000, + maxItemCols: 1000, + maxItemRows: 1000, + maxItemArea: 1000000, outerMargin: true, margin: this.margin ? this.margin : 10, minItemCols: 1, diff --git a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts index 60bd8bb7eb..f92a8c0c7d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/action/manage-widget-actions.component.ts @@ -299,14 +299,16 @@ export class ManageWidgetActionsComponent extends PageComponent implements OnIni writeValue(obj: WidgetActionsData): void { this.innerValue = obj; - setTimeout(() => { - this.dataSource.setActions(this.innerValue); - if (this.viewsInited) { - this.resetSortAndFilter(true); - } else { - this.dirtyValue = true; - } - }, 0); + if (this.innerValue) { + setTimeout(() => { + this.dataSource.setActions(this.innerValue); + if (this.viewsInited) { + this.resetSortAndFilter(true); + } else { + this.dirtyValue = true; + } + }, 0); + } } private onActionsUpdated() { diff --git a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html index 56d4311485..82e0f3b8c6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/data-keys.component.html @@ -29,7 +29,7 @@
-
+
- + {{ 'legend.show-min' | translate }} - + {{ 'legend.show-max' | translate }} - + {{ 'legend.show-avg' | translate }} - + {{ 'legend.show-total' | translate }} diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html index a43d6f3b76..2fcdb0a9af 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html @@ -22,11 +22,10 @@
- + {{ 'widget-config.use-dashboard-timewindow' | translate }} - + {{ 'widget-config.display-timewindow' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss index d3b160ef9e..7b9d9a880a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss @@ -26,6 +26,9 @@ } .tb-datasource-type { min-width: 110px; + @media #{$mat-gt-sm} { + max-width: 110px; + } } .tb-datasource { @media #{$mat-gt-sm} { diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts index 2b221be827..e0cdc00076 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts @@ -163,6 +163,10 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont } else { this.datasourceTypes = [DatasourceType.function, DatasourceType.entity]; } + this.dataSettings = this.fb.group({}); + this.targetDeviceSettings = this.fb.group({}); + this.alarmSourceSettings = this.fb.group({}); + this.advancedSettings = this.fb.group({}); this.widgetSettings = this.fb.group({ title: [null, []], showTitleIcon: [null, []], @@ -574,7 +578,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont } public displayAdvanced(): boolean { - return this.modelValue.settingsSchema && this.modelValue.settingsSchema.schema; + return this.modelValue && this.modelValue.settingsSchema && this.modelValue.settingsSchema.schema; } public removeDatasource(index: number) { @@ -772,7 +776,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont valid: false } }; - } else { + } else if (this.modelValue) { const config = this.modelValue.config; if (this.widgetType === widgetType.rpc && this.modelValue.isDataEnabled) { if (!config.targetDeviceAliasIds || !config.targetDeviceAliasIds.length) { 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 7a13498ee7..0db11b7fdc 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 @@ -120,59 +120,90 @@ 'tb-dashboard-toolbar-opened': toolbarOpened, 'tb-dashboard-toolbar-animated': isToolbarOpenedAnimate, 'tb-dashboard-toolbar-closed': !toolbarOpened }"> -
-

{{ dashboard.title }}

- - dashboard.title - - -
-
- - - - - - - - - - -
- + + +
+

{{ dashboard.title }}

+ + dashboard.title + + +
+ + + + + + + + + + +
+ + + + +
+
+ Powered by Thingsboard v.{{ thingsboardVersion }} +
+ -
+ [dashboard]="dashboard" + [aliasController]="dashboardCtx.aliasController" + [widgetEditMode]="widgetEditMode" + [widget]="editingWidget" + [widgetLayout]="editingWidgetLayout"> - - - - -
+ [aliasController]="dashboardCtx.aliasController" + [widgetsBundle]="widgetsBundle" + (widgetSelected)="addWidgetFromType($event)"> - -
- - - - -
- -
- Powered by Thingsboard v.{{ thingsboardVersion }}
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.scss b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.scss index f85f59b5ac..322334c4a3 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.scss +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.scss @@ -32,9 +32,9 @@ div.tb-dashboard-page { background-color: #eee; } section.tb-dashboard-title { - position: absolute; - top: 0; - left: 20px; + position: relative; + padding-left: 20px; + max-height: 60px; mat-form-field { .mat-form-field-infix { width: 100%; @@ -47,17 +47,6 @@ div.tb-dashboard-page { letter-spacing: .005em; } } - div.tb-padded { - top: 60px; - } - - section.tb-padded { - top: 60px; - } - - div.tb-shrinked { - width: 40%; - } section.tb-dashboard-toolbar { position: absolute; @@ -106,21 +95,16 @@ div.tb-dashboard-page { transition: margin-top .3s cubic-bezier(.55, 0, .55, .2) .2s; } } + } - .tb-dashboard-layouts { - /*md-backdrop { - z-index: 1; - }*/ - #tb-right-layout { - mat-drawer { - z-index: 1; - } + mat-drawer-container.tb-dashboard-drawer-container { + mat-drawer-container.tb-dashboard-layouts { + width: 100%; + &.tb-shrinked { + width: 40%; } } - } - mat-drawer-container.tb-widget-details-sidenav { - position: initial; mat-drawer.tb-details-drawer { @media #{$mat-gt-sm} { width: 85% !important; @@ -136,10 +120,6 @@ div.tb-dashboard-page { } } - mat-drawer-container.tb-select-widget-sidenav { - position: initial; - } - section.tb-powered-by-footer { position: absolute; right: 25px; diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts index ae6f9fae38..b541f42ed3 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/dashboard-page.component.ts @@ -104,9 +104,11 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC isFullscreen = false; isEdit = false; isEditingWidget = false; + isEditingWidgetClosed = true; isMobile = !this.breakpointObserver.isMatched(MediaBreakpoints['gt-sm']); forceDashboardMobileMode = false; isAddingWidget = false; + isAddingWidgetClosed = true; widgetsBundle: WidgetsBundle = null; isToolbarOpened = false; @@ -284,8 +286,10 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.isFullscreen = false; this.isEdit = false; this.isEditingWidget = false; + this.isEditingWidgetClosed = true; this.forceDashboardMobileMode = false; this.isAddingWidget = false; + this.isAddingWidgetClosed = true; this.widgetsBundle = null; this.isToolbarOpened = false; @@ -694,6 +698,31 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.isAddingWidget = false; } + detailsDrawerOpenedStart() { + if (this.isEditingWidget) { + this.isEditingWidgetClosed = false; + } else if (this.isAddingWidget) { + this.isAddingWidgetClosed = false; + } + setTimeout(() => { + this.cd.detach(); + }, 0); + } + + detailsDrawerOpened() { + this.cd.reattach(); + } + + detailsDrawerClosedStart() { + this.cd.detach(); + } + + detailsDrawerClosed() { + this.isEditingWidgetClosed = true; + this.isAddingWidgetClosed = true; + this.cd.reattach(); + } + private addWidgetToLayout(widget: Widget, layoutId: DashboardLayoutId) { this.dashboardUtils.addWidgetToLayout(this.dashboard, this.dashboardCtx.state, layoutId, widget); this.layouts[layoutId].layoutCtx.widgets.addWidgetId(widget.id); 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 490b8d2b89..278eb9241d 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 @@ -77,6 +77,8 @@ export class LayoutWidgetsArray implements Iterable { private widgetIds: string[] = []; private pointer = 0; + private loaded = false; + constructor(private dashboard: Dashboard) { } @@ -84,8 +86,17 @@ export class LayoutWidgetsArray implements Iterable { return this.widgetIds.length; } + isLoading() { + return !this.loaded; + } + + isEmpty() { + return this.loaded && this.widgetIds.length === 0; + } + setWidgetIds(widgetIds: string[]) { this.widgetIds = widgetIds; + this.loaded = true; } addWidgetId(widgetId: string) { 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 6d62a40b1c..9013913d4c 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 @@ -102,6 +102,9 @@ export class EditWidgetComponent extends PageComponent implements OnInit, OnChan } private loadWidgetConfig() { + if (!this.widget) { + return; + } const widgetInfo = this.widgetComponentService.getInstantWidgetInfo(this.widget); const rawSettingsSchema = widgetInfo.typeSettingsSchema || widgetInfo.settingsSchema; const rawDataKeySettingsSchema = widgetInfo.typeDataKeySettingsSchema || widgetInfo.dataKeySettingsSchema; 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 8fbaa37d54..61f122754a 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 @@ -16,10 +16,15 @@ --> +
+ + +
-
diff --git a/ui-ngx/src/app/shared/components/js-func.component.html b/ui-ngx/src/app/shared/components/js-func.component.html index 182d560bfc..330fd269b6 100644 --- a/ui-ngx/src/app/shared/components/js-func.component.html +++ b/ui-ngx/src/app/shared/components/js-func.component.html @@ -31,8 +31,8 @@ {{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}
-
-
+
+
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html index 050214bad0..b0a966a31f 100644 --- a/ui-ngx/src/app/shared/components/json-object-edit.component.html +++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html @@ -30,7 +30,7 @@ {{ fullscreen ? 'fullscreen_exit' : 'fullscreen' }}
-
diff --git a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts b/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts index 2f624b8984..8fa1cd86d5 100644 --- a/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts +++ b/ui-ngx/src/app/shared/components/mat-chip-draggable.directive.ts @@ -144,7 +144,7 @@ class DraggableChip { const dataTransfer = event.dataTransfer; dataTransfer.effectAllowed = 'copyMove'; dataTransfer.dropEffect = 'move'; - dataTransfer.setData('text/plain', this.index() + ''); + dataTransfer.setData('text', this.index() + ''); } } @@ -222,7 +222,7 @@ class DraggableChip { return; } event = (event as any).originalEvent || event; - const droppedItemIndex = parseInt(event.dataTransfer.getData('text/plain'), 10); + const droppedItemIndex = parseInt(event.dataTransfer.getData('text'), 10); const currentIndex = this.index(); let newIndex; if (this.dropPosition === 'before') { diff --git a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html index 5f85596833..a1c86ee82b 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html +++ b/ui-ngx/src/app/shared/components/time/timewindow-panel.component.html @@ -17,94 +17,92 @@ -->
-
-
- - -
- -
- - -
- - -
- -
- - -
- timewindow.time-period - -
- - -
- - -
- - aggregation.function - - - {{ aggregationTypesTranslations.get(aggregation) | translate }} - - - -
- aggregation.limit - - - - - +
+ + +
+
+ + +
+ + +
+ +
+ + +
+ timewindow.time-period + +
+ + +
+ + +
+ + aggregation.function + + + {{ aggregationTypesTranslations.get(aggregation) | translate }} + + + +
+ aggregation.limit + + + + +
-
- - -
-
- - -
-
+
+
+ + +
+
+ + +