Igor Kulikov
6 years ago
24 changed files with 1251 additions and 3 deletions
@ -0,0 +1,19 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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 fxLayout="row" [formGroup]="alarmRuleConditionFormGroup"> |
||||
|
</div> |
||||
@ -0,0 +1,112 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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, |
||||
|
FormControl, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { AlarmCondition } from '@shared/models/device.models'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarm-rule-condition', |
||||
|
templateUrl: './alarm-rule-condition.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => AlarmRuleConditionComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => AlarmRuleConditionComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class AlarmRuleConditionComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
private modelValue: AlarmCondition; |
||||
|
|
||||
|
alarmRuleConditionFormGroup: FormGroup; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private dialog: MatDialog, |
||||
|
private fb: FormBuilder) { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.alarmRuleConditionFormGroup = this.fb.group({ |
||||
|
condition: [null, Validators.required], |
||||
|
durationUnit: [null], |
||||
|
durationValue: [null] |
||||
|
}); |
||||
|
this.alarmRuleConditionFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.alarmRuleConditionFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.alarmRuleConditionFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: AlarmCondition): void { |
||||
|
this.modelValue = value; |
||||
|
this.alarmRuleConditionFormGroup.reset(this.modelValue, {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
return (this.alarmRuleConditionFormGroup.valid) ? null : { |
||||
|
alarmRuleCondition: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
if (this.alarmRuleConditionFormGroup.valid) { |
||||
|
const value = this.alarmRuleConditionFormGroup.value; |
||||
|
this.modelValue = {...this.modelValue, ...value}; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,22 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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 fxLayout="row" [formGroup]="alarmRuleFormGroup"> |
||||
|
<tb-alarm-rule-condition |
||||
|
formControlName="condition"> |
||||
|
</tb-alarm-rule-condition> |
||||
|
</div> |
||||
@ -0,0 +1,111 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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, |
||||
|
FormControl, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { AlarmRule } from '@shared/models/device.models'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-alarm-rule', |
||||
|
templateUrl: './alarm-rule.component.html', |
||||
|
styleUrls: [], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => AlarmRuleComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => AlarmRuleComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
private modelValue: AlarmRule; |
||||
|
|
||||
|
alarmRuleFormGroup: FormGroup; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private dialog: MatDialog, |
||||
|
private fb: FormBuilder) { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.alarmRuleFormGroup = this.fb.group({ |
||||
|
condition: [null, Validators.required], |
||||
|
alarmDetails: [null] |
||||
|
}); |
||||
|
this.alarmRuleFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.alarmRuleFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.alarmRuleFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: AlarmRule): void { |
||||
|
this.modelValue = value; |
||||
|
this.alarmRuleFormGroup.reset(this.modelValue, {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
return (this.alarmRuleFormGroup.valid) ? null : { |
||||
|
alarmRule: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
if (this.alarmRuleFormGroup.valid) { |
||||
|
const value = this.alarmRuleFormGroup.value; |
||||
|
this.modelValue = {...this.modelValue, ...value}; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,54 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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 fxFlex fxLayout="column"> |
||||
|
<div *ngFor="let createAlarmRuleControl of createAlarmRulesFormArray().controls; let $index = index; |
||||
|
last as isLast;" fxLayout="row" style="padding-left: 20px;" [formGroup]="createAlarmRuleControl"> |
||||
|
<mat-form-field class="mat-block" floatLabel="always" hideRequiredMarker> |
||||
|
<mat-label translate></mat-label> |
||||
|
<mat-select formControlName="severity" |
||||
|
required |
||||
|
placeholder="{{ 'device-profile.select-alarm-severity' | translate }}"> |
||||
|
<mat-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity"> |
||||
|
{{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
<mat-error *ngIf="createAlarmRuleControl.get('severity').hasError('required')"> |
||||
|
{{ 'device-profile.alarm-severity-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<tb-alarm-rule formControlName="alarmRule"> |
||||
|
</tb-alarm-rule> |
||||
|
<button *ngIf="!disabled && createAlarmRulesFormArray().controls.length > 1" |
||||
|
mat-icon-button color="primary" style="min-width: 40px;" |
||||
|
type="button" |
||||
|
(click)="removeCreateAlarmRule($index)" |
||||
|
matTooltip="{{ 'action.remove' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div *ngIf="!disabled" fxFlex fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<button mat-icon-button color="primary" |
||||
|
type="button" |
||||
|
(click)="addCreateAlarmRule()" |
||||
|
matTooltip="{{ 'device-profile.add-create-alarm-rule' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>add</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,18 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 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 { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,164 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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 { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { AlarmRule } from '@shared/models/device.models'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
import { AlarmSeverity, alarmSeverityTranslations } from '../../../../../shared/models/alarm.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-create-alarm-rules', |
||||
|
templateUrl: './create-alarm-rules.component.html', |
||||
|
styleUrls: ['./create-alarm-rules.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => CreateAlarmRulesComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => CreateAlarmRulesComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class CreateAlarmRulesComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
alarmSeverities = Object.keys(AlarmSeverity); |
||||
|
alarmSeverityEnum = AlarmSeverity; |
||||
|
|
||||
|
alarmSeverityTranslationMap = alarmSeverityTranslations; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
createAlarmRulesFormGroup: FormGroup; |
||||
|
|
||||
|
private valueChangeSubscription: Subscription = null; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private dialog: MatDialog, |
||||
|
private fb: FormBuilder) { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.createAlarmRulesFormGroup = this.fb.group({ |
||||
|
createAlarmRules: this.fb.array([]) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
createAlarmRulesFormArray(): FormArray { |
||||
|
return this.createAlarmRulesFormGroup.get('createAlarmRules') as FormArray; |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.createAlarmRulesFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.createAlarmRulesFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(createAlarmRules: {[severity: string]: AlarmRule}): void { |
||||
|
if (this.valueChangeSubscription) { |
||||
|
this.valueChangeSubscription.unsubscribe(); |
||||
|
} |
||||
|
const createAlarmRulesControls: Array<AbstractControl> = []; |
||||
|
if (createAlarmRules) { |
||||
|
Object.keys(createAlarmRules).forEach((severity) => { |
||||
|
const createAlarmRule = createAlarmRules[severity]; |
||||
|
if (severity === 'empty') { |
||||
|
severity = null; |
||||
|
} |
||||
|
createAlarmRulesControls.push(this.fb.group({ |
||||
|
severity: [severity, Validators.required], |
||||
|
alarmRule: [createAlarmRule, Validators.required] |
||||
|
})); |
||||
|
}); |
||||
|
} |
||||
|
this.createAlarmRulesFormGroup.setControl('createAlarmRules', this.fb.array(createAlarmRulesControls)); |
||||
|
if (this.disabled) { |
||||
|
this.createAlarmRulesFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.createAlarmRulesFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
this.valueChangeSubscription = this.createAlarmRulesFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public removeCreateAlarmRule(index: number) { |
||||
|
(this.createAlarmRulesFormGroup.get('createAlarmRules') as FormArray).removeAt(index); |
||||
|
} |
||||
|
|
||||
|
public addCreateAlarmRule() { |
||||
|
const createAlarmRule: AlarmRule = { |
||||
|
condition: { |
||||
|
condition: [] |
||||
|
} |
||||
|
}; |
||||
|
const createAlarmRulesArray = this.createAlarmRulesFormGroup.get('createAlarmRules') as FormArray; |
||||
|
createAlarmRulesArray.push(this.fb.group({ |
||||
|
severity: [null, Validators.required], |
||||
|
alarmRule: [createAlarmRule, Validators.required] |
||||
|
})); |
||||
|
this.createAlarmRulesFormGroup.updateValueAndValidity(); |
||||
|
} |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
return (this.createAlarmRulesFormGroup.valid && this.createAlarmRulesFormGroup.get('createAlarmRules').value.length) ? null : { |
||||
|
createAlarmRules: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
if (this.createAlarmRulesFormGroup.valid) { |
||||
|
const value: {severity: string, alarmRule: AlarmRule}[] = this.createAlarmRulesFormGroup.get('createAlarmRules').value; |
||||
|
const createAlarmRules: {[severity: string]: AlarmRule} = {}; |
||||
|
value.forEach(v => { |
||||
|
createAlarmRules[v.severity] = v.alarmRule; |
||||
|
}); |
||||
|
this.propagateChange(createAlarmRules); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,65 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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 [formGroup]="alarmFormGroup" (ngSubmit)="save()" style="min-width: 600px;"> |
||||
|
<mat-toolbar fxLayout="row" color="primary"> |
||||
|
<h2>{{ (isReadOnly ? 'device-profile.alarm-rule-details' : (isAdd ? 'device-profile.add-alarm-rule' : 'device-profile.edit-alarm-rule')) | 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) || isReadOnly" fxLayout="column"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>device-profile.alarm-type</mat-label> |
||||
|
<input required matInput formControlName="alarmType"> |
||||
|
<mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')"> |
||||
|
{{ 'device-profile.alarm-type-required' | translate }} |
||||
|
</mat-error> |
||||
|
<mat-hint innerHTML="{{ 'device-profile.alarm-type-pattern-hint' | translate }}"></mat-hint> |
||||
|
</mat-form-field> |
||||
|
<fieldset> |
||||
|
<legend translate>device-profile.create-alarm-rules</legend> |
||||
|
</fieldset> |
||||
|
<fieldset> |
||||
|
<legend translate>device-profile.clear-alarm-rule</legend> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
</div> |
||||
|
<div mat-dialog-actions fxLayout="row"> |
||||
|
<span fxFlex></span> |
||||
|
<button *ngIf="!isReadOnly" mat-button mat-raised-button color="primary" |
||||
|
type="submit" |
||||
|
[disabled]="(isLoading$ | async) || alarmFormGroup.invalid |
||||
|
|| !alarmFormGroup.dirty"> |
||||
|
{{ (isAdd ? 'action.add' : 'action.save') | translate }} |
||||
|
</button> |
||||
|
<button mat-button color="primary" |
||||
|
style="margin-right: 20px;" |
||||
|
type="button" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()" cdkFocusInitial> |
||||
|
{{ (isReadOnly ? 'action.close' : 'action.cancel') | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,99 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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 |
||||
|
} from '@angular/core'; |
||||
|
import { ErrorStateMatcher } from '@angular/material/core'; |
||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { DeviceProfileAlarm } from '@shared/models/device.models'; |
||||
|
|
||||
|
export interface DeviceProfileAlarmDialogData { |
||||
|
alarm: DeviceProfileAlarm; |
||||
|
isAdd: boolean; |
||||
|
isReadOnly: boolean; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-device-profile-alarm-dialog', |
||||
|
templateUrl: './device-profile-alarm-dialog.component.html', |
||||
|
providers: [{provide: ErrorStateMatcher, useExisting: DeviceProfileAlarmDialogComponent}], |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class DeviceProfileAlarmDialogComponent extends |
||||
|
DialogComponent<DeviceProfileAlarmDialogComponent, DeviceProfileAlarm> implements OnInit, ErrorStateMatcher { |
||||
|
|
||||
|
alarmFormGroup: FormGroup; |
||||
|
|
||||
|
isReadOnly = this.data.isReadOnly; |
||||
|
alarm = this.data.alarm; |
||||
|
isAdd = this.data.isAdd; |
||||
|
|
||||
|
submitted = false; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
@Inject(MAT_DIALOG_DATA) public data: DeviceProfileAlarmDialogData, |
||||
|
public dialogRef: MatDialogRef<DeviceProfileAlarmDialogComponent, DeviceProfileAlarm>, |
||||
|
@SkipSelf() private errorStateMatcher: ErrorStateMatcher, |
||||
|
public fb: FormBuilder) { |
||||
|
super(store, router, dialogRef); |
||||
|
this.isAdd = this.data.isAdd; |
||||
|
this.alarm = this.data.alarm; |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.alarmFormGroup = this.fb.group({ |
||||
|
id: [null, Validators.required], |
||||
|
alarmType: [null, Validators.required], |
||||
|
createRules: [null], |
||||
|
clearRule: [null], |
||||
|
propagate: [null], |
||||
|
propagateRelationTypes: [null] |
||||
|
}); |
||||
|
this.alarmFormGroup.reset(this.alarm, {emitEvent: false}); |
||||
|
if (this.isReadOnly) { |
||||
|
this.alarmFormGroup.disable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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(null); |
||||
|
} |
||||
|
|
||||
|
save(): void { |
||||
|
this.submitted = true; |
||||
|
if (this.alarmFormGroup.valid) { |
||||
|
this.alarm = {...this.alarm, ...this.alarmFormGroup.value}; |
||||
|
this.dialogRef.close(this.alarm); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,47 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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. |
||||
|
|
||||
|
--> |
||||
|
<fieldset [formGroup]="alarmFormGroup" class="fields-group tb-device-profile-alarm" fxFlex |
||||
|
style="position: relative;"> |
||||
|
<button *ngIf="!disabled" mat-icon-button color="primary" style="min-width: 40px;" |
||||
|
type="button" |
||||
|
style="position: absolute; top: 0; right: 0;" |
||||
|
(click)="removeAlarm.emit()" |
||||
|
matTooltip="{{ 'action.remove' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>close</mat-icon> |
||||
|
</button> |
||||
|
<legend> |
||||
|
<mat-form-field floatLabel="always" |
||||
|
matTooltip="{{ 'device-profile.alarm-type-pattern-hint' | translate }}"> |
||||
|
<mat-label>{{'device-profile.alarm-type' | translate}}</mat-label> |
||||
|
<input required matInput formControlName="alarmType" placeholder="Enter alarm type"> |
||||
|
<mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')"> |
||||
|
{{ 'device-profile.alarm-type-required' | translate }} |
||||
|
</mat-error> |
||||
|
<!--mat-hint innerHTML="{{ 'device-profile.alarm-type-pattern-hint' | translate }}"></mat-hint--> |
||||
|
</mat-form-field> |
||||
|
</legend> |
||||
|
<div fxFlex fxLayout="column"> |
||||
|
<div translate class="tb-small" style="font-weight: 500;">device-profile.create-alarm-rules</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
<tb-create-alarm-rules formControlName="createRules"> |
||||
|
</tb-create-alarm-rules> |
||||
|
<div translate class="tb-small" style="font-weight: 500;">device-profile.clear-alarm-rule</div> |
||||
|
<mat-divider></mat-divider> |
||||
|
</div> |
||||
|
</fieldset> |
||||
@ -0,0 +1,48 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 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 '../scss/constants'; |
||||
|
|
||||
|
:host { |
||||
|
display: block; |
||||
|
.tb-device-profile-alarm { |
||||
|
&.mat-padding { |
||||
|
padding: 8px; |
||||
|
@media #{$mat-gt-sm} { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
a.mat-icon-button { |
||||
|
&:hover, &:focus { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
.fields-group { |
||||
|
padding: 8px; |
||||
|
margin: 10px 0; |
||||
|
border: 1px groove rgba(0, 0, 0, .25); |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
legend { |
||||
|
padding-left: 8px; |
||||
|
padding-right: 8px; |
||||
|
margin-bottom: -30px; |
||||
|
.mat-form-field { |
||||
|
margin-bottom: 21px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,144 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; |
||||
|
import { |
||||
|
ControlValueAccessor, |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormGroup, NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { DeviceProfileAlarm } from '@shared/models/device.models'; |
||||
|
import { deepClone } from '@core/utils'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { |
||||
|
DeviceProfileAlarmDialogComponent, |
||||
|
DeviceProfileAlarmDialogData |
||||
|
} from './device-profile-alarm-dialog.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-device-profile-alarm', |
||||
|
templateUrl: './device-profile-alarm.component.html', |
||||
|
styleUrls: ['./device-profile-alarm.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => DeviceProfileAlarmComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => DeviceProfileAlarmComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class DeviceProfileAlarmComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Output() |
||||
|
removeAlarm = new EventEmitter(); |
||||
|
|
||||
|
private modelValue: DeviceProfileAlarm; |
||||
|
|
||||
|
alarmFormGroup: FormGroup; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private dialog: MatDialog, |
||||
|
private fb: FormBuilder) { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.alarmFormGroup = this.fb.group({ |
||||
|
id: [null, Validators.required], |
||||
|
alarmType: [null, Validators.required], |
||||
|
createRules: [null], |
||||
|
clearRule: [null], |
||||
|
propagate: [null], |
||||
|
propagateRelationTypes: [null] |
||||
|
}); |
||||
|
this.alarmFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.alarmFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.alarmFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: DeviceProfileAlarm): void { |
||||
|
this.modelValue = value; |
||||
|
this.alarmFormGroup.reset(this.modelValue, {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
/* openAlarm($event: Event) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
} |
||||
|
this.dialog.open<DeviceProfileAlarmDialogComponent, DeviceProfileAlarmDialogData, |
||||
|
DeviceProfileAlarm>(DeviceProfileAlarmDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
isAdd: false, |
||||
|
alarm: this.disabled ? this.modelValue : deepClone(this.modelValue), |
||||
|
isReadOnly: this.disabled |
||||
|
} |
||||
|
}).afterClosed().subscribe( |
||||
|
(deviceProfileAlarm) => { |
||||
|
if (deviceProfileAlarm) { |
||||
|
this.modelValue = deviceProfileAlarm; |
||||
|
this.updateModel(); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} */ |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
return (this.alarmFormGroup.valid) ? null : { |
||||
|
alarm: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
if (this.alarmFormGroup.valid) { |
||||
|
const value = this.alarmFormGroup.value; |
||||
|
this.modelValue = {...this.modelValue, ...value}; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2020 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 fxLayout="column"> |
||||
|
<div class="tb-device-profile-alarms"> |
||||
|
<div *ngFor="let alarmControl of alarmsFormArray().controls; let $index = index; last as isLast;" |
||||
|
fxLayout="column"> |
||||
|
<tb-device-profile-alarm [formControl]="alarmControl" |
||||
|
(removeAlarm)="removeAlarm($index)"> |
||||
|
</tb-device-profile-alarm> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngIf="!disabled" fxFlex fxLayout="row" fxLayoutAlign="end center" |
||||
|
style="padding-top: 16px;"> |
||||
|
<button mat-raised-button color="primary" |
||||
|
type="button" |
||||
|
(click)="addAlarm()" |
||||
|
matTooltip="{{ 'device-profile.add-alarm-rule' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>add</mat-icon> |
||||
|
<span translate>action.add</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,29 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2020 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 '../scss/constants'; |
||||
|
|
||||
|
:host { |
||||
|
.tb-device-profile-alarms { |
||||
|
max-height: 400px; |
||||
|
overflow-y: auto; |
||||
|
&.mat-padding { |
||||
|
padding: 8px; |
||||
|
@media #{$mat-gt-sm} { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,181 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2020 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 { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, FormControl, |
||||
|
FormGroup, NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@app/core/core.state'; |
||||
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
||||
|
import { DeviceProfileAlarm } from '@shared/models/device.models'; |
||||
|
import { guid } from '@core/utils'; |
||||
|
import { Subscription } from 'rxjs'; |
||||
|
import { |
||||
|
DeviceProfileAlarmDialogComponent, |
||||
|
DeviceProfileAlarmDialogData |
||||
|
} from './device-profile-alarm-dialog.component'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-device-profile-alarms', |
||||
|
templateUrl: './device-profile-alarms.component.html', |
||||
|
styleUrls: ['./device-profile-alarms.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => DeviceProfileAlarmsComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => DeviceProfileAlarmsComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class DeviceProfileAlarmsComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
deviceProfileAlarmsFormGroup: FormGroup; |
||||
|
|
||||
|
private requiredValue: boolean; |
||||
|
get required(): boolean { |
||||
|
return this.requiredValue; |
||||
|
} |
||||
|
@Input() |
||||
|
set required(value: boolean) { |
||||
|
this.requiredValue = coerceBooleanProperty(value); |
||||
|
} |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
private valueChangeSubscription: Subscription = null; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(private store: Store<AppState>, |
||||
|
private fb: FormBuilder, |
||||
|
private dialog: MatDialog) { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.deviceProfileAlarmsFormGroup = this.fb.group({ |
||||
|
alarms: this.fb.array([]) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
alarmsFormArray(): FormArray { |
||||
|
return this.deviceProfileAlarmsFormGroup.get('alarms') as FormArray; |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.deviceProfileAlarmsFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.deviceProfileAlarmsFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(alarms: Array<DeviceProfileAlarm> | null): void { |
||||
|
if (this.valueChangeSubscription) { |
||||
|
this.valueChangeSubscription.unsubscribe(); |
||||
|
} |
||||
|
const alarmsControls: Array<AbstractControl> = []; |
||||
|
if (alarms) { |
||||
|
alarms.forEach((alarm) => { |
||||
|
alarmsControls.push(this.fb.control(alarm, [Validators.required])); |
||||
|
}); |
||||
|
} |
||||
|
this.deviceProfileAlarmsFormGroup.setControl('alarms', this.fb.array(alarmsControls)); |
||||
|
if (this.disabled) { |
||||
|
this.deviceProfileAlarmsFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.deviceProfileAlarmsFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
this.valueChangeSubscription = this.deviceProfileAlarmsFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public removeAlarm(index: number) { |
||||
|
(this.deviceProfileAlarmsFormGroup.get('alarms') as FormArray).removeAt(index); |
||||
|
} |
||||
|
|
||||
|
public addAlarm() { |
||||
|
const alarm: DeviceProfileAlarm = { |
||||
|
id: guid(), |
||||
|
alarmType: '', |
||||
|
createRules: { |
||||
|
empty: { |
||||
|
condition: { |
||||
|
condition: [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
const alarmsArray = this.deviceProfileAlarmsFormGroup.get('alarms') as FormArray; |
||||
|
alarmsArray.push(this.fb.control(alarm, [Validators.required])); |
||||
|
this.deviceProfileAlarmsFormGroup.updateValueAndValidity(); |
||||
|
|
||||
|
/* this.dialog.open<DeviceProfileAlarmDialogComponent, DeviceProfileAlarmDialogData, |
||||
|
DeviceProfileAlarm>(DeviceProfileAlarmDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'], |
||||
|
data: { |
||||
|
isAdd: true, |
||||
|
alarm, |
||||
|
isReadOnly: false |
||||
|
} |
||||
|
}).afterClosed().subscribe( |
||||
|
(deviceProfileAlarm) => { |
||||
|
if (deviceProfileAlarm) { |
||||
|
} |
||||
|
} |
||||
|
); */ |
||||
|
} |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
return (this.deviceProfileAlarmsFormGroup.valid) ? null : { |
||||
|
alarms: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
if (this.deviceProfileAlarmsFormGroup.valid) { |
||||
|
const alarms: Array<DeviceProfileAlarm> = this.deviceProfileAlarmsFormGroup.get('alarms').value; |
||||
|
this.propagateChange(alarms); |
||||
|
} else { |
||||
|
this.propagateChange(null); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue