-
{{attribute.value}}
+
{{attribute.value | tbJson}}
edit
diff --git a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
index 0d597965ea..855f4314b6 100644
--- a/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/dynamic-widget.component.ts
@@ -75,31 +75,21 @@ export class DynamicWidgetComponent extends PageComponent implements IDynamicWid
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target?: string) {
- this.showToast('success', message, duration, verticalPosition, horizontalPosition, target);
+ this.ctx.showSuccessToast(message, duration, verticalPosition, horizontalPosition, target);
}
showErrorToast(message: string,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target?: string) {
- this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target);
+ this.ctx.showErrorToast(message, verticalPosition, horizontalPosition, target);
}
- showToast(type: NotificationType, message: string, duration: number = 1000,
+ showToast(type: NotificationType, message: string, duration: number,
verticalPosition: NotificationVerticalPosition = 'bottom',
horizontalPosition: NotificationHorizontalPosition = 'left',
target?: string) {
- this.store.dispatch(new ActionNotificationShow(
- {
- message,
- type,
- duration,
- verticalPosition,
- horizontalPosition,
- target,
- panelClass: this.ctx.widgetNamespace,
- forceDismiss: true
- }));
+ this.ctx.showToast(type, message, duration, verticalPosition, horizontalPosition, target);
}
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
new file mode 100644
index 0000000000..10bc9881a9
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -0,0 +1,126 @@
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
new file mode 100644
index 0000000000..de1a672535
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
@@ -0,0 +1,75 @@
+/**
+ * Copyright © 2016-2020 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 {
+
+ .tb-multiple-input {
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ .fields-group {
+ padding: 0 8px;
+ margin: 10px 0;
+ border: 1px groove rgba(0, 0, 0, .25);
+
+ legend {
+ color: rgba(0, 0, 0, .7);
+ }
+ }
+
+ .input-field {
+ padding-right: 10px;
+
+ mat-form-field {
+ margin-bottom: 5px;
+ }
+ }
+
+ mat-checkbox,
+ mat-slide-toggle {
+ display: block;
+ margin-top: 20px;
+ margin-bottom: 16px;
+ white-space: normal;
+ }
+
+ .date-time-input {
+ mat-form-field {
+ width: 100%;
+ margin: 2px 0;
+ }
+ }
+
+ .vertical-alignment {
+ flex-direction: column;
+
+ mat-checkbox,
+ mat-slide-toggle {
+ margin-top: 18px;
+ }
+
+ mat-slide-toggle {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+
+ .vertically-aligned {
+ flex-direction: column;
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
new file mode 100644
index 0000000000..ca7a2c5526
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -0,0 +1,483 @@
+///
+/// Copyright © 2016-2020 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, Input, NgZone, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { PageComponent } from '@shared/components/page.component';
+import { WidgetContext } from '@home/models/widget-component.models';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { Overlay } from '@angular/cdk/overlay';
+import { UtilsService } from '@core/services/utils.service';
+import { TranslateService } from '@ngx-translate/core';
+import { DataKey, Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.models';
+import { IWidgetSubscription } from '@core/api/widget-api.models';
+import { isDefined, isEqual, isUndefined } from '@core/utils';
+import { EntityType } from '@shared/models/entity-type.models';
+import * as _moment from 'moment';
+import { FormBuilder, FormGroup, NgForm, ValidatorFn, Validators } from '@angular/forms';
+import { RequestConfig } from '@core/http/http-utils';
+import { AttributeService } from '@core/http/attribute.service';
+import { AttributeData, AttributeScope, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
+import { forkJoin, Observable } from 'rxjs';
+import { EntityId } from '@shared/models/id/entity-id';
+
+type FieldAlignment = 'row' | 'column';
+
+type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
+type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
+ 'booleanCheckbox' | 'booleanSwitch' |
+ 'dateTime' | 'date' | 'time';
+type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
+
+interface MultipleInputWidgetSettings {
+ widgetTitle: string;
+ showActionButtons: boolean;
+ updateAllValues: boolean;
+ showResultMessage: boolean;
+ showGroupTitle: boolean;
+ groupTitle: string;
+ fieldsAlignment: FieldAlignment;
+ fieldsInRow: number;
+ attributesShared?: boolean;
+}
+
+interface MultipleInputWidgetDataKeySettings {
+ dataKeyType: MultipleInputWidgetDataKeyType;
+ dataKeyValueType: MultipleInputWidgetDataKeyValueType;
+ required: boolean;
+ isEditable: MultipleInputWidgetDataKeyEditableType;
+ disabledOnDataKey: string;
+ dataKeyHidden: boolean;
+ step: number;
+ requiredErrorMessage: string;
+ icon: string;
+ inputTypeNumber?: boolean;
+ readOnly?: boolean;
+ disabledOnCondition?: boolean;
+}
+
+interface MultipleInputWidgetDataKey extends DataKey {
+ formId?: string;
+ settings: MultipleInputWidgetDataKeySettings;
+ isFocused: boolean;
+ value?: any;
+}
+
+interface MultipleInputWidgetSource {
+ datasource: Datasource;
+ keys: MultipleInputWidgetDataKey[];
+}
+
+@Component({
+ selector: 'tb-multiple-input-widget ',
+ templateUrl: './multiple-input-widget.component.html',
+ styleUrls: ['./multiple-input-widget.component.scss']
+})
+export class MultipleInputWidgetComponent extends PageComponent implements OnInit, OnDestroy {
+
+ @ViewChild('formContainer', {static: true}) formContainerRef: ElementRef
;
+ @ViewChild('multipleInputForm', {static: true}) multipleInputForm: NgForm;
+
+ @Input()
+ ctx: WidgetContext;
+
+ private formResizeListener: any;
+ private settings: MultipleInputWidgetSettings;
+ private widgetConfig: WidgetConfig;
+ private subscription: IWidgetSubscription;
+ private datasources: Array;
+ private sources: Array = [];
+
+ isVerticalAlignment: boolean;
+ inputWidthSettings: string;
+ changeAlignment: boolean;
+ smallWidthContainer: boolean;
+
+ entityDetected = false;
+ isAllParametersValid = true;
+
+ multipleInputFormGroup: FormGroup;
+
+ toastTargetId = 'multiple-input-widget' + this.utils.guid();
+
+ constructor(protected store: Store,
+ private elementRef: ElementRef,
+ private ngZone: NgZone,
+ private overlay: Overlay,
+ private viewContainerRef: ViewContainerRef,
+ private utils: UtilsService,
+ private fb: FormBuilder,
+ private attributeService: AttributeService,
+ private translate: TranslateService) {
+ super(store);
+ }
+
+ ngOnInit(): void {
+ this.ctx.$scope.multipleInputWidget = this;
+ this.settings = this.ctx.settings;
+ this.widgetConfig = this.ctx.widgetConfig;
+ this.subscription = this.ctx.defaultSubscription;
+ this.datasources = this.subscription.datasources;
+ this.initializeConfig();
+ this.updateDatasources();
+ this.buildForm();
+ this.ctx.updateWidgetParams();
+ this.formResizeListener = this.resize.bind(this);
+ // @ts-ignore
+ addResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+ }
+
+ ngOnDestroy(): void {
+ if (this.formResizeListener) {
+ // @ts-ignore
+ removeResizeListener(this.formContainerRef.nativeElement, this.formResizeListener);
+ }
+ }
+
+ private initializeConfig() {
+
+ if (this.settings.widgetTitle && this.settings.widgetTitle.length) {
+ this.ctx.widgetTitle = this.utils.customTranslation(this.settings.widgetTitle, this.settings.widgetTitle);
+ } else {
+ this.ctx.widgetTitle = this.ctx.widgetConfig.title;
+ }
+
+ this.settings.groupTitle = this.settings.groupTitle || '${entityName}';
+
+ // For backward compatibility
+ if (isUndefined(this.settings.showActionButtons)) {
+ this.settings.showActionButtons = true;
+ }
+ if (isUndefined(this.settings.fieldsAlignment)) {
+ this.settings.fieldsAlignment = 'row';
+ }
+ if (isUndefined(this.settings.fieldsInRow)) {
+ this.settings.fieldsInRow = 2;
+ }
+ // For backward compatibility
+
+ this.isVerticalAlignment = !(this.settings.fieldsAlignment === 'row');
+
+ if (!this.isVerticalAlignment && this.settings.fieldsInRow) {
+ this.inputWidthSettings = 100 / this.settings.fieldsInRow + '%';
+ }
+
+ this.updateWidgetDisplaying();
+ }
+
+ private updateDatasources() {
+ if (this.datasources && this.datasources.length) {
+ this.entityDetected = true;
+ let keyIndex = 0;
+ this.datasources.forEach((datasource) => {
+ const source: MultipleInputWidgetSource = {
+ datasource,
+ keys: []
+ };
+ if (datasource.type === DatasourceType.entity) {
+ datasource.dataKeys.forEach((dataKey: MultipleInputWidgetDataKey) => {
+ if ((datasource.entityType !== EntityType.DEVICE) && (dataKey.settings.dataKeyType === 'shared')) {
+ this.isAllParametersValid = false;
+ }
+ if (dataKey.units) {
+ dataKey.label += ' (' + dataKey.units + ')';
+ }
+ dataKey.formId = (++keyIndex)+'';
+ dataKey.isFocused = false;
+
+ // For backward compatibility
+ if (isUndefined(dataKey.settings.dataKeyType)) {
+ if (this.settings.attributesShared) {
+ dataKey.settings.dataKeyType = 'shared';
+ } else {
+ dataKey.settings.dataKeyType = 'server';
+ }
+ }
+
+ if (isUndefined(dataKey.settings.dataKeyValueType)) {
+ if (dataKey.settings.inputTypeNumber) {
+ dataKey.settings.dataKeyValueType = 'double';
+ } else {
+ dataKey.settings.dataKeyValueType = 'string';
+ }
+ }
+
+ if (isUndefined(dataKey.settings.isEditable)) {
+ if (dataKey.settings.readOnly) {
+ dataKey.settings.isEditable = 'readonly';
+ } else {
+ dataKey.settings.isEditable = 'editable';
+ }
+ }
+ // For backward compatibility
+
+ source.keys.push(dataKey);
+ });
+ } else {
+ this.entityDetected = false;
+ }
+ this.sources.push(source);
+ });
+ }
+ }
+
+ private buildForm() {
+ this.multipleInputFormGroup = this.fb.group({});
+ this.sources.forEach((source) => {
+ for (const key of this.visibleKeys(source)) {
+ const validators: ValidatorFn[] = [];
+ if (key.settings.required) {
+ validators.push(Validators.required);
+ }
+ if (key.settings.dataKeyValueType === 'integer') {
+ validators.push(Validators.pattern(/^-?[0-9]+$/));
+ }
+ const formControl = this.fb.control(
+ { value: key.value,
+ disabled: key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition},
+ validators
+ );
+ this.multipleInputFormGroup.addControl(key.formId, formControl);
+ }
+ });
+ }
+
+ private updateWidgetData(data: Array) {
+ let dataIndex = 0;
+ this.sources.forEach((source) => {
+ source.keys.forEach((key) => {
+ const keyData = data[dataIndex].data;
+ if (keyData && keyData.length) {
+ let value;
+ switch (key.settings.dataKeyValueType) {
+ case 'dateTime':
+ case 'date':
+ value = _moment(keyData[0][1]).toDate();
+ break;
+ case 'time':
+ value = _moment().startOf('day').add(keyData[0][1], 'ms').toDate();
+ break;
+ case 'booleanCheckbox':
+ case 'booleanSwitch':
+ value = (keyData[0][1] === 'true');
+ break;
+ default:
+ value = keyData[0][1];
+ }
+ key.value = value;
+ }
+
+ if (key.settings.isEditable === 'editable' && key.settings.disabledOnDataKey) {
+ const conditions = data.filter((item) => {
+ return source.datasource === item.datasource && item.dataKey.name === key.settings.disabledOnDataKey;
+ });
+ if (conditions && conditions.length) {
+ if (conditions[0].data.length) {
+ if (conditions[0].data[0][1] === 'false') {
+ key.settings.disabledOnCondition = true;
+ } else {
+ key.settings.disabledOnCondition = !conditions[0].data[0][1];
+ }
+ }
+ }
+ }
+
+ if (!key.settings.dataKeyHidden) {
+ if (key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition) {
+ this.multipleInputFormGroup.get(key.formId).disable({emitEvent: false});
+ } else {
+ this.multipleInputFormGroup.get(key.formId).enable({emitEvent: false});
+ }
+ const dirty = this.multipleInputFormGroup.get(key.formId).dirty;
+ if (!key.isFocused && !dirty) {
+ this.multipleInputFormGroup.get(key.formId).patchValue(key.value, {emitEvent: false});
+ }
+ }
+ dataIndex++;
+ });
+ });
+ }
+
+ private updateWidgetDisplaying() {
+ this.changeAlignment = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 620);
+ this.smallWidthContainer = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 420);
+ }
+
+ public onDataUpdated() {
+ this.ngZone.run(() => {
+ this.updateWidgetData(this.subscription.data);
+ this.ctx.detectChanges();
+ });
+ }
+
+ private resize() {
+ this.ngZone.run(() => {
+ this.updateWidgetDisplaying();
+ this.ctx.detectChanges();
+ });
+ }
+
+ public getGroupTitle(datasource: Datasource): string {
+ return this.utils.createLabelFromDatasource(datasource, this.settings.groupTitle);
+ }
+
+ public visibleKeys(source: MultipleInputWidgetSource): MultipleInputWidgetDataKey[] {
+ return source.keys.filter(key => !key.settings.dataKeyHidden);
+ }
+
+ public datePickerType(keyType: MultipleInputWidgetDataKeyValueType): string {
+ switch (keyType) {
+ case 'dateTime':
+ return 'datetime';
+ case 'date':
+ return 'date';
+ case 'time':
+ return 'time';
+ }
+ }
+
+ public focusInputElement($event: Event) {
+ ($event.target as HTMLInputElement).select();
+ }
+
+ public inputChanged(source: MultipleInputWidgetSource, key: MultipleInputWidgetDataKey) {
+ if (!this.settings.showActionButtons) {
+ const currentValue = this.multipleInputFormGroup.get(key.formId).value;
+ if (!key.settings.required || (key.settings.required && isDefined(currentValue))) {
+ const dataToSave: MultipleInputWidgetSource = {
+ datasource: source.datasource,
+ keys: [key]
+ };
+ this.save(dataToSave);
+ }
+ }
+ }
+
+ public save(dataToSave?: MultipleInputWidgetSource) {
+ const config: RequestConfig = {
+ ignoreLoading: !this.settings.showActionButtons
+ };
+ let data: Array;
+ if (dataToSave) {
+ data = [dataToSave];
+ } else {
+ data = this.sources;
+ }
+ const tasks: Observable[] = [];
+ data.forEach((toSave) => {
+ const serverAttributes: AttributeData[] = [];
+ const sharedAttributes: AttributeData[] = [];
+ const telemetry: AttributeData[] = [];
+ for (const key of this.visibleKeys(toSave)) {
+ const currentValue = this.multipleInputFormGroup.get(key.formId).value;
+ if (!isEqual(currentValue, key.value) || this.settings.updateAllValues) {
+ const attribute: AttributeData = {
+ key: key.name,
+ value: null
+ };
+ if (currentValue) {
+ switch (key.settings.dataKeyValueType) {
+ case 'dateTime':
+ case 'date':
+ attribute.value = currentValue.getTime();
+ break;
+ case 'time':
+ attribute.value = currentValue.getTime() - _moment().startOf('day').valueOf();
+ break;
+ default:
+ attribute.value = currentValue;
+ }
+ } else {
+ if (currentValue === '') {
+ attribute.value = null;
+ } else {
+ attribute.value = currentValue;
+ }
+ }
+
+ switch (key.settings.dataKeyType) {
+ case 'shared':
+ sharedAttributes.push(attribute);
+ break;
+ case 'timeseries':
+ telemetry.push(attribute);
+ break;
+ default:
+ serverAttributes.push(attribute);
+ }
+ }
+ }
+ const entityId: EntityId = {
+ entityType: toSave.datasource.entityType,
+ id: toSave.datasource.entityId
+ };
+ if (serverAttributes.length) {
+ tasks.push(this.attributeService.saveEntityAttributes(
+ entityId,
+ AttributeScope.SERVER_SCOPE,
+ serverAttributes,
+ config
+ ));
+ }
+ if (sharedAttributes.length) {
+ tasks.push(this.attributeService.saveEntityAttributes(
+ entityId,
+ AttributeScope.SHARED_SCOPE,
+ sharedAttributes,
+ config
+ ));
+ }
+ if (telemetry.length) {
+ tasks.push(this.attributeService.saveEntityTimeseries(
+ entityId,
+ LatestTelemetry.LATEST_TELEMETRY,
+ telemetry,
+ config
+ ));
+ }
+ });
+ if (tasks.length) {
+ forkJoin(tasks).subscribe(
+ () => {
+ this.multipleInputForm.resetForm();
+ this.multipleInputFormGroup.markAsPristine();
+ if (this.settings.showResultMessage) {
+ this.ctx.showSuccessToast(this.translate.instant('widgets.input-widgets.update-successful'),
+ 1000, 'bottom', 'left', this.toastTargetId);
+ }
+ },
+ () => {
+ if (this.settings.showResultMessage) {
+ this.ctx.showErrorToast(this.translate.instant('widgets.input-widgets.update-failed'),
+ 'bottom', 'left', this.toastTargetId);
+ }
+ });
+ } else {
+ this.multipleInputForm.resetForm();
+ this.multipleInputFormGroup.markAsPristine();
+ }
+ }
+
+ public discardAll() {
+ this.multipleInputForm.resetForm();
+ this.sources.forEach((source) => {
+ for (const key of this.visibleKeys(source)) {
+ this.multipleInputFormGroup.get(key.formId).patchValue(key.value, {emitEvent: false});
+ }
+ });
+ this.multipleInputFormGroup.markAsPristine();
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
index e3cc12b853..9754019025 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts
@@ -30,6 +30,7 @@ import {
DateRangeNavigatorPanelComponent,
DateRangeNavigatorWidgetComponent
} from '@home/components/widget/lib/date-range-navigator/date-range-navigator.component';
+import { MultipleInputWidgetComponent } from './lib/multiple-input-widget.component';
@NgModule({
declarations:
@@ -41,7 +42,8 @@ import {
TimeseriesTableWidgetComponent,
EntitiesHierarchyWidgetComponent,
DateRangeNavigatorWidgetComponent,
- DateRangeNavigatorPanelComponent
+ DateRangeNavigatorPanelComponent,
+ MultipleInputWidgetComponent
],
imports: [
CommonModule,
@@ -55,7 +57,8 @@ import {
TimeseriesTableWidgetComponent,
EntitiesHierarchyWidgetComponent,
RpcWidgetsModule,
- DateRangeNavigatorWidgetComponent
+ DateRangeNavigatorWidgetComponent,
+ MultipleInputWidgetComponent
],
providers: [
CustomDialogService
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 18497e342b..5dd493a4f3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -260,6 +260,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
this.widgetContext = this.dashboardWidget.widgetContext;
this.widgetContext.changeDetector = this.cd;
this.widgetContext.ngZone = this.ngZone;
+ this.widgetContext.store = this.store;
this.widgetContext.servicesMap = ServicesMap;
this.widgetContext.isEdit = this.isEdit;
this.widgetContext.isMobile = this.isMobile;
diff --git a/ui-ngx/src/app/modules/home/models/widget-component.models.ts b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
index e9bec966a4..185074a8ad 100644
--- a/ui-ngx/src/app/modules/home/models/widget-component.models.ts
+++ b/ui-ngx/src/app/modules/home/models/widget-component.models.ts
@@ -52,6 +52,14 @@ import { CustomDialogService } from '@home/components/widget/dialog/custom-dialo
import { isDefined, formatValue } from '@core/utils';
import { forkJoin, Observable, of, ReplaySubject } from 'rxjs';
import { WidgetSubscription } from '@core/api/widget-subscription';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import {
+ NotificationHorizontalPosition,
+ NotificationType,
+ NotificationVerticalPosition
+} from '@core/notification/notification.models';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
export interface IWidgetAction {
name: string;
@@ -152,8 +160,8 @@ export class WidgetContext {
formatValue
};
- $container: JQuery;
- $containerParent: JQuery;
+ $container: JQuery;
+ $containerParent: JQuery;
width: number;
height: number;
$scope: IDynamicWidgetComponent;
@@ -184,11 +192,44 @@ export class WidgetContext {
ngZone?: NgZone;
+ store?: Store;
+
rxjs = {
forkJoin,
of
};
+ showSuccessToast(message: string, duration: number = 1000,
+ verticalPosition: NotificationVerticalPosition = 'bottom',
+ horizontalPosition: NotificationHorizontalPosition = 'left',
+ target?: string) {
+ this.showToast('success', message, duration, verticalPosition, horizontalPosition, target);
+ }
+
+ showErrorToast(message: string,
+ verticalPosition: NotificationVerticalPosition = 'bottom',
+ horizontalPosition: NotificationHorizontalPosition = 'left',
+ target?: string) {
+ this.showToast('error', message, undefined, verticalPosition, horizontalPosition, target);
+ }
+
+ showToast(type: NotificationType, message: string, duration: number,
+ verticalPosition: NotificationVerticalPosition = 'bottom',
+ horizontalPosition: NotificationHorizontalPosition = 'left',
+ target?: string) {
+ this.store.dispatch(new ActionNotificationShow(
+ {
+ message,
+ type,
+ duration,
+ verticalPosition,
+ horizontalPosition,
+ target,
+ panelClass: this.widgetNamespace,
+ forceDismiss: true
+ }));
+ }
+
detectChanges(updateWidgetParams: boolean = false) {
if (!this.destroyed) {
if (updateWidgetParams) {
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
new file mode 100644
index 0000000000..07098ea49c
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.html
@@ -0,0 +1,57 @@
+
+
diff --git a/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
new file mode 100644
index 0000000000..5fc3882a35
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts
@@ -0,0 +1,63 @@
+///
+/// Copyright © 2016-2020 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} from "@angular/core";
+import {DialogComponent} from "@shared/components/dialog.component";
+import {Store} from "@ngrx/store";
+import {AppState} from "@core/core.state";
+import {Router} from "@angular/router";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {FormBuilder, FormGroup} from "@angular/forms";
+
+export interface JsonObjectEdittDialogData {
+ jsonValue: Object;
+ title?: string;
+}
+
+@Component({
+ selector: 'tb-object-edit-dialog',
+ templateUrl: './json-object-edit-dialog.component.html',
+ styleUrls: []
+})
+export class JsonObjectEditDialogComponent extends DialogComponent
+ implements OnInit {
+
+ jsonFormGroup: FormGroup;
+
+ submitted = false;
+
+ constructor(protected store: Store,
+ protected router: Router,
+ @Inject(MAT_DIALOG_DATA) public data: JsonObjectEdittDialogData,
+ public dialogRef: MatDialogRef,
+ public fb: FormBuilder) {
+ super(store, router, dialogRef);
+ }
+
+ ngOnInit(): void {
+ this.jsonFormGroup = this.fb.group({
+ json: [this.data.jsonValue, []]
+ });
+ }
+
+ cancel(): void {
+ this.dialogRef.close(undefined);
+ }
+
+ add(): void {
+ this.dialogRef.close(this.jsonFormGroup.get('json').value);
+ }
+}
diff --git a/ui-ngx/src/app/shared/components/directives/tb-json-to-string.directive.ts b/ui-ngx/src/app/shared/components/directives/tb-json-to-string.directive.ts
new file mode 100644
index 0000000000..cf7cd0a0bd
--- /dev/null
+++ b/ui-ngx/src/app/shared/components/directives/tb-json-to-string.directive.ts
@@ -0,0 +1,96 @@
+///
+/// Copyright © 2016-2020 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 {Directive, ElementRef, forwardRef, HostListener, Renderer2, SkipSelf} from "@angular/core";
+import {
+ ControlValueAccessor,
+ FormControl, FormGroupDirective,
+ NG_VALIDATORS,
+ NG_VALUE_ACCESSOR, NgForm,
+ ValidationErrors,
+ Validator
+} from "@angular/forms";
+import {ErrorStateMatcher} from "@angular/material/core";
+
+@Directive({
+ selector: '[tb-json-to-string]',
+ providers: [{
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => TbJsonToStringDirective),
+ multi: true
+ },
+ {
+ provide: NG_VALIDATORS,
+ useExisting: forwardRef(() => TbJsonToStringDirective),
+ multi: true,
+ },
+ {
+ provide: ErrorStateMatcher,
+ useExisting: TbJsonToStringDirective
+ }]
+})
+
+export class TbJsonToStringDirective implements ControlValueAccessor, Validator, ErrorStateMatcher {
+ private propagateChange = null;
+ private parseError: boolean;
+ private data: any;
+
+ @HostListener('input', ['$event.target.value']) input(newValue: any): void {
+ try {
+ this.data = JSON.parse(newValue);
+ this.parseError = false;
+ } catch (e) {
+ this.parseError = true;
+ }
+
+ this.propagateChange(this.data);
+ }
+
+ constructor(private render: Renderer2,
+ private element: ElementRef,
+ @SkipSelf() private errorStateMatcher: ErrorStateMatcher) {
+
+ }
+
+ isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+ const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
+ const customErrorState = !!(control && control.invalid && this.parseError);
+ return originalErrorState || customErrorState;
+ }
+
+ validate(c: FormControl): ValidationErrors {
+ return (!this.parseError) ? null : {
+ invalidJSON: {
+ valid: false
+ }
+ };
+ }
+
+ writeValue(obj: any): void {
+ if (obj) {
+ this.data = obj;
+ this.parseError = false;
+ this.render.setProperty(this.element.nativeElement, 'value', JSON.stringify(obj));
+ }
+ }
+
+ registerOnChange(fn: any): void {
+ this.propagateChange = fn;
+ }
+
+ registerOnTouched(fn: any): void {
+ }
+}
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index 9daa94a137..d072c674f4 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -22,9 +22,13 @@
+