tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Improvement multiple attribute widget

pull/5757/head
Vladyslav_Prykhodko 5 years ago
parent
783552f6c3
commit
49a9a3136f
5 changed files with 141 additions and 14 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      application/src/main/data/json/system/widget_bundles/input_widgets.json
  2. 4
      ui-ngx/src/app/core/utils.ts
  3. 21
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
  4. 14
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
  5. 114
      ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts

2
application/src/main/data/json/system/widget_bundles/input_widgets.json
View File

File diff suppressed because one or more lines are too long

4
ui-ngx/src/app/core/utils.ts
View File

@ -114,6 +114,10 @@ export function isNumeric(value: any): boolean {
return (value - parseFloat(value) + 1) >= 0;
}
export function isBoolean(value: any): boolean {
return typeof value === 'boolean';
}
export function isString(value: any): boolean {
return typeof value === 'string';
}

21
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
View File

@ -37,7 +37,12 @@
type="text"
(focus)="key.isFocused = true; focusInputElement($event)"
(blur)="key.isFocused = false; inputChanged(source, key)">
<mat-icon *ngIf="key.settings.icon" matPrefix>{{key.settings.icon}}</mat-icon>
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matPrefix>
<mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
<ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
</ng-template>
</ng-container>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
{{ getErrorMessageText(key.settings, 'required') }}
</mat-error>
@ -57,7 +62,12 @@
max="{{key.settings.maxValue}}"
(focus)="key.isFocused = true; focusInputElement($event)"
(blur)="key.isFocused = false; inputChanged(source, key)">
<mat-icon *ngIf="key.settings.icon" matPrefix>{{key.settings.icon}}</mat-icon>
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon" matPrefix>
<mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
<ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
</ng-template>
</ng-container>
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
{{ getErrorMessageText(key.settings,'required') }}
</mat-error>
@ -77,7 +87,14 @@
</div>
<div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'">
<mat-slide-toggle formControlName="{{key.formId}}"
[labelPosition]="key.settings.slideToggleLabelPosition"
(change)="inputChanged(source, key)">
<ng-container *ngIf="key.settings.icon || key.settings.safeCustomIcon">
<mat-icon *ngIf="!key.settings.safeCustomIcon; else customToggleIcon">{{key.settings.icon}}</mat-icon>
<ng-template #customToggleIcon>
<img class="mat-icon" [src]="key.settings.safeCustomIcon" alt="icon">
</ng-template>
</ng-container>
<span class="label-wrapper">{{key.label}}</span>
</mat-slide-toggle>
</div>

14
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.scss
View File

@ -64,3 +64,17 @@
}
}
}
:host ::ng-deep {
.tb-multiple-input {
.mat-slide-toggle-content {
width: 100%;
display: flex;
align-items: center;
.mat-icon {
margin-right: 8px;
}
}
}
}

114
ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
View File

