Igor Kulikov
7 years ago
9 changed files with 743 additions and 22 deletions
@ -0,0 +1,126 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<form #formContainer class="tb-multiple-input" |
||||
|
#multipleInputForm="ngForm" |
||||
|
[formGroup]="multipleInputFormGroup" |
||||
|
tb-toast toastTarget="{{ toastTargetId }}" |
||||
|
(ngSubmit)="save()" novalidate autocomplete="off"> |
||||
|
<div style="padding: 0 8px;" *ngIf="entityDetected && isAllParametersValid"> |
||||
|
<fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}"> |
||||
|
<legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }} |
||||
|
</legend> |
||||
|
<div fxLayout="row" class="layout-wrap" |
||||
|
[ngClass]="{'vertical-alignment': isVerticalAlignment || changeAlignment}"> |
||||
|
<div *ngFor="let key of visibleKeys(source)" |
||||
|
[ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}"> |
||||
|
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'string'"> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{key.label}}</mat-label> |
||||
|
<input matInput |
||||
|
formControlName="{{key.formId}}" |
||||
|
[required]="key.settings.required" |
||||
|
[readonly]="key.settings.isEditable === 'readonly'" |
||||
|
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> |
||||
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')"> |
||||
|
{{key.settings.requiredErrorMessage}} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' || |
||||
|
key.settings.dataKeyValueType === 'integer'"> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label>{{key.label}}</mat-label> |
||||
|
<input matInput |
||||
|
formControlName="{{key.formId}}" |
||||
|
[required]="key.settings.required" |
||||
|
[readonly]="key.settings.isEditable === 'readonly'" |
||||
|
type="number" |
||||
|
step="{{key.settings.step}}" |
||||
|
(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> |
||||
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')"> |
||||
|
{{key.settings.requiredErrorMessage}} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'"> |
||||
|
<mat-checkbox formControlName="{{key.formId}}" |
||||
|
(change)="inputChanged(source, key)"> |
||||
|
{{key.label}} |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
<div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'"> |
||||
|
<mat-slide-toggle formControlName="{{key.formId}}" |
||||
|
(change)="inputChanged(source, key)"> |
||||
|
{{key.label}} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') || |
||||
|
(key.settings.dataKeyValueType === 'date') || |
||||
|
(key.settings.dataKeyValueType === 'time')" fxLayout="column"> |
||||
|
<div fxLayout="row" [ngClass]="{'vertically-aligned': smallWidthContainer}" fxLayoutGap="16px"> |
||||
|
<mat-form-field> |
||||
|
<mat-placeholder>{{key.label}}</mat-placeholder> |
||||
|
<mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle> |
||||
|
<mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}" |
||||
|
openOnFocus="true"></mat-datetimepicker> |
||||
|
<input matInput formControlName="{{key.formId}}" |
||||
|
[required]="key.settings.required" |
||||
|
[readonly]="key.settings.isEditable === 'readonly'" |
||||
|
[matDatetimepicker]="datePicker" |
||||
|
(focus)="key.isFocused = true;" |
||||
|
(blur)="key.isFocused = false;" |
||||
|
(dateChange)="inputChanged(source, key)"> |
||||
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')"> |
||||
|
{{key.settings.requiredErrorMessage}} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</fieldset> |
||||
|
<div class="mat-padding" fxLayout="row" fxLayoutAlign="end center" |
||||
|
*ngIf="entityDetected && settings.showActionButtons"> |
||||
|
<button mat-button color="primary" type="button" |
||||
|
(click)="discardAll()" style="max-height: 50px; margin-right:20px;" |
||||
|
[disabled]="!multipleInputForm.dirty"> |
||||
|
{{ 'action.undo' | translate }} |
||||
|
</button> |
||||
|
<button mat-button mat-raised-button color="primary" type="submit" |
||||
|
style="max-height: 50px; margin-right:20px;" |
||||
|
[disabled]="!multipleInputForm.dirty || multipleInputForm.invalid"> |
||||
|
{{ 'action.save' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-multiple-input__errors" fxLayout="column" fxLayoutAlign="center center" style="height: 100%;" |
||||
|
*ngIf="!entityDetected || !isAllParametersValid"> |
||||
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" [fxHide]="entityDetected"> |
||||
|
{{ 'widgets.input-widgets.no-entity-selected' | translate }} |
||||
|
</div> |
||||
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" |
||||
|
[fxShow]="entityDetected && !isAllParametersValid"> |
||||
|
{{ 'widgets.input-widgets.not-allowed-entity' | translate }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</form> |
||||
@ -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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -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<HTMLElement>; |
||||
|
@ViewChild('multipleInputForm', {static: true}) multipleInputForm: NgForm; |
||||
|
|
||||
|
@Input() |
||||
|
ctx: WidgetContext; |
||||
|
|
||||
|
private formResizeListener: any; |
||||
|
private settings: MultipleInputWidgetSettings; |
||||
|
private widgetConfig: WidgetConfig; |
||||
|
private subscription: IWidgetSubscription; |
||||
|
private datasources: Array<Datasource>; |
||||
|
private sources: Array<MultipleInputWidgetSource> = []; |
||||
|
|
||||
|
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<AppState>, |
||||
|
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<DatasourceData>) { |
||||
|
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<MultipleInputWidgetSource>; |
||||
|
if (dataToSave) { |
||||
|
data = [dataToSave]; |
||||
|
} else { |
||||
|
data = this.sources; |
||||
|
} |
||||
|
const tasks: Observable<any>[] = []; |
||||
|
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(); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue