Browse Source

UI: Improved view and text general settings - device connectivty

pull/9457/head
Vladyslav_Prykhodko 3 years ago
parent
commit
1ba3465dac
  1. 119
      ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
  2. 17
      ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
  3. 95
      ui-ngx/src/app/modules/home/pages/admin/general-settings.component.ts
  4. 16
      ui-ngx/src/assets/locale/locale.constant-en_US.json

119
ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html

@ -27,8 +27,8 @@
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content>
<form [formGroup]="generalSettings" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async" class="margin-bottom">
<form [formGroup]="generalSettings" (ngSubmit)="save()" class="tb-form-panel no-border no-padding">
<fieldset [disabled]="isLoading$ | async">
<mat-form-field class="mat-block">
<mat-label translate>admin.base-url</mat-label>
<input matInput formControlName="baseUrl" required/>
@ -37,7 +37,7 @@
</mat-error>
</mat-form-field>
<div class="tb-form-row" tb-hint-tooltip-icon="{{ 'admin.prohibit-different-url-hint' | translate }}">
<mat-slide-toggle class="mat-slide" formControlName="prohibitDifferentUrl">
<mat-slide-toggle class="mat-slide margin" formControlName="prohibitDifferentUrl">
{{ 'admin.prohibit-different-url' | translate }}
</mat-slide-toggle>
</div>
@ -58,67 +58,72 @@
<mat-card appearance="outlined" class="settings-card">
<mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.device-connectivity.device-connectivity</span>
<div class="mat-headline-5" translate>admin.device-connectivity.device-connectivity</div>
</mat-card-title>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px">
<tb-toggle-select class="toggle-group margin-bottom" appearance="fill" selectMediaBreakpoint="xs" [(ngModel)]="protocol">
<tb-toggle-option value="http">{{ "admin.device-connectivity.http-https" | translate }}</tb-toggle-option>
<tb-toggle-option value="mqtt">{{ 'admin.device-connectivity.mqtt-mqtts' | translate }}</tb-toggle-option>
<tb-toggle-option value="coap">{{ 'admin.device-connectivity.coap-coaps' | translate }}</tb-toggle-option>
</tb-toggle-select>
<div class="tb-form-hint tb-primary-fill margin-bottom">{{ 'admin.device-connectivity.hint' | translate }}</div>
<form [formGroup]="deviceConnectivitySettingsForm" (ngSubmit)="saveDeviceConnectivitySettings()">
<ng-container *ngIf="protocol === 'http'">
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
</ng-container>
<ng-container *ngIf="protocol === 'mqtt'">
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
</ng-container>
<ng-container *ngIf="protocol === 'coap'">
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
</ng-container>
<ng-template #connectivitySettings let-protocol="protocol">
<div class="tb-form-panel stroked margin-bottom" [formGroupName]="protocol">
<mat-slide-toggle class="mat-slide" formControlName="enabled">
{{ 'admin.device-connectivity.' + protocol | translate }}
</mat-slide-toggle>
<div class="tb-form-row column-xs no-border no-padding tb-standard-fields">
<mat-form-field fxFlex>
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label translate>admin.device-connectivity.port</mat-label>
<input matInput type="number" min="0" max="65535" formControlName="port"/>
<mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
{{ 'admin.device-connectivity.port-pattern' | translate }}
</mat-error>
<mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('min') ||
<mat-card-content>
<section class="tb-form-panel no-border no-padding">
<div class="tb-form-panel no-border no-padding toggle-group">
<tb-toggle-select appearance="fill" [(ngModel)]="protocol">
<tb-toggle-option value="http">{{ "admin.device-connectivity.http-s" | translate }}</tb-toggle-option>
<tb-toggle-option value="mqtt">{{ 'admin.device-connectivity.mqtt-s' | translate }}</tb-toggle-option>
<tb-toggle-option value="coap">{{ 'admin.device-connectivity.coap-s' | translate }}</tb-toggle-option>
</tb-toggle-select>
<div class="tb-form-hint tb-primary-fill">{{ 'admin.device-connectivity.hint' | translate }}</div>
</div>
<form [formGroup]="deviceConnectivitySettingsForm" (ngSubmit)="saveDeviceConnectivitySettings()"
class="tb-form-panel no-border no-padding">
<ng-container *ngIf="protocol === 'http'">
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
</ng-container>
<ng-container *ngIf="protocol === 'mqtt'">
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
</ng-container>
<ng-container *ngIf="protocol === 'coap'">
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
</ng-container>
<ng-template #connectivitySettings let-protocol="protocol">
<div class="tb-form-panel stroked no-padding-bottom" [formGroupName]="protocol">
<mat-slide-toggle class="mat-slide" formControlName="enabled">
{{ 'admin.device-connectivity.' + protocol | translate }}
</mat-slide-toggle>
<div class="tb-form-row column-xs no-border no-padding tb-standard-fields">
<mat-form-field fxFlex>
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field fxFlex>
<mat-label translate>admin.device-connectivity.port</mat-label>
<input matInput type="number" min="0" max="65535" formControlName="port"/>
<mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
{{ 'admin.device-connectivity.port-pattern' | translate }}
</mat-error>
<mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('min') ||
deviceConnectivitySettingsForm.get(protocol + '.port').hasError('max')">
{{ 'admin.device-connectivity.port-range' | translate }}
</mat-error>
</mat-form-field>
{{ 'admin.device-connectivity.port-range' | translate }}
</mat-error>
</mat-form-field>
</div>
</div>
</ng-template>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
<button mat-button color="primary"
[disabled]="deviceConnectivitySettingsForm.pristine"
(click)="discardDeviceConnectivitySettings()"
type="button">{{'action.undo' | translate}}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || deviceConnectivitySettingsForm.invalid || !deviceConnectivitySettingsForm.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
</ng-template>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
<button mat-button color="primary"
[disabled]="deviceConnectivitySettingsForm.pristine"
(click)="discardDeviceConnectivitySettings()"
type="button">{{'action.undo' | translate}}
</button>
<button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || deviceConnectivitySettingsForm.invalid || !deviceConnectivitySettingsForm.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
</form>
</form>
</section>
</mat-card-content>
</mat-card>

17
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;
}
}
}
}

95
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>;
generalSettings: FormGroup;
deviceConnectivitySettingsForm: FormGroup;
protocol: DeviceConnectivityProtocol = 'http';
deviceConnectivitySettingsForm: UntypedFormGroup;
private adminSettings: AdminSettings<GeneralSettings>;
private deviceConnectivitySettings: AdminSettings<DeviceConnectivitySettings>;
protocol: DeviceConnectivityProtocol = 'http';
private readonly destroy$ = new Subject<void>();
constructor(protected store: Store<AppState>,
private router: Router,
private adminService: AdminService,
public fb: UntypedFormBuilder) {
public fb: FormBuilder) {
super(store);
this.buildGeneralServerSettingsForm();
this.adminService.getAdminSettings<GeneralSettings>('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<DeviceConnectivitySettings>(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;
}

16
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.",

Loading…
Cancel
Save