dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: device connectivity settings template refactor

Browse Source
This commit is contained in:
rusikv 2023-10-25 16:28:25 +03:00
parent 4cdd5ce6d4
commit 673d28fe92
2 changed files with 40 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
View File

@ -28,7 +28,7 @@
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content> <mat-card-content>
<form [formGroup]="generalSettings" (ngSubmit)="save()"> <form [formGroup]="generalSettings" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async" style="margin-bottom: 10px"> <fieldset [disabled]="isLoading$ | async" class="margin-bottom">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>admin.base-url</mat-label> <mat-label translate>admin.base-url</mat-label>
<input matInput formControlName="baseUrl" required/> <input matInput formControlName="baseUrl" required/>
@ -65,145 +65,49 @@
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px"> <mat-card-content style="padding-top: 16px">
<tb-toggle-select class="toggle-group" appearance="fill" selectMediaBreakpoint="xs" [(ngModel)]="protocol"> <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="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="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-option value="coap">{{ 'admin.device-connectivity.coap-coaps' | translate }}</tb-toggle-option>
</tb-toggle-select> </tb-toggle-select>
<mat-hint class="tb-form-hint tb-primary-fill hint">{{ 'admin.device-connectivity.hint' | translate }}</mat-hint> <div class="tb-form-hint tb-primary-fill margin-bottom">{{ 'admin.device-connectivity.hint' | translate }}</div>
<form [formGroup]="deviceConnectivitySettingsForm" (ngSubmit)="saveDeviceConnectivitySettings()"> <form [formGroup]="deviceConnectivitySettingsForm" (ngSubmit)="saveDeviceConnectivitySettings()">
<fieldset *ngIf="protocol === 'http'" [disabled]="isLoading$ | async" formGroupName="http" class="fields-group"> <ng-container *ngIf="protocol === 'http'">
<mat-slide-toggle class="slide" formControlName="enabled"> <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
{{ 'admin.device-connectivity.http' | translate }} <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
</mat-slide-toggle> </ng-container>
<div class="fields-row"> <ng-container *ngIf="protocol === 'mqtt'">
<mat-form-field class="mat-block" fxFlex> <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<mat-label translate>admin.device-connectivity.host</mat-label> <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
<input matInput formControlName="host"/> </ng-container>
</mat-form-field> <ng-container *ngIf="protocol === 'coap'">
<mat-form-field class="mat-block" fxFlex> <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol}"></ng-container>
<mat-label translate>admin.device-connectivity.port</mat-label> <ng-container *ngTemplateOutlet="connectivitySettings; context:{protocol: protocol + 's'}"></ng-container>
<input matInput type="number" min="0" max="65535" formControlName="port"/> </ng-container>
<mat-error *ngIf="deviceConnectivitySettingsForm.get('http.port').hasError('pattern')"> <ng-template #connectivitySettings let-protocol="protocol">
{{ 'admin.device-connectivity.port-pattern' | translate }} <div class="tb-form-panel stroked margin-bottom" [formGroupName]="protocol">
</mat-error> <mat-slide-toggle class="mat-slide" formControlName="enabled">
<mat-error *ngIf="deviceConnectivitySettingsForm.get('http.port').hasError('min') || {{ 'admin.device-connectivity.' + protocol | translate }}
deviceConnectivitySettingsForm.get('http.port').hasError('max')"> </mat-slide-toggle>
{{ 'admin.device-connectivity.port-range' | translate }} <div class="tb-form-row no-border no-padding tb-standard-fields">
</mat-error> <mat-form-field fxFlex>
</mat-form-field> <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>
</div>
</div> </div>
</fieldset> </ng-template>
<fieldset *ngIf="protocol === 'http'" [disabled]="isLoading$ | async" formGroupName="https" class="fields-group">
<mat-slide-toggle class="slide" formControlName="enabled">
{{ 'admin.device-connectivity.https' | translate }}
</mat-slide-toggle>
<div class="fields-row">
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field class="mat-block" 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('https.port').hasError('pattern')">
{{ 'admin.device-connectivity.port-pattern' | translate }}
</mat-error>
<mat-error *ngIf="deviceConnectivitySettingsForm.get('https.port').hasError('min') ||
deviceConnectivitySettingsForm.get('https.port').hasError('max')">
{{ 'admin.device-connectivity.port-range' | translate }}
</mat-error>
</mat-form-field>
</div>
</fieldset>
<fieldset *ngIf="protocol === 'mqtt'" [disabled]="isLoading$ | async" formGroupName="mqtt" class="fields-group">
<mat-slide-toggle class="slide" formControlName="enabled">
{{ 'admin.device-connectivity.mqtt' | translate }}
</mat-slide-toggle>
<div class="fields-row">
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field class="mat-block" 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('mqtt.port').hasError('pattern')">
{{ 'admin.device-connectivity.port-pattern' | translate }}
</mat-error>
<mat-error *ngIf="deviceConnectivitySettingsForm.get('mqtt.port').hasError('min') ||
deviceConnectivitySettingsForm.get('mqtt.port').hasError('max')">
{{ 'admin.device-connectivity.port-range' | translate }}
</mat-error>
</mat-form-field>
</div>
</fieldset>
<fieldset *ngIf="protocol === 'mqtt'" [disabled]="isLoading$ | async" formGroupName="mqtts" class="fields-group">
<mat-slide-toggle class="slide" formControlName="enabled">
{{ 'admin.device-connectivity.mqtts' | translate }}
</mat-slide-toggle>
<div class="fields-row">
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field class="mat-block" 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('mqtts.port').hasError('pattern')">
{{ 'admin.device-connectivity.port-pattern' | translate }}
</mat-error>
<mat-error *ngIf="deviceConnectivitySettingsForm.get('mqtts.port').hasError('min') ||
deviceConnectivitySettingsForm.get('mqtts.port').hasError('max')">
{{ 'admin.device-connectivity.port-range' | translate }}
</mat-error>
</mat-form-field>
</div>
</fieldset>
<fieldset *ngIf="protocol === 'coap'" [disabled]="isLoading$ | async" formGroupName="coap" class="fields-group">
<mat-slide-toggle class="slide" formControlName="enabled">
{{ 'admin.device-connectivity.coap' | translate }}
</mat-slide-toggle>
<div class="fields-row">
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field class="mat-block" 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('coap.port').hasError('pattern')">
{{ 'admin.device-connectivity.port-pattern' | translate }}
</mat-error>
<mat-error *ngIf="deviceConnectivitySettingsForm.get('coap.port').hasError('min') ||
deviceConnectivitySettingsForm.get('coap.port').hasError('max')">
{{ 'admin.device-connectivity.port-range' | translate }}
</mat-error>
</mat-form-field>
</div>
</fieldset>
<fieldset *ngIf="protocol === 'coap'" [disabled]="isLoading$ | async" formGroupName="coaps" class="fields-group">
<mat-slide-toggle class="slide" formControlName="enabled">
{{ 'admin.device-connectivity.coaps' | translate }}
</mat-slide-toggle>
<div class="fields-row">
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>admin.device-connectivity.host</mat-label>
<input matInput formControlName="host"/>
</mat-form-field>
<mat-form-field class="mat-block" 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('coaps.port').hasError('pattern')">
{{ 'admin.device-connectivity.port-pattern' | translate }}
</mat-error>
<mat-error *ngIf="deviceConnectivitySettingsForm.get('coaps.port').hasError('min') ||
deviceConnectivitySettingsForm.get('coaps.port').hasError('max')">
{{ 'admin.device-connectivity.port-range' | translate }}
</mat-error>
</mat-form-field>
</div>
</fieldset>
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap"> <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
<button mat-button color="primary" <button mat-button color="primary"
[disabled]="deviceConnectivitySettingsForm.pristine" [disabled]="deviceConnectivitySettingsForm.pristine"

22
ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss
View File

@ -17,27 +17,9 @@
.settings-card { .settings-card {
.toggle-group { .toggle-group {
display: block; display: block;
}
.margin-bottom {
margin-bottom: 12px; margin-bottom: 12px;
} }
.hint {
display: block;
}
.fields-group {
.slide {
padding: 16px 0;
}
.fields-row {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 12px;
}
}
}
}
:host ::ng-deep {
.mat-checkbox-layout {
white-space: normal;
} }
} }