dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring

Browse Source
This commit is contained in:
rusikv 2023-08-01 17:54:39 +03:00
parent 881861d80d
commit 165b1068bc
5 changed files with 88 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
View File

@ -85,20 +85,12 @@
'attribute.selected-telemetry' : 'attribute.selected-attributes') | translate:{count: dataSource.selection.selected.length} }}
</span>
<span fxFlex></span>
<button [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)"
<button [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope) || attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
class="button-widget-action"
mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ 'action.delete' | translate }}"
matTooltipPosition="above"
(click)="deleteAttributes($event)">
<mat-icon>delete</mat-icon>
</button>
<button [fxShow]="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
class="button-widget-action"
mat-icon-button [disabled]="isLoading$ | async"
matTooltip="{{ 'action.delete' | translate }}"
matTooltipPosition="above"
(click)="deleteTimeseries($event)">
(click)="deleteTelemetry($event)">
<mat-icon>delete</mat-icon>
</button>
<button mat-raised-button color="accent"

16
ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
View File

@ -438,14 +438,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
deleteLatest = false;
}
if (strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE) {
rewriteLatestIfDeleted = componentRef.instance.rewriteLatestIfDeleted;
rewriteLatestIfDeleted = componentRef.instance.getRewriteLatestFormControl().value;
startTs = deleteTimeseries[0].lastUpdateTs;
endTs = startTs + 1;
}
if (strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
startTs = componentRef.instance.startDateTime.getTime();
endTs = componentRef.instance.endDateTime.getTime();
rewriteLatestIfDeleted = componentRef.instance.rewriteLatestIfDeleted;
startTs = componentRef.instance.getStartDateTimeFormControl().value.getTime();
endTs = componentRef.instance.getEndDateTimeFormControl().value.getTime();
rewriteLatestIfDeleted = componentRef.instance.getRewriteLatestFormControl().value;
}
this.attributeService.deleteEntityTimeseries(this.entityIdValue, deleteTimeseries, deleteAllDataForKeys,
startTs, endTs, rewriteLatestIfDeleted, deleteLatest).subscribe(() => this.reloadAttributes());
@ -477,6 +477,14 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
}
}
deleteTelemetry($event: Event) {
if (this.attributeScope === this.latestTelemetryTypes.LATEST_TELEMETRY) {
this.deleteTimeseries($event);
} else {
this.deleteAttributes($event);
}
}
enterWidgetMode() {
this.mode = 'widget';
this.widgetsList = [];

16
ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
View File

@ -16,7 +16,7 @@
-->
<div class="mat-elevation-z1" style="max-width: 488px">
<form class="mat-elevation-z1" [formGroup]="deleteTimeseriesFormGroup" (ngSubmit)="delete()" style="max-width: 488px">
<mat-toolbar>
<h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
<span fxFlex></span>
@ -29,7 +29,7 @@
<div style="padding: 16px; min-height: 188px">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>attribute.delete-timeseries.strategy</mat-label>
<mat-select [(ngModel)]="strategy">
<mat-select formControlName="strategy">
<mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
{{ strategiesTranslationsMap.get(strategy) | translate }}
</mat-option>
@ -41,20 +41,18 @@
<mat-label translate>attribute.delete-timeseries.start-time</mat-label>
<mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input required matInput [(ngModel)]="startDateTime" [matDatetimepicker]="startDateTimePicker"
(ngModelChange)="onStartDateTimeChange($event)">
<input matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
<mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
<mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
<input required matInput [(ngModel)]="endDateTime" [matDatetimepicker]="endDatePicker"
(ngModelChange)="onEndDateTimeChange($event)">
<input matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
</mat-form-field>
</div>
</div>
<div *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
<mat-slide-toggle [(ngModel)]="rewriteLatestIfDeleted">
<mat-slide-toggle formControlName="rewriteLatest">
{{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
</mat-slide-toggle>
</div>
@ -68,9 +66,9 @@
</button>
<button mat-button mat-raised-button color="primary"
type="submit"
(click)="delete()">
[disabled]="isPeriodStrategy() && (!getStartDateTimeFormControl().value || !getEndDateTimeFormControl().value)">
{{ 'action.apply' | translate }}
</button>
</div>
</div>
</form>

2
ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
View File

@ -22,7 +22,7 @@
}
:host ::ng-deep{
div .mat-toolbar {
form .mat-toolbar {
background: none;
}
}

84
ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
View File

@ -14,13 +14,15 @@
/// limitations under the License.
///
import { Component, Inject, InjectionToken, OnInit } from '@angular/core';
import { Component, Inject, InjectionToken, OnDestroy, OnInit } from '@angular/core';
import { OverlayRef } from '@angular/cdk/overlay';
import {
TimeseriesDeleteStrategy,
timeseriesDeleteStrategyTranslations
} from '@shared/models/telemetry/telemetry.models';
import { MINUTE } from '@shared/models/time/time.models';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
export const DELETE_TIMESERIES_PANEL_DATA = new InjectionToken<any>('DeleteTimeseriesPanelData');
@ -33,18 +35,16 @@ export interface DeleteTimeseriesPanelData {
templateUrl: './delete-timeseries-panel.component.html',
styleUrls: ['./delete-timeseries-panel.component.scss']
})
export class DeleteTimeseriesPanelComponent implements OnInit {
export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
strategy: string = TimeseriesDeleteStrategy.DELETE_ALL_DATA;
deleteTimeseriesFormGroup: UntypedFormGroup;
startDateTimeSubscription: Subscription;
endDateTimeSubscription: Subscription;
result: string = null;
startDateTime: Date;
endDateTime: Date;
rewriteLatestIfDeleted: boolean = true;
strategiesTranslationsMap = timeseriesDeleteStrategyTranslations;
multipleDeletionStrategies = [
@ -53,22 +53,40 @@ export class DeleteTimeseriesPanelComponent implements OnInit {
];
constructor(@Inject(DELETE_TIMESERIES_PANEL_DATA) public data: DeleteTimeseriesPanelData,
public overlayRef: OverlayRef) { }
public overlayRef: OverlayRef,
public fb: UntypedFormBuilder) { }
ngOnInit(): void {
let today = new Date();
this.startDateTime = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
this.endDateTime = today;
const today = new Date();
if (this.data.isMultipleDeletion) {
this.strategiesTranslationsMap = new Map(Array.from(this.strategiesTranslationsMap.entries())
.filter(([strategy]) => {
return this.multipleDeletionStrategies.includes(strategy);
}))
}
this.deleteTimeseriesFormGroup = this.fb.group({
strategy: [TimeseriesDeleteStrategy.DELETE_ALL_DATA],
startDateTime: [new Date(today.getFullYear(), today.getMonth() - 1, today.getDate())],
endDateTime: [today],
rewriteLatest: [true]
})
this.startDateTimeSubscription = this.getStartDateTimeFormControl().valueChanges.subscribe(
value => this.onStartDateTimeChange(value)
)
this.endDateTimeSubscription = this.getEndDateTimeFormControl().valueChanges.subscribe(
value => this.onEndDateTimeChange(value)
)
}
ngOnDestroy(): void {
this.startDateTimeSubscription.unsubscribe();
this.startDateTimeSubscription = null;
this.endDateTimeSubscription.unsubscribe();
this.endDateTimeSubscription = null;
}
delete(): void {
this.result = this.strategy;
this.result = this.getStrategyFormControl().value;
this.overlayRef.dispose();
}
@ -77,28 +95,50 @@ export class DeleteTimeseriesPanelComponent implements OnInit {
}
isPeriodStrategy(): boolean {
return this.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
return this.getStrategyFormControl().value === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD;
}
isDeleteLatestStrategy(): boolean {
return this.strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
return this.getStrategyFormControl().value === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
}
getStrategyFormControl(): AbstractControl {
return this.deleteTimeseriesFormGroup.get('strategy');
}
getStartDateTimeFormControl(): AbstractControl {
return this.deleteTimeseriesFormGroup.get('startDateTime');
}
getEndDateTimeFormControl(): AbstractControl {
return this.deleteTimeseriesFormGroup.get('endDateTime');
}
getRewriteLatestFormControl(): AbstractControl {
return this.deleteTimeseriesFormGroup.get('rewriteLatest');
}
onStartDateTimeChange(newStartDateTime: Date) {
const endDateTimeTs = this.endDateTime.getTime();
if (newStartDateTime) {
const endDateTimeTs = this.deleteTimeseriesFormGroup.get('endDateTime').value.getTime();
const startDateTimeControl = this.getStartDateTimeFormControl();
if (newStartDateTime.getTime() >= endDateTimeTs) {
this.startDateTime = new Date(endDateTimeTs - MINUTE);
startDateTimeControl.patchValue(new Date(endDateTimeTs - MINUTE), {onlySelf: true, emitEvent: false});
} else {
this.startDateTime = newStartDateTime;
startDateTimeControl.patchValue(newStartDateTime, {onlySelf: true, emitEvent: false});
}
}
}
onEndDateTimeChange(newEndDateTime: Date) {
const startDateTimeTs = this.startDateTime.getTime();
if (newEndDateTime) {
const startDateTimeTs = this.deleteTimeseriesFormGroup.get('startDateTime').value.getTime();
const endDateTimeControl = this.getEndDateTimeFormControl();
if (newEndDateTime.getTime() <= startDateTimeTs) {
this.endDateTime = new Date(startDateTimeTs + MINUTE);
endDateTimeControl.patchValue(new Date(startDateTimeTs + MINUTE), {onlySelf: true, emitEvent: false});
} else {
this.endDateTime = newEndDateTime;
endDateTimeControl.patchValue(newEndDateTime, {onlySelf: true, emitEvent: false});
}
}
}
}