From 3cee41745194f0ba8af6943412fda032357b0330 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 25 Sep 2019 19:37:29 +0300 Subject: [PATCH] UI: Dashboard implementation --- ui-ngx/src/app/app.component.ts | 8 +- .../app/core/services/item-buffer.service.ts | 35 +++ .../src/app/core/settings/settings.utils.ts | 20 +- ui-ngx/src/app/core/utils.ts | 14 +- .../dashboard/dashboard.component.html | 36 +++ .../dashboard/dashboard.component.scss | 4 + .../dashboard/dashboard.component.ts | 179 +++++++---- .../components/details-panel.component.html | 4 +- .../components/details-panel.component.ts | 17 +- .../home/components/home-components.module.ts | 7 +- .../widget/dynamic-widget.component.ts | 2 +- .../widget/widget-component.service.ts | 11 +- .../widget/widget-config.component.html | 43 +++ .../widget/widget-config.component.scss | 32 ++ .../widget/widget-config.component.ts | 282 +++++++++++++++++ .../components/widget/widget.component.ts | 15 +- .../home/models/dashboard-component.models.ts | 284 ++++++++++++++---- .../home/models/widget-component.models.ts | 10 +- .../dashboard/dashboard-page.component.html | 41 ++- .../dashboard/dashboard-page.component.scss | 20 +- .../dashboard/dashboard-page.component.ts | 256 +++++++++++++++- .../pages/dashboard/dashboard-page.models.ts | 19 ++ .../home/pages/dashboard/dashboard.module.ts | 4 +- .../dashboard/edit-widget.component.html | 32 ++ .../pages/dashboard/edit-widget.component.ts | 115 +++++++ .../layout/dashboard-layout.component.html | 2 + .../layout/dashboard-layout.component.ts | 161 +++++++++- .../pages/dashboard/layout/layout.models.ts | 7 + ui-ngx/src/app/shared/models/constants.ts | 8 +- ui-ngx/src/app/shared/models/widget.models.ts | 16 +- .../app/shared/pipe/keyboard-shortcut.pipe.ts | 49 +++ ui-ngx/src/app/shared/shared.module.ts | 5 +- ui-ngx/src/theme.scss | 9 + 33 files changed, 1569 insertions(+), 178 deletions(-) create mode 100644 ui-ngx/src/app/core/services/item-buffer.service.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/widget-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts create mode 100644 ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html create mode 100644 ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts create mode 100644 ui-ngx/src/app/shared/pipe/keyboard-shortcut.pipe.ts diff --git a/ui-ngx/src/app/app.component.ts b/ui-ngx/src/app/app.component.ts index 19a06c3d0b..309e9a2150 100644 --- a/ui-ngx/src/app/app.component.ts +++ b/ui-ngx/src/app/app.component.ts @@ -49,9 +49,13 @@ export class AppComponent implements OnInit { } setupTranslate() { - console.log(`Supported Langs: ${env.supportedLangs}`); + if (!env.production) { + console.log(`Supported Langs: ${env.supportedLangs}`); + } this.translate.addLangs(env.supportedLangs); - console.log(`Default Lang: ${env.defaultLang}`); + if (!env.production) { + console.log(`Default Lang: ${env.defaultLang}`); + } this.translate.setDefaultLang(env.defaultLang); } diff --git a/ui-ngx/src/app/core/services/item-buffer.service.ts b/ui-ngx/src/app/core/services/item-buffer.service.ts new file mode 100644 index 0000000000..edcca2701b --- /dev/null +++ b/ui-ngx/src/app/core/services/item-buffer.service.ts @@ -0,0 +1,35 @@ +/// +/// 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 { Injectable } from '@angular/core'; +import { Dashboard, DashboardLayoutId } from '@app/shared/models/dashboard.models'; + +@Injectable({ + providedIn: 'root' +}) +export class ItemBufferService { + constructor() {} + + public hasWidget(): boolean { + // TODO: + return false; + } + + public canPasteWidgetReference(dashboard: Dashboard, state: string, layout: DashboardLayoutId): boolean { + // TODO: + return false; + } +} diff --git a/ui-ngx/src/app/core/settings/settings.utils.ts b/ui-ngx/src/app/core/settings/settings.utils.ts index 1f7a24d7d5..c5798ac793 100644 --- a/ui-ngx/src/app/core/settings/settings.utils.ts +++ b/ui-ngx/src/app/core/settings/settings.utils.ts @@ -14,25 +14,31 @@ /// limitations under the License. /// -import { environment } from '@env/environment'; +import { environment as env } from '@env/environment'; import { TranslateService } from '@ngx-translate/core'; export function updateUserLang(translate: TranslateService, userLang: string) { let targetLang = userLang; - console.log(`User lang: ${targetLang}`); + if (!env.production) { + console.log(`User lang: ${targetLang}`); + } if (!targetLang) { targetLang = translate.getBrowserCultureLang(); - console.log(`Fallback to browser lang: ${targetLang}`); + if (!env.production) { + console.log(`Fallback to browser lang: ${targetLang}`); + } } const detectedSupportedLang = detectSupportedLang(targetLang); - console.log(`Detected supported lang: ${detectedSupportedLang}`); + if (!env.production) { + console.log(`Detected supported lang: ${detectedSupportedLang}`); + } translate.use(detectedSupportedLang); } function detectSupportedLang(targetLang: string): string { const langTag = (targetLang || '').split('-').join('_'); if (langTag.length) { - if (environment.supportedLangs.indexOf(langTag) > -1) { + if (env.supportedLangs.indexOf(langTag) > -1) { return langTag; } else { const parts = langTag.split('_'); @@ -42,7 +48,7 @@ function detectSupportedLang(targetLang: string): string { } else { lang = langTag; } - const foundLangs = environment.supportedLangs.filter( + const foundLangs = env.supportedLangs.filter( (supportedLang: string) => { const supportedLangParts = supportedLang.split('_'); return supportedLangParts[0] === lang; @@ -53,5 +59,5 @@ function detectSupportedLang(targetLang: string): string { } } } - return environment.defaultLang; + return env.defaultLang; } diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 6b8846f8d3..192387f853 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -61,11 +61,15 @@ export function animatedScroll(element: HTMLElement, scrollTop: number, delay?: const duration = delay ? delay : 0; const remaining = to - start; const animateScroll = () => { - currentTime += increment; - const val = easeInOut(currentTime, start, remaining, duration); - element.scrollTop = val; - if (currentTime < duration) { - setTimeout(animateScroll, increment); + if (duration === 0) { + element.scrollTop = to; + } else { + currentTime += increment; + const val = easeInOut(currentTime, start, remaining, duration); + element.scrollTop = val; + if (currentTime < duration) { + setTimeout(animateScroll, increment); + } } }; animateScroll(); 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 467ce77fb5..135f397b20 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 @@ -24,6 +24,42 @@
+
+
+ + +
+ +
+ + +
+
+ + +
+ +
+ +
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.scss b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.scss index 642cec4192..b903b6fb2b 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.scss +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.scss @@ -123,3 +123,7 @@ div.tb-widget { opacity: .5; } } + +.tb-dashboard-context-menu-items { + min-width: 256px; +} 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 d1c5fe976e..605b2d43eb 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 @@ -17,13 +17,14 @@ import { AfterViewInit, Component, + DoCheck, Input, + IterableDiffers, + KeyValueDiffers, OnChanges, OnInit, - QueryList, SimpleChanges, - ViewChild, - ViewChildren + ViewChild } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; @@ -32,16 +33,15 @@ import { AuthUser } from '@shared/models/user.model'; import { getCurrentAuthUser } from '@core/auth/auth.selectors'; import { Timewindow, toHistoryTimewindow } from '@shared/models/time/time.models'; import { TimeService } from '@core/services/time.service'; -import { GridsterComponent, GridsterConfig, GridsterItemComponent } from 'angular-gridster2'; +import { GridsterComponent, GridsterConfig } from 'angular-gridster2'; import { DashboardCallbacks, DashboardWidget, + DashboardWidgets, IDashboardComponent, - WidgetsData, - DashboardWidgets + WidgetPosition } from '../../models/dashboard-component.models'; -import { merge, Observable, ReplaySubject, Subject } from 'rxjs'; -import { map, share, tap } from 'rxjs/operators'; +import { ReplaySubject, Subject } from 'rxjs'; import { WidgetLayout, WidgetLayouts } from '@shared/models/dashboard.models'; import { DialogService } from '@core/services/dialog.service'; import { animatedScroll, deepClone, isDefined } from '@app/core/utils'; @@ -49,13 +49,14 @@ import { BreakpointObserver } from '@angular/cdk/layout'; import { MediaBreakpoints } from '@shared/models/constants'; import { IAliasController, IStateController } from '@app/core/api/widget-api.models'; import { Widget } from '@app/shared/models/widget.models'; +import { MatMenuTrigger } from '@angular/material'; @Component({ selector: 'tb-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) -export class DashboardComponent extends PageComponent implements IDashboardComponent, OnInit, AfterViewInit, OnChanges { +export class DashboardComponent extends PageComponent implements IDashboardComponent, DoCheck, OnInit, AfterViewInit, OnChanges { authUser: AuthUser; @@ -130,25 +131,38 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo gridsterOpts: GridsterConfig; - highlightedMode = false; - highlightedWidget: DashboardWidget = null; - selectedWidget: DashboardWidget = null; - isWidgetExpanded = false; isMobileSize = false; @ViewChild('gridster', {static: true}) gridster: GridsterComponent; - @ViewChildren(GridsterItemComponent) gridsterItems: QueryList; + @ViewChild('dashboardMenuTrigger', {static: true}) dashboardMenuTrigger: MatMenuTrigger; + + dashboardMenuPosition = { x: '0px', y: '0px' }; + + dashboardContextMenuEvent: MouseEvent; + + @ViewChild('widgetMenuTrigger', {static: true}) widgetMenuTrigger: MatMenuTrigger; + + widgetMenuPosition = { x: '0px', y: '0px' }; + + widgetContextMenuEvent: MouseEvent; dashboardLoading = true; - dashboardWidgets = new DashboardWidgets(this); + dashboardWidgets = new DashboardWidgets(this, + this.differs.find([]).create((index, item) => { + return item; + }), + this.kvDiffers.find([]).create() + ); constructor(protected store: Store, private timeService: TimeService, private dialogService: DialogService, - private breakpointObserver: BreakpointObserver) { + private breakpointObserver: BreakpointObserver, + private differs: IterableDiffers, + private kvDiffers: KeyValueDiffers) { super(store); this.authUser = getCurrentAuthUser(store); } @@ -175,7 +189,10 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo defaultItemRows: 6, resizable: {enabled: this.isEdit}, draggable: {enabled: this.isEdit}, - itemChangeCallback: item => this.dashboardWidgets.sortWidgets() + itemChangeCallback: item => this.dashboardWidgets.sortWidgets(), + itemInitCallback: (item, itemComponent) => { + (itemComponent.item as DashboardWidget).gridsterItemComponent = itemComponent; + } }; this.updateMobileOpts(); @@ -184,12 +201,17 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo .observe(MediaBreakpoints['gt-sm']).subscribe( () => { this.updateMobileOpts(); + this.notifyGridsterOptionsChanged(); } ); this.updateWidgets(); } + ngDoCheck() { + this.dashboardWidgets.doCheck(); + } + ngOnChanges(changes: SimpleChanges): void { let updateMobileOpts = false; let updateLayoutOpts = false; @@ -206,6 +228,8 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo updateEditingOpts = true; } else if (['widgets', 'widgetLayouts'].includes(propName)) { updateWidgets = true; + } else if (propName === 'dashboardTimewindow') { + this.dashboardTimewindowChangedSubject.next(this.dashboardTimewindow); } } } @@ -259,14 +283,34 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo } } - openDashboardContextMenu($event: Event) { - // TODO: - // this.dialogService.todo(); + openDashboardContextMenu($event: MouseEvent) { + if (this.callbacks && this.callbacks.prepareDashboardContextMenu) { + const items = this.callbacks.prepareDashboardContextMenu($event); + if (items && items.length) { + $event.preventDefault(); + $event.stopPropagation(); + this.dashboardContextMenuEvent = $event; + this.dashboardMenuPosition.x = $event.clientX + 'px'; + this.dashboardMenuPosition.y = $event.clientY + 'px'; + this.dashboardMenuTrigger.menuData = { items }; + this.dashboardMenuTrigger.openMenu(); + } + } } - openWidgetContextMenu($event: Event, widget: DashboardWidget) { - // TODO: - // this.dialogService.todo(); + openWidgetContextMenu($event: MouseEvent, widget: DashboardWidget) { + if (this.callbacks && this.callbacks.prepareWidgetContextMenu) { + const items = this.callbacks.prepareWidgetContextMenu($event, widget.widget, widget.widgetIndex); + if (items && items.length) { + $event.preventDefault(); + $event.stopPropagation(); + this.widgetContextMenuEvent = $event; + this.widgetMenuPosition.x = $event.clientX + 'px'; + this.widgetMenuPosition.y = $event.clientY + 'px'; + this.widgetMenuTrigger.menuData = { items, widget: widget.widget }; + this.widgetMenuTrigger.openMenu(); + } + } } onWidgetFullscreenChanged(expanded: boolean, widget: DashboardWidget) { @@ -275,13 +319,13 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo widgetMouseDown($event: Event, widget: DashboardWidget) { if (this.callbacks && this.callbacks.onWidgetMouseDown) { - this.callbacks.onWidgetMouseDown($event, widget.widget); + this.callbacks.onWidgetMouseDown($event, widget.widget, widget.widgetIndex); } } widgetClicked($event: Event, widget: DashboardWidget) { if (this.callbacks && this.callbacks.onWidgetClicked) { - this.callbacks.onWidgetClicked($event, widget.widget); + this.callbacks.onWidgetClicked($event, widget.widget, widget.widgetIndex); } } @@ -290,7 +334,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo $event.stopPropagation(); } if (this.isEditActionEnabled && this.callbacks && this.callbacks.onEditWidget) { - this.callbacks.onEditWidget($event, widget.widget); + this.callbacks.onEditWidget($event, widget.widget, widget.widgetIndex); } } @@ -299,7 +343,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo $event.stopPropagation(); } if (this.isExportActionEnabled && this.callbacks && this.callbacks.onExportWidget) { - this.callbacks.onExportWidget($event, widget.widget); + this.callbacks.onExportWidget($event, widget.widget, widget.widgetIndex); } } @@ -308,56 +352,81 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo $event.stopPropagation(); } if (this.isRemoveActionEnabled && this.callbacks && this.callbacks.onRemoveWidget) { - this.callbacks.onRemoveWidget($event, widget.widget).subscribe( - (result) => { - if (result) { - this.dashboardWidgets.removeWidget(widget.widget); - } - } - ); + this.callbacks.onRemoveWidget($event, widget.widget, widget.widgetIndex); } } - highlightWidget(widget: DashboardWidget, delay?: number) { - if (!this.highlightedMode || this.highlightedWidget !== widget) { - this.highlightedMode = true; - this.highlightedWidget = widget; - this.scrollToWidget(widget, delay); + highlightWidget(index: number, delay?: number) { + const highlighted = this.dashboardWidgets.highlightWidget(index); + if (highlighted) { + this.scrollToWidget(highlighted, delay); } } - selectWidget(widget: DashboardWidget, delay?: number) { - if (this.selectedWidget !== widget) { - this.selectedWidget = widget; - this.scrollToWidget(widget, delay); + selectWidget(index: number, delay?: number) { + const selected = this.dashboardWidgets.selectWidget(index); + if (selected) { + this.scrollToWidget(selected, delay); } } + getSelectedWidget(): Widget { + const dashboardWidget = this.dashboardWidgets.getSelectedWidget(); + return dashboardWidget ? dashboardWidget.widget : null; + } + + getEventGridPosition(event: Event): WidgetPosition { + const pos: WidgetPosition = { + row: 0, + column: 0 + }; + const parentElement = this.gridster.el as HTMLElement; + let pageX = 0; + let pageY = 0; + if (event instanceof MouseEvent) { + pageX = event.pageX; + pageY = event.pageY; + } + const x = pageX - parentElement.offsetLeft + parentElement.scrollLeft; + const y = pageY - parentElement.offsetTop + parentElement.scrollTop; + pos.row = this.gridster.pixelsToPositionY(y, Math.floor); + pos.column = this.gridster.pixelsToPositionX(x, Math.floor); + return pos; + } + resetHighlight() { - this.highlightedMode = false; - this.highlightedWidget = null; - this.selectedWidget = null; + const highlighted = this.dashboardWidgets.resetHighlight(); + if (highlighted) { + setTimeout(() => { + this.scrollToWidget(highlighted, 0); + }, 0); + } } isHighlighted(widget: DashboardWidget) { - return (this.highlightedMode && this.highlightedWidget === widget) || (this.selectedWidget === widget); + return this.dashboardWidgets.isHighlighted(widget); } isNotHighlighted(widget: DashboardWidget) { - return this.highlightedMode && this.highlightedWidget !== widget; + return this.dashboardWidgets.isNotHighlighted(widget); } - scrollToWidget(widget: DashboardWidget, delay?: number) { - if (this.gridsterItems) { - const gridsterItem = this.gridsterItems.find((item => item.item === widget)); - const offset = (this.gridster.curHeight - gridsterItem.height) / 2; - let scrollTop = gridsterItem.top; + private scrollToWidget(widget: DashboardWidget, delay?: number) { + const parentElement = this.gridster.el as HTMLElement; + widget.gridsterItemComponent$().subscribe((gridsterItem) => { + const gridsterItemElement = gridsterItem.el as HTMLElement; + const offset = (parentElement.clientHeight - gridsterItemElement.clientHeight) / 2; + let scrollTop; + if (this.isMobileSize) { + scrollTop = gridsterItemElement.offsetTop; + } else { + scrollTop = scrollTop = gridsterItem.top; + } if (offset > 0) { scrollTop -= offset; } - const parentElement = this.gridster.el as HTMLElement; animatedScroll(parentElement, scrollTop, delay); - } + }); } private updateMobileOpts() { diff --git a/ui-ngx/src/app/modules/home/components/details-panel.component.html b/ui-ngx/src/app/modules/home/components/details-panel.component.html index 05f855fc43..4268147c72 100644 --- a/ui-ngx/src/app/modules/home/components/details-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/details-panel.component.html @@ -31,7 +31,7 @@
- -
- - - - + + - + + + +
+
+
+
+ + +
+ + +
{ this.init(data); @@ -253,6 +271,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.currentDashboardId = null; this.currentCustomerId = null; this.currentDashboardScope = null; + + this.dashboardCtx.state = null; } ngOnDestroy(): void { @@ -428,14 +448,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC this.dialogService.todo(); } - private addWidget($event: Event) { - if ($event) { - $event.stopPropagation(); - } - // TODO: - this.dialogService.todo(); - } - private importWidget($event: Event) { if ($event) { $event.stopPropagation(); @@ -568,7 +580,221 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC }; this.window.parent.postMessage(JSON.stringify(message), '*'); } else { - this.dashboardService.saveDashboard(this.dashboard); + this.dashboardService.saveDashboard(this.dashboard).subscribe(); + } + } + + helpLinkIdForWidgetType(): string { + let link = 'widgetsConfig'; + if (this.editingWidget && this.editingWidget.type) { + link = widgetTypesData.get(this.editingWidget.type).configHelpLinkId; + } + return link; + } + + addWidget($event: Event, layoutCtx?: DashboardPageLayoutContext) { + if ($event) { + $event.stopPropagation(); + } + // TODO: + this.dialogService.todo(); + } + + onRevertWidgetEdit() { + if (this.editingWidgetFormGroup.dirty) { + this.editingWidgetFormGroup.markAsPristine(); + this.editingWidget = deepClone(this.editingWidgetOriginal); + this.editingWidgetLayout = deepClone(this.editingWidgetLayoutOriginal); + } + } + + saveWidget() { + this.editingWidgetFormGroup.markAsPristine(); + 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; + this.editingLayoutCtx.ctrl.highlightWidget(index, 0); + } + + onEditWidgetClosed() { + this.editingWidgetOriginal = null; + this.editingWidget = null; + this.editingWidgetLayoutOriginal = null; + this.editingWidgetLayout = null; + this.editingLayoutCtx = null; + this.editingWidgetSubtitle = null; + this.isEditingWidget = false; + this.resetHighlight(); + this.forceDashboardMobileMode = false; + } + + editWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + $event.stopPropagation(); + if (this.editingWidgetOriginal === widget) { + this.onEditWidgetClosed(); + } else { + const transition = !this.forceDashboardMobileMode; + this.editingWidgetOriginal = widget; + this.editingWidgetLayoutOriginal = layoutCtx.widgetLayouts[widget.id]; + this.editingWidget = deepClone(this.editingWidgetOriginal); + this.editingWidgetLayout = deepClone(this.editingWidgetLayoutOriginal); + this.editingLayoutCtx = layoutCtx; + this.editingWidgetSubtitle = this.widgetComponentService.getInstantWidgetInfo(this.editingWidget).widgetName; + this.forceDashboardMobileMode = true; + this.isEditingWidget = true; + if (layoutCtx) { + const delayOffset = transition ? 350 : 0; + const delay = transition ? 400 : 300; + setTimeout(() => { + layoutCtx.ctrl.highlightWidget(index, delay); + }, delayOffset); + } + } + } + + copyWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { + // TODO: + this.dialogService.todo(); + } + + copyWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { + // TODO: + this.dialogService.todo(); + } + + pasteWidget($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition) { + // TODO: + this.dialogService.todo(); + } + + pasteWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition) { + // TODO: + this.dialogService.todo(); + } + + removeWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget) { + // TODO: + this.dialogService.todo(); + } + + exportWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + $event.stopPropagation(); + // TODO: + this.dialogService.todo(); + } + + widgetClicked($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + if (this.isEditingWidget) { + this.editWidget($event, layoutCtx, widget, index); + } + } + + widgetMouseDown($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number) { + if (this.isEdit && !this.isEditingWidget) { + layoutCtx.ctrl.selectWidget(index, 0); + } + } + + prepareDashboardContextMenu(layoutCtx: DashboardPageLayoutContext): Array { + const dashboardContextActions: Array = []; + if (this.isEdit && !this.isEditingWidget && !this.widgetEditMode) { + dashboardContextActions.push( + { + action: this.openDashboardSettings.bind(this), + enabled: true, + value: 'dashboard.settings', + icon: 'settings' + } + ); + dashboardContextActions.push( + { + action: this.openEntityAliases.bind(this), + enabled: true, + value: 'entity.aliases', + icon: 'devices_other' + } + ); + dashboardContextActions.push( + { + action: ($event) => { + layoutCtx.ctrl.pasteWidget($event); + }, + enabled: this.itembuffer.hasWidget(), + value: 'action.paste', + icon: 'content_paste', + shortcut: 'M-V' + } + ); + dashboardContextActions.push( + { + action: ($event) => { + layoutCtx.ctrl.pasteWidgetReference($event); + }, + enabled: this.itembuffer.canPasteWidgetReference(this.dashboard, this.dashboardCtx.state, layoutCtx.id), + value: 'action.paste-reference', + icon: 'content_paste', + shortcut: 'M-I' + } + ); + } + return dashboardContextActions; + } + + prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number): Array { + const widgetContextActions: Array = []; + if (this.isEdit && !this.isEditingWidget) { + widgetContextActions.push( + { + action: (event, currentWidget) => { + this.editWidget(event, layoutCtx, currentWidget, index); + }, + enabled: true, + value: 'action.edit', + icon: 'edit' + } + ); + if (!this.widgetEditMode) { + widgetContextActions.push( + { + action: (event, currentWidget) => { + this.copyWidget(event, layoutCtx, currentWidget); + }, + enabled: true, + value: 'action.copy', + icon: 'content_copy', + shortcut: 'M-C' + } + ); + widgetContextActions.push( + { + action: (event, currentWidget) => { + this.copyWidgetReference(event, layoutCtx, currentWidget); + }, + enabled: true, + value: 'action.copy-reference', + icon: 'content_copy', + shortcut: 'M-R' + } + ); + widgetContextActions.push( + { + action: (event, currentWidget) => { + this.removeWidget(event, layoutCtx, currentWidget); + }, + enabled: true, + value: 'action.delete', + icon: 'clear', + shortcut: 'M-X' + } + ); + } } + return widgetContextActions; } } 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 3438866355..60176173d8 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 @@ -19,6 +19,12 @@ import { Widget } 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 +} from '@home/models/dashboard-component.models'; +import { Observable } from 'rxjs'; export declare type DashboardPageScope = 'tenant' | 'customer'; @@ -34,6 +40,18 @@ export interface IDashboardController { dashboardCtx: DashboardContext; 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); + 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); + prepareDashboardContextMenu(layoutCtx: DashboardPageLayoutContext): Array; + prepareWidgetContextMenu(layoutCtx: DashboardPageLayoutContext, widget: Widget, index: number): Array; + copyWidget($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); + copyWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, widget: Widget); + pasteWidget($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition); + pasteWidgetReference($event: Event, layoutCtx: DashboardPageLayoutContext, pos: WidgetPosition); } export interface DashboardPageLayoutContext { @@ -42,6 +60,7 @@ export interface DashboardPageLayoutContext { widgetLayouts: WidgetLayouts; gridSettings: GridSettings; ctrl: ILayoutController; + dashboardCtrl: IDashboardController; ignoreLoading: boolean; } 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 e0d51a010f..8193132db1 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 @@ -28,6 +28,7 @@ import { DashboardPageComponent } from '@home/pages/dashboard/dashboard-page.com 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'; @NgModule({ entryComponents: [ @@ -43,7 +44,8 @@ import { DashboardLayoutComponent } from './layout/dashboard-layout.component'; MakeDashboardPublicDialogComponent, DashboardToolbarComponent, DashboardPageComponent, - DashboardLayoutComponent + DashboardLayoutComponent, + EditWidgetComponent ], imports: [ CommonModule, diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html new file mode 100644 index 0000000000..8ee1481727 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.html @@ -0,0 +1,32 @@ + +
+
+ + +
+
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 new file mode 100644 index 0000000000..b3739f7ba1 --- /dev/null +++ b/ui-ngx/src/app/modules/home/pages/dashboard/edit-widget.component.ts @@ -0,0 +1,115 @@ +/// +/// Copyright © 2016-2019 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { PageComponent } from '@shared/components/page.component'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { ActivatedRoute, Router } from '@angular/router'; +import { WidgetService } from '@core/http/widget.service'; +import { DialogService } from '@core/services/dialog.service'; +import { MatDialog } from '@angular/material/dialog'; +import { TranslateService } from '@ngx-translate/core'; +import { Dashboard, WidgetLayout } from '@shared/models/dashboard.models'; +import { IAliasController } from '@core/api/widget-api.models'; +import { Widget, WidgetActionSource, WidgetTypeParameters } from '@shared/models/widget.models'; +import { WidgetComponentService } from '@home/components/widget/widget-component.service'; +import { WidgetConfigComponentData } from '../../models/widget-component.models'; +import { isString } from '@core/utils'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector: 'tb-edit-widget', + templateUrl: './edit-widget.component.html', + styleUrls: [] +}) +export class EditWidgetComponent extends PageComponent implements OnInit, OnChanges { + + @Input() + dashboard: Dashboard; + + @Input() + aliasController: IAliasController; + + @Input() + widgetEditMode: boolean; + + @Input() + widget: Widget; + + @Input() + widgetLayout: WidgetLayout; + + @Input() + widgetFormGroup: FormGroup; + + widgetConfig: WidgetConfigComponentData; + typeParameters: WidgetTypeParameters; + actionSources: {[key: string]: WidgetActionSource}; + isDataEnabled: boolean; + settingsSchema: any; + dataKeySettingsSchema: any; + functionsOnly: boolean; + + constructor(protected store: Store, + private widgetComponentService: WidgetComponentService) { + super(store); + } + + ngOnInit(): void { + this.loadWidgetConfig(); + } + + ngOnChanges(changes: SimpleChanges): void { + let reloadConfig = false; + for (const propName of Object.keys(changes)) { + const change = changes[propName]; + if (!change.firstChange && change.currentValue !== change.previousValue) { + if (['widget', 'widgetLayout'].includes(propName)) { + reloadConfig = true; + } + } + } + if (reloadConfig) { + this.loadWidgetConfig(); + } + } + + private loadWidgetConfig() { + const widgetInfo = this.widgetComponentService.getInstantWidgetInfo(this.widget); + this.widgetConfig = { + config: this.widget.config, + layout: this.widgetLayout + }; + const settingsSchema = widgetInfo.typeSettingsSchema || widgetInfo.settingsSchema; + const dataKeySettingsSchema = widgetInfo.typeDataKeySettingsSchema || widgetInfo.dataKeySettingsSchema; + this.typeParameters = widgetInfo.typeParameters; + this.actionSources = widgetInfo.actionSources; + this.isDataEnabled = widgetInfo.typeParameters && !widgetInfo.typeParameters.useCustomDatasources; + if (!settingsSchema || settingsSchema === '') { + this.settingsSchema = {}; + } else { + this.settingsSchema = isString(settingsSchema) ? JSON.parse(settingsSchema) : settingsSchema; + } + if (!dataKeySettingsSchema || dataKeySettingsSchema === '') { + this.dataKeySettingsSchema = {}; + } else { + this.dataKeySettingsSchema = isString(dataKeySettingsSchema) ? JSON.parse(dataKeySettingsSchema) : dataKeySettingsSchema; + } + this.functionsOnly = this.dashboard ? false : true; + this.widgetFormGroup.reset({widgetConfig: this.widgetConfig}); + } +} 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 722e7eced1..85b3a2ce9e 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 @@ -15,6 +15,7 @@ limitations under the License. --> +
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.ts b/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.ts index d571f05fa8..f52e97ea7b 100644 --- a/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.ts +++ b/ui-ngx/src/app/modules/home/pages/dashboard/layout/dashboard-layout.component.ts @@ -22,16 +22,25 @@ import { PageComponent } from '@shared/components/page.component'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { Widget } from '@shared/models/widget.models'; -import { WidgetLayouts } from '@shared/models/dashboard.models'; +import { WidgetLayout, WidgetLayouts } from '@shared/models/dashboard.models'; import { GridsterComponent } from 'angular-gridster2'; -import { IDashboardComponent } from '@home/models/dashboard-component.models'; +import { + DashboardCallbacks, + DashboardContextMenuItem, + IDashboardComponent, WidgetContextMenuItem +} from '@home/models/dashboard-component.models'; +import { Observable, of, Subscription } from 'rxjs'; +import { Hotkey, HotkeysService } from 'angular2-hotkeys'; +import { getCurrentIsLoading } from '@core/interceptors/load.selectors'; +import { TranslateService } from '@ngx-translate/core'; +import { ItemBufferService } from '@app/core/services/item-buffer.service'; @Component({ selector: 'tb-dashboard-layout', templateUrl: './dashboard-layout.component.html', styleUrls: ['./dashboard-layout.component.scss'] }) -export class DashboardLayoutComponent extends PageComponent implements ILayoutController, OnInit, OnDestroy { +export class DashboardLayoutComponent extends PageComponent implements ILayoutController, DashboardCallbacks, OnInit, OnDestroy { layoutCtxValue: DashboardPageLayoutContext; @@ -52,6 +61,9 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo @Input() isEdit: boolean; + @Input() + isEditingWidget: boolean; + @Input() isMobile: boolean; @@ -60,15 +72,97 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo @ViewChild('dashboard', {static: true}) dashboard: IDashboardComponent; + private rxSubscriptions = new Array(); + constructor(protected store: Store, - private cd: ChangeDetectorRef) { + private hotkeysService: HotkeysService, + private translate: TranslateService, + private itembuffer: ItemBufferService) { super(store); } ngOnInit(): void { + this.rxSubscriptions.push(this.dashboard.dashboardTimewindowChanged.subscribe( + (dashboardTimewindow) => { + this.dashboardCtx.dashboardTimewindow = dashboardTimewindow; + } + ) + ); + this.initHotKeys(); } ngOnDestroy(): void { + this.rxSubscriptions.forEach((subscription) => { + subscription.unsubscribe(); + }); + this.rxSubscriptions.length = 0; + } + + private initHotKeys(): void { + this.hotkeysService.add( + new Hotkey('ctrl+c', (event: KeyboardEvent) => { + if (this.isEdit && !this.isEditingWidget && !this.widgetEditMode) { + const widget = this.dashboard.getSelectedWidget(); + if (widget) { + event.preventDefault(); + this.copyWidget(event, widget); + } + } + return false; + }, null, + this.translate.instant('action.copy')) + ); + this.hotkeysService.add( + new Hotkey('ctrl+r', (event: KeyboardEvent) => { + if (this.isEdit && !this.isEditingWidget && !this.widgetEditMode) { + const widget = this.dashboard.getSelectedWidget(); + if (widget) { + event.preventDefault(); + this.copyWidgetReference(event, widget); + } + } + return false; + }, null, + this.translate.instant('action.copy-reference')) + ); + this.hotkeysService.add( + new Hotkey('ctrl+v', (event: KeyboardEvent) => { + if (this.isEdit && !this.isEditingWidget && !this.widgetEditMode) { + if (this.itembuffer.hasWidget()) { + event.preventDefault(); + this.pasteWidget(event); + } + } + return false; + }, null, + this.translate.instant('action.paste')) + ); + this.hotkeysService.add( + new Hotkey('ctrl+i', (event: KeyboardEvent) => { + if (this.isEdit && !this.isEditingWidget && !this.widgetEditMode) { + if (this.itembuffer.canPasteWidgetReference(this.dashboardCtx.dashboard, + this.dashboardCtx.state, this.layoutCtx.id)) { + event.preventDefault(); + this.pasteWidgetReference(event); + } + } + return false; + }, null, + this.translate.instant('action.paste-reference')) + ); + this.hotkeysService.add( + new Hotkey('ctrl+x', (event: KeyboardEvent) => { + if (this.isEdit && !this.isEditingWidget && !this.widgetEditMode) { + const widget = this.dashboard.getSelectedWidget(); + if (widget) { + event.preventDefault(); + this.layoutCtx.dashboardCtrl.removeWidget(event, this.layoutCtx, widget); + } + } + return false; + }, null, + this.translate.instant('action.delete')) + ); } reload() { @@ -78,6 +172,65 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo } resetHighlight() { + this.dashboard.resetHighlight(); + } + + highlightWidget(index: number, delay?: number) { + this.dashboard.highlightWidget(index, delay); + } + + selectWidget(index: number, delay?: number) { + this.dashboard.selectWidget(index, 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); + } + + onExportWidget($event: Event, widget: Widget, index: number): void { + this.layoutCtx.dashboardCtrl.exportWidget($event, this.layoutCtx, widget, index); + } + + onRemoveWidget($event: Event, widget: Widget, index: number): 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); + } + + onWidgetClicked($event: Event, widget: Widget, index: number): void { + this.layoutCtx.dashboardCtrl.widgetClicked($event, this.layoutCtx, widget, index); + } + + 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); + } + + copyWidget($event: Event, widget: Widget) { + this.layoutCtx.dashboardCtrl.copyWidget($event, this.layoutCtx, widget); + } + + copyWidgetReference($event: Event, widget: Widget) { + this.layoutCtx.dashboardCtrl.copyWidgetReference($event, this.layoutCtx, widget); + } + + pasteWidget($event: Event) { + const pos = this.dashboard.getEventGridPosition($event); + this.layoutCtx.dashboardCtrl.pasteWidget($event, this.layoutCtx, pos); + } + + pasteWidgetReference($event: Event) { + const pos = this.dashboard.getEventGridPosition($event); + this.layoutCtx.dashboardCtrl.pasteWidgetReference($event, this.layoutCtx, pos); } } 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 131a7c2a18..54b91a04d7 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 @@ -14,8 +14,15 @@ /// limitations under the License. /// +import { Widget } from '@shared/models/widget.models'; +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); + pasteWidget($event: MouseEvent); + pasteWidgetReference($event: MouseEvent); } diff --git a/ui-ngx/src/app/shared/models/constants.ts b/ui-ngx/src/app/shared/models/constants.ts index 121848a2f7..31edec6cfe 100644 --- a/ui-ngx/src/app/shared/models/constants.ts +++ b/ui-ngx/src/app/shared/models/constants.ts @@ -65,7 +65,13 @@ export const HelpLinks = { entityViews: helpBaseUrl + '/docs/user-guide/ui/entity-views', rulechains: helpBaseUrl + '/docs/user-guide/ui/rule-chains', dashboards: helpBaseUrl + '/docs/user-guide/ui/dashboards', - widgetsBundles: helpBaseUrl + '/docs/user-guide/ui/widget-library#bundles' + widgetsBundles: helpBaseUrl + '/docs/user-guide/ui/widget-library#bundles', + widgetsConfig: helpBaseUrl + '/docs/user-guide/ui/dashboards#widget-configuration', + widgetsConfigTimeseries: helpBaseUrl + '/docs/user-guide/ui/dashboards#timeseries', + widgetsConfigLatest: helpBaseUrl + '/docs/user-guide/ui/dashboards#latest', + widgetsConfigRpc: helpBaseUrl + '/docs/user-guide/ui/dashboards#rpc', + widgetsConfigAlarm: helpBaseUrl + '/docs/user-guide/ui/dashboards#alarm', + widgetsConfigStatic: helpBaseUrl + '/docs/user-guide/ui/dashboards#static' } }; diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index d94fead1e5..ad536bb09d 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/ui-ngx/src/app/shared/models/widget.models.ts @@ -40,6 +40,7 @@ export interface WidgetTypeData { name: string; icon: string; isMdiIcon?: boolean; + configHelpLinkId: string; template: WidgetTypeTemplate; } @@ -50,6 +51,7 @@ export const widgetTypesData = new Map( { name: 'widget.timeseries', icon: 'timeline', + configHelpLinkId: 'widgetsConfigTimeseries', template: { bundleAlias: 'charts', alias: 'basic_timeseries' @@ -61,6 +63,7 @@ export const widgetTypesData = new Map( { name: 'widget.latest-values', icon: 'track_changes', + configHelpLinkId: 'widgetsConfigLatest', template: { bundleAlias: 'cards', alias: 'attributes_card' @@ -72,6 +75,7 @@ export const widgetTypesData = new Map( { name: 'widget.rpc', icon: 'mdi:developer-board', + configHelpLinkId: 'widgetsConfigRpc', isMdiIcon: true, template: { bundleAlias: 'gpio_widgets', @@ -84,6 +88,7 @@ export const widgetTypesData = new Map( { name: 'widget.alarm', icon: 'error', + configHelpLinkId: 'widgetsConfigAlarm', template: { bundleAlias: 'alarm_widgets', alias: 'alarms_table' @@ -95,6 +100,7 @@ export const widgetTypesData = new Map( { name: 'widget.static', icon: 'font_download', + configHelpLinkId: 'widgetsConfigStatic', template: { bundleAlias: 'cards', alias: 'html_card' @@ -129,8 +135,8 @@ export interface WidgetTypeDescriptor { templateHtml: string; templateCss: string; controllerScript: string; - settingsSchema?: string; - dataKeySettingsSchema?: string; + settingsSchema?: string | any; + dataKeySettingsSchema?: string | any; defaultConfig: string; sizeX: number; sizeY: number; @@ -146,8 +152,8 @@ export interface WidgetTypeParameters { export interface WidgetControllerDescriptor { widgetTypeFunction?: any; - settingsSchema?: string; - dataKeySettingsSchema?: string; + settingsSchema?: string | any; + dataKeySettingsSchema?: string | any; typeParameters?: WidgetTypeParameters; actionSources?: {[key: string]: WidgetActionSource}; } @@ -309,7 +315,7 @@ export interface WidgetConfig { showTitle?: boolean; showTitleIcon?: boolean; iconColor?: string; - iconSize?: number; + iconSize?: string; dropShadow?: boolean; enableFullscreen?: boolean; useDashboardTimewindow?: boolean; diff --git a/ui-ngx/src/app/shared/pipe/keyboard-shortcut.pipe.ts b/ui-ngx/src/app/shared/pipe/keyboard-shortcut.pipe.ts new file mode 100644 index 0000000000..9571f3fc08 --- /dev/null +++ b/ui-ngx/src/app/shared/pipe/keyboard-shortcut.pipe.ts @@ -0,0 +1,49 @@ +/// +/// 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 { Inject, Pipe, PipeTransform } from '@angular/core'; +import { WINDOW } from '@core/services/window.service'; + +@Pipe({ + name: 'keyboardShortcut' +}) +export class KeyboardShortcutPipe implements PipeTransform { + + constructor(@Inject(WINDOW) private window: Window) {} + + transform(value: string): string { + if (!value) { + return; + } + const keys = value.split('-'); + const isOSX = /Mac OS X/.test(this.window.navigator.userAgent); + + const seperator = (!isOSX || keys.length > 2) ? '+' : ''; + + const abbreviations = { + M: isOSX ? '⌘' : 'Ctrl', + A: isOSX ? 'Option' : 'Alt', + S: 'Shift' + }; + + return keys.map((key, index) => { + const last = index === keys.length - 1; + return last ? key : abbreviations[key]; + }).join(seperator); + return (!value) ? '' : value.replace(/ /g, ''); + } + +} diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 17d2ee00cb..c578d07bca 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -95,6 +95,7 @@ import { FabToolbarComponent, FabActionsDirective, FabTriggerDirective } from '. import { DashboardSelectPanelComponent } from '@shared/components/dashboard-select-panel.component'; import { DashboardSelectComponent } from '@shared/components/dashboard-select.component'; import { WidgetsBundleSelectComponent } from './components/widgets-bundle-select.component'; +import { KeyboardShortcutPipe } from './pipe/keyboard-shortcut.pipe'; @NgModule({ providers: [ @@ -150,7 +151,8 @@ import { WidgetsBundleSelectComponent } from './components/widgets-bundle-select NospacePipe, MillisecondsToTimeStringPipe, EnumToArrayPipe, - HighlightPipe + HighlightPipe, + KeyboardShortcutPipe ], imports: [ CommonModule, @@ -272,6 +274,7 @@ import { WidgetsBundleSelectComponent } from './components/widgets-bundle-select MillisecondsToTimeStringPipe, EnumToArrayPipe, HighlightPipe, + KeyboardShortcutPipe, TranslateModule ] }) diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss index eb7ce76033..7ffef821b1 100644 --- a/ui-ngx/src/theme.scss +++ b/ui-ngx/src/theme.scss @@ -277,6 +277,15 @@ $tb-dark-theme: get-tb-dark-theme( display: block; } + button.mat-menu-item { + overflow: hidden; + fill: #737373; + display: block; + .tb-alt-text { + float: right; + } + } + mat-toolbar.mat-table-toolbar { background: #fff; padding: 0 24px;