Igor Kulikov
5 years ago
7 changed files with 362 additions and 3 deletions
@ -0,0 +1,69 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2021 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-json-input" tb-toast toastTarget="{{ toastTargetId }}"> |
|||
<form *ngIf="attributeUpdateFormGroup" |
|||
fxLayout="column" |
|||
class="tb-json-input__form" |
|||
[formGroup]="attributeUpdateFormGroup" |
|||
(ngSubmit)="save()"> |
|||
<div fxLayout="column" fxLayoutGap="10px" fxFlex *ngIf="entityDetected && isValidParameter && dataKeyDetected"> |
|||
<fieldset fxFlex> |
|||
<tb-json-object-edit |
|||
[editorStyle]="{minHeight: '100px'}" |
|||
fillHeight="true" |
|||
[required]="settings.attributeRequired" |
|||
label="{{ settings.showLabel ? labelValue : '' }}" |
|||
formControlName="currentValue" |
|||
(focusin)="isFocused = true;" |
|||
(focusout)="isFocused = false;" |
|||
></tb-json-object-edit> |
|||
</fieldset> |
|||
<div class="tb-json-input-form__actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px"> |
|||
<button mat-button color="primary" |
|||
type="button" |
|||
[disabled]="!attributeUpdateFormGroup.dirty" |
|||
(click)="discard()" |
|||
matTooltip="{{ 'widgets.input-widgets.discard-changes' | translate }}" |
|||
matTooltipPosition="above"> |
|||
{{ "action.undo" | translate }} |
|||
</button> |
|||
<button mat-button mat-raised-button color="primary" |
|||
type="submit" |
|||
[disabled]="attributeUpdateFormGroup.invalid || !attributeUpdateFormGroup.dirty"> |
|||
{{ "action.save" | translate }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div fxLayout="column" fxLayoutAlign="center center" fxFlex *ngIf="!entityDetected || !dataKeyDetected || !isValidParameter"> |
|||
<div class="tb-json-input__error" |
|||
*ngIf="!entityDetected"> |
|||
{{ 'widgets.input-widgets.no-entity-selected' | translate }} |
|||
</div> |
|||
<div class="tb-json-input__error" |
|||
*ngIf="entityDetected && !dataKeyDetected"> |
|||
{{ 'widgets.input-widgets.no-datakey-selected' | translate }} |
|||
</div> |
|||
<div class="tb-json-input__error" |
|||
*ngIf="dataKeyDetected && !isValidParameter"> |
|||
{{ errorMessage | translate }} |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
@ -0,0 +1,36 @@ |
|||
/** |
|||
* Copyright © 2016-2021 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. |
|||
*/ |
|||
|
|||
.tb-json-input { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 5px; |
|||
|
|||
&__form { |
|||
overflow: auto; |
|||
height: 100%; |
|||
} |
|||
|
|||
&__error { |
|||
text-align: center; |
|||
font-size: 18px; |
|||
color: #a0a0a0; |
|||
} |
|||
} |
|||
|
|||
.tb-toast { |
|||
font-size: 14px!important; |
|||
} |
|||
@ -0,0 +1,227 @@ |
|||
///
|
|||
/// Copyright © 2016-2021 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, Input, OnInit } 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 { UtilsService } from '@core/services/utils.service'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { Datasource, DatasourceData, DatasourceType, WidgetConfig } from '@shared/models/widget.models'; |
|||
import { IWidgetSubscription } from '@core/api/widget-api.models'; |
|||
import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; |
|||
import { AttributeService } from '@core/http/attribute.service'; |
|||
import { AttributeData, AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; |
|||
import { EntityId } from '@shared/models/id/entity-id'; |
|||
import { EntityType } from '@shared/models/entity-type.models'; |
|||
import { createLabelFromDatasource } from '@core/utils'; |
|||
import { Observable } from 'rxjs'; |
|||
|
|||
enum JsonInputWidgetMode { |
|||
ATTRIBUTE = 'ATTRIBUTE', |
|||
TIME_SERIES = 'TIME_SERIES', |
|||
} |
|||
|
|||
interface JsonInputWidgetSettings { |
|||
widgetTitle: string; |
|||
widgetMode: JsonInputWidgetMode; |
|||
attributeScope?: AttributeScope; |
|||
showLabel: boolean; |
|||
labelValue?: string; |
|||
attributeRequired: boolean; |
|||
showResultMessage: boolean; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-json-input-widget ', |
|||
templateUrl: './json-input-widget.component.html', |
|||
styleUrls: ['./json-input-widget.component.scss'] |
|||
}) |
|||
export class JsonInputWidgetComponent extends PageComponent implements OnInit { |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
public settings: JsonInputWidgetSettings; |
|||
private widgetConfig: WidgetConfig; |
|||
private subscription: IWidgetSubscription; |
|||
private datasource: Datasource; |
|||
|
|||
labelValue: string; |
|||
|
|||
entityDetected = false; |
|||
dataKeyDetected = false; |
|||
isValidParameter = false; |
|||
errorMessage: string; |
|||
|
|||
isFocused: boolean; |
|||
originalValue: any; |
|||
attributeUpdateFormGroup: FormGroup; |
|||
|
|||
toastTargetId = 'json-input-widget' + this.utils.guid(); |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private utils: UtilsService, |
|||
private fb: FormBuilder, |
|||
private attributeService: AttributeService, |
|||
private translate: TranslateService) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.ctx.$scope.jsonInputWidget = this; |
|||
this.settings = this.ctx.settings; |
|||
this.widgetConfig = this.ctx.widgetConfig; |
|||
this.subscription = this.ctx.defaultSubscription; |
|||
this.datasource = this.subscription.datasources[0]; |
|||
this.initializeConfig(); |
|||
this.validateDatasources(); |
|||
this.buildForm(); |
|||
this.ctx.updateWidgetParams(); |
|||
} |
|||
|
|||
private initializeConfig() { |
|||
if (this.settings.widgetTitle && this.settings.widgetTitle.length) { |
|||
const title = createLabelFromDatasource(this.datasource, this.settings.widgetTitle); |
|||
this.ctx.widgetTitle = this.utils.customTranslation(title, title); |
|||
} else { |
|||
this.ctx.widgetTitle = this.ctx.widgetConfig.title; |
|||
} |
|||
|
|||
if (this.settings.labelValue && this.settings.labelValue.length) { |
|||
const label = createLabelFromDatasource(this.datasource, this.settings.labelValue); |
|||
this.labelValue = this.utils.customTranslation(label, label); |
|||
} else { |
|||
this.labelValue = this.translate.instant('widgets.input-widgets.value'); |
|||
} |
|||
} |
|||
|
|||
private validateDatasources() { |
|||
if (this.datasource?.type === DatasourceType.entity) { |
|||
this.entityDetected = true; |
|||
if (this.datasource.dataKeys.length) { |
|||
this.dataKeyDetected = true; |
|||
|
|||
if (this.settings.widgetMode === JsonInputWidgetMode.ATTRIBUTE) { |
|||
if (this.datasource.dataKeys[0].type === DataKeyType.attribute) { |
|||
if (this.settings.attributeScope === AttributeScope.SERVER_SCOPE || this.datasource.entityType === EntityType.DEVICE) { |
|||
this.isValidParameter = true; |
|||
} else { |
|||
this.errorMessage = 'widgets.input-widgets.not-allowed-entity'; |
|||
} |
|||
} else { |
|||
this.errorMessage = 'widgets.input-widgets.no-attribute-selected'; |
|||
} |
|||
} else { |
|||
if (this.datasource.dataKeys[0].type === DataKeyType.timeseries) { |
|||
this.isValidParameter = true; |
|||
} else { |
|||
this.errorMessage = 'widgets.input-widgets.no-timeseries-selected'; |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
private buildForm() { |
|||
const validators: ValidatorFn[] = []; |
|||
if (this.settings.attributeRequired) { |
|||
validators.push(Validators.required); |
|||
} |
|||
this.attributeUpdateFormGroup = this.fb.group({ |
|||
currentValue: [{}, validators] |
|||
}); |
|||
this.attributeUpdateFormGroup.valueChanges.subscribe( () => { |
|||
this.ctx.detectChanges(); |
|||
}); |
|||
} |
|||
|
|||
private updateWidgetData(data: Array<DatasourceData>) { |
|||
if (this.isValidParameter) { |
|||
let value = {}; |
|||
if (data[0].data[0][1] !== '') { |
|||
try { |
|||
value = JSON.parse(data[0].data[0][1]); |
|||
} catch (e) { |
|||
value = data[0].data[0][1]; |
|||
} |
|||
} |
|||
this.originalValue = value; |
|||
if (!this.isFocused) { |
|||
this.attributeUpdateFormGroup.get('currentValue').patchValue(this.originalValue); |
|||
this.ctx.detectChanges(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
public onDataUpdated() { |
|||
this.updateWidgetData(this.subscription.data); |
|||
} |
|||
|
|||
public save() { |
|||
this.isFocused = false; |
|||
|
|||
const attributeToSave: AttributeData = { |
|||
key: this.datasource.dataKeys[0].name, |
|||
value: this.attributeUpdateFormGroup.get('currentValue').value |
|||
}; |
|||
|
|||
const entityId: EntityId = { |
|||
entityType: this.datasource.entityType, |
|||
id: this.datasource.entityId |
|||
}; |
|||
|
|||
let saveAttributeObservable: Observable<any>; |
|||
if (this.settings.widgetMode === JsonInputWidgetMode.ATTRIBUTE) { |
|||
saveAttributeObservable = this.attributeService.saveEntityAttributes( |
|||
entityId, |
|||
this.settings.attributeScope, |
|||
[ attributeToSave ], |
|||
{} |
|||
); |
|||
} else { |
|||
saveAttributeObservable = this.attributeService.saveEntityTimeseries( |
|||
entityId, |
|||
LatestTelemetry.LATEST_TELEMETRY, |
|||
[ attributeToSave ], |
|||
{} |
|||
); |
|||
} |
|||
saveAttributeObservable.subscribe( |
|||
() => { |
|||
this.attributeUpdateFormGroup.markAsPristine(); |
|||
this.ctx.detectChanges(); |
|||
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); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
public discard() { |
|||
this.attributeUpdateFormGroup.reset({currentValue: this.originalValue}, {emitEvent: false}); |
|||
this.attributeUpdateFormGroup.markAsPristine(); |
|||
this.isFocused = false; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue