Igor Kulikov
7 years ago
20 changed files with 1390 additions and 8 deletions
@ -0,0 +1,74 @@ |
|||||
|
///
|
||||
|
/// 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 { Injectable } from '@angular/core'; |
||||
|
import { defaultHttpOptions } from './http-utils'; |
||||
|
import { forkJoin, Observable, of } from 'rxjs/index'; |
||||
|
import { HttpClient } from '@angular/common/http'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
export class AttributeService { |
||||
|
|
||||
|
constructor( |
||||
|
private http: HttpClient |
||||
|
) { } |
||||
|
|
||||
|
public getEntityAttributes(entityId: EntityId, attributeScope: AttributeScope, |
||||
|
ignoreErrors: boolean = false, ignoreLoading: boolean = false): Observable<Array<AttributeData>> { |
||||
|
return this.http.get<Array<AttributeData>>(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/values/attributes/` + |
||||
|
`${attributeScope}`, |
||||
|
defaultHttpOptions(ignoreLoading, ignoreErrors)); |
||||
|
} |
||||
|
|
||||
|
public deleteEntityAttributes(entityId: EntityId, attributeScope: AttributeScope, attributes: Array<AttributeData>, |
||||
|
ignoreErrors: boolean = false, ignoreLoading: boolean = false): Observable<any> { |
||||
|
const keys = attributes.map(attribute => attribute.key).join(','); |
||||
|
return this.http.delete(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/${attributeScope}` + |
||||
|
`?keys=${keys}`, |
||||
|
defaultHttpOptions(ignoreLoading, ignoreErrors)); |
||||
|
} |
||||
|
|
||||
|
public saveEntityAttributes(entityId: EntityId, attributeScope: AttributeScope, attributes: Array<AttributeData>, |
||||
|
ignoreErrors: boolean = false, ignoreLoading: boolean = false): Observable<any> { |
||||
|
const attributesData: {[key: string]: any} = {}; |
||||
|
const deleteAttributes: AttributeData[] = []; |
||||
|
attributes.forEach((attribute) => { |
||||
|
if (attribute.value !== null) { |
||||
|
attributesData[attribute.key] = attribute.value; |
||||
|
} else { |
||||
|
deleteAttributes.push(attribute); |
||||
|
} |
||||
|
}); |
||||
|
let deleteEntityAttributesObservable: Observable<any>; |
||||
|
if (deleteAttributes.length) { |
||||
|
deleteEntityAttributesObservable = this.deleteEntityAttributes(entityId, attributeScope, deleteAttributes); |
||||
|
} else { |
||||
|
deleteEntityAttributesObservable = of(null); |
||||
|
} |
||||
|
let saveEntityAttributesObservable: Observable<any>; |
||||
|
if (Object.keys(attributesData).length) { |
||||
|
saveEntityAttributesObservable = this.http.post(`/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/${attributeScope}`, |
||||
|
attributesData, defaultHttpOptions(ignoreLoading, ignoreErrors)); |
||||
|
} else { |
||||
|
saveEntityAttributesObservable = of(null); |
||||
|
} |
||||
|
return forkJoin(saveEntityAttributesObservable, deleteEntityAttributesObservable); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 #attributeForm="ngForm" [formGroup]="attributeFormGroup" (ngSubmit)="add()" style="min-width: 400px;"> |
||||
|
<mat-toolbar fxLayout="row" color="primary"> |
||||
|
<h2>{{ 'attribute.add' | translate }}</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 style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
||||
|
<div mat-dialog-content> |
||||
|
<fieldset [disabled]="isLoading$ | async"> |
||||
|
<mat-form-field class="mat-block"> |
||||
|
<mat-label translate>attribute.key</mat-label> |
||||
|
<input matInput formControlName="key" required> |
||||
|
<mat-error *ngIf="attributeFormGroup.get('key').hasError('required')"> |
||||
|
{{ 'attribute.key-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<tb-value-input |
||||
|
formControlName="value" |
||||
|
requiredText="attribute.value-required"> |
||||
|
</tb-value-input> |
||||
|
</fieldset> |
||||
|
</div> |
||||
|
<div mat-dialog-actions fxLayout="row"> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-button mat-raised-button color="primary" |
||||
|
type="submit" |
||||
|
[disabled]="(isLoading$ | async) || attributeFormGroup.invalid || !attributeFormGroup.dirty"> |
||||
|
{{ '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,96 @@ |
|||||
|
///
|
||||
|
/// 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, ViewChild } 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 { |
||||
|
CONTAINS_TYPE, |
||||
|
EntityRelation, |
||||
|
EntitySearchDirection, |
||||
|
RelationTypeGroup |
||||
|
} from '@shared/models/relation.models'; |
||||
|
import { EntityRelationService } from '@core/http/entity-relation.service'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { forkJoin, Observable } from 'rxjs'; |
||||
|
import { JsonObjectEditComponent } from '@app/shared/components/json-object-edit.component'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { DialogComponent } from '@app/shared/components/dialog.component'; |
||||
|
import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { AttributeService } from '@core/http/attribute.service'; |
||||
|
|
||||
|
export interface AddAttributeDialogData { |
||||
|
entityId: EntityId; |
||||
|
attributeScope: AttributeScope; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-add-attribute-dialog', |
||||
|
templateUrl: './add-attribute-dialog.component.html', |
||||
|
providers: [{provide: ErrorStateMatcher, useExisting: AddAttributeDialogComponent}], |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class AddAttributeDialogComponent extends DialogComponent<AddAttributeDialogComponent, boolean> |
||||
|
implements OnInit, ErrorStateMatcher { |
||||
|
|
||||
|
attributeFormGroup: FormGroup; |
||||
|
|
||||
|
submitted = false; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: AddAttributeDialogData, |
||||
|
private attributeService: AttributeService, |
||||
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
||||
|
public dialogRef: MatDialogRef<AddAttributeDialogComponent, boolean>, |
||||
|
public fb: FormBuilder) { |
||||
|
super(store, router, dialogRef); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.attributeFormGroup = this.fb.group({ |
||||
|
key: ['', [Validators.required]], |
||||
|
value: [null, [Validators.required]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
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(false); |
||||
|
} |
||||
|
|
||||
|
add(): void { |
||||
|
this.submitted = true; |
||||
|
const attribute: AttributeData = { |
||||
|
lastUpdateTs: null, |
||||
|
key: this.attributeFormGroup.get('key').value, |
||||
|
value: this.attributeFormGroup.get('value').value |
||||
|
}; |
||||
|
this.attributeService.saveEntityAttributes(this.data.entityId, |
||||
|
this.data.attributeScope, [attribute]).subscribe( |
||||
|
() => { |
||||
|
this.dialogRef.close(true); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,192 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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="mat-padding tb-entity-table tb-absolute-fill"> |
||||
|
<div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content"> |
||||
|
<mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && !textSearchMode && dataSource.selection.isEmpty()"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<span class="tb-entity-table-title">{{telemetryTypeTranslationsMap.get(attributeScope) | translate}}</span> |
||||
|
<mat-form-field class="mat-block tb-attribute-scope" style="width: 200px;" *ngIf="!disableAttributeScopeSelection"> |
||||
|
<mat-label translate>attribute.attributes-scope</mat-label> |
||||
|
<mat-select [disabled]="(isLoading$ | async) || attributeScopeSelectionReadonly" |
||||
|
matInput [ngModel]="attributeScope" |
||||
|
(ngModelChange)="attributeScopeChanged($event)"> |
||||
|
<mat-option *ngFor="let scope of attributeScopes" [value]="scope"> |
||||
|
{{ telemetryTypeTranslationsMap.get(scope) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<span fxFlex></span> |
||||
|
<button *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)" |
||||
|
mat-button mat-icon-button |
||||
|
[disabled]="isLoading$ | async" |
||||
|
(click)="addAttribute($event)" |
||||
|
matTooltip="{{ 'action.add' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>add</mat-icon> |
||||
|
</button> |
||||
|
<button *ngIf="!isClientSideTelemetryTypeMap.get(attributeScope)" |
||||
|
mat-button mat-icon-button |
||||
|
[disabled]="isLoading$ | async" |
||||
|
(click)="reloadAttributes()" |
||||
|
matTooltip="{{ 'action.refresh' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>refresh</mat-icon> |
||||
|
</button> |
||||
|
<button mat-button mat-icon-button |
||||
|
[disabled]="isLoading$ | async" |
||||
|
(click)="enterFilterMode()" |
||||
|
matTooltip="{{ 'action.search' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>search</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-toolbar> |
||||
|
<mat-toolbar class="mat-table-toolbar" [fxShow]="mode === 'default' && textSearchMode && dataSource.selection.isEmpty()"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<button mat-button mat-icon-button |
||||
|
matTooltip="{{ 'action.search' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>search</mat-icon> |
||||
|
</button> |
||||
|
<mat-form-field fxFlex> |
||||
|
<mat-label> </mat-label> |
||||
|
<input #searchInput matInput |
||||
|
[(ngModel)]="pageLink.textSearch" |
||||
|
placeholder="{{ 'common.enter-search' | translate }}"/> |
||||
|
</mat-form-field> |
||||
|
<button mat-button mat-icon-button (click)="exitFilterMode()" |
||||
|
matTooltip="{{ 'action.close' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-toolbar> |
||||
|
<mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'default' && !dataSource.selection.isEmpty()"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<span> |
||||
|
{{ translate.get( |
||||
|
attributeScope === latestTelemetryTypes.LATEST_TELEMETRY |
||||
|
? 'attribute.selected-telemetry' : 'attribute.selected-attributes', |
||||
|
{count: dataSource.selection.selected.length}) | async }} |
||||
|
</span> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-button mat-icon-button [disabled]="isLoading$ | async" |
||||
|
matTooltip="{{ 'action.delete' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="deleteAttributes($event)"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
<button mat-button mat-raised-button |
||||
|
color="accent" |
||||
|
[disabled]="isLoading$ | async" |
||||
|
matTooltip="{{ 'attribute.show-on-widget' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="enterWidgetMode()"> |
||||
|
<mat-icon>now_widgets</mat-icon> |
||||
|
<span translate>attribute.show-on-widget</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-toolbar> |
||||
|
<mat-toolbar class="mat-table-toolbar" color="primary" [fxShow]="mode === 'widget'"> |
||||
|
<div class="mat-toolbar-tools"> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start"> |
||||
|
<span class="tb-details-subtitle">{{ 'widgets-bundle.current' | translate }}</span> |
||||
|
<span fxFlex>TODO:</span> |
||||
|
</div> |
||||
|
<!--button mat-button mat-raised-button |
||||
|
color="accent" |
||||
|
[disabled]="isLoading$ | async" |
||||
|
matTooltip="{{ 'attribute.show-on-widget' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="enterWidgetMode()"> |
||||
|
<mat-icon>now_widgets</mat-icon> |
||||
|
<span translate>attribute.show-on-widget</span> |
||||
|
</button--> |
||||
|
<button mat-button mat-icon-button |
||||
|
[disabled]="isLoading$ | async" |
||||
|
matTooltip="{{ 'action.close' | translate }}" |
||||
|
matTooltipPosition="above" |
||||
|
(click)="exitWidgetMode()"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-toolbar> |
||||
|
<div fxFlex class="table-container" [fxShow]="mode !== 'widget'"> |
||||
|
<mat-table [dataSource]="dataSource" |
||||
|
matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="(pageLink.sortOrder.direction + '').toLowerCase()" matSortDisableClear> |
||||
|
<ng-container matColumnDef="select" sticky> |
||||
|
<mat-header-cell *matHeaderCellDef> |
||||
|
<mat-checkbox (change)="$event ? dataSource.masterToggle() : null" |
||||
|
[checked]="dataSource.selection.hasValue() && (dataSource.isAllSelected() | async)" |
||||
|
[indeterminate]="dataSource.selection.hasValue() && !(dataSource.isAllSelected() | async)"> |
||||
|
</mat-checkbox> |
||||
|
</mat-header-cell> |
||||
|
<mat-cell *matCellDef="let attribute"> |
||||
|
<mat-checkbox (click)="$event.stopPropagation()" |
||||
|
(change)="$event ? dataSource.selection.toggle(attribute) : null" |
||||
|
[checked]="dataSource.selection.isSelected(attribute)"> |
||||
|
</mat-checkbox> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="lastUpdateTs"> |
||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.last-update-time' | translate }} </mat-header-cell> |
||||
|
<mat-cell *matCellDef="let attribute"> |
||||
|
{{ attribute.lastUpdateTs | date:'yyyy-MM-dd HH:mm:ss' }} |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="key"> |
||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'attribute.key' | translate }} </mat-header-cell> |
||||
|
<mat-cell *matCellDef="let attribute"> |
||||
|
{{ attribute.key }} |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<ng-container matColumnDef="value"> |
||||
|
<mat-header-cell *matHeaderCellDef> {{ 'attribute.value' | translate }} </mat-header-cell> |
||||
|
<mat-cell *matCellDef="let attribute" |
||||
|
class="tb-value-cell" |
||||
|
(click)="editAttribute($event, attribute)"> |
||||
|
<span fxFlex>{{attribute.value}}</span> |
||||
|
<span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)"> |
||||
|
<mat-icon>edit</mat-icon> |
||||
|
</span> |
||||
|
</mat-cell> |
||||
|
</ng-container> |
||||
|
<mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row> |
||||
|
<mat-row [ngClass]="{'mat-row-select': true, |
||||
|
'mat-selected': dataSource.selection.isSelected(attribute)}" |
||||
|
*matRowDef="let attribute; columns: displayedColumns;" (click)="dataSource.selection.toggle(attribute)"></mat-row> |
||||
|
</mat-table> |
||||
|
<span [fxShow]="dataSource.isEmpty() | async" |
||||
|
fxLayoutAlign="center center" |
||||
|
class="no-data-found" translate>{{ |
||||
|
attributeScope === latestTelemetryTypes.LATEST_TELEMETRY |
||||
|
? 'attribute.no-telemetry-text' |
||||
|
: 'attribute.no-attributes-text' |
||||
|
}}</span> |
||||
|
</div> |
||||
|
<mat-divider [fxShow]="mode !== 'widget'"></mat-divider> |
||||
|
<mat-paginator [fxShow]="mode !== 'widget'" |
||||
|
[length]="dataSource.total() | async" |
||||
|
[pageIndex]="pageLink.page" |
||||
|
[pageSize]="pageLink.pageSize" |
||||
|
[pageSizeOptions]="[10, 20, 30]"></mat-paginator> |
||||
|
<div fxFlex [fxShow]="mode === 'widget'"> |
||||
|
Coming soon! |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,63 @@ |
|||||
|
/** |
||||
|
* 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 { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.tb-entity-table { |
||||
|
.tb-entity-table-content { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #fff; |
||||
|
|
||||
|
.tb-entity-table-title { |
||||
|
padding-right: 20px; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.table-container { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:host ::ng-deep { |
||||
|
.mat-sort-header-sorted .mat-sort-header-arrow { |
||||
|
opacity: 1 !important; |
||||
|
} |
||||
|
mat-form-field.tb-attribute-scope { |
||||
|
font-size: 16px; |
||||
|
|
||||
|
.mat-form-field-wrapper { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.mat-form-field-underline { |
||||
|
bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
mat-cell.tb-value-cell { |
||||
|
cursor: pointer; |
||||
|
mat-icon { |
||||
|
height: 16px; |
||||
|
width: 16px; |
||||
|
font-size: 16px; |
||||
|
color: #757575 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,341 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
AfterViewInit, |
||||
|
ChangeDetectionStrategy, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
Input, |
||||
|
OnInit, |
||||
|
ViewChild, |
||||
|
ViewContainerRef |
||||
|
} from '@angular/core'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { MatPaginator } from '@angular/material/paginator'; |
||||
|
import { MatSort } from '@angular/material/sort'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { DialogService } from '@core/services/dialog.service'; |
||||
|
import { Direction, SortOrder } from '@shared/models/page/sort-order'; |
||||
|
import { fromEvent, merge } from 'rxjs'; |
||||
|
import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { |
||||
|
AttributeData, |
||||
|
AttributeScope, |
||||
|
isClientSideTelemetryType, LatestTelemetry, |
||||
|
TelemetryType, |
||||
|
telemetryTypeTranslations |
||||
|
} from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { AttributeDatasource } from '@home/models/datasource/attribute-datasource'; |
||||
|
import { AttributeService } from '@app/core/http/attribute.service'; |
||||
|
import { EntityType } from '@shared/models/entity-type.models'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { RelationDialogComponent, RelationDialogData } from '@home/components/relation/relation-dialog.component'; |
||||
|
import { |
||||
|
AddAttributeDialogComponent, |
||||
|
AddAttributeDialogData |
||||
|
} from '@home/components/attribute/add-attribute-dialog.component'; |
||||
|
import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; |
||||
|
import { TIMEWINDOW_PANEL_DATA, TimewindowPanelComponent } from '@shared/components/time/timewindow-panel.component'; |
||||
|
import { |
||||
|
EDIT_ATTRIBUTE_VALUE_PANEL_DATA, |
||||
|
EditAttributeValuePanelComponent, |
||||
|
EditAttributeValuePanelData |
||||
|
} from './edit-attribute-value-panel.component'; |
||||
|
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; |
||||
|
|
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-attribute-table', |
||||
|
templateUrl: './attribute-table.component.html', |
||||
|
styleUrls: ['./attribute-table.component.scss'], |
||||
|
changeDetection: ChangeDetectionStrategy.OnPush |
||||
|
}) |
||||
|
export class AttributeTableComponent extends PageComponent implements AfterViewInit, OnInit { |
||||
|
|
||||
|
telemetryTypeTranslationsMap = telemetryTypeTranslations; |
||||
|
isClientSideTelemetryTypeMap = isClientSideTelemetryType; |
||||
|
|
||||
|
latestTelemetryTypes = LatestTelemetry; |
||||
|
|
||||
|
mode: 'default' | 'widget' = 'default'; |
||||
|
|
||||
|
attributeScopes: Array<string> = []; |
||||
|
attributeScope: TelemetryType; |
||||
|
|
||||
|
displayedColumns = ['select', 'lastUpdateTs', 'key', 'value']; |
||||
|
pageLink: PageLink; |
||||
|
textSearchMode = false; |
||||
|
dataSource: AttributeDatasource; |
||||
|
|
||||
|
activeValue = false; |
||||
|
dirtyValue = false; |
||||
|
entityIdValue: EntityId; |
||||
|
|
||||
|
attributeScopeSelectionReadonly = false; |
||||
|
|
||||
|
viewsInited = false; |
||||
|
|
||||
|
private disableAttributeScopeSelectionValue: boolean; |
||||
|
get disableAttributeScopeSelection(): boolean { |
||||
|
return this.disableAttributeScopeSelectionValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set disableAttributeScopeSelection(value: boolean) { |
||||
|
this.disableAttributeScopeSelectionValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
defaultAttributeScope: TelemetryType; |
||||
|
|
||||
|
@Input() |
||||
|
set active(active: boolean) { |
||||
|
if (this.activeValue !== active) { |
||||
|
this.activeValue = active; |
||||
|
if (this.activeValue && this.dirtyValue) { |
||||
|
this.dirtyValue = false; |
||||
|
if (this.viewsInited) { |
||||
|
this.updateData(true); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
set entityId(entityId: EntityId) { |
||||
|
if (this.entityIdValue !== entityId) { |
||||
|
this.entityIdValue = entityId; |
||||
|
this.resetSortAndFilter(this.activeValue); |
||||
|
if (!this.activeValue) { |
||||
|
this.dirtyValue = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@ViewChild('searchInput', {static: false}) searchInputField: ElementRef; |
||||
|
|
||||
|
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator; |
||||
|
@ViewChild(MatSort, {static: false}) sort: MatSort; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private attributeService: AttributeService, |
||||
|
public translate: TranslateService, |
||||
|
public dialog: MatDialog, |
||||
|
private overlay: Overlay, |
||||
|
private viewContainerRef: ViewContainerRef, |
||||
|
private dialogService: DialogService) { |
||||
|
super(store); |
||||
|
this.dirtyValue = !this.activeValue; |
||||
|
const sortOrder: SortOrder = { property: 'key', direction: Direction.ASC }; |
||||
|
this.pageLink = new PageLink(10, 0, null, sortOrder); |
||||
|
this.dataSource = new AttributeDatasource(this.attributeService, this.translate); |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
} |
||||
|
|
||||
|
attributeScopeChanged(attributeScope: TelemetryType) { |
||||
|
this.attributeScope = attributeScope; |
||||
|
this.mode = 'default'; |
||||
|
this.updateData(true); |
||||
|
} |
||||
|
|
||||
|
ngAfterViewInit() { |
||||
|
|
||||
|
fromEvent(this.searchInputField.nativeElement, 'keyup') |
||||
|
.pipe( |
||||
|
debounceTime(150), |
||||
|
distinctUntilChanged(), |
||||
|
tap(() => { |
||||
|
this.paginator.pageIndex = 0; |
||||
|
this.updateData(); |
||||
|
}) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
|
||||
|
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); |
||||
|
|
||||
|
merge(this.sort.sortChange, this.paginator.page) |
||||
|
.pipe( |
||||
|
tap(() => this.updateData()) |
||||
|
) |
||||
|
.subscribe(); |
||||
|
|
||||
|
this.viewsInited = true; |
||||
|
if (this.activeValue && this.entityIdValue) { |
||||
|
this.updateData(true); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
updateData(reload: boolean = false) { |
||||
|
this.pageLink.page = this.paginator.pageIndex; |
||||
|
this.pageLink.pageSize = this.paginator.pageSize; |
||||
|
this.pageLink.sortOrder.property = this.sort.active; |
||||
|
this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()]; |
||||
|
this.dataSource.loadAttributes(this.entityIdValue, this.attributeScope, this.pageLink, reload); |
||||
|
} |
||||
|
|
||||
|
enterFilterMode() { |
||||
|
this.textSearchMode = true; |
||||
|
this.pageLink.textSearch = ''; |
||||
|
setTimeout(() => { |
||||
|
this.searchInputField.nativeElement.focus(); |
||||
|
this.searchInputField.nativeElement.setSelectionRange(0, 0); |
||||
|
}, 10); |
||||
|
} |
||||
|
|
||||
|
exitFilterMode() { |
||||
|
this.textSearchMode = false; |
||||
|
this.pageLink.textSearch = null; |
||||
|
this.paginator.pageIndex = 0; |
||||
|
this.updateData(); |
||||
|
} |
||||
|
|
||||
|
resetSortAndFilter(update: boolean = true) { |
||||
|
const entityType = this.entityIdValue.entityType; |
||||
|
if (entityType === EntityType.DEVICE || entityType === EntityType.ENTITY_VIEW) { |
||||
|
this.attributeScopes = Object.keys(AttributeScope); |
||||
|
this.attributeScopeSelectionReadonly = false; |
||||
|
} else { |
||||
|
this.attributeScopes = [AttributeScope.SERVER_SCOPE]; |
||||
|
this.attributeScopeSelectionReadonly = true; |
||||
|
} |
||||
|
this.mode = 'default'; |
||||
|
this.attributeScope = this.defaultAttributeScope; |
||||
|
this.pageLink.textSearch = null; |
||||
|
if (this.viewsInited) { |
||||
|
this.paginator.pageIndex = 0; |
||||
|
const sortable = this.sort.sortables.get('key'); |
||||
|
this.sort.active = sortable.id; |
||||
|
this.sort.direction = 'asc'; |
||||
|
if (update) { |
||||
|
this.updateData(true); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
reloadAttributes() { |
||||
|
this.updateData(true); |
||||
|
} |
||||
|
|
||||
|
addAttribute($event: Event) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.dialog.open<AddAttributeDialogComponent, AddAttributeDialogData, boolean>(AddAttributeDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
entityId: this.entityIdValue, |
||||
|
attributeScope: this.attributeScope as AttributeScope |
||||
|
} |
||||
|
}).afterClosed().subscribe( |
||||
|
(res) => { |
||||
|
if (res) { |
||||
|
this.reloadAttributes(); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
editAttribute($event: Event, attribute: AttributeData) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
const target = $event.target || $event.srcElement || $event.currentTarget; |
||||
|
const config = new OverlayConfig(); |
||||
|
config.backdropClass = 'cdk-overlay-transparent-backdrop'; |
||||
|
config.hasBackdrop = true; |
||||
|
const connectedPosition: ConnectedPosition = { |
||||
|
originX: 'end', |
||||
|
originY: 'center', |
||||
|
overlayX: 'end', |
||||
|
overlayY: 'center' |
||||
|
}; |
||||
|
config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement) |
||||
|
.withPositions([connectedPosition]); |
||||
|
|
||||
|
const overlayRef = this.overlay.create(config); |
||||
|
overlayRef.backdropClick().subscribe(() => { |
||||
|
overlayRef.dispose(); |
||||
|
}); |
||||
|
const injectionTokens = new WeakMap<any, any>([ |
||||
|
[EDIT_ATTRIBUTE_VALUE_PANEL_DATA, { |
||||
|
attributeValue: attribute.value |
||||
|
} as EditAttributeValuePanelData], |
||||
|
[OverlayRef, overlayRef] |
||||
|
]); |
||||
|
const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); |
||||
|
const componentRef = overlayRef.attach(new ComponentPortal(EditAttributeValuePanelComponent, |
||||
|
this.viewContainerRef, injector)); |
||||
|
componentRef.onDestroy(() => { |
||||
|
if (componentRef.instance.result !== null) { |
||||
|
const attributeValue = componentRef.instance.result; |
||||
|
const updatedAttribute = {...attribute}; |
||||
|
updatedAttribute.value = attributeValue; |
||||
|
this.attributeService.saveEntityAttributes(this.entityIdValue, |
||||
|
this.attributeScope as AttributeScope, [updatedAttribute]).subscribe( |
||||
|
() => { |
||||
|
this.reloadAttributes(); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
deleteAttributes($event: Event) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
if (this.dataSource.selection.selected.length > 0) { |
||||
|
this.dialogService.confirm( |
||||
|
this.translate.instant('attribute.delete-attributes-title', {count: this.dataSource.selection.selected.length}), |
||||
|
this.translate.instant('attribute.delete-attributes-text'), |
||||
|
this.translate.instant('action.no'), |
||||
|
this.translate.instant('action.yes'), |
||||
|
true |
||||
|
).subscribe((result) => { |
||||
|
if (result) { |
||||
|
this.attributeService.deleteEntityAttributes(this.entityIdValue, |
||||
|
this.attributeScope as AttributeScope, this.dataSource.selection.selected).subscribe( |
||||
|
() => { |
||||
|
this.reloadAttributes(); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
enterWidgetMode() { |
||||
|
this.mode = 'widget'; |
||||
|
|
||||
|
// TODO:
|
||||
|
} |
||||
|
|
||||
|
exitWidgetMode() { |
||||
|
this.mode = 'default'; |
||||
|
this.reloadAttributes(); |
||||
|
|
||||
|
// TODO:
|
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 #attributeForm="ngForm" |
||||
|
class="mat-elevation-z1" |
||||
|
[formGroup]="attributeFormGroup" (ngSubmit)="update()" style="width: 400px; padding: 5px;"> |
||||
|
<fieldset [disabled]="isLoading$ | async"> |
||||
|
<tb-value-input |
||||
|
formControlName="value" |
||||
|
requiredText="attribute.value-required"> |
||||
|
</tb-value-input> |
||||
|
</fieldset> |
||||
|
<div fxLayout="row" class="tb-panel-actions"> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-button color="primary" |
||||
|
style="margin-right: 20px;" |
||||
|
type="button" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()" cdkFocusInitial> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-button mat-raised-button color="primary" |
||||
|
type="submit" |
||||
|
[disabled]="(isLoading$ | async) || attributeFormGroup.invalid || !attributeFormGroup.dirty"> |
||||
|
{{ 'action.update' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,19 @@ |
|||||
|
/** |
||||
|
* 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 { |
||||
|
background-color: #f9f9f9; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,88 @@ |
|||||
|
///
|
||||
|
/// 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, InjectionToken, OnInit, SkipSelf, ViewChild } 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 { |
||||
|
CONTAINS_TYPE, |
||||
|
EntityRelation, |
||||
|
EntitySearchDirection, |
||||
|
RelationTypeGroup |
||||
|
} from '@shared/models/relation.models'; |
||||
|
import { EntityRelationService } from '@core/http/entity-relation.service'; |
||||
|
import { EntityId } from '@shared/models/id/entity-id'; |
||||
|
import { forkJoin, Observable } from 'rxjs'; |
||||
|
import { JsonObjectEditComponent } from '@app/shared/components/json-object-edit.component'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { DialogComponent } from '@app/shared/components/dialog.component'; |
||||
|
import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { AttributeService } from '@core/http/attribute.service'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { OverlayRef } from '@angular/cdk/overlay'; |
||||
|
|
||||
|
export const EDIT_ATTRIBUTE_VALUE_PANEL_DATA = new InjectionToken<any>('EditAttributeValuePanelData'); |
||||
|
|
||||
|
export interface EditAttributeValuePanelData { |
||||
|
attributeValue: any; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-edit-attribute-value-panel', |
||||
|
templateUrl: './edit-attribute-value-panel.component.html', |
||||
|
providers: [{provide: ErrorStateMatcher, useExisting: EditAttributeValuePanelComponent}], |
||||
|
styleUrls: ['./edit-attribute-value-panel.component.scss'] |
||||
|
}) |
||||
|
export class EditAttributeValuePanelComponent extends PageComponent implements OnInit, ErrorStateMatcher { |
||||
|
|
||||
|
attributeFormGroup: FormGroup; |
||||
|
|
||||
|
result: any = null; |
||||
|
|
||||
|
submitted = false; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
@Inject(EDIT_ATTRIBUTE_VALUE_PANEL_DATA) public data: EditAttributeValuePanelData, |
||||
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
||||
|
public overlayRef: OverlayRef, |
||||
|
public fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.attributeFormGroup = this.fb.group({ |
||||
|
value: [this.data.attributeValue, [Validators.required]] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
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.overlayRef.dispose(); |
||||
|
} |
||||
|
|
||||
|
update(): void { |
||||
|
this.submitted = true; |
||||
|
this.result = this.attributeFormGroup.get('value').value; |
||||
|
this.overlayRef.dispose(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,135 @@ |
|||||
|
///
|
||||
|
/// 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 { CollectionViewer, DataSource } from '@angular/cdk/typings/collections'; |
||||
|
import { BehaviorSubject, Observable, of, ReplaySubject } from 'rxjs'; |
||||
|
import { emptyPageData, PageData } from '@shared/models/page/page-data'; |
||||
|
import { SelectionModel } from '@angular/cdk/collections'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { catchError, map, publishReplay, refCount, take, tap } from 'rxjs/operators'; |
||||
|
import { EntityId } from '@app/shared/models/id/entity-id'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { |
||||
|
AttributeData, |
||||
|
AttributeScope, |
||||
|
isClientSideTelemetryType, |
||||
|
TelemetryType |
||||
|
} from '@shared/models/telemetry/telemetry.models'; |
||||
|
import { AttributeService } from '@core/http/attribute.service'; |
||||
|
|
||||
|
export class AttributeDatasource implements DataSource<AttributeData> { |
||||
|
|
||||
|
private attributesSubject = new BehaviorSubject<AttributeData[]>([]); |
||||
|
private pageDataSubject = new BehaviorSubject<PageData<AttributeData>>(emptyPageData<AttributeData>()); |
||||
|
|
||||
|
public pageData$ = this.pageDataSubject.asObservable(); |
||||
|
|
||||
|
public selection = new SelectionModel<AttributeData>(true, []); |
||||
|
|
||||
|
private allAttributes: Observable<Array<AttributeData>>; |
||||
|
|
||||
|
constructor(private attributeService: AttributeService, |
||||
|
private translate: TranslateService) {} |
||||
|
|
||||
|
connect(collectionViewer: CollectionViewer): Observable<AttributeData[] | ReadonlyArray<AttributeData>> { |
||||
|
return this.attributesSubject.asObservable(); |
||||
|
} |
||||
|
|
||||
|
disconnect(collectionViewer: CollectionViewer): void { |
||||
|
this.attributesSubject.complete(); |
||||
|
this.pageDataSubject.complete(); |
||||
|
} |
||||
|
|
||||
|
loadAttributes(entityId: EntityId, attributesScope: TelemetryType, |
||||
|
pageLink: PageLink, reload: boolean = false): Observable<PageData<AttributeData>> { |
||||
|
if (reload) { |
||||
|
this.allAttributes = null; |
||||
|
} |
||||
|
const result = new ReplaySubject<PageData<AttributeData>>(); |
||||
|
this.fetchAttributes(entityId, attributesScope, pageLink).pipe( |
||||
|
tap(() => { |
||||
|
this.selection.clear(); |
||||
|
}), |
||||
|
catchError(() => of(emptyPageData<AttributeData>())), |
||||
|
).subscribe( |
||||
|
(pageData) => { |
||||
|
this.attributesSubject.next(pageData.data); |
||||
|
this.pageDataSubject.next(pageData); |
||||
|
result.next(pageData); |
||||
|
} |
||||
|
); |
||||
|
return result; |
||||
|
} |
||||
|
|
||||
|
fetchAttributes(entityId: EntityId, attributesScope: TelemetryType, |
||||
|
pageLink: PageLink): Observable<PageData<AttributeData>> { |
||||
|
return this.getAllAttributes(entityId, attributesScope).pipe( |
||||
|
map((data) => pageLink.filterData(data)) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
getAllAttributes(entityId: EntityId, attributesScope: TelemetryType): Observable<Array<AttributeData>> { |
||||
|
if (!this.allAttributes) { |
||||
|
let attributesObservable: Observable<Array<AttributeData>>; |
||||
|
if (isClientSideTelemetryType.get(attributesScope)) { |
||||
|
attributesObservable = of([]); |
||||
|
// TODO:
|
||||
|
} else { |
||||
|
attributesObservable = this.attributeService.getEntityAttributes(entityId, attributesScope as AttributeScope); |
||||
|
} |
||||
|
this.allAttributes = attributesObservable.pipe( |
||||
|
publishReplay(1), |
||||
|
refCount() |
||||
|
); |
||||
|
} |
||||
|
return this.allAttributes; |
||||
|
} |
||||
|
|
||||
|
isAllSelected(): Observable<boolean> { |
||||
|
const numSelected = this.selection.selected.length; |
||||
|
return this.attributesSubject.pipe( |
||||
|
map((attributes) => numSelected === attributes.length) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
isEmpty(): Observable<boolean> { |
||||
|
return this.attributesSubject.pipe( |
||||
|
map((attributes) => !attributes.length) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
total(): Observable<number> { |
||||
|
return this.pageDataSubject.pipe( |
||||
|
map((pageData) => pageData.totalElements) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
masterToggle() { |
||||
|
this.attributesSubject.pipe( |
||||
|
tap((attributes) => { |
||||
|
const numSelected = this.selection.selected.length; |
||||
|
if (numSelected === attributes.length) { |
||||
|
this.selection.clear(); |
||||
|
} else { |
||||
|
attributes.forEach(row => { |
||||
|
this.selection.select(row); |
||||
|
}); |
||||
|
} |
||||
|
}), |
||||
|
take(1) |
||||
|
).subscribe(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,63 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 #inputForm="ngForm"> |
||||
|
<section fxLayout="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex="40" class="mat-block tb-value-type"> |
||||
|
<mat-label translate>value.type</mat-label> |
||||
|
<mat-select [disabled]="disabled" matInput name="valueType" [(ngModel)]="valueType" (ngModelChange)="onValueTypeChanged()"> |
||||
|
<mat-select-trigger> |
||||
|
<mat-icon svgIcon="{{ valueTypes.get(valueType).icon }}"></mat-icon> |
||||
|
<span>{{ valueTypes.get(valueType).name | translate }}</span> |
||||
|
</mat-select-trigger> |
||||
|
<mat-option *ngFor="let valueType of valueTypeKeys" [value]="valueType"> |
||||
|
<mat-icon svgIcon="{{ valueTypes.get(valueType).icon }}"></mat-icon> |
||||
|
<span>{{ valueTypes.get(valueType).name | translate }}</span> |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field *ngIf="valueType === valueTypeEnum.STRING" fxFlex="60" class="mat-block"> |
||||
|
<mat-label translate>value.string-value</mat-label> |
||||
|
<input [disabled]="disabled" matInput required name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"/> |
||||
|
<mat-error *ngIf="value.hasError('required')"> |
||||
|
{{ (requiredText ? requiredText : 'value.string-value-required') | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field *ngIf="valueType === valueTypeEnum.INTEGER" fxFlex="60" class="mat-block"> |
||||
|
<mat-label translate>value.integer-value</mat-label> |
||||
|
<input [disabled]="disabled" matInput required name="value" type="number" step="1" pattern="^-?[0-9]+$" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"/> |
||||
|
<mat-error *ngIf="value.hasError('required')"> |
||||
|
{{ (requiredText ? requiredText : 'value.integer-value-required') | translate }} |
||||
|
</mat-error> |
||||
|
<mat-error *ngIf="value.hasError('pattern')"> |
||||
|
{{ 'value.invalid-integer-value' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field *ngIf="valueType === valueTypeEnum.DOUBLE" fxFlex="60" class="mat-block"> |
||||
|
<mat-label translate>value.double-value</mat-label> |
||||
|
<input [disabled]="disabled" matInput required name="value" type="number" step="any" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()"/> |
||||
|
<mat-error *ngIf="value.hasError('required')"> |
||||
|
{{ (requiredText ? requiredText : 'value.double-value-required') | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<div fxLayout="column" fxLayoutAlign="center" fxFlex="60" *ngIf="valueType === valueTypeEnum.BOOLEAN"> |
||||
|
<mat-checkbox [disabled]="disabled" name="value" #value="ngModel" [(ngModel)]="modelValue" (ngModelChange)="onValueChanged()" style="margin-bottom: 0px;"> |
||||
|
{{ (modelValue ? 'value.true' : 'value.false') | translate }} |
||||
|
</mat-checkbox> |
||||
|
</div> |
||||
|
</section> |
||||
|
</form> |
||||
@ -0,0 +1,28 @@ |
|||||
|
/** |
||||
|
* 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-form-field.tb-value-type { |
||||
|
.mat-form-field-infix { |
||||
|
padding-bottom: 1px; |
||||
|
} |
||||
|
mat-select-trigger { |
||||
|
mat-icon { |
||||
|
margin-right: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,107 @@ |
|||||
|
///
|
||||
|
/// 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, forwardRef, Input, OnInit, ViewChild } from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms'; |
||||
|
import { ValueType, valueTypesMap } from '@shared/models/constants'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-value-input', |
||||
|
templateUrl: './value-input.component.html', |
||||
|
styleUrls: ['./value-input.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => ValueInputComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class ValueInputComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
@Input() disabled: boolean; |
||||
|
|
||||
|
@Input() requiredText: string; |
||||
|
|
||||
|
@ViewChild('inputForm', {static: true}) inputForm: NgForm; |
||||
|
|
||||
|
modelValue: any; |
||||
|
|
||||
|
valueType: ValueType; |
||||
|
|
||||
|
public valueTypeEnum = ValueType; |
||||
|
|
||||
|
valueTypeKeys = Object.keys(ValueType); |
||||
|
|
||||
|
valueTypes = valueTypesMap; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
constructor() { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
} |
||||
|
|
||||
|
writeValue(value: any): void { |
||||
|
this.modelValue = value; |
||||
|
if (this.modelValue === true || this.modelValue === false) { |
||||
|
this.valueType = ValueType.BOOLEAN; |
||||
|
} else if (typeof this.modelValue === 'number') { |
||||
|
if (this.modelValue.toString().indexOf('.') === -1) { |
||||
|
this.valueType = ValueType.INTEGER; |
||||
|
} else { |
||||
|
this.valueType = ValueType.DOUBLE; |
||||
|
} |
||||
|
} else { |
||||
|
this.valueType = ValueType.STRING; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
updateView() { |
||||
|
if (this.inputForm.valid || this.valueType === ValueType.BOOLEAN) { |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onValueTypeChanged() { |
||||
|
if (this.valueType === ValueType.BOOLEAN) { |
||||
|
this.modelValue = false; |
||||
|
} else { |
||||
|
this.modelValue = null; |
||||
|
} |
||||
|
this.updateView(); |
||||
|
} |
||||
|
|
||||
|
onValueChanged() { |
||||
|
this.updateView(); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue