@ -15,172 +15,172 @@
limitations under the License.
-->
< div >
< mat-toolbar color = "primary" >
< h2 translate > device.add-device-text< / h2 >
< span fxFlex > < / span >
< div [ tb-help ] = " ' devices ' " > < / div >
< 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 >
< mat-horizontal-stepper [ linear ] = " true " [ labelPosition ] = " labelPosition " # addDeviceWizardStepper ( selectionChange ) = " changeStep ( $ event ) " >
< ng-template matStepperIcon = "edit" >
< mat-icon > check< / mat-icon >
< / ng-template >
< mat-step [ stepControl ] = " deviceWizardFormGroup " >
< form [ formGroup ] = " deviceWizardFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{ 'device.wizard.device-details' | translate}}< / ng-template >
< fieldset [ disabled ] = " isLoading $ | async " >
< mat-form-field class = "mat-block" >
< mat-label translate > device.name< / mat-label >
< input matInput formControlName = "name" required >
< mat-error * ngIf = "deviceWizardFormGroup.get('name').hasError('required')" >
{{ 'device.name-required' | translate }}
< / mat-error >
< mat-error * ngIf = "deviceWizardFormGroup.get('name').hasError('maxlength')" >
{{ 'device.name-max-length' | translate }}
< / mat-error >
< / mat-form-field >
< mat-form-field class = "mat-block" >
< mat-label translate > device.label< / mat-label >
< input matInput formControlName = "label" >
< mat-error * ngIf = "deviceWizardFormGroup.get('label').hasError('maxlength')" >
{{ 'device.label-max-length' | translate }}
< / mat-error >
< / mat-form-field >
< div fxLayout = "row" fxLayoutGap = "16px" >
< mat-radio-group fxLayout = "column" formControlName = "addProfileType" fxLayoutAlign = "space-around" >
< mat-radio-button [ value ] = " 0 " color = "primary" >
< span translate > device.wizard.existing-device-profile< / span >
< / mat-radio-button >
< mat-radio-button [ value ] = " 1 " color = "primary" >
< span translate > device.wizard.new-device-profile< / span >
< / mat-radio-button >
< / mat-radio-group >
< div fxLayout = "column" >
< tb-device-profile-autocomplete
[required]="!createProfile"
formControlName="deviceProfileId"
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"
[addNewProfile]="false"
[selectDefaultProfile]="true"
[editProfileEnabled]="false"
(deviceProfileChanged)="deviceProfileChanged($event)">
< / tb-device-profile-autocomplete >
< mat-form-field fxFlex class = "mat-block"
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}">
< mat-label translate > device-profile.new-device-profile-name< / mat-label >
< input matInput formControlName = "newDeviceProfileTitle"
[required]="createProfile">
< mat-error * ngIf = "deviceWizardFormGroup.get('newDeviceProfileTitle').hasError('required')" >
{{ 'device-profile.new-device-profile-name-required' | translate }}
< / mat-error >
< / mat-form-field >
< / div >
< div fxLayout = "column" fxLayoutAlign = "flex-end start" >
< tb-rule-chain-autocomplete
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
labelText="device-profile.default-rule-chain"
formControlName="defaultRuleChainId">
< / tb-rule-chain-autocomplete >
< / div >
< div fxLayout = "column" fxLayoutAlign = "flex-end start" >
< tb-queue-autocomplete
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
[queueType]="serviceType"
formControlName="defaultQueueName">
< / tb-queue-autocomplete >
< / div >
< mat-toolbar color = "primary" >
< h2 translate > device.add-device-text< / h2 >
< span fxFlex > < / span >
< div [ tb-help ] = " ' devices ' " > < / div >
< 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 >
< mat-horizontal-stepper [ linear ] = " true " [ labelPosition ] = " labelPosition " # addDeviceWizardStepper ( selectionChange ) = " changeStep ( $ event ) " >
< ng-template matStepperIcon = "edit" >
< mat-icon > check< / mat-icon >
< / ng-template >
< mat-step [ stepControl ] = " deviceWizardFormGroup " >
< form [ formGroup ] = " deviceWizardFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{ 'device.wizard.device-details' | translate}}< / ng-template >
< fieldset [ disabled ] = " isLoading $ | async " >
< mat-form-field class = "mat-block" >
< mat-label translate > device.name< / mat-label >
< input matInput formControlName = "name" required >
< mat-error * ngIf = "deviceWizardFormGroup.get('name').hasError('required')" >
{{ 'device.name-required' | translate }}
< / mat-error >
< mat-error * ngIf = "deviceWizardFormGroup.get('name').hasError('maxlength')" >
{{ 'device.name-max-length' | translate }}
< / mat-error >
< / mat-form-field >
< mat-form-field class = "mat-block" >
< mat-label translate > device.label< / mat-label >
< input matInput formControlName = "label" >
< mat-error * ngIf = "deviceWizardFormGroup.get('label').hasError('maxlength')" >
{{ 'device.label-max-length' | translate }}
< / mat-error >
< / mat-form-field >
< div fxLayout = "row" fxLayoutGap = "16px" >
< mat-radio-group fxLayout = "column" formControlName = "addProfileType" fxLayoutAlign = "space-around" >
< mat-radio-button [ value ] = " 0 " color = "primary" >
< span translate > device.wizard.existing-device-profile< / span >
< / mat-radio-button >
< mat-radio-button [ value ] = " 1 " color = "primary" >
< span translate > device.wizard.new-device-profile< / span >
< / mat-radio-button >
< / mat-radio-group >
< div fxLayout = "column" >
< tb-device-profile-autocomplete
[required]="!createProfile"
formControlName="deviceProfileId"
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"
[addNewProfile]="false"
[selectDefaultProfile]="true"
[editProfileEnabled]="false"
(deviceProfileChanged)="deviceProfileChanged($event)">
< / tb-device-profile-autocomplete >
< mat-form-field fxFlex class = "mat-block"
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}">
< mat-label translate > device-profile.new-device-profile-name< / mat-label >
< input matInput formControlName = "newDeviceProfileTitle"
[required]="createProfile">
< mat-error * ngIf = "deviceWizardFormGroup.get('newDeviceProfileTitle').hasError('required')" >
{{ 'device-profile.new-device-profile-name-required' | translate }}
< / mat-error >
< / mat-form-field >
< / div >
< div fxLayout = "row" fxLayoutGap = "16px" style = "padding-bottom: 16px;" >
< mat-checkbox formControlName = "gateway" >
{{ 'device.is-gateway' | translate }}
< / mat-checkbox >
< mat-checkbox * ngIf = "deviceWizardFormGroup.get('gateway').value"
formControlName="overwriteActivityTime">
{{ 'device.overwrite-activity-time' | translate }}
< / mat-checkbox >
< div fxLayout = "column" fxLayoutAlign = "flex-end start" >
< tb-rule-chain-autocomplete
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
labelText="device-profile.default-rule-chain"
formControlName="defaultRuleChainId">
< / tb-rule-chain-autocomplete >
< / div >
< mat-form-field class = "mat-block" >
< mat-label translate > device.description< / mat-label >
< textarea matInput formControlName = "description" rows = "2" > < / textarea >
< / mat-form-field >
< / fieldset >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " transportConfigFormGroup " [ optional ] = " true " * ngIf = "createProfile" >
< form [ formGroup ] = " transportConfigFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{ 'device-profile.transport-configuration' | translate }}< / ng-template > < mat-form-field class = "mat-block" style = "padding-bottom: 14px;" >
< mat-label translate > device-profile.transport-type< / mat-label >
< mat-select formControlName = "transportType" required >
< mat-option * ngFor = "let type of deviceTransportTypes" [ value ] = " type " >
{{deviceTransportTypeTranslations.get(type) | translate}}
< / mat-option >
< / mat-select >
< mat-hint * ngIf = "transportConfigFormGroup.get('transportType').value" >
{{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
< / mat-hint >
< mat-error * ngIf = "transportConfigFormGroup.get('transportType').hasError('required')" >
{{ 'device-profile.transport-type-required' | translate }}
< / mat-error >
< / mat-form-field >
< tb-device-profile-transport-configuration
formControlName="transportConfiguration"
isAdd="true"
required>
< / tb-device-profile-transport-configuration >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " alarmRulesFormGroup " [ optional ] = " true " * ngIf = "createProfile" >
< form [ formGroup ] = " alarmRulesFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{'device-profile.alarm-rules-with-count' | translate:
{count: alarmRulesFormGroup.get('alarms').value ?
alarmRulesFormGroup.get('alarms').value.length : 0} }}< / ng-template >
< tb-device-profile-alarms
formControlName="alarms"
[deviceProfileId]="null">
< / tb-device-profile-alarms >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " provisionConfigFormGroup " [ optional ] = " true " * ngIf = "createProfile" >
< form [ formGroup ] = " provisionConfigFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{ 'device-profile.device-provisioning' | translate }}< / ng-template >
< tb-device-profile-provision-configuration
formControlName="provisionConfiguration">
< / tb-device-profile-provision-configuration >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " credentialsFormGroup " [ optional ] = " true " >
< ng-template matStepLabel > {{ 'device.credentials' | translate }}< / ng-template >
< form [ formGroup ] = " credentialsFormGroup " style = "padding-bottom: 16px;" >
< mat-checkbox style = "padding-bottom: 16px;" formControlName = "setCredential" > {{ 'device.wizard.add-credentials' | translate }}< / mat-checkbox >
< tb-device-credentials
[fxShow]="credentialsFormGroup.get('setCredential').value"
[deviceTransportType]="deviceTransportType"
formControlName="credential">
< / tb-device-credentials >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " customerFormGroup " [ optional ] = " true " >
< ng-template matStepLabel > {{ 'customer.customer' | translate }}< / ng-template >
< form [ formGroup ] = " customerFormGroup " style = "padding-bottom: 16px;" >
< tb-entity-autocomplete
formControlName="customerId"
labelText="device.wizard.customer-to-assign-device"
[entityType]="entityType.CUSTOMER">
< / tb-entity-autocomplete >
< / form >
< / mat-step >
< / mat-horizontal-stepper >
< / div >
< div mat-dialog-actions fxLayout = "row" >
< div fxLayout = "column" fxLayoutAlign = "flex-end start" >
< tb-queue-autocomplete
[ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}"
[queueType]="serviceType"
formControlName="defaultQueueName">
< / tb-queue-autocomplete >
< / div >
< / div >
< div fxLayout = "row" fxLayoutGap = "16px" style = "padding-bottom: 16px;" >
< mat-checkbox formControlName = "gateway" >
{{ 'device.is-gateway' | translate }}
< / mat-checkbox >
< mat-checkbox * ngIf = "deviceWizardFormGroup.get('gateway').value"
formControlName="overwriteActivityTime">
{{ 'device.overwrite-activity-time' | translate }}
< / mat-checkbox >
< / div >
< mat-form-field class = "mat-block" >
< mat-label translate > device.description< / mat-label >
< textarea matInput formControlName = "description" rows = "2" > < / textarea >
< / mat-form-field >
< / fieldset >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " transportConfigFormGroup " [ optional ] = " true " * ngIf = "createProfile" >
< form [ formGroup ] = " transportConfigFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{ 'device-profile.transport-configuration' | translate }}< / ng-template > < mat-form-field class = "mat-block" style = "padding-bottom: 14px;" >
< mat-label translate > device-profile.transport-type< / mat-label >
< mat-select formControlName = "transportType" required >
< mat-option * ngFor = "let type of deviceTransportTypes" [ value ] = " type " >
{{deviceTransportTypeTranslations.get(type) | translate}}
< / mat-option >
< / mat-select >
< mat-hint * ngIf = "transportConfigFormGroup.get('transportType').value" >
{{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
< / mat-hint >
< mat-error * ngIf = "transportConfigFormGroup.get('transportType').hasError('required')" >
{{ 'device-profile.transport-type-required' | translate }}
< / mat-error >
< / mat-form-field >
< tb-device-profile-transport-configuration
formControlName="transportConfiguration"
isAdd="true"
required>
< / tb-device-profile-transport-configuration >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " alarmRulesFormGroup " [ optional ] = " true " * ngIf = "createProfile" >
< form [ formGroup ] = " alarmRulesFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{'device-profile.alarm-rules-with-count' | translate:
{count: alarmRulesFormGroup.get('alarms').value ?
alarmRulesFormGroup.get('alarms').value.length : 0} }}< / ng-template >
< tb-device-profile-alarms
formControlName="alarms"
[deviceProfileId]="null">
< / tb-device-profile-alarms >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " provisionConfigFormGroup " [ optional ] = " true " * ngIf = "createProfile" >
< form [ formGroup ] = " provisionConfigFormGroup " style = "padding-bottom: 16px;" >
< ng-template matStepLabel > {{ 'device-profile.device-provisioning' | translate }}< / ng-template >
< tb-device-profile-provision-configuration
formControlName="provisionConfiguration">
< / tb-device-profile-provision-configuration >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " credentialsFormGroup " [ optional ] = " true " >
< ng-template matStepLabel > {{ 'device.credentials' | translate }}< / ng-template >
< form [ formGroup ] = " credentialsFormGroup " style = "padding-bottom: 16px;" >
< mat-checkbox style = "padding-bottom: 16px;" formControlName = "setCredential" > {{ 'device.wizard.add-credentials' | translate }}< / mat-checkbox >
< tb-device-credentials
[fxShow]="credentialsFormGroup.get('setCredential').value"
[deviceTransportType]="deviceTransportType"
formControlName="credential">
< / tb-device-credentials >
< / form >
< / mat-step >
< mat-step [ stepControl ] = " customerFormGroup " [ optional ] = " true " >
< ng-template matStepLabel > {{ 'customer.customer' | translate }}< / ng-template >
< form [ formGroup ] = " customerFormGroup " style = "padding-bottom: 16px;" >
< tb-entity-autocomplete
formControlName="customerId"
labelText="device.wizard.customer-to-assign-device"
[entityType]="entityType.CUSTOMER">
< / tb-entity-autocomplete >
< / form >
< / mat-step >
< / mat-horizontal-stepper >
< / div >
< div mat-dialog-actions style = "padding: 0" >
< div class = "dialog-actions-row" fxFlex fxLayout = "row" fxLayoutAlign = "end center" >
< button mat-stroked-button * ngIf = "selectedIndex > 0"
[disabled]="(isLoading$ | async)"
(click)="previousStep()">{{ 'action.back' | translate }}< / button >
@ -191,8 +191,8 @@
[disabled]="(isLoading$ | async)"
(click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}< / button >
< / div >
< mat-divider > < / mat-divider >
< div mat-dialog-actions fxLayout = "row" fxLayoutGap = "8px" fxLayoutAlign = "end" >
< mat-divider style = "width: 100%" > < / mat-divider >
< div class = "dialog-actions-row" fxFlex fxLayout = "row" fxLayoutGap = "8px" fxLayoutAlign = "end center " >
< button mat-button
[disabled]="(isLoading$ | async)"
(click)="cancel()">{{ 'action.cancel' | translate }}< / button >
Volodymyr Babak
3 years ago