UI: Improvement time rendering profiles seated too many parameters
This commit is contained in:
Vladyslav_Prykhodko
parent
4c4ec36b5c
commit
b19bcdfe9a
@ -33,87 +33,91 @@
|
||||
</button>
|
||||
</div>
|
||||
</mat-expansion-panel-header>
|
||||
<div fxLayout="column" fxLayoutGap="0.5em">
|
||||
<mat-divider></mat-divider>
|
||||
<mat-form-field fxFlex floatLabel="always">
|
||||
<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-error *ngIf="alarmFormGroup.get('alarmType').hasError('unique')">
|
||||
{{ 'device-profile.alarm-type-unique' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-expansion-panel class="advanced-settings" [expanded]="false">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="end center">
|
||||
<div class="tb-small" translate>device-profile.advanced-settings</div>
|
||||
</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
|
||||
{{ 'device-profile.propagate-alarm' | translate }}
|
||||
</mat-checkbox>
|
||||
<section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
|
||||
<mat-form-field floatLabel="always" class="mat-block">
|
||||
<mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
|
||||
<mat-chip-list #relationTypesChipList [disabled]="disabled">
|
||||
<mat-chip
|
||||
*ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
|
||||
(removed)="removeRelationType(key)">
|
||||
{{key}}
|
||||
<mat-icon matChipRemove>close</mat-icon>
|
||||
</mat-chip>
|
||||
<input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
|
||||
style="max-width: 200px;"
|
||||
[matChipInputFor]="relationTypesChipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addRelationType($event)"
|
||||
[matChipInputAddOnBlur]="true">
|
||||
</mat-chip-list>
|
||||
<mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<div fxLayout="column" fxLayoutGap="0.5em">
|
||||
<mat-divider></mat-divider>
|
||||
<mat-form-field fxFlex floatLabel="always">
|
||||
<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-error *ngIf="alarmFormGroup.get('alarmType').hasError('unique')">
|
||||
{{ 'device-profile.alarm-type-unique' | translate }}
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</section>
|
||||
</mat-expansion-panel>
|
||||
<div fxFlex fxLayout="column">
|
||||
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
|
||||
<tb-create-alarm-rules formControlName="createRules"
|
||||
style="padding-bottom: 16px;"
|
||||
[deviceProfileId]="deviceProfileId">
|
||||
</tb-create-alarm-rules>
|
||||
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
|
||||
<div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
|
||||
[fxShow]="alarmFormGroup.get('clearRule').value"
|
||||
style="padding-bottom: 8px;">
|
||||
<div class="clear-alarm-rule" fxFlex fxLayout="row">
|
||||
<tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
|
||||
</tb-alarm-rule>
|
||||
</div>
|
||||
<mat-expansion-panel class="advanced-settings" [expanded]="false">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="end center">
|
||||
<div class="tb-small" translate>device-profile.advanced-settings</div>
|
||||
</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
|
||||
{{ 'device-profile.propagate-alarm' | translate }}
|
||||
</mat-checkbox>
|
||||
<section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
|
||||
<mat-form-field floatLabel="always" class="mat-block">
|
||||
<mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
|
||||
<mat-chip-list #relationTypesChipList [disabled]="disabled">
|
||||
<mat-chip
|
||||
*ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
|
||||
(removed)="removeRelationType(key)">
|
||||
{{key}}
|
||||
<mat-icon matChipRemove>close</mat-icon>
|
||||
</mat-chip>
|
||||
<input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
|
||||
style="max-width: 200px;"
|
||||
[matChipInputFor]="relationTypesChipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="addRelationType($event)"
|
||||
[matChipInputAddOnBlur]="true">
|
||||
</mat-chip-list>
|
||||
<mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
|
||||
</mat-form-field>
|
||||
</section>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
<div fxFlex fxLayout="column">
|
||||
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
|
||||
<tb-create-alarm-rules formControlName="createRules"
|
||||
style="padding-bottom: 16px;"
|
||||
[deviceProfileId]="deviceProfileId">
|
||||
</tb-create-alarm-rules>
|
||||
<div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
|
||||
<div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
|
||||
[fxShow]="alarmFormGroup.get('clearRule').value"
|
||||
style="padding-bottom: 8px;">
|
||||
<div class="clear-alarm-rule" fxFlex fxLayout="row">
|
||||
<tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
|
||||
</tb-alarm-rule>
|
||||
</div>
|
||||
<button *ngIf="!disabled"
|
||||
mat-icon-button color="primary" style="min-width: 40px;"
|
||||
type="button"
|
||||
(click)="removeClearAlarmRule()"
|
||||
matTooltip="{{ 'action.remove' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>remove_circle_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
|
||||
<span translate fxLayoutAlign="center center" style="margin: 16px 0"
|
||||
class="tb-prompt">device-profile.no-clear-alarm-rule</span>
|
||||
</div>
|
||||
<div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
|
||||
<button mat-stroked-button color="primary"
|
||||
type="button"
|
||||
(click)="addClearAlarmRule()"
|
||||
matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon class="button-icon">add_circle_outline</mat-icon>
|
||||
{{ 'device-profile.add-clear-alarm-rule' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<button *ngIf="!disabled"
|
||||
mat-icon-button color="primary" style="min-width: 40px;"
|
||||
type="button"
|
||||
(click)="removeClearAlarmRule()"
|
||||
matTooltip="{{ 'action.remove' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>remove_circle_outline</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
|
||||
<span translate fxLayoutAlign="center center" style="margin: 16px 0"
|
||||
class="tb-prompt">device-profile.no-clear-alarm-rule</span>
|
||||
</div>
|
||||
<div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
|
||||
<button mat-stroked-button color="primary"
|
||||
type="button"
|
||||
(click)="addClearAlarmRule()"
|
||||
matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon class="button-icon">add_circle_outline</mat-icon>
|
||||
{{ 'device-profile.add-clear-alarm-rule' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
|
||||
@ -91,10 +91,12 @@
|
||||
<div translate>device-profile.profile-configuration</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<tb-device-profile-configuration
|
||||
formControlName="configuration"
|
||||
required>
|
||||
</tb-device-profile-configuration>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<tb-device-profile-configuration
|
||||
formControlName="configuration"
|
||||
required>
|
||||
</tb-device-profile-configuration>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
@ -102,10 +104,12 @@
|
||||
<div translate>device-profile.transport-configuration</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<tb-device-profile-transport-configuration
|
||||
formControlName="transportConfiguration"
|
||||
required>
|
||||
</tb-device-profile-transport-configuration>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<tb-device-profile-transport-configuration
|
||||
formControlName="transportConfiguration"
|
||||
required>
|
||||
</tb-device-profile-transport-configuration>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel [expanded]="false">
|
||||
<mat-expansion-panel-header>
|
||||
@ -115,10 +119,12 @@
|
||||
entityForm.get('profileData.alarms').value.length : 0} }}</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<tb-device-profile-alarms
|
||||
formControlName="alarms"
|
||||
[deviceProfileId]="deviceProfileId">
|
||||
</tb-device-profile-alarms>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<tb-device-profile-alarms
|
||||
formControlName="alarms"
|
||||
[deviceProfileId]="deviceProfileId">
|
||||
</tb-device-profile-alarms>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel [expanded]="true">
|
||||
<mat-expansion-panel-header>
|
||||
@ -126,9 +132,11 @@
|
||||
<div translate>device-profile.device-provisioning</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<tb-device-profile-provision-configuration
|
||||
formControlName="provisionConfiguration">
|
||||
</tb-device-profile-provision-configuration>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<tb-device-profile-provision-configuration
|
||||
formControlName="provisionConfiguration">
|
||||
</tb-device-profile-provision-configuration>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
|
||||
@ -22,9 +22,11 @@
|
||||
<div translate>tenant-profile.profile-configuration</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<tb-tenant-profile-configuration
|
||||
formControlName="configuration"
|
||||
required>
|
||||
</tb-tenant-profile-configuration>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<tb-tenant-profile-configuration
|
||||
formControlName="configuration"
|
||||
required>
|
||||
</tb-tenant-profile-configuration>
|
||||
</ng-template>
|
||||
</mat-expansion-panel>
|
||||
</form>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user