From 1ba3465dac75828aa9052ec54ebc3e4ff5639a57 Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Tue, 31 Oct 2023 18:16:34 +0200 Subject: [PATCH] UI: Improved view and text general settings - device connectivty --- .../admin/general-settings.component.html | 119 +++++++++--------- .../admin/general-settings.component.scss | 17 ++- .../pages/admin/general-settings.component.ts | 95 +++++++------- .../assets/locale/locale.constant-en_US.json | 16 +-- 4 files changed, 135 insertions(+), 112 deletions(-) diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html index 3fbcdff24e..7522266237 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html +++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html @@ -27,8 +27,8 @@
-
-
+ +
admin.base-url @@ -37,7 +37,7 @@
- + {{ 'admin.prohibit-different-url' | translate }}
@@ -58,67 +58,72 @@ - admin.device-connectivity.device-connectivity +
admin.device-connectivity.device-connectivity
- - - {{ "admin.device-connectivity.http-https" | translate }} - {{ 'admin.device-connectivity.mqtt-mqtts' | translate }} - {{ 'admin.device-connectivity.coap-coaps' | translate }} - -
{{ 'admin.device-connectivity.hint' | translate }}
- - - - - - - - - - - - - - -
- - {{ 'admin.device-connectivity.' + protocol | translate }} - -
- - admin.device-connectivity.host - - - - admin.device-connectivity.port - - - {{ 'admin.device-connectivity.port-pattern' | translate }} - - +
+ + {{ "admin.device-connectivity.http-s" | translate }} + {{ 'admin.device-connectivity.mqtt-s' | translate }} + {{ 'admin.device-connectivity.coap-s' | translate }} + +
{{ 'admin.device-connectivity.hint' | translate }}
+
+ + + + + + + + + + + + + + +
+ + {{ 'admin.device-connectivity.' + protocol | translate }} + +
+ + admin.device-connectivity.host + + + + admin.device-connectivity.port + + + {{ 'admin.device-connectivity.port-pattern' | translate }} + + - {{ 'admin.device-connectivity.port-range' | translate }} - - + {{ 'admin.device-connectivity.port-range' | translate }} + + +
+ +
+ +
- -
- - -
- + + diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss index f557735eb6..80dcf76da8 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss +++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss @@ -13,13 +13,24 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import "../../../../../scss/constants"; + :host { .settings-card { .toggle-group { - display: block; + max-width: 670px; + width: 100%; + margin: 0 auto; + + .tb-form-hint { + text-align: center; + } } - .margin-bottom { - margin-bottom: 12px; + + @media #{$mat-xs} { + .tb-form-row { + gap: 0; + } } } } diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts index d0ec896374..f96e34f449 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts +++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts @@ -14,12 +14,11 @@ /// limitations under the License. /// -import { Component } from '@angular/core'; +import { Component, OnDestroy } from '@angular/core'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { PageComponent } from '@shared/components/page.component'; -import { Router } from '@angular/router'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AdminSettings, DeviceConnectivityProtocol, @@ -28,26 +27,29 @@ import { } from '@shared/models/settings.models'; import { AdminService } from '@core/http/admin.service'; import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; @Component({ selector: 'tb-general-settings', templateUrl: './general-settings.component.html', styleUrls: ['./general-settings.component.scss', './settings-card.scss'] }) -export class GeneralSettingsComponent extends PageComponent implements HasConfirmForm { +export class GeneralSettingsComponent extends PageComponent implements HasConfirmForm, OnDestroy { - generalSettings: UntypedFormGroup; - private adminSettings: AdminSettings; + generalSettings: FormGroup; + deviceConnectivitySettingsForm: FormGroup; + + protocol: DeviceConnectivityProtocol = 'http'; - deviceConnectivitySettingsForm: UntypedFormGroup; + private adminSettings: AdminSettings; private deviceConnectivitySettings: AdminSettings; - protocol: DeviceConnectivityProtocol = 'http'; + private readonly destroy$ = new Subject(); constructor(protected store: Store, - private router: Router, private adminService: AdminService, - public fb: UntypedFormBuilder) { + public fb: FormBuilder) { super(store); this.buildGeneralServerSettingsForm(); this.adminService.getAdminSettings('general') @@ -57,46 +59,48 @@ export class GeneralSettingsComponent extends PageComponent implements HasConfir .subscribe(deviceConnectivitySettings => this.processDeviceConnectivitySettings(deviceConnectivitySettings)); } - buildGeneralServerSettingsForm() { + ngOnDestroy() { + super.ngOnDestroy(); + this.destroy$.next(); + this.destroy$.complete(); + } + + private buildGeneralServerSettingsForm() { this.generalSettings = this.fb.group({ baseUrl: ['', [Validators.required]], prohibitDifferentUrl: ['',[]] }); } - buildDeviceConnectivitySettingsForm() { + private buildDeviceConnectivitySettingsForm() { this.deviceConnectivitySettingsForm = this.fb.group({ - http: this.fb.group({ - enabled: [false, []], - host: ['', []], - port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]] - }), - https: this.fb.group({ - enabled: [false, []], - host: ['', []], - port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]] - }), - mqtt: this.fb.group({ - enabled: [false, []], - host: ['', []], - port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]] - }), - mqtts: this.fb.group({ - enabled: [false, []], - host: ['', []], - port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]] - }), - coap: this.fb.group({ - enabled: [false, []], - host: ['', []], - port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]] - }), - coaps: this.fb.group({ - enabled: [false, []], - host: ['', []], - port: [null, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]] - }), + http: this.buildDeviceConnectivityInfoForm(), + https: this.buildDeviceConnectivityInfoForm(), + mqtt: this.buildDeviceConnectivityInfoForm(), + mqtts: this.buildDeviceConnectivityInfoForm(), + coap: this.buildDeviceConnectivityInfoForm(), + coaps: this.buildDeviceConnectivityInfoForm() + }); + } + + private buildDeviceConnectivityInfoForm(): FormGroup { + const formGroup = this.fb.group({ + enabled: [false, []], + host: [{value: '', disabled: true}], + port: [{value: null, disabled: true}, [Validators.min(1), Validators.max(65535), Validators.pattern('[0-9]*')]] + }); + formGroup.get('enabled').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe(value => { + if (value) { + formGroup.get('host').enable({emitEvent: false}); + formGroup.get('port').enable({emitEvent: false}); + } else { + formGroup.get('host').disable({emitEvent: false}); + formGroup.get('port').disable({emitEvent: false}); + } }); + return formGroup; } save(): void { @@ -106,7 +110,10 @@ export class GeneralSettingsComponent extends PageComponent implements HasConfir } saveDeviceConnectivitySettings(): void { - this.deviceConnectivitySettings.jsonValue = {...this.deviceConnectivitySettings.jsonValue, ...this.deviceConnectivitySettingsForm.value}; + this.deviceConnectivitySettings.jsonValue = { + ...this.deviceConnectivitySettings.jsonValue, + ...this.deviceConnectivitySettingsForm.value + }; this.adminService.saveAdminSettings(this.deviceConnectivitySettings) .subscribe(deviceConnectivitySettings => this.processDeviceConnectivitySettings(deviceConnectivitySettings)); } @@ -129,7 +136,7 @@ export class GeneralSettingsComponent extends PageComponent implements HasConfir this.deviceConnectivitySettingsForm.reset(this.deviceConnectivitySettings.jsonValue); } - confirmForm(): UntypedFormGroup { + confirmForm(): FormGroup { return this.generalSettings.dirty ? this.generalSettings : this.deviceConnectivitySettingsForm; } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index eb797fbf58..1e80914f5f 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -107,16 +107,16 @@ "prohibit-different-url-hint": "This setting should be enabled for production environments. May cause security issues when disabled", "device-connectivity": { "device-connectivity": "Device connectivity", - "http-https": "HTTP/HTTPS", - "mqtt-mqtts": "MQTT/MQTTS", - "coap-coaps": "COAP/COAPS", - "http": "HTPP", - "https": "HTTPS", + "http-s": "HTTP(s)", + "mqtt-s": "MQTT(s)", + "coap-s": "COAP(s)", + "http": "HTTP", + "https": "HTTPs", "mqtt": "MQTT", - "mqtts": "MQTTS", + "mqtts": "MQTTs", "coap": "COAP", - "coaps": "COAPS", - "hint": "If host or port fields are empty will be used default protocol value.", + "coaps": "COAPs", + "hint": "If host or port fields are empty, default protocol value will be used.", "host": "Host", "port": "Port", "port-pattern": "Port must be a positive integer.",