Igor Kulikov
7 years ago
16 changed files with 991 additions and 32 deletions
@ -0,0 +1,60 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<form #importForm="ngForm" [formGroup]="importFormGroup" (ngSubmit)="importFromJson()"> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>{{ importTitle }}</h2> |
|||
<span fxFlex></span> |
|||
<button mat-button mat-icon-button |
|||
(click)="cancel()" |
|||
type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</mat-toolbar> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div mat-dialog-content> |
|||
<fieldset [disabled]="isLoading$ | async"> |
|||
<div fxFlex fxLayout="column"> |
|||
<tb-file-input |
|||
[contentConvertFunction]="loadDataFromJsonContent" |
|||
formControlName="jsonContent" |
|||
required |
|||
label="{{importFileLabel | translate}}" |
|||
dropLabel="{{ 'import.drop-file' | translate }}" |
|||
accept=".json,application/json" |
|||
allowedExtensions="json"> |
|||
</tb-file-input> |
|||
</div> |
|||
</fieldset> |
|||
</div> |
|||
<div mat-dialog-actions fxLayout="row"> |
|||
<span fxFlex></span> |
|||
<button mat-button mat-raised-button color="primary" |
|||
type="submit" |
|||
[disabled]="(isLoading$ | async) || importFormGroup.invalid || !importFormGroup.dirty"> |
|||
{{ 'action.import' | translate }} |
|||
</button> |
|||
<button mat-button color="primary" |
|||
style="margin-right: 20px;" |
|||
type="button" |
|||
[disabled]="(isLoading$ | async)" |
|||
(click)="cancel()" cdkFocusInitial> |
|||
{{ 'action.cancel' | translate }} |
|||
</button> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,107 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; |
|||
import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { |
|||
AbstractControl, |
|||
FormArray, |
|||
FormBuilder, |
|||
FormControl, |
|||
FormGroup, |
|||
FormGroupDirective, |
|||
NgForm, Validators, ValidatorFn |
|||
} from '@angular/forms'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@app/shared/components/dialog.component'; |
|||
import { AttributeData } from '@shared/models/telemetry/telemetry.models'; |
|||
import { EntityAlias, EntityAliases, EntityAliasFilter } from '@shared/models/alias.models'; |
|||
import { DatasourceType, Widget, widgetType } from '@shared/models/widget.models'; |
|||
import { AliasEntityType, EntityType } from '@shared/models/entity-type.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
|||
import { DialogService } from '@core/services/dialog.service'; |
|||
import { EntityService } from '@core/http/entity.service'; |
|||
import { Observable, of } from 'rxjs'; |
|||
|
|||
export interface ImportDialogData { |
|||
importTitle: string; |
|||
importFileLabel: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-import-dialog', |
|||
templateUrl: './import-dialog.component.html', |
|||
providers: [{provide: ErrorStateMatcher, useExisting: ImportDialogComponent}], |
|||
styleUrls: [] |
|||
}) |
|||
export class ImportDialogComponent extends DialogComponent<ImportDialogComponent, any> |
|||
implements OnInit, ErrorStateMatcher { |
|||
|
|||
importTitle: string; |
|||
importFileLabel: string; |
|||
|
|||
importFormGroup: FormGroup; |
|||
|
|||
submitted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: ImportDialogData, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<ImportDialogComponent, any>, |
|||
private fb: FormBuilder) { |
|||
super(store, router, dialogRef); |
|||
this.importTitle = data.importTitle; |
|||
this.importFileLabel = data.importFileLabel; |
|||
|
|||
this.importFormGroup = this.fb.group({ |
|||
jsonContent: [null, [Validators.required]] |
|||
}); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { |
|||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form); |
|||
const customErrorState = !!(control && control.invalid && this.submitted); |
|||
return originalErrorState || customErrorState; |
|||
} |
|||
|
|||
loadDataFromJsonContent(content: string): any { |
|||
try { |
|||
const importData = JSON.parse(content); |
|||
return importData; |
|||
} catch (err) { |
|||
this.store.dispatch(new ActionNotificationShow({message: err.message, type: 'error'})); |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
importFromJson(): void { |
|||
this.submitted = true; |
|||
const importData = this.importFormGroup.get('jsonContent').value; |
|||
this.dialogRef.close(importData); |
|||
} |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Widget } from '@app/shared/models/widget.models'; |
|||
import { DashboardLayoutId } from '@shared/models/dashboard.models'; |
|||
|
|||
export interface ImportWidgetResult { |
|||
widget: Widget; |
|||
layoutId: DashboardLayoutId; |
|||
} |
|||
@ -0,0 +1,457 @@ |
|||
///
|
|||
/// 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, Injectable } from '@angular/core'; |
|||
import { DashboardService } from '@core/http/dashboard.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { ActionNotificationShow } from '@core/notification/notification.actions'; |
|||
import { Dashboard, DashboardLayoutId } from '@shared/models/dashboard.models'; |
|||
import { deepClone, isDefined, isObject, isUndefined } from '@core/utils'; |
|||
import { WINDOW } from '@core/services/window.service'; |
|||
import { DOCUMENT } from '@angular/common'; |
|||
import { |
|||
AliasesInfo, |
|||
AliasFilterType, |
|||
EntityAlias, |
|||
EntityAliases, |
|||
EntityAliasFilter, |
|||
EntityAliasInfo |
|||
} from '@shared/models/alias.models'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { ImportDialogComponent, ImportDialogData } from '@home/components/import-export/import-dialog.component'; |
|||
import { forkJoin, Observable, of } from 'rxjs'; |
|||
import { catchError, map, mergeMap } from 'rxjs/operators'; |
|||
import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; |
|||
import { EntityService } from '@core/http/entity.service'; |
|||
import { Widget, WidgetSize } 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 { ImportWidgetResult } from './import-export.models'; |
|||
import { EntityType } from '@shared/models/entity-type.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
|
|||
@Injectable() |
|||
export class ImportExportService { |
|||
|
|||
constructor(@Inject(WINDOW) private window: Window, |
|||
@Inject(DOCUMENT) private document: Document, |
|||
private store: Store<AppState>, |
|||
private translate: TranslateService, |
|||
private dashboardService: DashboardService, |
|||
private dashboardUtils: DashboardUtilsService, |
|||
private entityService: EntityService, |
|||
private utils: UtilsService, |
|||
private itembuffer: ItemBufferService, |
|||
private dialog: MatDialog) { |
|||
|
|||
} |
|||
|
|||
public exportDashboard(dashboardId: string) { |
|||
this.dashboardService.getDashboard(dashboardId).subscribe( |
|||
(dashboard) => { |
|||
let name = dashboard.title; |
|||
name = name.toLowerCase().replace(/\W/g, '_'); |
|||
this.exportToPc(this.prepareDashboardExport(dashboard), name + '.json'); |
|||
}, |
|||
(e) => { |
|||
let message = e; |
|||
if (!message) { |
|||
message = this.translate.instant('error.unknown-error'); |
|||
} |
|||
this.store.dispatch(new ActionNotificationShow( |
|||
{message: this.translate.instant('dashboard.export-failed-error', {error: message}), |
|||
type: 'error'})); |
|||
} |
|||
); |
|||
} |
|||
|
|||
public importDashboard(): Observable<Dashboard> { |
|||
return this.openImportDialog('dashboard.import', 'dashboard.dashboard-file').pipe( |
|||
mergeMap((dashboard: Dashboard) => { |
|||
if (!this.validateImportedDashboard(dashboard)) { |
|||
this.store.dispatch(new ActionNotificationShow( |
|||
{message: this.translate.instant('dashboard.invalid-dashboard-file-error'), |
|||
type: 'error'})); |
|||
throw new Error('Invalid dashboard file'); |
|||
} else { |
|||
dashboard = this.dashboardUtils.validateAndUpdateDashboard(dashboard); |
|||
let aliasIds = null; |
|||
const entityAliases = dashboard.configuration.entityAliases; |
|||
if (entityAliases) { |
|||
aliasIds = Object.keys(entityAliases); |
|||
} |
|||
if (aliasIds && aliasIds.length > 0) { |
|||
return this.processEntityAliases(entityAliases, aliasIds).pipe( |
|||
mergeMap((missingEntityAliases) => { |
|||
if (Object.keys(missingEntityAliases).length > 0) { |
|||
return this.editMissingAliases(this.dashboardUtils.getWidgetsArray(dashboard), |
|||
false, 'dashboard.dashboard-import-missing-aliases-title', |
|||
missingEntityAliases).pipe( |
|||
mergeMap((updatedEntityAliases) => { |
|||
for (const aliasId of Object.keys(updatedEntityAliases)) { |
|||
entityAliases[aliasId] = updatedEntityAliases[aliasId]; |
|||
} |
|||
return this.saveImportedDashboard(dashboard); |
|||
}) |
|||
); |
|||
} else { |
|||
return this.saveImportedDashboard(dashboard); |
|||
} |
|||
} |
|||
)); |
|||
} else { |
|||
return this.saveImportedDashboard(dashboard); |
|||
} |
|||
} |
|||
}), |
|||
catchError((err) => { |
|||
return of(null); |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget) { |
|||
const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget); |
|||
let name = widgetItem.widget.config.title; |
|||
name = name.toLowerCase().replace(/\W/g, '_'); |
|||
this.exportToPc(this.prepareExport(widgetItem), name + '.json'); |
|||
} |
|||
|
|||
public importWidget(dashboard: Dashboard, targetState: string, |
|||
targetLayoutFunction: () => Observable<DashboardLayoutId>, |
|||
onAliasesUpdateFunction: () => void): Observable<ImportWidgetResult> { |
|||
return this.openImportDialog('dashboard.import-widget', 'dashboard.widget-file').pipe( |
|||
mergeMap((widgetItem: WidgetItem) => { |
|||
if (!this.validateImportedWidget(widgetItem)) { |
|||
this.store.dispatch(new ActionNotificationShow( |
|||
{message: this.translate.instant('dashboard.invalid-widget-file-error'), |
|||
type: 'error'})); |
|||
throw new Error('Invalid widget file'); |
|||
} else { |
|||
let widget = widgetItem.widget; |
|||
widget = this.dashboardUtils.validateAndUpdateWidget(widget); |
|||
const aliasesInfo = this.prepareAliasesInfo(widgetItem.aliasesInfo); |
|||
const originalColumns = widgetItem.originalColumns; |
|||
const originalSize = widgetItem.originalSize; |
|||
|
|||
const datasourceAliases = aliasesInfo.datasourceAliases; |
|||
const targetDeviceAliases = aliasesInfo.targetDeviceAliases; |
|||
if (datasourceAliases || targetDeviceAliases) { |
|||
const entityAliases: EntityAliases = {}; |
|||
const datasourceAliasesMap: {[aliasId: string]: number} = {}; |
|||
const targetDeviceAliasesMap: {[aliasId: string]: number} = {}; |
|||
let aliasId: string; |
|||
let datasourceIndex: number; |
|||
if (datasourceAliases) { |
|||
for (const strIndex of Object.keys(datasourceAliases)) { |
|||
datasourceIndex = Number(strIndex); |
|||
aliasId = this.utils.guid(); |
|||
datasourceAliasesMap[aliasId] = datasourceIndex; |
|||
entityAliases[aliasId] = {id: aliasId, ...datasourceAliases[datasourceIndex]}; |
|||
} |
|||
} |
|||
if (targetDeviceAliases) { |
|||
for (const strIndex of Object.keys(targetDeviceAliases)) { |
|||
datasourceIndex = Number(strIndex); |
|||
aliasId = this.utils.guid(); |
|||
targetDeviceAliasesMap[aliasId] = datasourceIndex; |
|||
entityAliases[aliasId] = {id: aliasId, ...targetDeviceAliases[datasourceIndex]}; |
|||
} |
|||
} |
|||
const aliasIds = Object.keys(entityAliases); |
|||
if (aliasIds.length > 0) { |
|||
return this.processEntityAliases(entityAliases, aliasIds).pipe( |
|||
mergeMap((missingEntityAliases) => { |
|||
if (Object.keys(missingEntityAliases).length > 0) { |
|||
return this.editMissingAliases([widget], |
|||
false, 'dashboard.widget-import-missing-aliases-title', |
|||
missingEntityAliases).pipe( |
|||
mergeMap((updatedEntityAliases) => { |
|||
for (const id of Object.keys(updatedEntityAliases)) { |
|||
const entityAlias = updatedEntityAliases[id]; |
|||
let index; |
|||
if (isDefined(datasourceAliasesMap[id])) { |
|||
index = datasourceAliasesMap[id]; |
|||
datasourceAliases[index] = entityAlias; |
|||
} else if (isDefined(targetDeviceAliasesMap[id])) { |
|||
index = targetDeviceAliasesMap[id]; |
|||
targetDeviceAliases[index] = entityAlias; |
|||
} |
|||
} |
|||
return this.addImportedWidget(dashboard, targetState, targetLayoutFunction, widget, |
|||
aliasesInfo, onAliasesUpdateFunction, originalColumns, originalSize); |
|||
} |
|||
)); |
|||
} else { |
|||
return this.addImportedWidget(dashboard, targetState, targetLayoutFunction, widget, |
|||
aliasesInfo, onAliasesUpdateFunction, originalColumns, originalSize); |
|||
} |
|||
} |
|||
) |
|||
); |
|||
} else { |
|||
return this.addImportedWidget(dashboard, targetState, targetLayoutFunction, widget, |
|||
aliasesInfo, onAliasesUpdateFunction, originalColumns, originalSize); |
|||
} |
|||
} else { |
|||
return this.addImportedWidget(dashboard, targetState, targetLayoutFunction, widget, |
|||
aliasesInfo, onAliasesUpdateFunction, originalColumns, originalSize); |
|||
} |
|||
} |
|||
}), |
|||
catchError((err) => { |
|||
return of(null); |
|||
}) |
|||
); |
|||
} |
|||
|
|||
private validateImportedDashboard(dashboard: Dashboard): boolean { |
|||
if (isUndefined(dashboard.title) || isUndefined(dashboard.configuration)) { |
|||
return false; |
|||
} |
|||
return true; |
|||
} |
|||
|
|||
private validateImportedWidget(widgetItem: WidgetItem): boolean { |
|||
if (isUndefined(widgetItem.widget) |
|||
|| isUndefined(widgetItem.aliasesInfo) |
|||
|| isUndefined(widgetItem.originalColumns)) { |
|||
return false; |
|||
} |
|||
const widget = widgetItem.widget; |
|||
if (isUndefined(widget.isSystemType) || |
|||
isUndefined(widget.bundleAlias) || |
|||
isUndefined(widget.typeAlias) || |
|||
isUndefined(widget.type)) { |
|||
return false; |
|||
} |
|||
return true; |
|||
} |
|||
|
|||
private saveImportedDashboard(dashboard: Dashboard): Observable<Dashboard> { |
|||
return this.dashboardService.saveDashboard(dashboard); |
|||
} |
|||
|
|||
private addImportedWidget(dashboard: Dashboard, targetState: string, |
|||
targetLayoutFunction: () => Observable<DashboardLayoutId>, |
|||
widget: Widget, aliasesInfo: AliasesInfo, onAliasesUpdateFunction: () => void, |
|||
originalColumns: number, originalSize: WidgetSize): Observable<ImportWidgetResult> { |
|||
return targetLayoutFunction().pipe( |
|||
mergeMap((targetLayout) => { |
|||
return this.itembuffer.addWidgetToDashboard(dashboard, targetState, targetLayout, |
|||
widget, aliasesInfo, onAliasesUpdateFunction, originalColumns, originalSize, -1, -1).pipe( |
|||
map(() => ({widget, layoutId: targetLayout} as ImportWidgetResult)) |
|||
); |
|||
} |
|||
)); |
|||
} |
|||
|
|||
private processEntityAliases(entityAliases: EntityAliases, aliasIds: string[]): Observable<EntityAliases> { |
|||
const tasks: Observable<EntityAlias>[] = []; |
|||
for (const aliasId of aliasIds) { |
|||
const entityAlias = entityAliases[aliasId]; |
|||
tasks.push( |
|||
this.entityService.checkEntityAlias(entityAlias).pipe( |
|||
map((result) => { |
|||
if (!result) { |
|||
const missingEntityAlias = deepClone(entityAlias); |
|||
missingEntityAlias.filter = null; |
|||
return missingEntityAlias; |
|||
} |
|||
return null; |
|||
} |
|||
) |
|||
) |
|||
); |
|||
} |
|||
return forkJoin(tasks).pipe( |
|||
map((missingAliasesArray) => { |
|||
missingAliasesArray = missingAliasesArray.filter(alias => alias !== null); |
|||
const missingEntityAliases: EntityAliases = {}; |
|||
for (const missingAlias of missingAliasesArray) { |
|||
missingEntityAliases[missingAlias.id] = missingAlias; |
|||
} |
|||
return missingEntityAliases; |
|||
} |
|||
) |
|||
); |
|||
} |
|||
|
|||
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; |
|||
if (datasourceAliases || targetDeviceAliases) { |
|||
if (datasourceAliases) { |
|||
for (const strIndex of Object.keys(datasourceAliases)) { |
|||
const datasourceIndex = Number(strIndex); |
|||
datasourceAliases[datasourceIndex] = this.prepareEntityAlias(datasourceAliases[datasourceIndex]); |
|||
} |
|||
} |
|||
if (targetDeviceAliases) { |
|||
for (const strIndex of Object.keys(targetDeviceAliases)) { |
|||
const datasourceIndex = Number(strIndex); |
|||
targetDeviceAliases[datasourceIndex] = this.prepareEntityAlias(targetDeviceAliases[datasourceIndex]); |
|||
} |
|||
} |
|||
} |
|||
return aliasesInfo; |
|||
} |
|||
|
|||
private prepareEntityAlias(aliasInfo: EntityAliasInfo): EntityAliasInfo { |
|||
let alias: string; |
|||
let filter: EntityAliasFilter; |
|||
if (aliasInfo.deviceId) { |
|||
alias = aliasInfo.aliasName; |
|||
filter = { |
|||
type: AliasFilterType.entityList, |
|||
entityType: EntityType.DEVICE, |
|||
entityList: [aliasInfo.deviceId], |
|||
resolveMultiple: false |
|||
}; |
|||
} else if (aliasInfo.deviceFilter) { |
|||
alias = aliasInfo.aliasName; |
|||
filter = { |
|||
type: aliasInfo.deviceFilter.useFilter ? AliasFilterType.entityName : AliasFilterType.entityList, |
|||
entityType: EntityType.DEVICE, |
|||
resolveMultiple: false |
|||
}; |
|||
if (filter.type === AliasFilterType.entityList) { |
|||
filter.entityList = aliasInfo.deviceFilter.deviceList; |
|||
} else { |
|||
filter.entityNameFilter = aliasInfo.deviceFilter.deviceNameFilter; |
|||
} |
|||
} else if (aliasInfo.entityFilter) { |
|||
alias = aliasInfo.aliasName; |
|||
filter = { |
|||
type: aliasInfo.entityFilter.useFilter ? AliasFilterType.entityName : AliasFilterType.entityList, |
|||
entityType: aliasInfo.entityType, |
|||
resolveMultiple: false |
|||
}; |
|||
if (filter.type === AliasFilterType.entityList) { |
|||
filter.entityList = aliasInfo.entityFilter.entityList; |
|||
} else { |
|||
filter.entityNameFilter = aliasInfo.entityFilter.entityNameFilter; |
|||
} |
|||
} else { |
|||
alias = aliasInfo.alias; |
|||
filter = aliasInfo.filter; |
|||
} |
|||
return { |
|||
alias, |
|||
filter |
|||
}; |
|||
} |
|||
|
|||
private openImportDialog(importTitle: string, importFileLabel: string): Observable<any> { |
|||
return this.dialog.open<ImportDialogComponent, ImportDialogData, |
|||
any>(ImportDialogComponent, { |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
|||
data: { |
|||
importTitle, |
|||
importFileLabel |
|||
} |
|||
}).afterClosed().pipe( |
|||
map((importedData) => { |
|||
if (importedData) { |
|||
return importedData; |
|||
} else { |
|||
throw new Error('No file selected!'); |
|||
} |
|||
} |
|||
)); |
|||
} |
|||
|
|||
private exportToPc(data: any, filename: string) { |
|||
if (!data) { |
|||
console.error('No data'); |
|||
return; |
|||
} |
|||
if (!filename) { |
|||
filename = 'download.json'; |
|||
} |
|||
if (isObject(data)) { |
|||
data = JSON.stringify(data, null, 2); |
|||
} |
|||
const blob = new Blob([data], {type: 'text/json'}); |
|||
if (this.window.navigator && this.window.navigator.msSaveOrOpenBlob) { |
|||
this.window.navigator.msSaveOrOpenBlob(blob, filename); |
|||
} else { |
|||
const e = this.document.createEvent('MouseEvents'); |
|||
const a = this.document.createElement('a'); |
|||
a.download = filename; |
|||
a.href = this.window.URL.createObjectURL(blob); |
|||
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':'); |
|||
// @ts-ignore
|
|||
e.initEvent('click', true, false, this.window, |
|||
0, 0, 0, 0, 0, false, false, false, false, 0, null); |
|||
a.dispatchEvent(e); |
|||
} |
|||
} |
|||
|
|||
private prepareDashboardExport(dashboard: Dashboard): Dashboard { |
|||
dashboard = this.prepareExport(dashboard); |
|||
delete dashboard.assignedCustomers; |
|||
return dashboard; |
|||
} |
|||
|
|||
private prepareExport(data: any): any { |
|||
const exportedData = deepClone(data); |
|||
if (isDefined(exportedData.id)) { |
|||
delete exportedData.id; |
|||
} |
|||
if (isDefined(exportedData.createdTime)) { |
|||
delete exportedData.createdTime; |
|||
} |
|||
if (isDefined(exportedData.tenantId)) { |
|||
delete exportedData.tenantId; |
|||
} |
|||
if (isDefined(exportedData.customerId)) { |
|||
delete exportedData.customerId; |
|||
} |
|||
return exportedData; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<div class="tb-container"> |
|||
<label class="tb-title">{{ label }}</label> |
|||
<ng-container #flow="flow" |
|||
[flowConfig]="{singleFile: true, allowDuplicateUploads: true}"> |
|||
<div class="tb-file-select-container"> |
|||
<div class="tb-file-clear-container"> |
|||
<button mat-button mat-icon-button color="primary" |
|||
type="button" |
|||
(click)="clearFile()" |
|||
class="tb-file-clear-btn" |
|||
matTooltip="{{ 'action.remove' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>close</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div class="drop-area tb-flow-drop" |
|||
flowDrop |
|||
[flow]="flow.flowJs"> |
|||
<label for="select">{{ dropLabel }}</label> |
|||
<input class="file-input" flowButton [flow]="flow.flowJs" [flowAttributes]="{accept: accept}" id="select"> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</div> |
|||
<div> |
|||
<div *ngIf="!fileName" translate>import.no-file</div> |
|||
<div *ngIf="fileName">{{ fileName }}</div> |
|||
</div> |
|||
@ -0,0 +1,80 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
@import "../../../scss/constants"; |
|||
|
|||
$previewSize: 100px !default; |
|||
|
|||
:host { |
|||
|
|||
.tb-container { |
|||
margin-top: 0px; |
|||
label.tb-title { |
|||
display: block; |
|||
padding-bottom: 8px; |
|||
} |
|||
} |
|||
|
|||
.tb-file-select-container { |
|||
position: relative; |
|||
width: 100%; |
|||
height: $previewSize; |
|||
} |
|||
|
|||
.tb-file-preview { |
|||
width: auto; |
|||
max-width: $previewSize; |
|||
height: auto; |
|||
max-height: $previewSize; |
|||
} |
|||
|
|||
.tb-file-clear-container { |
|||
position: relative; |
|||
float: right; |
|||
width: 48px; |
|||
height: $previewSize; |
|||
} |
|||
|
|||
.tb-file-clear-btn { |
|||
position: absolute !important; |
|||
top: 50%; |
|||
transform: translate(0%, -50%) !important; |
|||
} |
|||
|
|||
.file-input { |
|||
display: none; |
|||
} |
|||
|
|||
.tb-flow-drop { |
|||
position: relative; |
|||
height: $previewSize; |
|||
overflow: hidden; |
|||
border: dashed 2px; |
|||
|
|||
label { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 16px; |
|||
text-align: center; |
|||
|
|||
@media #{$mat-gt-sm} { |
|||
font-size: 24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,150 @@ |
|||
///
|
|||
/// 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 { AfterViewInit, Component, forwardRef, Input, OnDestroy, ViewChild } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
import { Subscription } from 'rxjs'; |
|||
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|||
import { FlowDirective } from '@flowjs/ngx-flow'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-file-input', |
|||
templateUrl: './file-input.component.html', |
|||
styleUrls: ['./file-input.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => FileInputComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class FileInputComponent extends PageComponent implements AfterViewInit, OnDestroy, ControlValueAccessor { |
|||
|
|||
@Input() |
|||
label: string; |
|||
|
|||
@Input() |
|||
accept = '*/*'; |
|||
|
|||
@Input() |
|||
allowedExtensions: string; |
|||
|
|||
@Input() |
|||
dropLabel: string; |
|||
|
|||
@Input() |
|||
contentConvertFunction: (content: string) => any; |
|||
|
|||
private requiredValue: boolean; |
|||
get required(): boolean { |
|||
return this.requiredValue; |
|||
} |
|||
@Input() |
|||
set required(value: boolean) { |
|||
const newVal = coerceBooleanProperty(value); |
|||
if (this.requiredValue !== newVal) { |
|||
this.requiredValue = newVal; |
|||
} |
|||
} |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
fileName: string; |
|||
fileContent: any; |
|||
|
|||
@ViewChild('flow', {static: true}) |
|||
flow: FlowDirective; |
|||
|
|||
autoUploadSubscription: Subscription; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
constructor(protected store: Store<AppState>) { |
|||
super(store); |
|||
} |
|||
|
|||
ngAfterViewInit() { |
|||
this.autoUploadSubscription = this.flow.events$.subscribe(event => { |
|||
if (event.type === 'fileAdded') { |
|||
const file = event.event[0] as flowjs.FlowFile; |
|||
if (this.filterFile(file)) { |
|||
const reader = new FileReader(); |
|||
reader.onload = (loadEvent) => { |
|||
if (typeof reader.result === 'string') { |
|||
const fileContent = reader.result; |
|||
if (fileContent && fileContent.length > 0) { |
|||
if (this.contentConvertFunction) { |
|||
this.fileContent = this.contentConvertFunction(fileContent); |
|||
} else { |
|||
this.fileContent = fileContent; |
|||
} |
|||
if (this.fileContent) { |
|||
this.fileName = file.name; |
|||
} else { |
|||
this.fileName = null; |
|||
} |
|||
this.updateModel(); |
|||
} |
|||
} |
|||
}; |
|||
reader.readAsText(file.file); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
private filterFile(file: flowjs.FlowFile): boolean { |
|||
if (this.allowedExtensions) { |
|||
return this.allowedExtensions.split(',').indexOf(file.getExtension()) > -1; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.autoUploadSubscription.unsubscribe(); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
} |
|||
|
|||
writeValue(value: any): void { |
|||
this.fileName = null; |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.propagateChange(this.fileContent); |
|||
} |
|||
|
|||
clearFile() { |
|||
this.fileName = null; |
|||
this.fileContent = null; |
|||
this.updateModel(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue