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