Igor Kulikov
4 years ago
committed by
GitHub
GitHub
17 changed files with 526 additions and 14 deletions
@ -0,0 +1,55 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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-expansion-panel [formGroup] = "dynamicValue" class="device-profile-alarm" style = "margin-bottom: 26px;" fxFlex> |
||||
|
<mat-expansion-panel-header> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<mat-panel-title> |
||||
|
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> |
||||
|
{{'filter.dynamic-value' | translate}} |
||||
|
</div> |
||||
|
</mat-panel-title> |
||||
|
<span fxFlex></span> |
||||
|
</div> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div fxFlex fxLayout="column"> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<div fxFlex="40" fxLayout="column"> |
||||
|
<mat-form-field floatLabel="always" hideRequiredMarker class="mat-block"> |
||||
|
<mat-label></mat-label> |
||||
|
<mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}"> |
||||
|
<mat-option [value]="null"> |
||||
|
{{'filter.no-dynamic-value' | translate}} |
||||
|
</mat-option> |
||||
|
<mat-option *ngFor="let sourceType of dynamicValueSourceTypes" [value]="sourceType"> |
||||
|
{{dynamicValueSourceTypeTranslations.get(sourceType) | translate}} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div fxFlex fxLayout="column"> |
||||
|
<mat-form-field floatLabel="always" hideRequiredMarker class="mat-block source-attribute"> |
||||
|
<mat-label></mat-label> |
||||
|
<input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div [tb-help-popup]="helpId"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
@ -0,0 +1,99 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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, |
||||
|
FormBuilder, |
||||
|
FormGroup, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
} from '@angular/forms'; |
||||
|
import { |
||||
|
DynamicValueSourceType, |
||||
|
dynamicValueSourceTypeTranslationMap, |
||||
|
getDynamicSourcesForAllowUser |
||||
|
} from '@shared/models/query/query.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarm-dynamic-value', |
||||
|
templateUrl: './alarm-dynamic-value.component.html', |
||||
|
providers: [{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => AlarmDynamicValue), |
||||
|
multi: true |
||||
|
}] |
||||
|
}) |
||||
|
|
||||
|
export class AlarmDynamicValue implements ControlValueAccessor, OnInit{ |
||||
|
public dynamicValue: FormGroup; |
||||
|
public dynamicValueSourceTypes: DynamicValueSourceType[] = getDynamicSourcesForAllowUser(false); |
||||
|
public dynamicValueSourceTypeTranslations = dynamicValueSourceTypeTranslationMap; |
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
@Input() |
||||
|
helpId: string; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
constructor(private fb: FormBuilder) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.dynamicValue = this.fb.group({ |
||||
|
sourceType: [null, []], |
||||
|
sourceAttribute: [null] |
||||
|
}) |
||||
|
|
||||
|
this.dynamicValue.get('sourceType').valueChanges.subscribe( |
||||
|
(sourceType) => { |
||||
|
if (!sourceType) { |
||||
|
this.dynamicValue.get('sourceAttribute').patchValue(null, {emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
this.dynamicValue.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
writeValue(dynamicValue: {sourceType: string, sourceAttribute: string}): void { |
||||
|
if(dynamicValue) { |
||||
|
this.dynamicValue.patchValue(dynamicValue, {emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.dynamicValue.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.dynamicValue.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
this.propagateChange(this.dynamicValue.value); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,31 @@ |
|||||
|
#### Specific schedule format |
||||
|
|
||||
|
An attribute with a dynamic value for a specific schedule format must have JSON in the following format: |
||||
|
|
||||
|
```javascript |
||||
|
{ |
||||
|
"daysOfWeek": [ |
||||
|
2, |
||||
|
4 |
||||
|
], |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0, |
||||
|
"timezone": "Europe/Kiev" |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
<ul> |
||||
|
<li> |
||||
|
<b>timezone:</b> this value is used to designate the timezone you are using. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>daysOfWeek:</b> this value is used to designate the days in numerical representation (Monday - 1, Tuesday 2, etc.) on which the schedule will be active. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>startsOn:</b> this value is used to designate the timestamp in milliseconds, from which the schedule will be active for the designated days. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>endsOn:</b> this value is used to designate the timestamp in milliseconds until which the schedule will be active for the specified days. |
||||
|
</li> |
||||
|
</ul> |
||||
|
When <b>startsOn</b> and <b>endsOn</b> equals 0 it's means that the schedule will be active the whole day. |
||||
@ -0,0 +1,79 @@ |
|||||
|
#### Custom schedule format |
||||
|
|
||||
|
An attribute with a dynamic value for a custom schedule format must have JSON in the following format: |
||||
|
|
||||
|
```javascript |
||||
|
{ |
||||
|
"timezone": "Europe/Kiev", |
||||
|
"items": [ |
||||
|
{ |
||||
|
"dayOfWeek": 1, |
||||
|
"enabled": true, |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0 |
||||
|
}, |
||||
|
{ |
||||
|
"dayOfWeek": 2, |
||||
|
"enabled": true, |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0 |
||||
|
}, |
||||
|
{ |
||||
|
"dayOfWeek": 3, |
||||
|
"enabled": true, |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0 |
||||
|
}, |
||||
|
{ |
||||
|
"dayOfWeek": 4, |
||||
|
"enabled": true, |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0 |
||||
|
}, |
||||
|
{ |
||||
|
"dayOfWeek": 5, |
||||
|
"enabled": true, |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0 |
||||
|
}, |
||||
|
{ |
||||
|
"dayOfWeek": 6, |
||||
|
"enabled": true, |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0 |
||||
|
}, |
||||
|
{ |
||||
|
"dayOfWeek": 7, |
||||
|
"enabled": true, |
||||
|
"endsOn": 0, |
||||
|
"startsOn": 0 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
<ul> |
||||
|
<li> |
||||
|
<b>timezone:</b> this value is used to designate the timezone you are using. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>items:</b> the array of values representing the days on which the schedule will be active. |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
One array item contains such fields: |
||||
|
<ul> |
||||
|
<li> |
||||
|
<b>dayOfWeek:</b> this value is used to designate the specified day in numerical representation (Monday - 1, Tuesday 2, etc.) on which the schedule will be active. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>enabled:</b> this <code>boolean</code> value, used to designate that the specified day in the schedule will be enabled. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>startsOn:</b> this value is used to designate the timestamp in milliseconds, from which the schedule will be active for the designated day. |
||||
|
</li> |
||||
|
<li> |
||||
|
<b>endsOn:</b> this value is used to designate the timestamp in milliseconds until which the schedule will be active for the specified day. |
||||
|
</li> |
||||
|
</ul> |
||||
|
When <b>startsOn</b> and <b>endsOn</b> equals 0 it's means that the schedule will be active the whole day. |
||||
Loading…
Reference in new issue