Browse Source

UI: Minor refactoring. Replace image inputs to image gallery inputs.

pull/9542/head
Igor Kulikov 3 years ago
parent
commit
751ebc0d03
  1. 6
      ui-ngx/src/app/core/http/asset.service.ts
  2. 6
      ui-ngx/src/app/core/http/device.service.ts
  3. 2
      ui-ngx/src/app/core/http/edge.service.ts
  4. 21
      ui-ngx/src/app/modules/common/modules-map.ts
  5. 2
      ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts
  6. 29
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
  7. 4
      ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts
  8. 16
      ui-ngx/src/app/modules/home/components/home-components.module.ts
  9. 28
      ui-ngx/src/app/modules/home/components/shared-home-components.module.ts
  10. 2
      ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html
  11. 8
      ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts
  12. 2
      ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html
  13. 7
      ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts
  14. 2
      ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html
  15. 8
      ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts
  16. 2
      ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html
  17. 9
      ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts
  18. 2
      ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.html
  19. 9
      ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts
  20. 2
      ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html
  21. 9
      ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts
  22. 2
      ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts
  23. 2
      ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html
  24. 7
      ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
  25. 2
      ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html
  26. 8
      ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
  27. 2
      ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html
  28. 7
      ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts
  29. 10
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
  30. 8
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts
  31. 2
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html
  32. 15
      ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts
  33. 2
      ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html
  34. 7
      ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts
  35. 2
      ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts
  36. 2
      ui-ngx/src/app/modules/home/models/services.map.ts
  37. 2
      ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts
  38. 2
      ui-ngx/src/app/modules/home/pages/admin/admin.module.ts
  39. 2
      ui-ngx/src/app/modules/home/pages/asset-profile/asset-profiles-table-config.resolver.ts
  40. 2
      ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts
  41. 34
      ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts
  42. 2
      ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts
  43. 2
      ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts
  44. 2
      ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts
  45. 6
      ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts
  46. 3
      ui-ngx/src/app/modules/home/pages/widget/widget-library.module.ts
  47. 2
      ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts
  48. 2
      ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts
  49. 4
      ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts
  50. 0
      ui-ngx/src/app/shared/components/grid/scroll-grid-datasource.ts
  51. 0
      ui-ngx/src/app/shared/components/grid/scroll-grid.component.html
  52. 0
      ui-ngx/src/app/shared/components/grid/scroll-grid.component.scss
  53. 2
      ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts
  54. 0
      ui-ngx/src/app/shared/components/image/gallery-image-input.component.html
  55. 2
      ui-ngx/src/app/shared/components/image/gallery-image-input.component.scss
  56. 2
      ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts
  57. 0
      ui-ngx/src/app/shared/components/image/image-dialog.component.html
  58. 2
      ui-ngx/src/app/shared/components/image/image-dialog.component.scss
  59. 2
      ui-ngx/src/app/shared/components/image/image-dialog.component.ts
  60. 0
      ui-ngx/src/app/shared/components/image/image-gallery.component.html
  61. 2
      ui-ngx/src/app/shared/components/image/image-gallery.component.scss
  62. 14
      ui-ngx/src/app/shared/components/image/image-gallery.component.ts
  63. 0
      ui-ngx/src/app/shared/components/image/image-references.component.html
  64. 2
      ui-ngx/src/app/shared/components/image/image-references.component.scss
  65. 0
      ui-ngx/src/app/shared/components/image/image-references.component.ts
  66. 0
      ui-ngx/src/app/shared/components/image/images-datasource.ts
  67. 0
      ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html
  68. 0
      ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.scss
  69. 4
      ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.ts
  70. 0
      ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html
  71. 2
      ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.scss
  72. 4
      ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.ts
  73. 0
      ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
  74. 0
      ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts
  75. 2
      ui-ngx/src/app/shared/components/public-api.ts
  76. 0
      ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html
  77. 0
      ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.ts
  78. 0
      ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
  79. 0
      ui-ngx/src/app/shared/import-export/import-dialog-csv.component.scss
  80. 8
      ui-ngx/src/app/shared/import-export/import-dialog-csv.component.ts
  81. 0
      ui-ngx/src/app/shared/import-export/import-dialog.component.html
  82. 0
      ui-ngx/src/app/shared/import-export/import-dialog.component.ts
  83. 0
      ui-ngx/src/app/shared/import-export/import-export.models.ts
  84. 42
      ui-ngx/src/app/shared/import-export/import-export.service.ts
  85. 0
      ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
  86. 0
      ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss
  87. 2
      ui-ngx/src/app/shared/import-export/table-columns-assignment.component.ts
  88. 38
      ui-ngx/src/app/shared/models/widget-settings.models.ts
  89. 42
      ui-ngx/src/app/shared/shared.module.ts
  90. 5
      ui-ngx/src/assets/locale/locale.constant-en_US.json

6
ui-ngx/src/app/core/http/asset.service.ts

@ -20,9 +20,9 @@ import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { PageLink } from '@shared/models/page/page-link';
import { PageData } from '@shared/models/page/page-data';
import { EntitySubtype } from '@app/shared/models/entity-type.models';
import { Asset, AssetInfo, AssetSearchQuery } from '@app/shared/models/asset.models';
import { BulkImportRequest, BulkImportResult } from '@home/components/import-export/import-export.models';
import { EntitySubtype } from '@shared/models/entity-type.models';
import { Asset, AssetInfo, AssetSearchQuery } from '@shared/models/asset.models';
import { BulkImportRequest, BulkImportResult } from '@shared/import-export/import-export.models';
@Injectable({
providedIn: 'root'

6
ui-ngx/src/app/core/http/device.service.ts

@ -30,10 +30,10 @@ import {
DeviceSearchQuery,
PublishLaunchCommand,
PublishTelemetryCommand
} from '@app/shared/models/device.models';
import { EntitySubtype } from '@app/shared/models/entity-type.models';
} from '@shared/models/device.models';
import { EntitySubtype } from '@shared/models/entity-type.models';
import { AuthService } from '@core/auth/auth.service';
import { BulkImportRequest, BulkImportResult } from '@home/components/import-export/import-export.models';
import { BulkImportRequest, BulkImportResult } from '@shared/import-export/import-export.models';
import { PersistentRpc, RpcStatus } from '@shared/models/rpc.models';
@Injectable({

2
ui-ngx/src/app/core/http/edge.service.ts

@ -23,7 +23,7 @@ import { PageData } from '@shared/models/page/page-data';
import { EntitySubtype } from '@app/shared/models/entity-type.models';
import { Edge, EdgeEvent, EdgeInfo, EdgeInstallInstructions, EdgeSearchQuery } from '@shared/models/edge.models';
import { EntityId } from '@shared/models/id/entity-id';
import { BulkImportRequest, BulkImportResult } from '@home/components/import-export/import-export.models';
import { BulkImportRequest, BulkImportResult } from '@shared/import-export/import-export.models';
@Injectable({
providedIn: 'root'

21
ui-ngx/src/app/modules/common/modules-map.ts

@ -95,6 +95,7 @@ import * as SelectableColumnsPipe from '@shared/pipe/selectable-columns.pipe';
import * as ShortNumberPipe from '@shared/pipe/short-number.pipe';
import * as TbJsonPipe from '@shared/pipe/tbJson.pipe';
import * as TruncatePipe from '@shared/pipe/truncate.pipe';
import * as ImagePipe from '@shared/pipe/image.pipe';
import * as coercion from '@shared/decorators/coercion';
import * as enumerable from '@shared/decorators/enumerable';
@ -187,6 +188,9 @@ import * as UnitInputComponent from '@shared/components/unit-input.component';
import * as MaterialIconsComponent from '@shared/components/material-icons.component';
import * as TbIconComponent from '@shared/components/icon.component';
import * as HintTooltipIconComponent from '@shared/components/hint-tooltip-icon.component';
import * as ScrollGridComponent from '@shared/components/grid/scroll-grid.component';
import * as GalleryImageInputComponent from '@shared/components/image/gallery-image-input.component';
import * as MultipleGalleryImageInputComponent from '@shared/components/image/multiple-gallery-image-input.component';
import * as AddEntityDialogComponent from '@home/components/entity/add-entity-dialog.component';
import * as EntitiesTableComponent from '@home/components/entity/entities-table.component';
@ -227,10 +231,10 @@ import * as CustomActionPrettyEditorComponent from '@home/components/widget/acti
import * as MobileActionEditorComponent from '@home/components/widget/action/mobile-action-editor.component';
import * as CustomDialogService from '@home/components/widget/dialog/custom-dialog.service';
import * as CustomDialogContainerComponent from '@home/components/widget/dialog/custom-dialog-container.component';
import * as ImportDialogComponent from '@home/components/import-export/import-dialog.component';
import * as ImportDialogComponent from '@shared/import-export/import-dialog.component';
import * as AddWidgetToDashboardDialogComponent from '@home/components/attribute/add-widget-to-dashboard-dialog.component';
import * as ImportDialogCsvComponent from '@home/components/import-export/import-dialog-csv.component';
import * as TableColumnsAssignmentComponent from '@home/components/import-export/table-columns-assignment.component';
import * as ImportDialogCsvComponent from '@shared/import-export/import-dialog-csv.component';
import * as TableColumnsAssignmentComponent from '@shared/import-export/table-columns-assignment.component';
import * as EventContentDialogComponent from '@home/components/event/event-content-dialog.component';
import * as SharedHomeComponentsModule from '@home/components/shared-home-components.module';
import * as SelectTargetLayoutDialogComponent from '@home/components/dashboard/select-target-layout-dialog.component';
@ -401,11 +405,16 @@ class ModulesMap implements IModulesMap {
'@shared/pipe/short-number.pipe': ShortNumberPipe,
'@shared/pipe/tbJson.pipe': TbJsonPipe,
'@shared/pipe/truncate.pipe': TruncatePipe,
'@shared/pipe/image.pipe': ImagePipe,
'@shared/decorators/coercion': coercion,
'@shared/decorators/enumerable': enumerable,
'@shared/decorators/tb-inject': TbInject,
'@shared/import-export/import-dialog.component': ImportDialogComponent,
'@shared/import-export/import-dialog-csv.component': ImportDialogCsvComponent,
'@shared/import-export/table-columns-assignment.component': TableColumnsAssignmentComponent,
'@shared/components/footer.component': FooterComponent,
'@shared/components/logo.component': LogoComponent,
'@shared/components/footer-fab-buttons.component': FooterFabButtonsComponent,
@ -494,6 +503,9 @@ class ModulesMap implements IModulesMap {
'@shared/components/material-icons.component': MaterialIconsComponent,
'@shared/components/icon.component': TbIconComponent,
'@shared/components/hint-tooltip-icon.component': HintTooltipIconComponent,
'@shared/components/grid/scroll-grid.component': ScrollGridComponent,
'@shared/components/image/gallery-image-input.component': GalleryImageInputComponent,
'@shared/components/image/multiple-gallery-image-input.component': MultipleGalleryImageInputComponent,
'@home/components/entity/add-entity-dialog.component': AddEntityDialogComponent,
'@home/components/entity/entities-table.component': EntitiesTableComponent,
@ -534,10 +546,7 @@ class ModulesMap implements IModulesMap {
'@home/components/widget/action/mobile-action-editor.component': MobileActionEditorComponent,
'@home/components/widget/dialog/custom-dialog.service': CustomDialogService,
'@home/components/widget/dialog/custom-dialog-container.component': CustomDialogContainerComponent,
'@home/components/import-export/import-dialog.component': ImportDialogComponent,
'@home/components/attribute/add-widget-to-dashboard-dialog.component': AddWidgetToDashboardDialogComponent,
'@home/components/import-export/import-dialog-csv.component': ImportDialogCsvComponent,
'@home/components/import-export/table-columns-assignment.component': TableColumnsAssignmentComponent,
'@home/components/event/event-content-dialog.component': EventContentDialogComponent,
'@home/components/shared-home-components.module': SharedHomeComponentsModule,
'@home/components/dashboard/select-target-layout-dialog.component': SelectTargetLayoutDialogComponent,

2
ui-ngx/src/app/modules/home/components/alarm/alarm-comment.component.ts

@ -31,7 +31,7 @@ import { AlarmComment, AlarmCommentInfo, AlarmCommentType } from '@shared/models
import { UtilsService } from '@core/services/utils.service';
import { EntityType } from '@shared/models/entity-type.models';
import { DatePipe } from '@angular/common';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
interface AlarmCommentsDisplayData {
commentId?: string,

29
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@ -119,7 +119,7 @@ import {
ManageDashboardStatesDialogComponent,
ManageDashboardStatesDialogData
} from '@home/components/dashboard-page/states/manage-dashboard-states-dialog.component';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { AuthState } from '@app/core/auth/auth.models';
import { FiltersDialogComponent, FiltersDialogData } from '@home/components/filter/filters-dialog.component';
import { Filters } from '@shared/models/query/query.models';
@ -145,7 +145,7 @@ import { IAliasController } from '@core/api/widget-api.models';
import { MatButton } from '@angular/material/button';
import { VersionControlComponent } from '@home/components/vc/version-control.component';
import { TbPopoverService } from '@shared/components/popover.service';
import { tap } from 'rxjs/operators';
import { map, tap } from 'rxjs/operators';
import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { ResizeObserver } from '@juggle/resize-observer';
@ -919,6 +919,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
$event.stopPropagation();
}
this.importExport.importWidget(this.dashboard, this.dashboardCtx.state,
this.editMissingAliases.bind(this),
this.selectTargetLayout.bind(this), this.entityAliasesUpdated.bind(this), this.filtersUpdated.bind(this)).subscribe(
(importData) => {
if (importData) {
@ -935,6 +936,30 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
);
}
private editMissingAliases(widgets: Array<Widget>, isSingleWidget: boolean,
customTitle: string, missingEntityAliases: EntityAliases): Observable<EntityAliases> {
return this.dialog.open<EntityAliasesDialogComponent, EntityAliasesDialogData,
EntityAliases>(EntityAliasesDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
entityAliases: missingEntityAliases,
widgets,
customTitle,
isSingleWidget,
disableAdd: true
}
}).afterClosed().pipe(
map((updatedEntityAliases) => {
if (updatedEntityAliases) {
return updatedEntityAliases;
} else {
throw new Error('Unable to resolve missing entity aliases!');
}
}
));
}
public currentDashboardIdChanged(dashboardId: string) {
if (!this.widgetEditMode) {
this.dashboardCtx.stateController.cleanupPreservedStates();

4
ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-widget-select.component.ts

@ -31,8 +31,8 @@ import { BehaviorSubject, combineLatest } from 'rxjs';
import { isObject } from '@core/utils';
import { PageLink } from '@shared/models/page/page-link';
import { Direction } from '@shared/models/page/sort-order';
import { GridEntitiesFetchFunction, ScrollGridColumns } from '@home/models/datasource/scroll-grid-datasource';
import { ItemSizeStrategy } from '@home/components/grid/scroll-grid.component';
import { GridEntitiesFetchFunction, ScrollGridColumns } from '@shared/components/grid/scroll-grid-datasource';
import { ItemSizeStrategy } from '@shared/components/grid/scroll-grid.component';
type selectWidgetMode = 'bundles' | 'allWidgets';

16
ui-ngx/src/app/modules/home/components/home-components.module.ts

@ -51,11 +51,7 @@ import { CustomActionPrettyEditorComponent } from '@home/components/widget/actio
import { MobileActionEditorComponent } from '@home/components/widget/action/mobile-action-editor.component';
import { CustomDialogService } from '@home/components/widget/dialog/custom-dialog.service';
import { CustomDialogContainerComponent } from '@home/components/widget/dialog/custom-dialog-container.component';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportDialogComponent } from '@home/components/import-export/import-dialog.component';
import { AddWidgetToDashboardDialogComponent } from '@home/components/attribute/add-widget-to-dashboard-dialog.component';
import { ImportDialogCsvComponent } from '@home/components/import-export/import-dialog-csv.component';
import { TableColumnsAssignmentComponent } from '@home/components/import-export/table-columns-assignment.component';
import { EventContentDialogComponent } from '@home/components/event/event-content-dialog.component';
import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module';
import { SelectTargetLayoutDialogComponent } from '@home/components/dashboard/select-target-layout-dialog.component';
@ -178,9 +174,6 @@ import {
import { WidgetConfigComponentsModule } from '@home/components/widget/config/widget-config-components.module';
import { BasicWidgetConfigModule } from '@home/components/widget/config/basic/basic-widget-config.module';
import { DeleteTimeseriesPanelComponent } from '@home/components/attribute/delete-timeseries-panel.component';
import {
ExportWidgetsBundleDialogComponent
} from '@home/components/import-export/export-widgets-bundle-dialog.component';
@NgModule({
declarations:
@ -229,13 +222,9 @@ import {
CustomActionPrettyEditorComponent,
MobileActionEditorComponent,
CustomDialogContainerComponent,
ImportDialogComponent,
ImportDialogCsvComponent,
ExportWidgetsBundleDialogComponent,
SelectTargetLayoutDialogComponent,
SelectTargetStateDialogComponent,
AddWidgetToDashboardDialogComponent,
TableColumnsAssignmentComponent,
BooleanFilterPredicateComponent,
StringFilterPredicateComponent,
NumericFilterPredicateComponent,
@ -374,10 +363,6 @@ import {
CustomActionPrettyEditorComponent,
MobileActionEditorComponent,
CustomDialogContainerComponent,
ImportDialogComponent,
ImportDialogCsvComponent,
ExportWidgetsBundleDialogComponent,
TableColumnsAssignmentComponent,
SelectTargetLayoutDialogComponent,
SelectTargetStateDialogComponent,
BooleanFilterPredicateComponent,
@ -468,7 +453,6 @@ import {
providers: [
WidgetComponentService,
CustomDialogService,
ImportExportService,
{provide: EMBED_DASHBOARD_DIALOG_TOKEN, useValue: EmbedDashboardDialogComponent},
{provide: COMPLEX_FILTER_PREDICATE_DIALOG_COMPONENT_TOKEN, useValue: ComplexFilterPredicateDialogComponent},
{provide: DASHBOARD_PAGE_COMPONENT_TOKEN, useValue: DashboardPageComponent},

28
ui-ngx/src/app/modules/home/components/shared-home-components.module.ts

@ -22,14 +22,6 @@ import { SHARED_HOME_COMPONENTS_MODULE_TOKEN } from '@home/components/tokens';
import { AlarmCommentComponent } from '@home/components/alarm/alarm-comment.component';
import { AlarmCommentDialogComponent } from '@home/components/alarm/alarm-comment-dialog.component';
import { AlarmAssigneeComponent } from '@home/components/alarm/alarm-assignee.component';
import { ScrollGridComponent } from '@home/components/grid/scroll-grid.component';
import { ImageGalleryComponent } from '@home/components/image/image-gallery.component';
import { UploadImageDialogComponent } from '@home/components/image/upload-image-dialog.component';
import { ImageDialogComponent } from '@home/components/image/image-dialog.component';
import { ImageReferencesComponent } from '@home/components/image/image-references.component';
import { ImagesInUseDialogComponent } from '@home/components/image/images-in-use-dialog.component';
import { GalleryImageInputComponent } from '@home/components/image/gallery-image-input.component';
import { MultipleGalleryImageInputComponent } from '@home/components/image/multiple-gallery-image-input.component';
@NgModule({
providers: [
@ -40,15 +32,7 @@ import { MultipleGalleryImageInputComponent } from '@home/components/image/multi
AlarmDetailsDialogComponent,
AlarmCommentComponent,
AlarmCommentDialogComponent,
AlarmAssigneeComponent,
ScrollGridComponent,
ImageGalleryComponent,
UploadImageDialogComponent,
ImageDialogComponent,
ImageReferencesComponent,
ImagesInUseDialogComponent,
GalleryImageInputComponent,
MultipleGalleryImageInputComponent
AlarmAssigneeComponent
],
imports: [
CommonModule,
@ -58,15 +42,7 @@ import { MultipleGalleryImageInputComponent } from '@home/components/image/multi
AlarmDetailsDialogComponent,
AlarmCommentComponent,
AlarmCommentDialogComponent,
AlarmAssigneeComponent,
ScrollGridComponent,
ImageGalleryComponent,
UploadImageDialogComponent,
ImageDialogComponent,
ImageReferencesComponent,
ImagesInUseDialogComponent,
GalleryImageInputComponent,
MultipleGalleryImageInputComponent
AlarmAssigneeComponent
]
})
export class SharedHomeComponentsModule { }

2
ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-aggregated-value-card-panel" [style]="backgroundStyle">
<div class="tb-aggregated-value-card-panel" [style]="backgroundStyle$ | async">
<div class="tb-aggregated-value-card-overlay" [style]="overlayStyle"></div>
<div class="tb-aggregated-value-card-title-panel">
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>

8
ui-ngx/src/app/modules/home/components/widget/lib/cards/aggregated-value-card-widget.component.ts

@ -51,6 +51,7 @@ import { DataKey } from '@shared/models/widget.models';
import { formatNumberValue, formatValue, isDefined, isDefinedAndNotNull, isNumeric } from '@core/utils';
import { map } from 'rxjs/operators';
import { ResizeObserver } from '@juggle/resize-observer';
import { ImagePipe } from '@shared/pipe/image.pipe';
const valuesLayoutHeight = 66;
const valuesLayoutVerticalPadding = 16;
@ -96,7 +97,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
dateStyle: ComponentStyle = {};
dateColor: string;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
private flot: TbFlot;
@ -109,7 +110,8 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
private panelResize$: ResizeObserver;
constructor(private renderer: Renderer2,
constructor(private imagePipe: ImagePipe,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
}
@ -151,7 +153,7 @@ export class AggregatedValueCardWidgetComponent implements OnInit, AfterViewInit
this.dateStyle = textStyle(this.settings.dateFont);
this.dateColor = this.settings.dateColor;
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
}

2
ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #progressBarPanel class="tb-progress-bar-panel" [style]="backgroundStyle">
<div #progressBarPanel class="tb-progress-bar-panel" [style]="backgroundStyle$ | async">
<div class="tb-progress-bar-overlay" [style]="overlayStyle"></div>
<div #progressBarContainer class="tb-progress-bar-container" [class]="layoutClass">
<ng-container *ngIf="layout === progressBarLayout.default">

7
ui-ngx/src/app/modules/home/components/widget/lib/cards/progress-bar-widget.component.ts

@ -43,6 +43,8 @@ import {
import { WidgetComponent } from '@home/components/widget/widget.component';
import { progressBarDefaultSettings, ProgressBarLayout, ProgressBarWidgetSettings } from './progress-bar-widget.models';
import { ResizeObserver } from '@juggle/resize-observer';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
const defaultLayoutHeight = 80;
const simplifiedLayoutHeight = 75;
@ -93,7 +95,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
value: number;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
progressBarPanelResize$: ResizeObserver;
@ -102,6 +104,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
private units = '';
constructor(private date: DatePipe,
private imagePipe: ImagePipe,
private widgetComponent: WidgetComponent,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
@ -144,7 +147,7 @@ export class ProgressBarWidgetComponent implements OnInit, OnDestroy, AfterViewI
this.ticksStyle.color = this.settings.ticksColor;
}
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
}

2
ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style]="backgroundStyle">
<div #valueCardPanel class="tb-value-card-panel" [class]="this.layout" [style]="backgroundStyle$ | async">
<div class="tb-value-card-overlay" [style]="overlayStyle"></div>
<div class="tb-value-card-title-panel">
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>

8
ui-ngx/src/app/modules/home/components/widget/lib/cards/value-card-widget.component.ts

@ -44,6 +44,7 @@ import { valueCardDefaultSettings, ValueCardLayout, ValueCardWidgetSettings } fr
import { WidgetComponent } from '@home/components/widget/widget.component';
import { Observable } from 'rxjs';
import { ResizeObserver } from '@juggle/resize-observer';
import { ImagePipe } from '@shared/pipe/image.pipe';
const squareLayoutSize = 160;
const squareLayoutPadding = 48;
@ -92,7 +93,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
dateStyle: ComponentStyle = {};
dateColor: ColorProcessor;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
private panelResize$: ResizeObserver;
@ -101,7 +102,8 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
private decimals = 0;
private units = '';
constructor(private renderer: Renderer2,
constructor(private imagePipe: ImagePipe,
private renderer: Renderer2,
private widgetComponent: WidgetComponent,
private cd: ChangeDetectorRef) {
}
@ -142,7 +144,7 @@ export class ValueCardWidgetComponent implements OnInit, AfterViewInit, OnDestro
this.dateStyle = textStyle(this.settings.dateFont);
this.dateColor = ColorProcessor.fromSettings(this.settings.dateColor);
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
}

2
ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-value-chart-card-panel" [style]="backgroundStyle">
<div class="tb-value-chart-card-panel" [style]="backgroundStyle$ | async">
<div class="tb-value-chart-card-overlay" [style]="overlayStyle"></div>
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
<div #valueChartCardContent class="tb-value-chart-card-content" [class]="layout">

9
ui-ngx/src/app/modules/home/components/widget/lib/cards/value-chart-card-widget.component.ts

@ -48,6 +48,8 @@ import { TbFlot } from '@home/components/widget/lib/flot-widget';
import { DataKey } from '@shared/models/widget.models';
import { TbFlotKeySettings, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models';
import { getTsValueByLatestDataKey } from '@home/components/widget/lib/cards/aggregated-value-card.models';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
const layoutHeight = 56;
const valueRelativeMaxWidth = 0.5;
@ -84,7 +86,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
valueStyle: ComponentStyle = {};
valueColor: ColorProcessor;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
private flot: TbFlot;
@ -98,7 +100,8 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
private valueFontSize: number;
constructor(private renderer: Renderer2,
constructor(private imagePipe: ImagePipe,
private renderer: Renderer2,
private widgetComponent: WidgetComponent,
private cd: ChangeDetectorRef) {
}
@ -129,7 +132,7 @@ export class ValueChartCardWidgetComponent implements OnInit, AfterViewInit, OnD
this.valueStyle = textStyle(this.settings.valueFont);
this.valueColor = ColorProcessor.fromSettings(this.settings.valueColor);
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
if (this.ctx.defaultSubscription.firstDatasource?.dataKeys?.length) {

2
ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-doughnut-panel" [style]="backgroundStyle">
<div class="tb-doughnut-panel" [style]="backgroundStyle$ | async">
<div class="tb-doughnut-overlay" [style]="overlayStyle"></div>
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
<div #doughnutContent class="tb-doughnut-content" [class]="legendClass">

9
ui-ngx/src/app/modules/home/components/widget/lib/chart/doughnut-widget.component.ts

@ -53,6 +53,8 @@ import { DataKey } from '@shared/models/widget.models';
import { TooltipComponent, TooltipComponentOption } from 'echarts/components';
import { PieChart, PieSeriesOption } from 'echarts/charts';
import { SVGRenderer } from 'echarts/renderers';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
echarts.use([
TooltipComponent,
@ -117,7 +119,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
totalValueColor: ColorProcessor;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
legendItems: DoughnutLegendItem[];
@ -145,7 +147,8 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
private svgShape: Svg;
private totalTextNode: Text;
constructor(private widgetComponent: WidgetComponent,
constructor(private imagePipe: ImagePipe,
private widgetComponent: WidgetComponent,
private renderer: Renderer2,
private translate: TranslateService,
private cd: ChangeDetectorRef) {
@ -167,7 +170,7 @@ export class DoughnutWidgetComponent implements OnInit, OnDestroy, AfterViewInit
this.totalValueColor = ColorProcessor.fromSettings(this.settings.totalValueColor);
}
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
if (this.showLegend) {

2
ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-range-chart-panel" [style]="backgroundStyle">
<div class="tb-range-chart-panel" [style]="backgroundStyle$ | async">
<div class="tb-range-chart-overlay" [style]="overlayStyle"></div>
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
<div class="tb-range-chart-content" [class]="legendClass">

9
ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.component.ts

@ -57,6 +57,8 @@ import { LineChart, LineSeriesOption, } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { rangeChartDefaultSettings, RangeChartWidgetSettings } from './range-chart-widget.models';
import { DataSet } from '@shared/models/widget.models';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
echarts.use([
TooltipComponent,
@ -225,7 +227,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
showLegend: boolean;
legendClass: string;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
legendLabelStyle: ComponentStyle;
@ -246,7 +248,8 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
private tooltipDateFormat: DateFormatProcessor;
constructor(private renderer: Renderer2,
constructor(private imagePipe: ImagePipe,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
}
@ -265,7 +268,7 @@ export class RangeChartWidgetComponent implements OnInit, OnDestroy, AfterViewIn
}
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
this.rangeItems = toRangeItems(this.settings.rangeColors);

2
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-form.component.ts

@ -57,7 +57,7 @@ import { AttributeService } from '@core/http/attribute.service';
import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
import { forkJoin, Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { ResizeObserver } from '@juggle/resize-observer';
// @dynamic

2
ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-battery-level-panel" [style]="backgroundStyle" [class.tb-battery-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-battery-level-panel" [style]="backgroundStyle$ | async" [class.tb-battery-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-battery-level-overlay" [style]="overlayStyle"></div>
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
<div #batteryLevelContent class="tb-battery-level-content" [class]="layoutClass">

7
ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts

@ -46,6 +46,8 @@ import {
BatteryLevelWidgetSettings
} from '@home/components/widget/lib/indicator/battery-level-widget.models';
import { ResizeObserver } from '@juggle/resize-observer';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
const verticalBatteryDimensions = {
shapeAspectRatio: 64 / 113,
@ -125,7 +127,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
batteryShapeColor: ColorProcessor;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
batteryBoxResize$: ResizeObserver;
@ -136,6 +138,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
private units = '';
constructor(private date: DatePipe,
private imagePipe: ImagePipe,
private widgetComponent: WidgetComponent,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
@ -190,7 +193,7 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
this.batteryShapeColor = ColorProcessor.fromSettings(this.settings.batteryShapeColor);
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;

2
ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-liquid-level-panel" [style]="backgroundStyle" [class.tb-liquid-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-liquid-level-panel" [style]="backgroundStyle$ | async" [class.tb-liquid-level-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-liquid-level-overlay" [style]="overlayStyle"></div>
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
<div #liquidLevelContent class="tb-liquid-level-content"></div>

8
ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts

@ -58,6 +58,7 @@ import { ResourcesService } from '@core/services/resources.service';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { TranslateService } from '@ngx-translate/core';
import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance;
import { ImagePipe } from '@shared/pipe/image.pipe';
@Component({
selector: 'tb-liquid-level-widget',
@ -76,7 +77,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
@Input()
widgetTitlePanel: TemplateRef<any>;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
hasCardClickAction = false;
@ -106,7 +107,8 @@ export class LiquidLevelWidgetComponent implements OnInit {
private capacityUnits = Object.values(CapacityUnits);
constructor(private cd: ChangeDetectorRef,
constructor(private imagePipe: ImagePipe,
private cd: ChangeDetectorRef,
private resourcesService: ResourcesService,
private translate: TranslateService) {
}
@ -116,7 +118,7 @@ export class LiquidLevelWidgetComponent implements OnInit {
this.settings = {...levelCardDefaultSettings, ...this.ctx.settings};
this.declareStyles();
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;

2
ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-signal-strength-panel" [style]="backgroundStyle" [class.tb-signal-strength-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-signal-strength-panel" [style]="backgroundStyle$ | async" [class.tb-signal-strength-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-signal-strength-overlay" [style]="overlayStyle"></div>
<div *ngIf="widgetComponent.dashboardWidget.showWidgetTitlePanel || showDate" class="tb-signal-strength-title-panel">
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>

7
ui-ngx/src/app/modules/home/components/widget/lib/indicator/signal-strength-widget.component.ts

@ -51,6 +51,8 @@ import {
} from '@home/components/widget/lib/indicator/signal-strength-widget.models';
import tinycolor from 'tinycolor2';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
const shapeWidth = 149;
const shapeHeight = 113;
@ -104,7 +106,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
};
tooltipDateStyle: ComponentStyle = {};
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
shapeResize$: ResizeObserver;
@ -128,6 +130,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
private noData = false;
constructor(public widgetComponent: WidgetComponent,
private imagePipe: ImagePipe,
private translate: TranslateService,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
@ -186,7 +189,7 @@ export class SignalStrengthWidgetComponent implements OnInit, OnDestroy, AfterVi
this.tooltipDateLabelStyle = {...this.tooltipDateStyle, ...this.tooltipDateLabelStyle};
}
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;

10
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html

@ -27,13 +27,7 @@
</tb-toggle-option>
</tb-toggle-select>
</div>
<tb-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image" formControlName="imageBase64"></tb-image-input>
<div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.imageUrl" class="tb-form-row space-between">
<div translate>widgets.background.image-url</div>
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="imageUrl" placeholder="{{ 'widget-config.set' | translate }}">
</mat-form-field>
</div>
<tb-gallery-image-input [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.image" formControlName="imageUrl"></tb-gallery-image-input>
<div [fxShow]="backgroundSettingsFormGroup.get('type').value === backgroundType.color" class="tb-form-row space-between">
<div translate>widgets.color.color</div>
<tb-color-input asBoxInput
@ -64,7 +58,7 @@
<div class="tb-background-settings-preview-title" translate>
widgets.background.preview
</div>
<div class="tb-background-settings-preview-box mat-elevation-z4" [style]="backgroundStyle">
<div class="tb-background-settings-preview-box mat-elevation-z4" [style]="backgroundStyle$ | async">
<div class="tb-background-settings-preview-overlay" [style]="overlayStyle">
</div>
</div>

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.ts

@ -27,6 +27,8 @@ import { TbPopoverComponent } from '@shared/components/popover.component';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
@Component({
selector: 'tb-background-settings-panel',
@ -54,10 +56,11 @@ export class BackgroundSettingsPanelComponent extends PageComponent implements O
backgroundSettingsFormGroup: UntypedFormGroup;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
constructor(private fb: UntypedFormBuilder,
private imagePipe: ImagePipe,
protected store: Store<AppState>) {
super(store);
}
@ -66,7 +69,6 @@ export class BackgroundSettingsPanelComponent extends PageComponent implements O
this.backgroundSettingsFormGroup = this.fb.group(
{
type: [this.backgroundSettings?.type, []],
imageBase64: [this.backgroundSettings?.imageBase64, []],
imageUrl: [this.backgroundSettings?.imageUrl, []],
color: [this.backgroundSettings?.color, []],
overlay: this.fb.group({
@ -113,7 +115,7 @@ export class BackgroundSettingsPanelComponent extends PageComponent implements O
private updateBackgroundStyle() {
const background: BackgroundSettings = this.backgroundSettingsFormGroup.value;
this.backgroundStyle = backgroundStyle(background);
this.backgroundStyle$ = backgroundStyle(background, this.imagePipe);
this.overlayStyle = overlayStyle(background.overlay);
}

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.html

@ -22,7 +22,7 @@
#matButton
(click)="openBackgroundSettingsPopup($event, matButton)">
<div class="tb-color-preview box" [ngClass]="{'disabled': disabled}">
<div class="tb-color-result" [style]="backgroundStyle">
<div class="tb-color-result" [style]="backgroundStyle$ | async">
<div class="tb-color-overlay" [style]="overlayStyle">
</div>
</div>

15
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings.component.ts

@ -21,13 +21,15 @@ import {
backgroundStyle,
BackgroundType,
ComponentStyle,
overlayStyle
overlayStyle, validateAndUpdateBackgroundSettings
} from '@shared/models/widget-settings.models';
import { MatButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import {
BackgroundSettingsPanelComponent
} from '@home/components/widget/lib/settings/common/background-settings-panel.component';
import { Observable, of } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
@Component({
selector: 'tb-background-settings',
@ -51,13 +53,14 @@ export class BackgroundSettingsComponent implements OnInit, ControlValueAccessor
modelValue: BackgroundSettings;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
private propagateChange = null;
constructor(private popoverService: TbPopoverService,
constructor(private imagePipe: ImagePipe,
private popoverService: TbPopoverService,
private renderer: Renderer2,
private viewContainerRef: ViewContainerRef) {}
@ -77,7 +80,7 @@ export class BackgroundSettingsComponent implements OnInit, ControlValueAccessor
}
writeValue(value: BackgroundSettings): void {
this.modelValue = value;
this.modelValue = validateAndUpdateBackgroundSettings(value);
this.updateBackgroundStyle();
}
@ -109,10 +112,10 @@ export class BackgroundSettingsComponent implements OnInit, ControlValueAccessor
private updateBackgroundStyle() {
if (!this.disabled) {
this.backgroundStyle = backgroundStyle(this.modelValue);
this.backgroundStyle$ = backgroundStyle(this.modelValue, this.imagePipe);
this.overlayStyle = overlayStyle(this.modelValue.overlay);
} else {
this.backgroundStyle = {};
this.backgroundStyle$ = of({});
this.overlayStyle = {};
}
}

2
ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.html

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="tb-wind-speed-direction-panel" [style]="backgroundStyle" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-wind-speed-direction-panel" [style]="backgroundStyle$ | async" [class.tb-wind-speed-direction-pointer]="hasCardClickAction" (click)="cardClick($event)">
<div class="tb-wind-speed-direction-overlay" [style]="overlayStyle"></div>
<ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
<div class="tb-wind-speed-direction-content">

7
ui-ngx/src/app/modules/home/components/widget/lib/weather/wind-speed-direction-widget.component.ts

@ -47,6 +47,8 @@ import { formatValue, isDefinedAndNotNull, isNumeric } from '@core/utils';
import { ResizeObserver } from '@juggle/resize-observer';
import { Path, Svg, SVG, Text } from '@svgdotjs/svg.js';
import { DataKey } from '@shared/models/widget.models';
import { Observable } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
const shapeSize = 180;
const cx = shapeSize / 2;
@ -87,7 +89,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
centerValueColor: ColorProcessor;
backgroundStyle: ComponentStyle = {};
backgroundStyle$: Observable<ComponentStyle>;
overlayStyle: ComponentStyle = {};
shapeResize$: ResizeObserver;
@ -109,6 +111,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
private centerValueText = 'N/A';
constructor(private widgetComponent: WidgetComponent,
private imagePipe: ImagePipe,
private renderer: Renderer2,
private cd: ChangeDetectorRef) {
}
@ -135,7 +138,7 @@ export class WindSpeedDirectionWidgetComponent implements OnInit, OnDestroy, Aft
this.centerValueColor = ColorProcessor.fromSettings(this.settings.centerValueColor);
this.backgroundStyle = backgroundStyle(this.settings.background);
this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe);
this.overlayStyle = overlayStyle(this.settings.background.overlay);
this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;

2
ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts

@ -21,7 +21,7 @@ import { Observable } from 'rxjs';
import {
ImportDialogCsvComponent,
ImportDialogCsvData
} from '@home/components/import-export/import-dialog-csv.component';
} from '@shared/import-export/import-dialog-csv.component';
@Injectable()
export class HomeDialogsService {

2
ui-ngx/src/app/modules/home/models/services.map.ts

@ -33,7 +33,7 @@ import { UserService } from '@core/http/user.service';
import { AlarmService } from '@core/http/alarm.service';
import { Router } from '@angular/router';
import { BroadcastService } from '@core/services/broadcast.service';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { DeviceProfileService } from '@core/http/device-profile.service';
import { AssetProfileService } from '@core/http/asset-profile.service';
import { OtaPackageService } from '@core/http/ota-package.service';

2
ui-ngx/src/app/modules/home/pages/admin/admin-routing.module.ts

@ -39,7 +39,7 @@ import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-aut
import { widgetsLibraryRoutes } from '@home/pages/widget/widget-library-routing.module';
import { RouterTabsComponent } from '@home/components/router-tabs.component';
import { auditLogsRoutes } from '@home/pages/audit-log/audit-log-routing.module';
import { ImageGalleryComponent } from '@home/components/image/image-gallery.component';
import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component';
@Injectable()
export class OAuth2LoginProcessingUrlResolver implements Resolve<string> {

2
ui-ngx/src/app/modules/home/pages/admin/admin.module.ts

@ -33,7 +33,6 @@ import { QueueComponent } from '@home/pages/admin/queue/queue.component';
import { RepositoryAdminSettingsComponent } from '@home/pages/admin/repository-admin-settings.component';
import { AutoCommitAdminSettingsComponent } from '@home/pages/admin/auto-commit-admin-settings.component';
import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-auth-settings.component';
import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module';
@NgModule({
declarations:
@ -55,7 +54,6 @@ import { SharedHomeComponentsModule } from '@home/components/shared-home-compone
imports: [
CommonModule,
SharedModule,
SharedHomeComponentsModule,
HomeComponentsModule,
AdminRoutingModule
]

2
ui-ngx/src/app/modules/home/pages/asset-profile/asset-profiles-table-config.resolver.ts

@ -29,7 +29,7 @@ import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared
import { EntityAction } from '@home/models/entity/entity-component.models';
import { DialogService } from '@core/services/dialog.service';
import { MatDialog } from '@angular/material/dialog';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { HomeDialogsService } from '@home/dialogs/home-dialogs.service';
import { AssetProfile, TB_SERVICE_QUEUE } from '@shared/models/asset.models';
import { AssetProfileService } from '@core/http/asset-profile.service';

2
ui-ngx/src/app/modules/home/pages/dashboard/dashboard.module.ts

@ -24,7 +24,6 @@ import { DashboardRoutingModule } from './dashboard-routing.module';
import { MakeDashboardPublicDialogComponent } from '@modules/home/pages/dashboard/make-dashboard-public-dialog.component';
import { HomeComponentsModule } from '@modules/home/components/home-components.module';
import { DashboardTabsComponent } from '@home/pages/dashboard/dashboard-tabs.component';
import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module';
@NgModule({
declarations: [
@ -36,7 +35,6 @@ import { SharedHomeComponentsModule } from '@home/components/shared-home-compone
imports: [
CommonModule,
SharedModule,
SharedHomeComponentsModule,
HomeComponentsModule,
HomeDialogsModule,
DashboardRoutingModule

34
ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts

@ -63,13 +63,19 @@ import {
MakeDashboardPublicDialogData
} from '@modules/home/pages/dashboard/make-dashboard-public-dialog.component';
import { DashboardTabsComponent } from '@home/pages/dashboard/dashboard-tabs.component';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { EdgeService } from '@core/http/edge.service';
import {
AddEntitiesToEdgeDialogComponent,
AddEntitiesToEdgeDialogData
} from '@home/dialogs/add-entities-to-edge-dialog.component';
import { HomeDialogsService } from '@home/dialogs/home-dialogs.service';
import { Widget } from '@shared/models/widget.models';
import { EntityAliases } from '@shared/models/alias.models';
import {
EntityAliasesDialogComponent,
EntityAliasesDialogData
} from '@home/components/alias/entity-aliases-dialog.component';
@Injectable()
export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<DashboardInfo | Dashboard>> {
@ -382,7 +388,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
}
importDashboard(_$event: Event) {
this.importExport.importDashboard().subscribe(
this.importExport.importDashboard(this.editMissingAliases.bind(this)).subscribe(
(dashboard) => {
if (dashboard) {
this.config.updateData();
@ -391,6 +397,30 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
);
}
private editMissingAliases(widgets: Array<Widget>, isSingleWidget: boolean,
customTitle: string, missingEntityAliases: EntityAliases): Observable<EntityAliases> {
return this.dialog.open<EntityAliasesDialogComponent, EntityAliasesDialogData,
EntityAliases>(EntityAliasesDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
entityAliases: missingEntityAliases,
widgets,
customTitle,
isSingleWidget,
disableAdd: true
}
}).afterClosed().pipe(
map((updatedEntityAliases) => {
if (updatedEntityAliases) {
return updatedEntityAliases;
} else {
throw new Error('Unable to resolve missing entity aliases!');
}
}
));
}
exportDashboard($event: Event, dashboard: DashboardInfo) {
if ($event) {
$event.stopPropagation();

2
ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts

@ -41,7 +41,7 @@ import {
AddDeviceProfileDialogComponent,
AddDeviceProfileDialogData
} from '@home/components/profile/add-device-profile-dialog.component';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { HomeDialogsService } from '@home/dialogs/home-dialogs.service';
@Injectable()

2
ui-ngx/src/app/modules/home/pages/rulechain/rulechains-table-config.resolver.ts

@ -36,7 +36,7 @@ import { RuleChainService } from '@core/http/rule-chain.service';
import { RuleChainComponent } from '@modules/home/pages/rulechain/rulechain.component';
import { DialogService } from '@core/services/dialog.service';
import { RuleChainTabsComponent } from '@home/pages/rulechain/rulechain-tabs.component';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { ItemBufferService } from '@core/services/item-buffer.service';
import { EdgeService } from '@core/http/edge.service';
import { forkJoin, Observable } from 'rxjs';

2
ui-ngx/src/app/modules/home/pages/security/authentication-dialog/backup-code-auth-dialog.component.ts

@ -28,7 +28,7 @@ import {
TwoFactorAuthProviderType
} from '@shared/models/two-factor-auth.models';
import { mergeMap, tap } from 'rxjs/operators';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { deepClone } from '@core/utils';
import printTemplate from '!raw-loader!./backup-code-print-template.raw';

6
ui-ngx/src/app/modules/home/pages/tenant-profile/tenant-profiles-table-config.resolver.ts

@ -29,12 +29,10 @@ import { DatePipe } from '@angular/common';
import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
import { EntityAction } from '@home/models/entity/entity-component.models';
import { TenantProfileService } from '@core/http/tenant-profile.service';
import { TenantProfileComponent } from '../../components/profile/tenant-profile.component';
import { TenantProfileComponent } from '@home/components/profile/tenant-profile.component';
import { TenantProfileTabsComponent } from './tenant-profile-tabs.component';
import { DialogService } from '@core/services/dialog.service';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { map } from 'rxjs/operators';
import { guid } from '@core/utils';
import { ImportExportService } from '@shared/import-export/import-export.service';
@Injectable()
export class TenantProfilesTableConfigResolver implements Resolve<EntityTableConfig<TenantProfile>> {

3
ui-ngx/src/app/modules/home/pages/widget/widget-library.module.ts

@ -28,13 +28,11 @@ import { WidgetTypeComponent } from '@home/pages/widget/widget-type.component';
import { WidgetTypeTabsComponent } from '@home/pages/widget/widget-type-tabs.component';
import { WidgetsBundleWidgetsComponent } from '@home/pages/widget/widgets-bundle-widgets.component';
import { WidgetTypeAutocompleteComponent } from '@home/pages/widget/widget-type-autocomplete.component';
import { SharedHomeComponentsModule } from '@home/components/shared-home-components.module';
@NgModule({
declarations: [
WidgetTypeComponent,
WidgetsBundleComponent,
// WidgetLibraryComponent,
WidgetTypeAutocompleteComponent,
WidgetsBundleWidgetsComponent,
WidgetEditorComponent,
@ -46,7 +44,6 @@ import { SharedHomeComponentsModule } from '@home/components/shared-home-compone
imports: [
CommonModule,
SharedModule,
SharedHomeComponentsModule,
HomeComponentsModule,
WidgetLibraryRoutingModule
]

2
ui-ngx/src/app/modules/home/pages/widget/widget-types-table-config.resolver.ts

@ -33,7 +33,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { getCurrentAuthUser } from '@app/core/auth/auth.selectors';
import { Authority } from '@shared/models/authority.enum';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { Direction } from '@shared/models/page/sort-order';
import {
BaseWidgetType,

2
ui-ngx/src/app/modules/home/pages/widget/widgets-bundle-widgets.component.ts

@ -26,7 +26,7 @@ import { NULL_UUID } from '@shared/models/id/has-uuid';
import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
import { widgetType as WidgetDataType, WidgetTypeInfo } from '@shared/models/widget.models';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { WidgetService } from '@core/http/widget.service';
import { FormControl, Validators } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';

4
ui-ngx/src/app/modules/home/pages/widget/widgets-bundles-table-config.resolver.ts

@ -36,11 +36,9 @@ import { AppState } from '@core/core.state';
import { getCurrentAuthState, getCurrentAuthUser } from '@app/core/auth/auth.selectors';
import { Authority } from '@shared/models/authority.enum';
import { DialogService } from '@core/services/dialog.service';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { Direction } from '@shared/models/page/sort-order';
import { map } from 'rxjs/operators';
import { WidgetsBundleTabsComponent } from '@home/pages/widget/widgets-bundle-tabs.component';
import { TenantInfo } from '@shared/models/tenant.model';
@Injectable()
export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableConfig<WidgetsBundle>> {

0
ui-ngx/src/app/modules/home/models/datasource/scroll-grid-datasource.ts → ui-ngx/src/app/shared/components/grid/scroll-grid-datasource.ts

0
ui-ngx/src/app/modules/home/components/grid/scroll-grid.component.html → ui-ngx/src/app/shared/components/grid/scroll-grid.component.html

0
ui-ngx/src/app/modules/home/components/grid/scroll-grid.component.scss → ui-ngx/src/app/shared/components/grid/scroll-grid.component.scss

2
ui-ngx/src/app/modules/home/components/grid/scroll-grid.component.ts → ui-ngx/src/app/shared/components/grid/scroll-grid.component.ts

@ -30,7 +30,7 @@ import {
GridEntitiesFetchFunction,
ScrollGridColumns,
ScrollGridDatasource
} from '@home/models/datasource/scroll-grid-datasource';
} from '@shared/components/grid/scroll-grid-datasource';
import { BreakpointObserver } from '@angular/cdk/layout';
import { isObject } from '@app/core/utils';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

0
ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.html → ui-ngx/src/app/shared/components/image/gallery-image-input.component.html

2
ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.scss → ui-ngx/src/app/shared/components/image/gallery-image-input.component.scss

@ -14,7 +14,7 @@
* limitations under the License.
*/
@import "../../../../../scss/constants";
@import "../../../../scss/constants";
$containerHeight: 96px !default;

2
ui-ngx/src/app/modules/home/components/image/gallery-image-input.component.ts → ui-ngx/src/app/shared/components/image/gallery-image-input.component.ts

@ -38,7 +38,7 @@ import {
import { ImageService } from '@core/http/image.service';
import { MatButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { ImageGalleryComponent } from '@home/components/image/image-gallery.component';
import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component';
export enum ImageLinkType {
none = 'none',

0
ui-ngx/src/app/modules/home/components/image/image-dialog.component.html → ui-ngx/src/app/shared/components/image/image-dialog.component.html

2
ui-ngx/src/app/modules/home/components/image/image-dialog.component.scss → ui-ngx/src/app/shared/components/image/image-dialog.component.scss

@ -14,7 +14,7 @@
* limitations under the License.
*/
@import '../../../../../scss/constants';
@import '../../../../scss/constants';
:host {
.tb-image-dialog {

2
ui-ngx/src/app/modules/home/components/image/image-dialog.component.ts → ui-ngx/src/app/shared/components/image/image-dialog.component.ts

@ -27,7 +27,7 @@ import { ImageResourceInfo, imageResourceType } from '@shared/models/resource.mo
import {
UploadImageDialogComponent,
UploadImageDialogData
} from '@home/components/image/upload-image-dialog.component';
} from '@shared/components/image/upload-image-dialog.component';
import { UrlHolder } from '@shared/pipe/image.pipe';
export interface ImageDialogData {

0
ui-ngx/src/app/modules/home/components/image/image-gallery.component.html → ui-ngx/src/app/shared/components/image/image-gallery.component.html

2
ui-ngx/src/app/modules/home/components/image/image-gallery.component.scss → ui-ngx/src/app/shared/components/image/image-gallery.component.scss

@ -14,7 +14,7 @@
* limitations under the License.
*/
@import "../../../../../scss/constants";
@import "../../../../scss/constants";
$tb-button-selected-color: rgb(255, 110, 64) !default;

14
ui-ngx/src/app/modules/home/components/image/image-gallery.component.ts → ui-ngx/src/app/shared/components/image/image-gallery.component.ts

@ -53,21 +53,21 @@ import { BaseData, HasId } from '@shared/models/base-data';
import { NULL_UUID } from '@shared/models/id/has-uuid';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { Authority } from '@shared/models/authority.enum';
import { GridEntitiesFetchFunction, ScrollGridColumns } from '@home/models/datasource/scroll-grid-datasource';
import { ItemSizeStrategy, ScrollGridComponent } from '@home/components/grid/scroll-grid.component';
import { GridEntitiesFetchFunction, ScrollGridColumns } from '@shared/components/grid/scroll-grid-datasource';
import { ItemSizeStrategy, ScrollGridComponent } from '@shared/components/grid/scroll-grid.component';
import { MatDialog } from '@angular/material/dialog';
import {
UploadImageDialogComponent,
UploadImageDialogData
} from '@home/components/image/upload-image-dialog.component';
import { ImageDialogComponent, ImageDialogData } from '@home/components/image/image-dialog.component';
import { ImportExportService } from '@home/components/import-export/import-export.service';
} from '@shared/components/image/upload-image-dialog.component';
import { ImageDialogComponent, ImageDialogData } from '@shared/components/image/image-dialog.component';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { ActionNotificationShow } from '@core/notification/notification.actions';
import {
ImagesInUseDialogComponent,
ImagesInUseDialogData
} from '@home/components/image/images-in-use-dialog.component';
import { ImagesDatasource } from '@home/components/image/images-datasource';
} from '@shared/components/image/images-in-use-dialog.component';
import { ImagesDatasource } from '@shared/components/image/images-datasource';
interface GridImagesFilter {
search: string;

0
ui-ngx/src/app/modules/home/components/image/image-references.component.html → ui-ngx/src/app/shared/components/image/image-references.component.html

2
ui-ngx/src/app/modules/home/components/image/image-references.component.scss → ui-ngx/src/app/shared/components/image/image-references.component.scss

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../../../../../scss/constants";
@import "../../../../scss/constants";
:host {
ul.tb-references {

0
ui-ngx/src/app/modules/home/components/image/image-references.component.ts → ui-ngx/src/app/shared/components/image/image-references.component.ts

0
ui-ngx/src/app/modules/home/components/image/images-datasource.ts → ui-ngx/src/app/shared/components/image/images-datasource.ts

0
ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.html → ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.html

0
ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.scss → ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.scss

4
ui-ngx/src/app/modules/home/components/image/images-in-use-dialog.component.ts → ui-ngx/src/app/shared/components/image/images-in-use-dialog.component.ts

@ -21,10 +21,10 @@ import { AppState } from '@core/core.state';
import { DialogComponent } from '@shared/components/dialog.component';
import { Router } from '@angular/router';
import { ImageReferences, ImageResourceInfo, ImageResourceInfoWithReferences } from '@shared/models/resource.models';
import { ImagesDatasource } from '@home/components/image/images-datasource';
import { ImagesDatasource } from '@shared/components/image/images-datasource';
import { MatButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { ImageReferencesComponent } from '@home/components/image/image-references.component';
import { ImageReferencesComponent } from '@shared/components/image/image-references.component';
import { TranslateService } from '@ngx-translate/core';
export interface ImagesInUseDialogData {

0
ui-ngx/src/app/modules/home/components/image/multiple-gallery-image-input.component.html → ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.html

2
ui-ngx/src/app/modules/home/components/image/multiple-gallery-image-input.component.scss → ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.scss

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import "../../../../../scss/constants";
@import "../../../../scss/constants";
$imagesContainerHeight: 106px !default;
$selectContainerHeight: 96px !default;

4
ui-ngx/src/app/modules/home/components/image/multiple-gallery-image-input.component.ts → ui-ngx/src/app/shared/components/image/multiple-gallery-image-input.component.ts

@ -23,10 +23,10 @@ import { moveItemInArray } from '@angular/cdk/drag-drop';
import { DndDropEvent } from 'ngx-drag-drop';
import { isUndefined } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion';
import { ImageLinkType } from '@home/components/image/gallery-image-input.component';
import { ImageLinkType } from '@shared/components/image/gallery-image-input.component';
import { TbPopoverService } from '@shared/components/popover.service';
import { MatButton } from '@angular/material/button';
import { ImageGalleryComponent } from '@home/components/image/image-gallery.component';
import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component';
@Component({
selector: 'tb-multiple-gallery-image-input',

0
ui-ngx/src/app/modules/home/components/image/upload-image-dialog.component.html → ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html

0
ui-ngx/src/app/modules/home/components/image/upload-image-dialog.component.ts → ui-ngx/src/app/shared/components/image/upload-image-dialog.component.ts

2
ui-ngx/src/app/shared/components/public-api.ts

@ -29,3 +29,5 @@ export * from './unit-input.component';
export * from './material-icons.component';
export * from './icon.component';
export * from './hint-tooltip-icon.component';
export * from './grid/scroll-grid-datasource';
export * from './grid/scroll-grid.component';

0
ui-ngx/src/app/modules/home/components/import-export/export-widgets-bundle-dialog.component.html → ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.html

0
ui-ngx/src/app/modules/home/components/import-export/export-widgets-bundle-dialog.component.ts → ui-ngx/src/app/shared/import-export/export-widgets-bundle-dialog.component.ts

0
ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html → ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html

0
ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.scss → ui-ngx/src/app/shared/import-export/import-dialog-csv.component.scss

8
ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.ts → ui-ngx/src/app/shared/import-export/import-dialog-csv.component.ts

@ -35,9 +35,9 @@ import {
CsvToJsonConfig,
CsvToJsonResult,
ImportEntityColumnType
} from '@home/components/import-export/import-export.models';
import { ImportExportService } from '@home/components/import-export/import-export.service';
import { TableColumnsAssignmentComponent } from '@home/components/import-export/table-columns-assignment.component';
} from '@shared/import-export/import-export.models';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { TableColumnsAssignmentComponent } from '@shared/import-export/table-columns-assignment.component';
import { Ace } from 'ace-builds';
import { getAce } from '@shared/models/ace/ace.models';
@ -68,7 +68,7 @@ export class ImportDialogCsvComponent extends DialogComponent<ImportDialogCsvCom
importTitle: string;
importFileLabel: string;
delimiters: { key: CSVDelimiter, value: string }[] = [{
delimiters: { key: CSVDelimiter; value: string }[] = [{
key: ',',
value: ','
}, {

0
ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.html → ui-ngx/src/app/shared/import-export/import-dialog.component.html

0
ui-ngx/src/app/modules/home/components/import-export/import-dialog.component.ts → ui-ngx/src/app/shared/import-export/import-dialog.component.ts

0
ui-ngx/src/app/modules/home/components/import-export/import-export.models.ts → ui-ngx/src/app/shared/import-export/import-export.models.ts

42
ui-ngx/src/app/modules/home/components/import-export/import-export.service.ts → ui-ngx/src/app/shared/import-export/import-export.service.ts

@ -33,16 +33,12 @@ import {
EntityAliasInfo
} from '@shared/models/alias.models';
import { MatDialog } from '@angular/material/dialog';
import { ImportDialogComponent, ImportDialogData } from '@home/components/import-export/import-dialog.component';
import { ImportDialogComponent, ImportDialogData } from '@shared/import-export/import-dialog.component';
import { forkJoin, Observable, of, Subject } from 'rxjs';
import { catchError, map, mergeMap, switchMap, tap } from 'rxjs/operators';
import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
import { EntityService } from '@core/http/entity.service';
import { Widget, WidgetSize, WidgetType, WidgetTypeDetails } from '@shared/models/widget.models';
import {
EntityAliasesDialogComponent,
EntityAliasesDialogData
} from '@home/components/alias/entity-aliases-dialog.component';
import { ItemBufferService, WidgetItem } from '@core/services/item-buffer.service';
import {
BulkImportRequest,
@ -78,10 +74,13 @@ import {
ExportWidgetsBundleDialogComponent,
ExportWidgetsBundleDialogData,
ExportWidgetsBundleDialogResult
} from '@home/components/import-export/export-widgets-bundle-dialog.component';
} from '@shared/import-export/export-widgets-bundle-dialog.component';
import { ImageService } from '@core/http/image.service';
import { ImageExportData, ImageResourceInfo, ImageResourceType } from '@shared/models/resource.models';
export type editMissingAliasesFunction = (widgets: Array<Widget>, isSingleWidget: boolean,
customTitle: string, missingEntityAliases: EntityAliases) => Observable<EntityAliases>;
// @dynamic
@Injectable()
export class ImportExportService {
@ -152,7 +151,7 @@ export class ImportExportService {
);
}
public importDashboard(): Observable<Dashboard> {
public importDashboard(onEditMissingAliases: editMissingAliasesFunction): Observable<Dashboard> {
return this.openImportDialog('dashboard.import', 'dashboard.dashboard-file').pipe(
mergeMap((dashboard: Dashboard) => {
if (!this.validateImportedDashboard(dashboard)) {
@ -171,7 +170,7 @@ export class ImportExportService {
return this.processEntityAliases(entityAliases, aliasIds).pipe(
mergeMap((missingEntityAliases) => {
if (Object.keys(missingEntityAliases).length > 0) {
return this.editMissingAliases(this.dashboardUtils.getWidgetsArray(dashboard),
return onEditMissingAliases(this.dashboardUtils.getWidgetsArray(dashboard),
false, 'dashboard.dashboard-import-missing-aliases-title',
missingEntityAliases).pipe(
mergeMap((updatedEntityAliases) => {
@ -205,6 +204,7 @@ export class ImportExportService {
}
public importWidget(dashboard: Dashboard, targetState: string,
onEditMissingAliases: editMissingAliasesFunction,
targetLayoutFunction: () => Observable<DashboardLayoutId>,
onAliasesUpdateFunction: () => void,
onFiltersUpdateFunction: () => void): Observable<ImportWidgetResult> {
@ -255,7 +255,7 @@ export class ImportExportService {
return this.processEntityAliases(entityAliases, aliasIds).pipe(
mergeMap((missingEntityAliases) => {
if (Object.keys(missingEntityAliases).length > 0) {
return this.editMissingAliases([widget],
onEditMissingAliases([widget],
false, 'dashboard.widget-import-missing-aliases-title',
missingEntityAliases).pipe(
mergeMap((updatedEntityAliases) => {
@ -971,30 +971,6 @@ export class ImportExportService {
);
}
private editMissingAliases(widgets: Array<Widget>, isSingleWidget: boolean,
customTitle: string, missingEntityAliases: EntityAliases): Observable<EntityAliases> {
return this.dialog.open<EntityAliasesDialogComponent, EntityAliasesDialogData,
EntityAliases>(EntityAliasesDialogComponent, {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
entityAliases: missingEntityAliases,
widgets,
customTitle,
isSingleWidget,
disableAdd: true
}
}).afterClosed().pipe(
map((updatedEntityAliases) => {
if (updatedEntityAliases) {
return updatedEntityAliases;
} else {
throw new Error('Unable to resolve missing entity aliases!');
}
}
));
}
private prepareAliasesInfo(aliasesInfo: AliasesInfo): AliasesInfo {
const datasourceAliases = aliasesInfo.datasourceAliases;
const targetDeviceAliases = aliasesInfo.targetDeviceAliases;

0
ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html → ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html

0
ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.scss → ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss

2
ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts → ui-ngx/src/app/shared/import-export/table-columns-assignment.component.ts

@ -23,7 +23,7 @@ import {
CsvColumnParam,
ImportEntityColumnType,
importEntityColumnTypeTranslations
} from '@home/components/import-export/import-export.models';
} from '@shared/import-export/import-export.models';
import { BehaviorSubject, Observable } from 'rxjs';
import { CollectionViewer, DataSource } from '@angular/cdk/collections';

38
ui-ngx/src/app/shared/models/widget-settings.models.ts

@ -22,6 +22,9 @@ import { DateAgoPipe } from '@shared/pipe/date-ago.pipe';
import { TranslateService } from '@ngx-translate/core';
import { AlarmFilterConfig } from '@shared/models/query/query.models';
import { AlarmSearchStatus } from '@shared/models/alarm.models';
import { Observable, of } from 'rxjs';
import { ImagePipe } from '@shared/pipe/image.pipe';
import { map } from 'rxjs/operators';
export type ComponentStyle = {[klass: string]: any};
@ -416,14 +419,12 @@ export class LastUpdateAgoDateFormatProcessor extends DateFormatProcessor {
export enum BackgroundType {
image = 'image',
imageUrl = 'imageUrl',
color = 'color'
}
export const backgroundTypeTranslations = new Map<BackgroundType, string>(
[
[BackgroundType.image, 'widgets.background.background-type-image'],
[BackgroundType.imageUrl, 'widgets.background.background-type-image-url'],
[BackgroundType.color, 'widgets.background.background-type-color']
]
);
@ -436,7 +437,6 @@ export interface OverlaySettings {
export interface BackgroundSettings {
type: BackgroundType;
imageBase64?: string;
imageUrl?: string;
color?: string;
overlay: OverlaySettings;
@ -507,19 +507,35 @@ export const isFontSet = (font: Font): boolean => (!!font && !!font.style && !!f
export const isFontPartiallySet = (font: Font): boolean => (!!font && (!!font.style || !!font.weight || !!font.size || !!font.family));
export const backgroundStyle = (background: BackgroundSettings): ComponentStyle => {
export const validateAndUpdateBackgroundSettings = (background: BackgroundSettings): BackgroundSettings => {
if (background) {
if (background.type === BackgroundType.image && (background as any).imageBase64) {
background.imageUrl = (background as any).imageBase64;
}
if (background.type === 'imageUrl' as any) {
background.type = BackgroundType.image;
}
delete (background as any).imageBase64;
}
return background;
};
export const backgroundStyle = (background: BackgroundSettings, imagePipe: ImagePipe): Observable<ComponentStyle> => {
background = validateAndUpdateBackgroundSettings(background);
if (background.type === BackgroundType.color) {
return {
return of({
background: background.color
};
});
} else {
const imageUrl = background.type === BackgroundType.image ? background.imageBase64 : background.imageUrl;
const imageUrl = background.imageUrl;
if (imageUrl) {
return {
background: `url(${imageUrl}) no-repeat 50% 50% / cover`
};
return imagePipe.transform(imageUrl, {asString: true, ignoreLoadingImage: true}).pipe(
map((transformedUrl) => ({
background: `url(${transformedUrl}) no-repeat 50% 50% / cover`
}))
);
} else {
return {};
return of({});
}
}
};

42
ui-ngx/src/app/shared/shared.module.ts

@ -201,6 +201,19 @@ import { TbIconComponent } from '@shared/components/icon.component';
import { HintTooltipIconComponent } from '@shared/components/hint-tooltip-icon.component';
import { StringAutocompleteComponent } from '@shared/components/string-autocomplete.component';
import { ImagePipe } from '@shared/pipe/image.pipe';
import { ImportExportService } from '@shared/import-export/import-export.service';
import { ImportDialogComponent } from '@shared/import-export/import-dialog.component';
import { ImportDialogCsvComponent } from '@shared/import-export/import-dialog-csv.component';
import { ExportWidgetsBundleDialogComponent } from '@shared/import-export/export-widgets-bundle-dialog.component';
import { TableColumnsAssignmentComponent } from '@shared/import-export/table-columns-assignment.component';
import { ScrollGridComponent } from '@shared/components/grid/scroll-grid.component';
import { ImageGalleryComponent } from '@shared/components/image/image-gallery.component';
import { UploadImageDialogComponent } from '@shared/components/image/upload-image-dialog.component';
import { ImageDialogComponent } from '@shared/components/image/image-dialog.component';
import { ImageReferencesComponent } from '@shared/components/image/image-references.component';
import { ImagesInUseDialogComponent } from '@shared/components/image/images-in-use-dialog.component';
import { GalleryImageInputComponent } from '@shared/components/image/gallery-image-input.component';
import { MultipleGalleryImageInputComponent } from '@shared/components/image/multiple-gallery-image-input.component';
export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
return markedOptionsService;
@ -236,6 +249,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
{ provide: SHARED_MODULE_TOKEN, useValue: SharedModule },
{ provide: MatPaginatorIntl, useClass: CustomPaginatorIntl },
TbPopoverService,
ImportExportService,
{
provide: MAT_SELECT_CONFIG,
useValue: {
@ -382,7 +396,19 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
MaterialIconsComponent,
RuleChainSelectComponent,
TbIconComponent,
HintTooltipIconComponent
HintTooltipIconComponent,
ImportDialogComponent,
ImportDialogCsvComponent,
ExportWidgetsBundleDialogComponent,
TableColumnsAssignmentComponent,
ScrollGridComponent,
ImageGalleryComponent,
UploadImageDialogComponent,
ImageDialogComponent,
ImageReferencesComponent,
ImagesInUseDialogComponent,
GalleryImageInputComponent,
MultipleGalleryImageInputComponent
],
imports: [
CommonModule,
@ -619,7 +645,19 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
MaterialIconsComponent,
RuleChainSelectComponent,
TbIconComponent,
HintTooltipIconComponent
HintTooltipIconComponent,
ImportDialogComponent,
ImportDialogCsvComponent,
ExportWidgetsBundleDialogComponent,
TableColumnsAssignmentComponent,
ScrollGridComponent,
ImageGalleryComponent,
UploadImageDialogComponent,
ImageDialogComponent,
ImageReferencesComponent,
ImagesInUseDialogComponent,
GalleryImageInputComponent,
MultipleGalleryImageInputComponent
]
})
export class SharedModule { }

5
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -5122,9 +5122,8 @@
"background": {
"background": "Background",
"background-settings": "Background settings",
"background-type-image": "Upload image",
"background-type-image-url": "Image URL",
"background-type-color": "Solid color",
"background-type-image": "Image",
"background-type-color": "Color",
"image-url": "Image URL",
"overlay": "Overlay",
"enable-overlay": "Enable overlay",

Loading…
Cancel
Save