From 30a6a462da5d42a63c2a1e4f56f27f7f53cf1175 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Thu, 8 Oct 2020 20:43:08 +0300 Subject: [PATCH 1/4] UI: Improvement view device profile settings --- .../filter-predicate-value.component.html | 1 - .../filter-predicate-value.component.ts | 2 +- .../home/components/home-components.module.ts | 3 - .../add-device-profile-dialog.component.html | 2 +- .../add-device-profile-dialog.component.scss | 1 + .../profile/alarm/alarm-rule.component.html | 126 +++++++++--------- .../profile/alarm/alarm-rule.component.ts | 9 +- .../device-profile-alarms.component.scss | 4 + .../device-profile-data.component.html | 55 -------- .../profile/device-profile-data.component.ts | 110 --------------- .../profile/device-profile.component.html | 17 +-- .../profile/device-profile.component.ts | 6 +- ...evice-profile-configuration.component.html | 6 +- ...ile-transport-configuration.component.html | 6 +- ...ofile-transport-configuration.component.ts | 2 +- .../device-profile-tabs.component.html | 49 ++++++- .../device-profile-tabs.component.ts | 5 +- .../device-profiles-table-config.resolver.ts | 2 + ...evice-transport-configuration.component.ts | 2 +- ui-ngx/src/app/shared/models/device.models.ts | 34 ++--- 20 files changed, 152 insertions(+), 290 deletions(-) delete mode 100644 ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.ts diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html index 52f0b0eeea..524285ea3f 100644 --- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html +++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html @@ -76,7 +76,6 @@ type="button" matTooltip="{{ (dynamicMode ? 'filter.switch-to-default-value' : 'filter.switch-to-dynamic-value') | translate }}" matTooltipPosition="above" - *ngIf="allow" (click)="dynamicMode = !dynamicMode"> diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts index d12a0fe2f2..9c55647c51 100644 --- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts +++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.ts @@ -54,7 +54,7 @@ export class FilterPredicateValueComponent implements ControlValueAccessor, OnIn if (allow) { this.dynamicValueSourceTypes.push(DynamicValueSourceType.CURRENT_USER); } else { - this.dynamicValueSourceTypes.push(DynamicValueSourceType.CURRENT_DEVICE); + this.dynamicValueSourceTypes = [DynamicValueSourceType.CURRENT_DEVICE]; } } diff --git a/ui-ngx/src/app/modules/home/components/home-components.module.ts b/ui-ngx/src/app/modules/home/components/home-components.module.ts index e33960b417..9bbac4154d 100644 --- a/ui-ngx/src/app/modules/home/components/home-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/home-components.module.ts @@ -90,7 +90,6 @@ import { TenantProfileDialogComponent } from './profile/tenant-profile-dialog.co import { TenantProfileDataComponent } from './profile/tenant-profile-data.component'; import { DefaultDeviceProfileConfigurationComponent } from './profile/device/default-device-profile-configuration.component'; import { DeviceProfileConfigurationComponent } from './profile/device/device-profile-configuration.component'; -import { DeviceProfileDataComponent } from './profile/device-profile-data.component'; import { DeviceProfileComponent } from './profile/device-profile.component'; import { DefaultDeviceProfileTransportConfigurationComponent } from './profile/device/default-device-profile-transport-configuration.component'; import { DeviceProfileTransportConfigurationComponent } from './profile/device/device-profile-transport-configuration.component'; @@ -195,7 +194,6 @@ import { DeviceCredentialsComponent } from './device/device-credentials.componen AlarmRuleConditionComponent, DeviceProfileAlarmComponent, DeviceProfileAlarmsComponent, - DeviceProfileDataComponent, DeviceProfileComponent, DeviceProfileDialogComponent, AddDeviceProfileDialogComponent, @@ -277,7 +275,6 @@ import { DeviceCredentialsComponent } from './device/device-credentials.componen AlarmRuleConditionComponent, DeviceProfileAlarmComponent, DeviceProfileAlarmsComponent, - DeviceProfileDataComponent, DeviceProfileComponent, DeviceProfileDialogComponent, AddDeviceProfileDialogComponent, diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html index df70ea4e8f..7a93c0487f 100644 --- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html @@ -45,7 +45,7 @@ labelText="device-profile.default-rule-chain" formControlName="defaultRuleChainId"> - + device-profile.type diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss index cafcce74b6..69bf6b3e53 100644 --- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss @@ -32,6 +32,7 @@ .mat-stepper-horizontal { .mat-horizontal-content-container { overflow: auto; + min-height: 260px; } } } diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html index 28c286f33c..66eb99f27e 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.html @@ -21,74 +21,72 @@ -
-
- - device-profile.condition-type - - - {{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }} +
+ + device-profile.condition-type + + + {{ alarmConditionTypeTranslation.get(alarmConditionType) | translate }} + + + + {{ 'device-profile.condition-type-required' | translate }} + + +
+ + + + + {{ 'device-profile.condition-duration-value-required' | translate }} + + + {{ 'device-profile.condition-duration-value-range' | translate }} + + + {{ 'device-profile.condition-duration-value-range' | translate }} + + + {{ 'device-profile.condition-duration-value-pattern' | translate }} + + + + + + + {{ timeUnitTranslations.get(timeUnit) | translate }} - - {{ 'device-profile.condition-type-required' | translate }} + + {{ 'device-profile.condition-duration-time-unit-required' | translate }} + + +
+
+ + + + + {{ 'device-profile.condition-repeating-value-required' | translate }} + + + {{ 'device-profile.condition-repeating-value-range' | translate }} + + + {{ 'device-profile.condition-repeating-value-range' | translate }} + + + {{ 'device-profile.condition-repeating-value-pattern' | translate }} -
- - - - - {{ 'device-profile.condition-duration-value-required' | translate }} - - - {{ 'device-profile.condition-duration-value-range' | translate }} - - - {{ 'device-profile.condition-duration-value-range' | translate }} - - - {{ 'device-profile.condition-duration-value-pattern' | translate }} - - - - - - - {{ timeUnitTranslations.get(timeUnit) | translate }} - - - - {{ 'device-profile.condition-duration-time-unit-required' | translate }} - - -
-
- - - - - {{ 'device-profile.condition-repeating-value-required' | translate }} - - - {{ 'device-profile.condition-repeating-value-range' | translate }} - - - {{ 'device-profile.condition-repeating-value-range' | translate }} - - - {{ 'device-profile.condition-repeating-value-pattern' | translate }} - - -
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts index 7b63660362..e9a6428533 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts @@ -29,6 +29,7 @@ import { AlarmConditionType, AlarmConditionTypeTranslationMap, AlarmRule } from import { MatDialog } from '@angular/material/dialog'; import { TimeUnit, timeUnitTranslationMap } from '@shared/models/time/time.models'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; +import { isDefinedAndNotNull } from '@core/utils'; @Component({ selector: 'tb-alarm-rule', @@ -117,13 +118,11 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat writeValue(value: AlarmRule): void { this.modelValue = value; - if (this.modelValue?.condition?.spec === null) { - this.modelValue.condition.spec = { - type: AlarmConditionType.SIMPLE - }; + if (!isDefinedAndNotNull(this.modelValue?.condition?.spec)) { + this.modelValue = Object.assign({}, this.modelValue, {condition: {spec: {type: AlarmConditionType.SIMPLE}}}); } this.alarmRuleFormGroup.reset(this.modelValue || undefined, {emitEvent: false}); - this.updateValidators(this.modelValue?.condition?.spec?.type); + this.updateValidators(this.modelValue.condition.spec.type); } public validate(c: FormControl) { diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.scss b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.scss index 4bb4c03b37..18883f943b 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.scss +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarms.component.scss @@ -25,4 +25,8 @@ } } } + + .tb-prompt{ + margin: 30px 0; + } } diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.html index 2cc3ccd9e2..e69de29bb2 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.html @@ -1,55 +0,0 @@ - -
- - - - -
device-profile.profile-configuration
- - - - - - - - -
device-profile.transport-configuration
- - - - - - - - -
{{'device-profile.alarm-rules-with-count' | translate: - {count: deviceProfileDataFormGroup.get('alarms').value ? - deviceProfileDataFormGroup.get('alarms').value.length : 0} }}
- - - - - - -
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.ts deleted file mode 100644 index 7d7fc55057..0000000000 --- a/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.ts +++ /dev/null @@ -1,110 +0,0 @@ -/// -/// 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, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; -import { Store } from '@ngrx/store'; -import { AppState } from '@app/core/core.state'; -import { coerceBooleanProperty } from '@angular/cdk/coercion'; -import { - DeviceProfileData, - DeviceProfileType, - deviceProfileTypeConfigurationInfoMap, - DeviceTransportType, deviceTransportTypeConfigurationInfoMap -} from '@shared/models/device.models'; - -@Component({ - selector: 'tb-device-profile-data', - templateUrl: './device-profile-data.component.html', - styleUrls: [], - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DeviceProfileDataComponent), - multi: true - }] -}) -export class DeviceProfileDataComponent implements ControlValueAccessor, OnInit { - - deviceProfileDataFormGroup: FormGroup; - - private requiredValue: boolean; - get required(): boolean { - return this.requiredValue; - } - @Input() - set required(value: boolean) { - this.requiredValue = coerceBooleanProperty(value); - } - - @Input() - disabled: boolean; - - displayProfileConfiguration: boolean; - displayTransportConfiguration: boolean; - - private propagateChange = (v: any) => { }; - - constructor(private store: Store, - private fb: FormBuilder) { - } - - registerOnChange(fn: any): void { - this.propagateChange = fn; - } - - registerOnTouched(fn: any): void { - } - - ngOnInit() { - this.deviceProfileDataFormGroup = this.fb.group({ - configuration: [null, Validators.required], - transportConfiguration: [null, Validators.required], - alarms: [null] - }); - this.deviceProfileDataFormGroup.valueChanges.subscribe(() => { - this.updateModel(); - }); - } - - setDisabledState(isDisabled: boolean): void { - this.disabled = isDisabled; - if (this.disabled) { - this.deviceProfileDataFormGroup.disable({emitEvent: false}); - } else { - this.deviceProfileDataFormGroup.enable({emitEvent: false}); - } - } - - writeValue(value: DeviceProfileData | null): void { - const deviceProfileType = value?.configuration?.type; - this.displayProfileConfiguration = deviceProfileType && - deviceProfileTypeConfigurationInfoMap.get(deviceProfileType).hasProfileConfiguration; - const deviceTransportType = value?.transportConfiguration?.type; - this.displayTransportConfiguration = deviceTransportType && - deviceTransportTypeConfigurationInfoMap.get(deviceTransportType).hasProfileConfiguration; - this.deviceProfileDataFormGroup.patchValue({configuration: value?.configuration}, {emitEvent: false}); - this.deviceProfileDataFormGroup.patchValue({transportConfiguration: value?.transportConfiguration}, {emitEvent: false}); - this.deviceProfileDataFormGroup.patchValue({alarms: value?.alarms}, {emitEvent: false}); - } - - private updateModel() { - let deviceProfileData: DeviceProfileData = null; - if (this.deviceProfileDataFormGroup.valid) { - deviceProfileData = this.deviceProfileDataFormGroup.getRawValue(); - } - this.propagateChange(deviceProfileData); - } -} diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html index 8af17883c2..780d98adfe 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.html @@ -53,7 +53,7 @@ labelText="device-profile.default-rule-chain" formControlName="defaultRuleChainId"> - + device-profile.type @@ -64,21 +64,6 @@ {{ 'device-profile.type-required' | translate }} - - device-profile.transport-type - - - {{deviceTransportTypeTranslations.get(type) | translate}} - - - - {{ 'device-profile.transport-type-required' | translate }} - - - - device-profile.description diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts index e3c441c8a2..d7bd195171 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts @@ -77,7 +77,11 @@ export class DeviceProfileComponent extends EntityComponent { name: [entity ? entity.name : '', [Validators.required]], type: [entity ? entity.type : null, [Validators.required]], transportType: [entity ? entity.transportType : null, [Validators.required]], - profileData: [entity && !this.isAdd ? entity.profileData : {}, []], + profileData: this.fb.group({ + configuration: [entity && !this.isAdd ? entity.profileData?.configuration : {}, Validators.required], + transportConfiguration: [entity && !this.isAdd ? entity.profileData?.transportConfiguration : {}, Validators.required], + alarms: [entity && !this.isAdd ? entity.profileData?.alarms : []] + }), defaultRuleChainId: [entity && entity.defaultRuleChainId ? entity.defaultRuleChainId.id : null, []], description: [entity ? entity.description : '', []], } diff --git a/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-configuration.component.html index 200d3d3623..796485d200 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-configuration.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-configuration.component.html @@ -16,9 +16,5 @@ -->
- - +
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-transport-configuration.component.html index 94890f3673..061e72c4e4 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-transport-configuration.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/device/default-device-profile-transport-configuration.component.html @@ -16,9 +16,5 @@ -->
- - +
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m-device-profile-transport-configuration.component.ts index ed81a143fd..7a7a1d285f 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m-device-profile-transport-configuration.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m-device-profile-transport-configuration.component.ts @@ -89,7 +89,7 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro let configuration: DeviceProfileTransportConfiguration = null; if (this.lwm2mDeviceProfileTransportConfigurationFormGroup.valid) { configuration = this.lwm2mDeviceProfileTransportConfigurationFormGroup.getRawValue().configuration; - configuration.type = DeviceTransportType.LWM2M; + // configuration.type = DeviceTransportType.LWM2M; } this.propagateChange(configuration); } diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html index 40a9f55aa5..7531eed659 100644 --- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html +++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html @@ -16,6 +16,49 @@ --> +
+ + device-profile.transport-type + + + {{deviceTransportTypeTranslations.get(type) | translate}} + + + + {{ 'device-profile.transport-type-required' | translate }} + + +
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + - - - diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts index 9cf18c498e..6410e06950 100644 --- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts +++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts @@ -18,7 +18,7 @@ import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { EntityTabsComponent } from '../../components/entity/entity-tabs.component'; -import { DeviceProfile } from '@shared/models/device.models'; +import { DeviceProfile, DeviceTransportType, deviceTransportTypeTranslationMap } from '@shared/models/device.models'; @Component({ selector: 'tb-device-profile-tabs', @@ -27,6 +27,9 @@ import { DeviceProfile } from '@shared/models/device.models'; }) export class DeviceProfileTabsComponent extends EntityTabsComponent { + deviceTransportTypes = Object.keys(DeviceTransportType); + deviceTransportTypeTranslations = deviceTransportTypeTranslationMap; + constructor(protected store: Store) { super(store); } diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts index d59c7225c5..60cb15c199 100644 --- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts +++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profiles-table-config.resolver.ts @@ -59,6 +59,8 @@ export class DeviceProfilesTableConfigResolver implements Resolve Date: Fri, 9 Oct 2020 16:05:23 +0300 Subject: [PATCH 2/4] UI: Improvement UI device profile alarm scheduler, added text select time interval --- .../profile/alarm/alarm-rule.component.ts | 8 +- .../alarm/alarm-schedule.component.html | 315 ++++++++++-------- .../alarm/alarm-schedule.component.scss | 20 ++ .../profile/alarm/alarm-schedule.component.ts | 51 ++- .../device-profile-tabs.component.html | 2 +- 5 files changed, 233 insertions(+), 163 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts index e9a6428533..fe2916b854 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-rule.component.ts @@ -29,7 +29,7 @@ import { AlarmConditionType, AlarmConditionTypeTranslationMap, AlarmRule } from import { MatDialog } from '@angular/material/dialog'; import { TimeUnit, timeUnitTranslationMap } from '@shared/models/time/time.models'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; -import { isDefinedAndNotNull } from '@core/utils'; +import { isUndefined } from '@core/utils'; @Component({ selector: 'tb-alarm-rule', @@ -118,11 +118,11 @@ export class AlarmRuleComponent implements ControlValueAccessor, OnInit, Validat writeValue(value: AlarmRule): void { this.modelValue = value; - if (!isDefinedAndNotNull(this.modelValue?.condition?.spec)) { - this.modelValue = Object.assign({}, this.modelValue, {condition: {spec: {type: AlarmConditionType.SIMPLE}}}); + if (this.modelValue !== null && isUndefined(this.modelValue?.condition?.spec)) { + this.modelValue = Object.assign(this.modelValue, {condition: {spec: {type: AlarmConditionType.SIMPLE}}}); } this.alarmRuleFormGroup.reset(this.modelValue || undefined, {emitEvent: false}); - this.updateValidators(this.modelValue.condition.spec.type); + this.updateValidators(this.modelValue?.condition?.spec?.type); } public validate(c: FormControl) { diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html index cad6e5cf03..03c0586bb3 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.html @@ -35,7 +35,7 @@
device-profile.schedule-days
-
+
{{ 'device-profile.schedule-day.monday' | translate }} @@ -64,158 +64,189 @@
device-profile.schedule-time
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + + +
+
+
+
+
device-profile.schedule-days
-
-
-
- - {{ 'device-profile.schedule-day.monday' | translate }} - -
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - -
+
+
+ + {{ 'device-profile.schedule-day.monday' | translate }} + +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + +
-
- - {{ 'device-profile.schedule-day.tuesday' | translate }} - -
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - -
+
-
- - {{ 'device-profile.schedule-day.wednesday' | translate }} - -
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - -
+
+
+ + {{ 'device-profile.schedule-day.tuesday' | translate }} + +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + +
-
- - {{ 'device-profile.schedule-day.thursday' | translate }} - -
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - -
+
-
-
- - {{ 'device-profile.schedule-day.friday' | translate }} - -
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - -
+
+ + {{ 'device-profile.schedule-day.wednesday' | translate }} + +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + + +
+
+
+
+
+ + {{ 'device-profile.schedule-day.thursday' | translate }} + +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + +
-
- - {{ 'device-profile.schedule-day.saturday' | translate }} - -
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - -
+
+
+
+
+ + {{ 'device-profile.schedule-day.friday' | translate }} + +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + + +
+
+
+
+
+ + {{ 'device-profile.schedule-day.saturday' | translate }} + +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + + +
+
+
+
+
+ + {{ 'device-profile.schedule-day.sunday' | translate }} + +
+ + device-profile.schedule-time-from + + + + + + device-profile.schedule-time-to + + + +
-
- - {{ 'device-profile.schedule-day.sunday' | translate }} - -
- - device-profile.schedule-time-from - - - - - - device-profile.schedule-time-to - - - - -
+
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss new file mode 100644 index 0000000000..1746a5fbf5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.scss @@ -0,0 +1,20 @@ +/** + * 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. + */ +::ng-deep { + .nowrap { + white-space: nowrap; + } +} diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts index 8cf9dc8d30..0062687d5d 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/alarm-schedule.component.ts @@ -16,6 +16,7 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core'; import { + AbstractControl, ControlValueAccessor, FormArray, FormBuilder, @@ -35,6 +36,7 @@ import { MatCheckboxChange } from '@angular/material/checkbox'; @Component({ selector: 'tb-alarm-schedule', templateUrl: './alarm-schedule.component.html', + styleUrls: ['./alarm-schedule.component.scss'], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AlarmScheduleComponent), @@ -79,7 +81,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator, items: this.fb.array(Array.from({length: 7}, (value, i) => this.defaultItemsScheduler(i))) }); this.alarmScheduleForm.get('type').valueChanges.subscribe((type) => { - this.alarmScheduleForm.reset({type, items: this.defaultItems}, {emitEvent: false}); + this.alarmScheduleForm.reset({type, items: this.defaultItems, timezone: this.defaultTimezone}, {emitEvent: false}); this.updateValidators(type, true); this.alarmScheduleForm.updateValueAndValidity(); }); @@ -131,13 +133,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator, this.modelValue.items .sort((a, b) => a.dayOfWeek - b.dayOfWeek) .forEach((item, index) => { - if (item.enabled) { - this.itemsSchedulerForm.at(index).get('startsOn').enable({emitEvent: false}); - this.itemsSchedulerForm.at(index).get('endsOn').enable({emitEvent: false}); - } else { - this.itemsSchedulerForm.at(index).get('startsOn').disable({emitEvent: false}); - this.itemsSchedulerForm.at(index).get('endsOn').disable({emitEvent: false}); - } + this.disabledSelectedTime(item.enabled, index); alarmDays.push({ enabled: item.enabled, startsOn: this.timestampToTime(item.startsOn), @@ -206,15 +202,15 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator, .filter(day => !!day); } if (isDefined(value.startsOn) && value.startsOn !== 0) { - value.startsOn = this.timeToTimestamp(value.startsOn); + value.startsOn = this.timeToTimestampUTC(value.startsOn); } if (isDefined(value.endsOn) && value.endsOn !== 0) { - value.endsOn = this.timeToTimestamp(value.endsOn); + value.endsOn = this.timeToTimestampUTC(value.endsOn); } if (isDefined(value.items)){ value.items = this.alarmScheduleForm.getRawValue().items; value.items = value.items.map((item) => { - return { ...item, startsOn: this.timeToTimestamp(item.startsOn), endsOn: this.timeToTimestamp(item.endsOn)}; + return { ...item, startsOn: this.timeToTimestampUTC(item.startsOn), endsOn: this.timeToTimestampUTC(item.endsOn)}; }); } this.modelValue = value; @@ -222,7 +218,7 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator, } } - private timeToTimestamp(date: Date | number): number { + private timeToTimestampUTC(date: Date | number): number { if (typeof date === 'number' || date === null) { return 0; } @@ -244,16 +240,39 @@ export class AlarmScheduleComponent implements ControlValueAccessor, Validator, changeCustomScheduler($event: MatCheckboxChange, index: number) { const value = $event.checked; - if (value) { + this.disabledSelectedTime(value, index, true); + } + + private disabledSelectedTime(enable: boolean, index: number, emitEvent = false) { + if (enable) { this.itemsSchedulerForm.at(index).get('startsOn').enable({emitEvent: false}); - this.itemsSchedulerForm.at(index).get('endsOn').enable(); + this.itemsSchedulerForm.at(index).get('endsOn').enable({emitEvent}); } else { this.itemsSchedulerForm.at(index).get('startsOn').disable({emitEvent: false}); - this.itemsSchedulerForm.at(index).get('endsOn').disable(); + this.itemsSchedulerForm.at(index).get('endsOn').disable({emitEvent}); + } + } + + private timeToMoment(date: Date | number): _moment.Moment { + if (typeof date === 'number' || date === null) { + return _moment([1970, 0, 1, 0, 0, 0, 0]); + } + return _moment([1970, 0, 1, date.getHours(), date.getMinutes(), 0, 0]); + } + + getSchedulerRangeText(control: FormGroup | AbstractControl): string { + const start = this.timeToMoment(control.get('startsOn').value); + const end = this.timeToMoment(control.get('endsOn').value); + if (start < end) { + return `${start.format('hh:mm A')} – ${end.format('hh:mm A')}`; + } else if (start.valueOf() === 0 && end.valueOf() === 0 || start.isSame(_moment([1970, 0])) && end.isSame(_moment([1970, 0]))) { + return '12:00 AM – 12:00 PM'; } + return `12:00 AM – ${end.format('hh:mm A')}` + + ` and ${start.format('hh:mm A')} – 12:00 PM`; } - private get itemsSchedulerForm(): FormArray { + get itemsSchedulerForm(): FormArray { return this.alarmScheduleForm.get('items') as FormArray; } } diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html index 7531eed659..9a79af3202 100644 --- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html +++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html @@ -39,7 +39,7 @@
From 8c9328f9c5f3e2025a30e6ae59730b7aabd1656b Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 9 Oct 2020 18:06:22 +0300 Subject: [PATCH 3/4] UI: Improvement created device profile --- .../add-device-profile-dialog.component.html | 38 +++++--- .../add-device-profile-dialog.component.scss | 47 ++++++--- .../add-device-profile-dialog.component.ts | 79 +++++++++++---- .../alarm/create-alarm-rules.component.html | 4 +- .../alarm/create-alarm-rules.component.scss | 7 +- .../alarm/device-profile-alarm.component.html | 95 +++++++++---------- .../alarm/device-profile-alarm.component.scss | 14 ++- .../device-profile-tabs.component.html | 3 + .../device-profile-tabs.component.ts | 10 +- 9 files changed, 200 insertions(+), 97 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html index 7a93c0487f..5c353efffa 100644 --- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.html @@ -29,7 +29,7 @@
- +
{{ 'device-profile.device-profile-details' | translate }} @@ -63,7 +63,7 @@
- +
{{ 'device-profile.transport-configuration' | translate }} @@ -73,6 +73,9 @@ {{deviceTransportTypeTranslations.get(type) | translate}} + + {{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}} + {{ 'device-profile.transport-type-required' | translate }} @@ -83,7 +86,7 @@
- +
{{'device-profile.alarm-rules-with-count' | translate: {count: alarmRulesFormGroup.get('alarms').value ? @@ -95,19 +98,28 @@
-
- - -
+
+
+ +
+
- + +
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss index 69bf6b3e53..b8b811ca3d 100644 --- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.scss @@ -13,26 +13,51 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -:host { - .mat-dialog-content { - display: flex; - flex-direction: column; - overflow: hidden; +@import "../../../../../scss/constants"; - .mat-stepper-horizontal { - display: flex; - flex-direction: column; - overflow: hidden; +:host-context(.tb-fullscreen-dialog .mat-dialog-container) { + @media #{$mat-lt-sm} { + .mat-dialog-content { + max-height: 75vh; } } } :host ::ng-deep { .mat-dialog-content { + display: flex; + flex-direction: column; + height: 100%; + padding: 24px 24px 8px !important; + .mat-stepper-horizontal { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + @media #{$mat-lt-sm} { + .mat-step-label { + white-space: normal; + overflow: visible; + .mat-step-text-label { + overflow: visible; + } + } + } .mat-horizontal-content-container { - overflow: auto; - min-height: 260px; + height: 350px; + max-height: 100%; + width: 100%;; + overflow-y: auto; + @media #{$mat-gt-sm} { + min-width: 800px; + } + } + .mat-horizontal-stepper-content[aria-expanded=true] { + height: 100%; + form { + height: 100%; + } } } } diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts index a88b250c7e..2ca077089a 100644 --- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts @@ -36,13 +36,14 @@ import { DeviceProfile, DeviceProfileType, deviceProfileTypeTranslationMap, - DeviceTransportType, + DeviceTransportType, deviceTransportTypeHintMap, deviceTransportTypeTranslationMap } from '@shared/models/device.models'; import { DeviceProfileService } from '@core/http/device-profile.service'; import { EntityType } from '@shared/models/entity-type.models'; import { MatHorizontalStepper } from '@angular/material/stepper'; import { RuleChainId } from '@shared/models/id/rule-chain-id'; +import { StepperSelectionEvent } from '@angular/cdk/stepper'; export interface AddDeviceProfileDialogData { deviceProfileName: string; @@ -62,12 +63,16 @@ export class AddDeviceProfileDialogComponent extends selectedIndex = 0; + showNext = true; + entityType = EntityType; deviceProfileTypes = Object.keys(DeviceProfileType); deviceProfileTypeTranslations = deviceProfileTypeTranslationMap; + deviceTransportTypeHints = deviceTransportTypeHintMap; + deviceTransportTypes = Object.keys(DeviceTransportType); deviceTransportTypeTranslations = deviceTransportTypeTranslationMap; @@ -150,25 +155,63 @@ export class AddDeviceProfileDialogComponent extends } } - private add(): void { - const deviceProfile: DeviceProfile = { - name: this.deviceProfileDetailsFormGroup.get('name').value, - type: this.deviceProfileDetailsFormGroup.get('type').value, - transportType: this.transportConfigFormGroup.get('transportType').value, - description: this.deviceProfileDetailsFormGroup.get('description').value, - profileData: { - configuration: createDeviceProfileConfiguration(DeviceProfileType.DEFAULT), - transportConfiguration: this.transportConfigFormGroup.get('transportConfiguration').value, - alarms: this.alarmRulesFormGroup.get('alarms').value + add(): void { + if (this.allValid()) { + const deviceProfile: DeviceProfile = { + name: this.deviceProfileDetailsFormGroup.get('name').value, + type: this.deviceProfileDetailsFormGroup.get('type').value, + transportType: this.transportConfigFormGroup.get('transportType').value, + description: this.deviceProfileDetailsFormGroup.get('description').value, + profileData: { + configuration: createDeviceProfileConfiguration(DeviceProfileType.DEFAULT), + transportConfiguration: this.transportConfigFormGroup.get('transportConfiguration').value, + alarms: this.alarmRulesFormGroup.get('alarms').value + } + }; + if (this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value) { + deviceProfile.defaultRuleChainId = new RuleChainId(this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value); } - }; - if (this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value) { - deviceProfile.defaultRuleChainId = new RuleChainId(this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value); + this.deviceProfileService.saveDeviceProfile(deviceProfile).subscribe( + (savedDeviceProfile) => { + this.dialogRef.close(savedDeviceProfile); + } + ); + } + } + + getFormLabel(index: number): string { + switch (index) { + case 0: + return 'device-profile.device-profile-details'; + case 1: + return 'device-profile.transport-configuration'; + case 2: + return 'device-profile.alarm-rules'; + } + } + + changeStep($event: StepperSelectionEvent): void { + this.selectedIndex = $event.selectedIndex; + if (this.selectedIndex === this.maxStepperIndex) { + this.showNext = false; + } else { + this.showNext = true; } - this.deviceProfileService.saveDeviceProfile(deviceProfile).subscribe( - (savedDeviceProfile) => { - this.dialogRef.close(savedDeviceProfile); + } + + private get maxStepperIndex(): number { + return this.addDeviceProfileStepper?._steps?.length - 1; + } + + allValid(): boolean { + return !this.addDeviceProfileStepper.steps.find((item, index) => { + if (item.stepControl.invalid) { + item.interacted = true; + this.addDeviceProfileStepper.selectedIndex = index; + return true; + } else { + return false; } - ); + }); } } diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html index 6886e19152..e1883256bb 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.html @@ -48,7 +48,7 @@
- device-profile.no-create-alarm-rules
@@ -57,7 +57,7 @@ (click)="addCreateAlarmRule()" matTooltip="{{ 'device-profile.add-create-alarm-rule' | translate }}" matTooltipPosition="above"> - add_circle_outline + add_circle_outline {{ 'device-profile.add-create-alarm-rule' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss index b823629076..eedaac2ca1 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/create-alarm-rules.component.scss @@ -16,7 +16,7 @@ :host { .create-alarm-rule { - border: 1px groove rgba(0, 0, 0, .25); + border: 2px groove rgba(0, 0, 0, .45); border-radius: 4px; padding: 8px; } @@ -28,4 +28,9 @@ width: 160px; } } + .button-icon{ + font-size: 20px; + width: 20px; + height: 20px; + } } diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html index d4a72da751..7d2ad8b75d 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.html @@ -18,24 +18,11 @@
- +
{{ alarmFormGroup.get('alarmType').value }}
- - {{'device-profile.alarm-type' | translate}} - - - {{ 'device-profile.alarm-type-required' | translate }} - - -
+
+ + + {{'device-profile.alarm-type' | translate}} + + + {{ 'device-profile.alarm-type-required' | translate }} + + + +
+ + + +
+
device-profile.advanced-settings
+
+ + + + {{ 'device-profile.propagate-alarm' | translate }} + +
+ + device-profile.alarm-rule-relation-types-list + + + {{key}} + close + + + + + +
+
device-profile.create-alarm-rules
@@ -68,7 +99,7 @@
- device-profile.no-clear-alarm-rule
- add_circle_outline + add_circle_outline {{ 'device-profile.add-clear-alarm-rule' | translate }}
- - - -
-
device-profile.advanced-settings
-
- - - - {{ 'device-profile.propagate-alarm' | translate }} - -
- - device-profile.alarm-rule-relation-types-list - - - {{key}} - close - - - - - -
- diff --git a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.scss b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.scss index 9180f507da..ab28ba6829 100644 --- a/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.scss +++ b/ui-ngx/src/app/modules/home/components/profile/alarm/device-profile-alarm.component.scss @@ -17,7 +17,7 @@ :host { display: block; .clear-alarm-rule { - border: 1px groove rgba(0, 0, 0, .25); + border: 2px groove rgba(0, 0, 0, .45); border-radius: 4px; padding: 8px; } @@ -28,13 +28,16 @@ .mat-expansion-panel-header { padding: 0 24px 0 8px; &.mat-expanded { - height: 80px; + height: 48px; } } } &.advanced-settings { border: none; padding: 0; + .mat-expansion-panel-header { + padding: 0 8px; + } } } } @@ -43,7 +46,7 @@ .mat-expansion-panel { &.device-profile-alarm { .mat-expansion-panel-body { - padding: 0 8px; + padding: 0 8px 8px; } } &.advanced-settings { @@ -51,5 +54,10 @@ padding: 0; } } + .button-icon{ + font-size: 20px; + width: 20px; + height: 20px; + } } } diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html index 9a79af3202..437fc21c86 100644 --- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html +++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html @@ -25,6 +25,9 @@ {{deviceTransportTypeTranslations.get(type) | translate}} + + {{deviceTransportTypeHints.get(detailsForm.get('transportType').value) | translate}} + {{ 'device-profile.transport-type-required' | translate }} diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts index 6410e06950..cba34b4987 100644 --- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts +++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.ts @@ -18,7 +18,12 @@ import { Component } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { EntityTabsComponent } from '../../components/entity/entity-tabs.component'; -import { DeviceProfile, DeviceTransportType, deviceTransportTypeTranslationMap } from '@shared/models/device.models'; +import { + DeviceProfile, + DeviceTransportType, + deviceTransportTypeHintMap, + deviceTransportTypeTranslationMap +} from '@shared/models/device.models'; @Component({ selector: 'tb-device-profile-tabs', @@ -28,8 +33,11 @@ import { DeviceProfile, DeviceTransportType, deviceTransportTypeTranslationMap } export class DeviceProfileTabsComponent extends EntityTabsComponent { deviceTransportTypes = Object.keys(DeviceTransportType); + deviceTransportTypeTranslations = deviceTransportTypeTranslationMap; + deviceTransportTypeHints = deviceTransportTypeHintMap; + constructor(protected store: Store) { super(store); } From 06c3fb8eabf397e808b81f2d5e0dc478513a564f Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Mon, 12 Oct 2020 09:45:34 +0300 Subject: [PATCH 4/4] UI: Refactoring device profile --- ui-ngx/src/app/core/utils.ts | 16 ++++++++++++++++ .../home/components/entity/entity.component.ts | 17 ++--------------- .../add-device-profile-dialog.component.ts | 3 ++- .../profile/device-profile-data.component.html | 0 .../profile/device-profile.component.ts | 2 +- ui-ngx/src/app/shared/models/device.models.ts | 2 +- 6 files changed, 22 insertions(+), 18 deletions(-) delete mode 100644 ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.html diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 9834405eda..c0a01f3bec 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -387,3 +387,19 @@ export function sortObjectKeys(obj: T): T { return acc; }, {} as T); } + +export function deepTrim(obj: T): T { + if (isNumber(obj) || isUndefined(obj) || isString(obj) || obj === null) { + return obj; + } + return Object.keys(obj).reduce((acc, curr) => { + if (isString(obj[curr])) { + acc[curr] = obj[curr].trim(); + } else if (isObject(obj[curr])) { + acc[curr] = deepTrim(obj[curr]); + } else { + acc[curr] = obj[curr]; + } + return acc; + }, (Array.isArray(obj) ? [] : {}) as T); +} diff --git a/ui-ngx/src/app/modules/home/components/entity/entity.component.ts b/ui-ngx/src/app/modules/home/components/entity/entity.component.ts index 6d3c7e1453..6a76f1e062 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entity.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entity.component.ts @@ -23,7 +23,7 @@ import { AppState } from '@core/core.state'; import { EntityAction } from '@home/models/entity/entity-component.models'; import { EntityTableConfig } from '@home/models/entity/entities-table-config.models'; import { PageLink } from '@shared/models/page/page-link'; -import { isObject, isString } from '@core/utils'; +import { deepTrim } from '@core/utils'; // @dynamic @Directive() @@ -115,20 +115,7 @@ export abstract class EntityComponent, } prepareFormValue(formValue: any): any { - return this.deepTrim(formValue); - } - - private deepTrim(obj: object): object { - return Object.keys(obj).reduce((acc, curr) => { - if (isString(obj[curr])) { - acc[curr] = obj[curr].trim(); - } else if (isObject(obj[curr])) { - acc[curr] = this.deepTrim(obj[curr]); - } else { - acc[curr] = obj[curr]; - } - return acc; - }, Array.isArray(obj) ? [] : {}); + return deepTrim(formValue); } protected setEntitiesTableConfig(entitiesTableConfig: C) { diff --git a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts index 2ca077089a..031e7b2a3b 100644 --- a/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/add-device-profile-dialog.component.ts @@ -44,6 +44,7 @@ import { EntityType } from '@shared/models/entity-type.models'; import { MatHorizontalStepper } from '@angular/material/stepper'; import { RuleChainId } from '@shared/models/id/rule-chain-id'; import { StepperSelectionEvent } from '@angular/cdk/stepper'; +import { deepTrim } from '@core/utils'; export interface AddDeviceProfileDialogData { deviceProfileName: string; @@ -171,7 +172,7 @@ export class AddDeviceProfileDialogComponent extends if (this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value) { deviceProfile.defaultRuleChainId = new RuleChainId(this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value); } - this.deviceProfileService.saveDeviceProfile(deviceProfile).subscribe( + this.deviceProfileService.saveDeviceProfile(deepTrim(deviceProfile)).subscribe( (savedDeviceProfile) => { this.dialogRef.close(savedDeviceProfile); } diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-data.component.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts index d7bd195171..34c8c7d74c 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device-profile.component.ts @@ -142,7 +142,7 @@ export class DeviceProfileComponent extends EntityComponent { if (formValue.defaultRuleChainId) { formValue.defaultRuleChainId = new RuleChainId(formValue.defaultRuleChainId); } - return formValue; + return super.prepareFormValue(formValue); } onDeviceProfileIdCopied(event) { diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts index 6adfdefc02..f584eebccc 100644 --- a/ui-ngx/src/app/shared/models/device.models.ts +++ b/ui-ngx/src/app/shared/models/device.models.ts @@ -76,7 +76,7 @@ export const deviceTransportTypeHintMap = new Map( [ [DeviceTransportType.DEFAULT, 'device-profile.transport-type-default-hint'], [DeviceTransportType.MQTT, 'device-profile.transport-type-mqtt-hint'], - [DeviceTransportType.LWM2M, 'device-profile.transport-type-lwm2m-hint'] + // [DeviceTransportType.LWM2M, 'device-profile.transport-type-lwm2m-hint'] ] );