@ -24,7 +24,14 @@ 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 { createLabelFromDatasource, isDefinedAndNotNull, isEqual, isNotEmptyStr, isUndefined } from '@core/utils';
import {
createLabelFromDatasource,
isBoolean, isDefined,
isDefinedAndNotNull,
isEqual,
isNotEmptyStr,
isUndefined
} from '@core/utils';
import { EntityType } from '@shared/models/entity-type.models';
import * as _moment from 'moment';
import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
@ -35,6 +42,7 @@ import { forkJoin, Observable, Subject } from 'rxjs';
import { EntityId } from '@shared/models/id/entity-id';
import { ResizeObserver } from '@juggle/resize-observer';
import { takeUntil } from 'rxjs/operators';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
type FieldAlignment = 'row' | 'column';
@ -44,6 +52,9 @@ type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
'dateTime' | 'date' | 'time' | 'select';
type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any;
type ConvertSetValueFunction = (value: any, originValue: any, ctx: WidgetContext) => any;
interface MultipleInputWidgetSettings {
widgetTitle: string;
showActionButtons: boolean;
@ -66,6 +77,7 @@ interface MultipleInputWidgetSelectOption {
interface MultipleInputWidgetDataKeySettings {
dataKeyType: MultipleInputWidgetDataKeyType;
dataKeyValueType: MultipleInputWidgetDataKeyValueType;
slideToggleLabelPosition?: 'after' | 'before';
selectOptions: MultipleInputWidgetSelectOption[];
required: boolean;
isEditable: MultipleInputWidgetDataKeyEditableType;
@ -78,10 +90,19 @@ interface MultipleInputWidgetDataKeySettings {
invalidDateErrorMessage?: string;
minValueErrorMessage?: string;
maxValueErrorMessage?: string;
useCustomIcon: boolean;
icon: string;
customIcon: string ;
safeCustomIcon?: SafeUrl;
inputTypeNumber?: boolean;
readOnly?: boolean;
disabledOnCondition?: boolean;
useGetValueFunction?: boolean;
getValueFunctionBody?: string;
getValueFunction?: ConvertGetValueFunction;
useSetValueFunction?: boolean;
setValueFunctionBody?: string;
setValueFunction?: ConvertSetValueFunction;
}
interface MultipleInputWidgetDataKey extends DataKey {
@ -139,7 +160,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
private utils: UtilsService,
private fb: FormBuilder,
private attributeService: AttributeService,
private translate: TranslateService) {
private translate: TranslateService,
private sanitizer: DomSanitizer) {
super(store);
}
@ -265,6 +287,34 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
});
}
if (dataKey.settings.dataKeyValueType === 'booleanSwitch' && isUndefined(dataKey.settings.slideToggleLabelPosition)) {
dataKey.settings.slideToggleLabelPosition = 'after';
}
if (dataKey.settings.useCustomIcon && isDefinedAndNotNull(dataKey.settings.customIcon)) {
dataKey.settings.safeCustomIcon = this.sanitizer.bypassSecurityTrustUrl(dataKey.settings.customIcon);
}
if (dataKey.settings.useGetValueFunction && dataKey.settings.getValueFunctionBody.length) {
try {
dataKey.settings.getValueFunction =
new Function('value, ctx', dataKey.settings.getValueFunctionBody) as ConvertGetValueFunction;
} catch (e) {
console.warn(`Parse getValue function in key ${dataKey.label}`, e);
dataKey.settings.getValueFunction = null;
}
}
if (dataKey.settings.useSetValueFunction && dataKey.settings.setValueFunctionBody.length) {
try {
dataKey.settings.setValueFunction =
new Function('value, originValue, ctx', dataKey.settings.setValueFunctionBody) as ConvertSetValueFunction;
} catch (e) {
console.warn(`Parse setValue function in key ${dataKey.label}`, e);
dataKey.settings.setValueFunction = null;
}
}
source.keys.push(dataKey);
});
} else {
@ -342,28 +392,41 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
source.keys.forEach((key) => {
const keyData = data[dataIndex].data;
if (keyData && keyData.length) {
let value;
let value = keyData[0][1];
const keyValue = this.getKeyValue(value, key.settings);
switch (key.settings.dataKeyValueType) {
case 'dateTime':
case 'date':
if (isDefinedAndNotNull(keyData[0][1]) && keyData[0][1] !== '') {
value = _moment(keyData[0][1]).toDate();
if (isDefinedAndNotNull(keyValue) && keyValue !== '') {
if (keyValue instanceof Date) {
value = keyValue;
} else {
value = _moment(keyValue).toDate();
}
} else {
value = null;
}
break;
case 'time':
value = _moment().startOf('day').add(keyData[0][1], 'ms').toDate();
if (keyValue instanceof Date) {
value = keyValue;
} else {
value = _moment().startOf('day').add(keyValue, 'ms').toDate();
}
break;
case 'booleanCheckbox':
case 'booleanSwitch':
value = (keyData[0][1] === 'true');
if (isBoolean(keyValue)) {
value = keyValue;
} else {
value = (keyValue === 'true');
}
break;
case 'select':
value = keyData[0][1].toString();
value = keyValue.toString();
break;
default:
value = keyData[0][1];
value = keyValue;
}
key.value = value;
}
@ -399,6 +462,18 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
});
}
private getKeyValue(data: any, keySetting: MultipleInputWidgetDataKeySettings) {
if (isDefined(keySetting.getValueFunction)) {
try {
return keySetting.getValueFunction(data, this.ctx);
} catch (e) {
console.warn(`Call function getValue`, e);
return data;
}
}
return data;
}
private updateWidgetDisplaying() {
this.changeAlignment = (this.ctx.$container && this.ctx.$container[0].offsetWidth < 620);
}
@ -493,7 +568,8 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
if (!this.settings.showActionButtons && !this.isSavingInProgress) {
this.isSavingInProgress = true;
const currentValue = this.multipleInputFormGroup.get(key.formId).value;
if (!key.settings.required || (key.settings.required && isDefinedAndNotNull(currentValue) && isNotEmptyStr(currentValue.toString()))) {
if (!key.settings.required ||
(key.settings.required && isDefinedAndNotNull(currentValue) && isNotEmptyStr(currentValue.toString()))) {
const dataToSave: MultipleInputWidgetSource = {
datasource: source.datasource,
keys: [key]
@ -523,8 +599,9 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
const sharedAttributes: AttributeData[] = [];
const telemetry: AttributeData[] = [];
for (const key of toSave.keys) {
const currentValue = key.settings.dataKeyHidden ? key.value : this.multipleInputFormGroup.get(key.formId).value;
let currentValue = key.settings.dataKeyHidden ? key.value : this.multipleInputFormGroup.get(key.formId).value;
if (!isEqual(currentValue, key.value) || this.settings.updateAllValues) {
currentValue = this.setKeyValue(currentValue, key, toSave);
const attribute: AttributeData = {
key: key.name,
value: null
@ -615,6 +692,21 @@ export class MultipleInputWidgetComponent extends PageComponent implements OnIni
}
}
private setKeyValue(value: any, key: MultipleInputWidgetDataKey, source: MultipleInputWidgetSource) {
if (isDefined(key.settings.setValueFunction)) {
const currentDatasourceData = this.subscription.data
.find(dsData => dsData.datasource === source.datasource && dsData.dataKey.name === key.name);
const originValue = currentDatasourceData.data[0][1];
try {
return key.settings.setValueFunction(value, originValue, this.ctx);
} catch (e) {
console.warn(`Call function setValue`, e);
return value;
}
}
return value;
}
public discardAll() {
this.multipleInputFormGroup.reset(undefined, {emitEvent: false});
this.sources.forEach((source) => {

Write Preview
Loading…
Cancel
Save