Igor Kulikov
3 years ago
26 changed files with 295 additions and 55 deletions
@ -0,0 +1,42 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 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 [formGroup]="timewindowConfig" class="tb-widget-config-panel"> |
||||
|
<div fxLayout="row" fxLayoutAlign="space-between center"> |
||||
|
<div class="tb-widget-config-panel-title" translate>timewindow.timewindow</div> |
||||
|
<tb-toggle-header (valueChange)="timewindowConfig.get('useDashboardTimewindow').patchValue($event)" ignoreMdLgSize="true" |
||||
|
[options]="[ |
||||
|
{ name: translate.instant('widget-config.use-dashboard-timewindow'), value: true}, |
||||
|
{ name: translate.instant('widget-config.use-widget-timewindow'), value: false} |
||||
|
]" |
||||
|
[value]="timewindowConfig.get('useDashboardTimewindow').value" name="useDashboardTimewindow" useSelectOnMdLg="false"> |
||||
|
</tb-toggle-header> |
||||
|
</div> |
||||
|
<div class="tb-widget-config-row"> |
||||
|
<tb-timewindow asButton="true" |
||||
|
strokedButton |
||||
|
isEdit="true" |
||||
|
alwaysDisplayTypePrefix |
||||
|
[historyOnly]="onlyHistoryTimewindow" |
||||
|
quickIntervalOnly="{{ widgetType === widgetTypes.latest }}" |
||||
|
aggregation="{{ widgetType === widgetTypes.timeseries }}" |
||||
|
formControlName="timewindow"></tb-timewindow> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="displayTimewindow"> |
||||
|
{{ 'widget-config.display-timewindow' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,115 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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 } from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; |
||||
|
import { widgetType } from '@shared/models/widget.models'; |
||||
|
import { Timewindow } from '@shared/models/time/time.models'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { coerceBoolean } from '@shared/decorators/coercion'; |
||||
|
|
||||
|
export interface TimewindowConfigData { |
||||
|
useDashboardTimewindow: boolean; |
||||
|
displayTimewindow: boolean; |
||||
|
timewindow: Timewindow; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-timewindow-config-panel', |
||||
|
templateUrl: './timewindow-config-panel.component.html', |
||||
|
styleUrls: ['./widget-config.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => TimewindowConfigPanelComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class TimewindowConfigPanelComponent implements ControlValueAccessor, OnInit { |
||||
|
|
||||
|
widgetTypes = widgetType; |
||||
|
|
||||
|
public get widgetType(): widgetType { |
||||
|
return this.widgetConfigComponent.widgetType; |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
@coerceBoolean() |
||||
|
onlyHistoryTimewindow = false; |
||||
|
|
||||
|
|
||||
|
timewindowConfig: UntypedFormGroup; |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
public translate: TranslateService, |
||||
|
private widgetConfigComponent: WidgetConfigComponent) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.timewindowConfig = this.fb.group({ |
||||
|
useDashboardTimewindow: [null, []], |
||||
|
displayTimewindow: [null, []], |
||||
|
timewindow: [null, []] |
||||
|
}); |
||||
|
this.timewindowConfig.valueChanges.subscribe( |
||||
|
(val) => this.propagateChange(val) |
||||
|
); |
||||
|
this.timewindowConfig.get('useDashboardTimewindow').valueChanges.subscribe(() => { |
||||
|
this.updateTimewindowConfigEnabledState(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
writeValue(data?: TimewindowConfigData): void { |
||||
|
this.timewindowConfig.patchValue(data || {}, {emitEvent: false}); |
||||
|
this.updateTimewindowConfigEnabledState(); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.timewindowConfig.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.timewindowConfig.enable({emitEvent: false}); |
||||
|
this.updateTimewindowConfigEnabledState(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateTimewindowConfigEnabledState() { |
||||
|
const useDashboardTimewindow: boolean = this.timewindowConfig.get('useDashboardTimewindow').value; |
||||
|
if (useDashboardTimewindow) { |
||||
|
this.timewindowConfig.get('displayTimewindow').disable({emitEvent: false}); |
||||
|
this.timewindowConfig.get('timewindow').disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.timewindowConfig.get('displayTimewindow').enable({emitEvent: false}); |
||||
|
this.timewindowConfig.get('timewindow').enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2023 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-form-field appearance="outline" class="center" subscriptSizing="dynamic"> |
||||
|
<input matInput [formControl]="unitsFormControl" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
@ -0,0 +1,67 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 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 } from '@angular/core'; |
||||
|
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, UntypedFormBuilder } from '@angular/forms'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-widget-units', |
||||
|
templateUrl: './widget-units.component.html', |
||||
|
styleUrls: ['./widget-config.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => WidgetUnitsComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class WidgetUnitsComponent implements ControlValueAccessor, OnInit { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
unitsFormControl: FormControl; |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.unitsFormControl = this.fb.control('', []); |
||||
|
} |
||||
|
|
||||
|
writeValue(units?: string): void { |
||||
|
this.unitsFormControl.patchValue(units, {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.unitsFormControl.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.unitsFormControl.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue