Igor Kulikov
7 years ago
52 changed files with 2611 additions and 313 deletions
@ -0,0 +1,57 @@ |
|||
<!-- |
|||
|
|||
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 #widgetForm="ngForm" [formGroup]="widgetFormGroup" (ngSubmit)="add()" style="width: 900px;"> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>widget.add</h2> |
|||
<span fxFlex></span> |
|||
<div [tb-help]="helpLinkIdForWidgetType()"></div> |
|||
<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" style="position: relative; height: 600px;"> |
|||
<tb-widget-config |
|||
[aliasController]="aliasController" |
|||
[functionsOnly]="false" |
|||
[entityAliases]="dashboard.configuration.entityAliases" |
|||
[dashboardStates]="dashboard.configuration.states" |
|||
formControlName="widgetConfig"> |
|||
</tb-widget-config> |
|||
</fieldset> |
|||
</div> |
|||
<div mat-dialog-actions fxLayout="row"> |
|||
<span fxFlex></span> |
|||
<button mat-button mat-raised-button color="primary" |
|||
type="submit" |
|||
[disabled]="(isLoading$ | async) || widgetFormGroup.invalid"> |
|||
{{ 'action.add' | 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,137 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; |
|||
import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@app/shared/components/dialog.component'; |
|||
import { Widget, widgetTypesData } from '@shared/models/widget.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { EntityService } from '@core/http/entity.service'; |
|||
import { Dashboard } from '@app/shared/models/dashboard.models'; |
|||
import { IAliasController } from '@core/api/widget-api.models'; |
|||
import { WidgetConfigComponentData, WidgetInfo } from '@home/models/widget-component.models'; |
|||
import { isDefined, isString } from '@core/utils'; |
|||
|
|||
export interface AddWidgetDialogData { |
|||
dashboard: Dashboard; |
|||
aliasController: IAliasController; |
|||
widget: Widget; |
|||
widgetInfo: WidgetInfo; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-add-widget-dialog', |
|||
templateUrl: './add-widget-dialog.component.html', |
|||
providers: [{provide: ErrorStateMatcher, useExisting: AddWidgetDialogComponent}], |
|||
styleUrls: [] |
|||
}) |
|||
export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogComponent, Widget> |
|||
implements OnInit, ErrorStateMatcher { |
|||
|
|||
widgetFormGroup: FormGroup; |
|||
|
|||
dashboard: Dashboard; |
|||
aliasController: IAliasController; |
|||
widget: Widget; |
|||
|
|||
submitted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: AddWidgetDialogData, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<AddWidgetDialogComponent, Widget>, |
|||
private fb: FormBuilder, |
|||
private utils: UtilsService, |
|||
private translate: TranslateService, |
|||
private entityService: EntityService) { |
|||
super(store, router, dialogRef); |
|||
|
|||
this.dashboard = this.data.dashboard; |
|||
this.aliasController = this.data.aliasController; |
|||
this.widget = this.data.widget; |
|||
|
|||
const widgetInfo = this.data.widgetInfo; |
|||
|
|||
const rawSettingsSchema = widgetInfo.typeSettingsSchema || widgetInfo.settingsSchema; |
|||
const rawDataKeySettingsSchema = widgetInfo.typeDataKeySettingsSchema || widgetInfo.dataKeySettingsSchema; |
|||
const typeParameters = widgetInfo.typeParameters; |
|||
const actionSources = widgetInfo.actionSources; |
|||
const isDataEnabled = isDefined(widgetInfo.typeParameters) ? !widgetInfo.typeParameters.useCustomDatasources : true; |
|||
let settingsSchema; |
|||
if (!rawSettingsSchema || rawSettingsSchema === '') { |
|||
settingsSchema = {}; |
|||
} else { |
|||
settingsSchema = isString(rawSettingsSchema) ? JSON.parse(rawSettingsSchema) : rawSettingsSchema; |
|||
} |
|||
let dataKeySettingsSchema; |
|||
if (!rawDataKeySettingsSchema || rawDataKeySettingsSchema === '') { |
|||
dataKeySettingsSchema = {}; |
|||
} else { |
|||
dataKeySettingsSchema = isString(rawDataKeySettingsSchema) ? JSON.parse(rawDataKeySettingsSchema) : rawDataKeySettingsSchema; |
|||
} |
|||
const widgetConfig: WidgetConfigComponentData = { |
|||
config: this.widget.config, |
|||
layout: {}, |
|||
widgetType: this.widget.type, |
|||
typeParameters, |
|||
actionSources, |
|||
isDataEnabled, |
|||
settingsSchema, |
|||
dataKeySettingsSchema |
|||
}; |
|||
|
|||
this.widgetFormGroup = this.fb.group({ |
|||
widgetConfig: [widgetConfig, []] |
|||
} |
|||
); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { |
|||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form); |
|||
const customErrorState = !!(control && control.invalid && this.submitted); |
|||
return originalErrorState || customErrorState; |
|||
} |
|||
|
|||
helpLinkIdForWidgetType(): string { |
|||
let link = 'widgetsConfig'; |
|||
if (this.widget && this.widget.type) { |
|||
link = widgetTypesData.get(this.widget.type).configHelpLinkId; |
|||
} |
|||
return link; |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
add(): void { |
|||
this.submitted = true; |
|||
const widgetConfig: WidgetConfigComponentData = this.widgetFormGroup.get('widgetConfig').value; |
|||
this.widget.config = widgetConfig.config; |
|||
this.widget.config.mobileOrder = widgetConfig.layout.mobileOrder; |
|||
this.widget.config.mobileHeight = widgetConfig.layout.mobileHeight; |
|||
this.dialogRef.close(this.widget); |
|||
} |
|||
} |
|||
@ -0,0 +1,167 @@ |
|||
<!-- |
|||
|
|||
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 #settingsForm="ngForm" (ngSubmit)="save()"> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</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 *ngIf="settings" [formGroup]="settingsFormGroup"> |
|||
<mat-form-field class="mat-block"> |
|||
<mat-label translate>dashboard.state-controller</mat-label> |
|||
<mat-select required matInput formControlName="stateControllerId"> |
|||
<mat-option *ngFor="let stateControllerId of stateControllerIds" [value]="stateControllerId"> |
|||
{{stateControllerId}} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-checkbox fxFlex formControlName="toolbarAlwaysOpen"> |
|||
{{ 'dashboard.toolbar-always-open' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox fxFlex formControlName="showTitle"> |
|||
{{ 'dashboard.display-title' | translate }} |
|||
</mat-checkbox> |
|||
<tb-color-input fxFlex |
|||
label="{{'dashboard.title-color' | translate}}" |
|||
icon="format_color_fill" |
|||
openOnInput |
|||
formControlName="titleColor"> |
|||
</tb-color-input> |
|||
</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-checkbox fxFlex formControlName="showDashboardsSelect"> |
|||
{{ 'dashboard.display-dashboards-selection' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox fxFlex formControlName="showEntitiesSelect"> |
|||
{{ 'dashboard.display-entities-selection' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox fxFlex formControlName="showDashboardTimewindow"> |
|||
{{ 'dashboard.display-dashboard-timewindow' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox fxFlex formControlName="showDashboardExport"> |
|||
{{ 'dashboard.display-dashboard-export' | translate }} |
|||
</mat-checkbox> |
|||
</div> |
|||
</div> |
|||
<div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup"> |
|||
<tb-color-input fxFlex |
|||
label="{{'layout.color' | translate}}" |
|||
icon="format_color_fill" |
|||
openOnInput |
|||
formControlName="color"> |
|||
</tb-color-input> |
|||
<mat-form-field class="mat-block"> |
|||
<mat-label translate>dashboard.columns-count</mat-label> |
|||
<input matInput formControlName="columns" type="number" step="any" min="10" |
|||
max="1000" required> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('required')"> |
|||
{{ 'dashboard.columns-count-required' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('min')"> |
|||
{{ 'dashboard.min-columns-count-message' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('max')"> |
|||
{{ 'dashboard.max-columns-count-message' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>dashboard.widgets-margins</mat-label> |
|||
<input matInput formControlName="margin" type="number" step="any" min="0" |
|||
max="50" required> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('required')"> |
|||
{{ 'dashboard.margin-required' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('min')"> |
|||
{{ 'dashboard.min-margin-message' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('max')"> |
|||
{{ 'dashboard.max-margin-message' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
<mat-checkbox fxFlex formControlName="autoFillHeight" style="display: block; padding-bottom: 12px;"> |
|||
{{ 'dashboard.autofill-height' | translate }} |
|||
</mat-checkbox> |
|||
<tb-color-input fxFlex |
|||
label="{{'dashboard.background-color' | translate}}" |
|||
icon="format_color_fill" |
|||
openOnInput |
|||
formControlName="backgroundColor"> |
|||
</tb-color-input> |
|||
<tb-image-input fxFlex |
|||
label="{{'dashboard.background-image' | translate}}" |
|||
formControlName="backgroundImageUrl"> |
|||
</tb-image-input> |
|||
<mat-form-field class="mat-block"> |
|||
<mat-label translate>dashboard.background-size-mode</mat-label> |
|||
<mat-select matInput formControlName="backgroundSizeMode"> |
|||
<mat-option value="100%">Fit width</mat-option> |
|||
<mat-option value="auto 100%">Fit height</mat-option> |
|||
<mat-option value="cover">Cover</mat-option> |
|||
<mat-option value="contain">Contain</mat-option> |
|||
<mat-option value="auto">Original size</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<small translate>dashboard.mobile-layout</small> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-checkbox fxFlex formControlName="mobileAutoFillHeight"> |
|||
{{ 'dashboard.autofill-height' | translate }} |
|||
</mat-checkbox> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>dashboard.mobile-row-height</mat-label> |
|||
<input matInput formControlName="mobileRowHeight" type="number" step="any" min="5" |
|||
max="200" required> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('required')"> |
|||
{{ 'dashboard.mobile-row-height-required' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('min')"> |
|||
{{ 'dashboard.min-mobile-row-height-message' | translate }} |
|||
</mat-error> |
|||
<mat-error *ngIf="gridSettingsFormGroup.get('mobileRowHeight').hasError('max')"> |
|||
{{ 'dashboard.max-mobile-row-height-message' | translate }} |
|||
</mat-error> |
|||
</mat-form-field> |
|||
</div> |
|||
</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) || settingsFormGroup.invalid || gridSettingsFormGroup.invalid |
|||
|| (!settingsFormGroup.dirty && !gridSettingsFormGroup.dirty)"> |
|||
{{ 'action.save' | 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,137 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; |
|||
import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@app/shared/components/dialog.component'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { DashboardSettings, GridSettings, StateControllerId } from '@app/shared/models/dashboard.models'; |
|||
import { isUndefined } from '@core/utils'; |
|||
import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; |
|||
import { StatesControllerService } from './states/states-controller.service'; |
|||
|
|||
export interface DashboardSettingsDialogData { |
|||
settings?: DashboardSettings; |
|||
gridSettings?: GridSettings; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-dashboard-settings-dialog', |
|||
templateUrl: './dashboard-settings-dialog.component.html', |
|||
providers: [{provide: ErrorStateMatcher, useExisting: DashboardSettingsDialogComponent}], |
|||
styleUrls: [] |
|||
}) |
|||
export class DashboardSettingsDialogComponent extends DialogComponent<DashboardSettingsDialogComponent, DashboardSettingsDialogData> |
|||
implements OnInit, ErrorStateMatcher { |
|||
|
|||
settings: DashboardSettings; |
|||
gridSettings: GridSettings; |
|||
|
|||
settingsFormGroup: FormGroup; |
|||
gridSettingsFormGroup: FormGroup; |
|||
|
|||
stateControllerIds: string[]; |
|||
|
|||
submitted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: DashboardSettingsDialogData, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<DashboardSettingsDialogComponent, DashboardSettingsDialogData>, |
|||
private fb: FormBuilder, |
|||
private utils: UtilsService, |
|||
private dashboardUtils: DashboardUtilsService, |
|||
private translate: TranslateService, |
|||
private statesControllerService: StatesControllerService) { |
|||
super(store, router, dialogRef); |
|||
|
|||
this.stateControllerIds = Object.keys(this.statesControllerService.getStateControllers()); |
|||
|
|||
this.settings = this.data.settings; |
|||
this.gridSettings = this.data.gridSettings; |
|||
|
|||
if (this.settings) { |
|||
this.settingsFormGroup = this.fb.group({ |
|||
stateControllerId: [isUndefined(this.settings.stateControllerId) ? 'entity' : this.settings.stateControllerId, []], |
|||
toolbarAlwaysOpen: [isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen, []], |
|||
showTitle: [isUndefined(this.settings.showTitle) ? true : this.settings.showTitle, []], |
|||
titleColor: [isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor, []], |
|||
showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []], |
|||
showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []], |
|||
showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []], |
|||
showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []] |
|||
}); |
|||
this.settingsFormGroup.get('stateControllerId').valueChanges.subscribe( |
|||
(stateControllerId: StateControllerId) => { |
|||
if (stateControllerId !== 'default') { |
|||
this.settingsFormGroup.get('toolbarAlwaysOpen').setValue(true); |
|||
} |
|||
} |
|||
); |
|||
} else { |
|||
this.settingsFormGroup = this.fb.group({}); |
|||
} |
|||
|
|||
if (this.gridSettings) { |
|||
this.gridSettingsFormGroup = this.fb.group({ |
|||
color: [this.gridSettings.color || 'rgba(0,0,0,0.870588)', []], |
|||
columns: [this.gridSettings.columns || 24, [Validators.required, Validators.min(10), Validators.max(1000)]], |
|||
margin: [this.gridSettings.margin || 10, [Validators.required, Validators.min(0), Validators.max(50)]], |
|||
autoFillHeight: [isUndefined(this.gridSettings.autoFillHeight) ? false : this.gridSettings.autoFillHeight, []], |
|||
backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []], |
|||
backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []], |
|||
backgroundSizeMode: [this.gridSettings.backgroundSizeMode || '100%', []], |
|||
mobileAutoFillHeight: [isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight, []], |
|||
mobileRowHeight: [isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight, |
|||
[Validators.required, Validators.min(5), Validators.max(200)]] |
|||
}); |
|||
} else { |
|||
this.gridSettingsFormGroup = this.fb.group({}); |
|||
} |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { |
|||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form); |
|||
const customErrorState = !!(control && control.invalid && this.submitted); |
|||
return originalErrorState || customErrorState; |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
save(): void { |
|||
this.submitted = true; |
|||
let settings: DashboardSettings = null; |
|||
let gridSettings: GridSettings = null; |
|||
if (this.settings) { |
|||
settings = {...this.settings, ...this.settingsFormGroup.value}; |
|||
} |
|||
if (this.gridSettings) { |
|||
gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.value}; |
|||
} |
|||
this.dialogRef.close({settings, gridSettings}); |
|||
} |
|||
} |
|||
@ -0,0 +1,84 @@ |
|||
<!-- |
|||
|
|||
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> |
|||
<mat-tab-group *ngIf="hasWidgetTypes()" class="tb-absolute-fill" fxFlex> |
|||
<mat-tab *ngIf="timeseriesWidgetTypes.length" style="height: 100%;" label="{{ 'widget.timeseries' | translate }}"> |
|||
<tb-dashboard [aliasController]="aliasController" |
|||
[widgets]="timeseriesWidgetTypes" |
|||
[widgetLayouts]="{}" |
|||
[isEdit]="false" |
|||
[isMobile]="true" |
|||
[isEditActionEnabled]="false" |
|||
[isExportActionEnabled]="false" |
|||
[isRemoveActionEnabled]="false" |
|||
[callbacks]="callbacks"></tb-dashboard> |
|||
</mat-tab> |
|||
<mat-tab *ngIf="latestWidgetTypes.length" style="height: 100%;" label="{{ 'widget.latest-values' | translate }}"> |
|||
<tb-dashboard [aliasController]="aliasController" |
|||
[widgets]="latestWidgetTypes" |
|||
[widgetLayouts]="{}" |
|||
[isEdit]="false" |
|||
[isMobile]="true" |
|||
[isEditActionEnabled]="false" |
|||
[isExportActionEnabled]="false" |
|||
[isRemoveActionEnabled]="false" |
|||
[callbacks]="callbacks"></tb-dashboard> |
|||
</mat-tab> |
|||
<mat-tab *ngIf="rpcWidgetTypes.length" style="height: 100%;" label="{{ 'widget.rpc' | translate }}"> |
|||
<tb-dashboard [aliasController]="aliasController" |
|||
[widgets]="rpcWidgetTypes" |
|||
[widgetLayouts]="{}" |
|||
[isEdit]="false" |
|||
[isMobile]="true" |
|||
[isEditActionEnabled]="false" |
|||
[isExportActionEnabled]="false" |
|||
[isRemoveActionEnabled]="false" |
|||
[callbacks]="callbacks"></tb-dashboard> |
|||
</mat-tab> |
|||
<mat-tab *ngIf="alarmWidgetTypes.length" style="height: 100%;" label="{{ 'widget.alarm' | translate }}"> |
|||
<tb-dashboard [aliasController]="aliasController" |
|||
[widgets]="alarmWidgetTypes" |
|||
[widgetLayouts]="{}" |
|||
[isEdit]="false" |
|||
[isMobile]="true" |
|||
[isEditActionEnabled]="false" |
|||
[isExportActionEnabled]="false" |
|||
[isRemoveActionEnabled]="false" |
|||
[callbacks]="callbacks"></tb-dashboard> |
|||
</mat-tab> |
|||
<mat-tab *ngIf="staticWidgetTypes.length" style="height: 100%;" label="{{ 'widget.static' | translate }}"> |
|||
<tb-dashboard [aliasController]="aliasController" |
|||
[widgets]="staticWidgetTypes" |
|||
[widgetLayouts]="{}" |
|||
[isEdit]="false" |
|||
[isMobile]="true" |
|||
[isEditActionEnabled]="false" |
|||
[isExportActionEnabled]="false" |
|||
[isRemoveActionEnabled]="false" |
|||
[callbacks]="callbacks"></tb-dashboard> |
|||
</mat-tab> |
|||
</mat-tab-group> |
|||
<span translate *ngIf="widgetsBundle && !hasWidgetTypes()" |
|||
style="text-transform: uppercase; display: flex;" |
|||
fxLayoutAlign="center center" |
|||
class="mat-headline tb-absolute-fill">widgets-bundle.empty</span> |
|||
<span translate *ngIf="!widgetsBundle" |
|||
style="text-transform: uppercase; display: flex;" |
|||
fxLayoutAlign="center center" |
|||
class="mat-headline tb-absolute-fill">widget.select-widgets-bundle</span> |
|||
</div> |
|||
@ -0,0 +1,23 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host ::ng-deep { |
|||
.mat-tab-group { |
|||
.mat-tab-body-wrapper { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,144 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
Component, |
|||
OnDestroy, |
|||
OnInit, |
|||
ViewEncapsulation, |
|||
Input, |
|||
Output, |
|||
EventEmitter, |
|||
OnChanges, |
|||
SimpleChanges |
|||
} from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; |
|||
import { IAliasController } from '@core/api/widget-api.models'; |
|||
import { NULL_UUID } from '@shared/models/id/has-uuid'; |
|||
import { WidgetService } from '@core/http/widget.service'; |
|||
import { widgetType, Widget } from '@shared/models/widget.models'; |
|||
import { toWidgetInfo } from '@home/models/widget-component.models'; |
|||
import { DashboardCallbacks } from '../../models/dashboard-component.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-dashboard-widget-select', |
|||
templateUrl: './dashboard-widget-select.component.html', |
|||
styleUrls: ['./dashboard-widget-select.component.scss'] |
|||
}) |
|||
export class DashboardWidgetSelectComponent implements OnInit, OnChanges { |
|||
|
|||
@Input() |
|||
widgetsBundle: WidgetsBundle; |
|||
|
|||
@Input() |
|||
aliasController: IAliasController; |
|||
|
|||
@Output() |
|||
widgetSelected: EventEmitter<Widget> = new EventEmitter<Widget>(); |
|||
|
|||
timeseriesWidgetTypes: Array<Widget> = []; |
|||
latestWidgetTypes: Array<Widget> = []; |
|||
rpcWidgetTypes: Array<Widget> = []; |
|||
alarmWidgetTypes: Array<Widget> = []; |
|||
staticWidgetTypes: Array<Widget> = []; |
|||
|
|||
callbacks: DashboardCallbacks = { |
|||
onWidgetClicked: this.onWidgetClicked.bind(this) |
|||
}; |
|||
|
|||
constructor(private widgetsService: WidgetService) { |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
for (const propName of Object.keys(changes)) { |
|||
const change = changes[propName]; |
|||
if (change.currentValue !== change.previousValue && change.currentValue) { |
|||
if (propName === 'widgetsBundle') { |
|||
this.loadLibrary(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
private loadLibrary() { |
|||
this.timeseriesWidgetTypes.length = 0; |
|||
this.latestWidgetTypes.length = 0; |
|||
this.rpcWidgetTypes.length = 0; |
|||
this.alarmWidgetTypes.length = 0; |
|||
this.staticWidgetTypes.length = 0; |
|||
const bundleAlias = this.widgetsBundle.alias; |
|||
const isSystem = this.widgetsBundle.tenantId.id === NULL_UUID; |
|||
this.widgetsService.getBundleWidgetTypes(bundleAlias, |
|||
isSystem).subscribe( |
|||
(types) => { |
|||
types = types.sort((a, b) => b.createdTime - a.createdTime); |
|||
let top = 0; |
|||
types.forEach((type) => { |
|||
const widgetTypeInfo = toWidgetInfo(type); |
|||
const widget: Widget = { |
|||
typeId: type.id, |
|||
isSystemType: isSystem, |
|||
bundleAlias, |
|||
typeAlias: widgetTypeInfo.alias, |
|||
type: widgetTypeInfo.type, |
|||
title: widgetTypeInfo.widgetName, |
|||
sizeX: widgetTypeInfo.sizeX, |
|||
sizeY: widgetTypeInfo.sizeY, |
|||
row: top, |
|||
col: 0, |
|||
config: JSON.parse(widgetTypeInfo.defaultConfig) |
|||
}; |
|||
widget.config.title = widgetTypeInfo.widgetName; |
|||
switch (widgetTypeInfo.type) { |
|||
case widgetType.timeseries: |
|||
this.timeseriesWidgetTypes.push(widget); |
|||
break; |
|||
case widgetType.latest: |
|||
this.latestWidgetTypes.push(widget); |
|||
break; |
|||
case widgetType.rpc: |
|||
this.rpcWidgetTypes.push(widget); |
|||
break; |
|||
case widgetType.alarm: |
|||
this.alarmWidgetTypes.push(widget); |
|||
break; |
|||
case widgetType.static: |
|||
this.staticWidgetTypes.push(widget); |
|||
break; |
|||
} |
|||
top += widget.sizeY; |
|||
}); |
|||
} |
|||
); |
|||
} |
|||
|
|||
hasWidgetTypes() { |
|||
return this.timeseriesWidgetTypes.length > 0 || |
|||
this.latestWidgetTypes.length > 0 || |
|||
this.rpcWidgetTypes.length > 0 || |
|||
this.alarmWidgetTypes.length > 0 || |
|||
this.staticWidgetTypes.length > 0; |
|||
} |
|||
|
|||
private onWidgetClicked($event: Event, widget: Widget, index: number): void { |
|||
this.widgetSelected.emit(widget); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
:host ::ng-deep { |
|||
button.tb-layout-button { |
|||
width: 100%; |
|||
max-width: 240px; |
|||
height: 100%; |
|||
.mat-button-wrapper { |
|||
padding: 40px; |
|||
line-height: 18px; |
|||
span { |
|||
font-size: 18px; |
|||
font-weight: 400; |
|||
white-space: normal; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,71 @@ |
|||
<!-- |
|||
|
|||
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 #widgetForm="ngForm" [formGroup]="layoutsFormGroup" (ngSubmit)="save()"> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>layout.manage</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" fxLayout="column" fxLayoutGap="8px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<mat-checkbox fxFlex formControlName="main"> |
|||
{{ 'layout.main' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox fxFlex formControlName="right"> |
|||
{{ 'layout.right' | translate }} |
|||
</mat-checkbox> |
|||
</div> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<button fxFlex fxLayout="column" |
|||
type="button" mat-button mat-raised-button color="primary" |
|||
class="tb-layout-button" |
|||
(click)="openLayoutSettings('main')"> |
|||
<span translate>layout.main</span> |
|||
</button> |
|||
<button fxFlex fxLayout="column" [fxShow]="layoutsFormGroup.get('right').value" |
|||
type="button" mat-button mat-raised-button color="primary" |
|||
class="tb-layout-button" |
|||
(click)="openLayoutSettings('right')"> |
|||
<span translate>layout.right</span> |
|||
</button> |
|||
</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) || layoutsFormGroup.invalid || !layoutsFormGroup.dirty"> |
|||
{{ 'action.save' | 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,125 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, Inject, OnInit, SkipSelf } from '@angular/core'; |
|||
import { ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@app/shared/components/dialog.component'; |
|||
import { Widget, widgetTypesData } from '@shared/models/widget.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { EntityService } from '@core/http/entity.service'; |
|||
import { Dashboard, DashboardLayoutId, DashboardStateLayouts } from '@app/shared/models/dashboard.models'; |
|||
import { IAliasController } from '@core/api/widget-api.models'; |
|||
import { WidgetConfigComponentData, WidgetInfo } from '@home/models/widget-component.models'; |
|||
import { deepClone, isDefined, isString } from '@core/utils'; |
|||
import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { |
|||
DashboardSettingsDialogComponent, |
|||
DashboardSettingsDialogData |
|||
} from '@home/pages/dashboard/dashboard-settings-dialog.component'; |
|||
|
|||
export interface ManageDashboardLayoutsDialogData { |
|||
layouts: DashboardStateLayouts; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-manage-dashboard-layouts-dialog', |
|||
templateUrl: './manage-dashboard-layouts-dialog.component.html', |
|||
providers: [{provide: ErrorStateMatcher, useExisting: ManageDashboardLayoutsDialogComponent}], |
|||
styleUrls: ['./layout-button.scss'] |
|||
}) |
|||
export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts> |
|||
implements OnInit, ErrorStateMatcher { |
|||
|
|||
layoutsFormGroup: FormGroup; |
|||
|
|||
layouts: DashboardStateLayouts; |
|||
|
|||
submitted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
@Inject(MAT_DIALOG_DATA) public data: ManageDashboardLayoutsDialogData, |
|||
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
|||
public dialogRef: MatDialogRef<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>, |
|||
private fb: FormBuilder, |
|||
private utils: UtilsService, |
|||
private dashboardUtils: DashboardUtilsService, |
|||
private translate: TranslateService, |
|||
private dialog: MatDialog) { |
|||
super(store, router, dialogRef); |
|||
|
|||
this.layouts = this.data.layouts; |
|||
this.layoutsFormGroup = this.fb.group({ |
|||
main: [{value: isDefined(this.layouts.main), disabled: true}, []], |
|||
right: [isDefined(this.layouts.right), []], |
|||
} |
|||
); |
|||
for (const l of Object.keys(this.layoutsFormGroup.controls)) { |
|||
const control = this.layoutsFormGroup.controls[l]; |
|||
if (!this.layouts[l]) { |
|||
this.layouts[l] = this.dashboardUtils.createDefaultLayoutData(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { |
|||
const originalErrorState = this.errorStateMatcher.isErrorState(control, form); |
|||
const customErrorState = !!(control && control.invalid && this.submitted); |
|||
return originalErrorState || customErrorState; |
|||
} |
|||
|
|||
openLayoutSettings(layoutId: DashboardLayoutId) { |
|||
const gridSettings = deepClone(this.layouts[layoutId].gridSettings); |
|||
this.dialog.open<DashboardSettingsDialogComponent, DashboardSettingsDialogData, |
|||
DashboardSettingsDialogData>(DashboardSettingsDialogComponent, { |
|||
disableClose: true, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
|||
data: { |
|||
settings: null, |
|||
gridSettings |
|||
} |
|||
}).afterClosed().subscribe((data) => { |
|||
if (data && data.gridSettings) { |
|||
this.dashboardUtils.updateLayoutSettings(this.layouts[layoutId], data.gridSettings); |
|||
this.layoutsFormGroup.markAsDirty(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
save(): void { |
|||
this.submitted = true; |
|||
for (const l of Object.keys(this.layoutsFormGroup.controls)) { |
|||
const control = this.layoutsFormGroup.controls[l]; |
|||
if (!control.value) { |
|||
delete this.layouts[l]; |
|||
} |
|||
} |
|||
this.dialogRef.close(this.layouts); |
|||
} |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
<!-- |
|||
|
|||
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 #widgetForm="ngForm"> |
|||
<mat-toolbar fxLayout="row" color="primary"> |
|||
<h2 translate>layout.select</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" fxLayout="column" fxLayoutGap="8px"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
|||
<button fxFlex fxLayout="column" |
|||
type="button" mat-button mat-raised-button color="primary" |
|||
class="tb-layout-button" |
|||
(click)="selectLayout('main')"> |
|||
<span translate>layout.main</span> |
|||
</button> |
|||
<button fxFlex fxLayout="column" |
|||
type="button" mat-button mat-raised-button color="primary" |
|||
class="tb-layout-button" |
|||
(click)="selectLayout('right')"> |
|||
<span translate>layout.right</span> |
|||
</button> |
|||
</div> |
|||
</fieldset> |
|||
</div> |
|||
</form> |
|||
@ -0,0 +1,50 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, OnInit } from '@angular/core'; |
|||
import { MatDialogRef } from '@angular/material'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { Router } from '@angular/router'; |
|||
import { DialogComponent } from '@app/shared/components/dialog.component'; |
|||
import { DashboardLayoutId } from '@app/shared/models/dashboard.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-select-target-layout-dialog', |
|||
templateUrl: './select-target-layout-dialog.component.html', |
|||
styleUrls: ['./layout-button.scss'] |
|||
}) |
|||
export class SelectTargetLayoutDialogComponent extends DialogComponent<SelectTargetLayoutDialogComponent, DashboardLayoutId> |
|||
implements OnInit { |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
public dialogRef: MatDialogRef<SelectTargetLayoutDialogComponent, DashboardLayoutId>) { |
|||
super(store, router, dialogRef); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
} |
|||
|
|||
selectLayout(layoutId: DashboardLayoutId) { |
|||
this.dialogRef.close(layoutId); |
|||
} |
|||
|
|||
cancel(): void { |
|||
this.dialogRef.close(null); |
|||
} |
|||
|
|||
} |
|||
@ -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}"> |
|||
<div class="tb-image-select-container"> |
|||
<div class="tb-image-preview-container"> |
|||
<div *ngIf="!safeImageUrl" translate>dashboard.no-image</div> |
|||
<img *ngIf="safeImageUrl" class="tb-image-preview" [src]="safeImageUrl" /> |
|||
</div> |
|||
<div class="tb-image-clear-container"> |
|||
<button mat-button mat-icon-button color="primary" |
|||
type="button" |
|||
(click)="clearImage()" |
|||
class="tb-image-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" translate>dashboard.drop-image</label> |
|||
<input class="file-input" flowButton [flow]="flow.flowJs" [flowAttributes]="{accept: 'image/*'}" id="select"> |
|||
</div> |
|||
</div> |
|||
</ng-container> |
|||
</div> |
|||
@ -0,0 +1,104 @@ |
|||
/** |
|||
* Copyright © 2016-2019 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
@import "../../../scss/constants"; |
|||
|
|||
$previewSize: 100px !default; |
|||
|
|||
:host { |
|||
|
|||
.tb-container { |
|||
margin-top: 0px; |
|||
label.tb-title { |
|||
display: block; |
|||
padding-bottom: 8px; |
|||
} |
|||
} |
|||
|
|||
.tb-image-select-container { |
|||
position: relative; |
|||
width: 100%; |
|||
height: $previewSize; |
|||
} |
|||
|
|||
.tb-image-preview { |
|||
width: auto; |
|||
max-width: $previewSize; |
|||
height: auto; |
|||
max-height: $previewSize; |
|||
} |
|||
|
|||
.tb-image-preview-container { |
|||
position: relative; |
|||
float: left; |
|||
width: $previewSize; |
|||
height: $previewSize; |
|||
margin-right: 12px; |
|||
vertical-align: top; |
|||
border: solid 1px; |
|||
|
|||
div { |
|||
width: 100%; |
|||
font-size: 18px; |
|||
text-align: center; |
|||
} |
|||
|
|||
div, |
|||
.tb-image-preview { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
|
|||
.tb-image-clear-container { |
|||
position: relative; |
|||
float: right; |
|||
width: 48px; |
|||
height: $previewSize; |
|||
} |
|||
|
|||
.tb-image-clear-btn { |
|||
position: absolute !important; |
|||
top: 50%; |
|||
transform: translate(0%, -50%) !important; |
|||
} |
|||
|
|||
.file-input { |
|||
display: none; |
|||
} |
|||
|
|||
.tb-flow-drop { |
|||
position: relative; |
|||
height: $previewSize; |
|||
overflow: hidden; |
|||
border: dashed 2px; |
|||
|
|||
label { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 16px; |
|||
text-align: center; |
|||
|
|||
@media #{$mat-gt-sm} { |
|||
font-size: 24px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,143 @@ |
|||
///
|
|||
/// Copyright © 2016-2019 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild, AfterViewInit, OnDestroy } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { DataKey, DatasourceType } from '@shared/models/widget.models'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
FormControl, |
|||
FormGroup, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
Validator, |
|||
Validators |
|||
} from '@angular/forms'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { EntityService } from '@core/http/entity.service'; |
|||
import { DataKeysCallbacks } from '@home/components/widget/data-keys.component.models'; |
|||
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
import { Observable, of, Subscription } from 'rxjs'; |
|||
import { map, mergeMap, tap } from 'rxjs/operators'; |
|||
import { alarmFields } from '@shared/models/alarm.models'; |
|||
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|||
import { DialogService } from '@core/services/dialog.service'; |
|||
import { FlowDirective } from '@flowjs/ngx-flow'; |
|||
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-image-input', |
|||
templateUrl: './image-input.component.html', |
|||
styleUrls: ['./image-input.component.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => ImageInputComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class ImageInputComponent extends PageComponent implements AfterViewInit, OnDestroy, ControlValueAccessor { |
|||
|
|||
@Input() |
|||
label: string; |
|||
|
|||
private requiredValue: boolean; |
|||
get required(): boolean { |
|||
return this.requiredValue; |
|||
} |
|||
@Input() |
|||
set required(value: boolean) { |
|||
const newVal = coerceBooleanProperty(value); |
|||
if (this.requiredValue !== newVal) { |
|||
this.requiredValue = newVal; |
|||
} |
|||
} |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
imageUrl: string; |
|||
safeImageUrl: SafeUrl; |
|||
|
|||
@ViewChild('flow', {static: true}) |
|||
flow: FlowDirective; |
|||
|
|||
autoUploadSubscription: Subscription; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private sanitizer: DomSanitizer) { |
|||
super(store); |
|||
} |
|||
|
|||
ngAfterViewInit() { |
|||
this.autoUploadSubscription = this.flow.events$.subscribe(event => { |
|||
if (event.type === 'fileAdded') { |
|||
const file = (event.event[0] as flowjs.FlowFile).file; |
|||
const reader = new FileReader(); |
|||
reader.onload = (loadEvent) => { |
|||
if (typeof reader.result === 'string' && reader.result.startsWith('data:image/')) { |
|||
this.imageUrl = reader.result; |
|||
this.safeImageUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageUrl); |
|||
this.updateModel(); |
|||
} |
|||
}; |
|||
reader.readAsDataURL(file); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
this.autoUploadSubscription.unsubscribe(); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(fn: any): void { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
this.disabled = isDisabled; |
|||
} |
|||
|
|||
writeValue(value: string): void { |
|||
this.imageUrl = value; |
|||
if (this.imageUrl) { |
|||
this.safeImageUrl = this.sanitizer.bypassSecurityTrustUrl(this.imageUrl); |
|||
} else { |
|||
this.safeImageUrl = null; |
|||
} |
|||
} |
|||
|
|||
private updateModel() { |
|||
this.propagateChange(this.imageUrl); |
|||
} |
|||
|
|||
clearImage() { |
|||
this.imageUrl = null; |
|||
this.safeImageUrl = null; |
|||
this.updateModel(); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue