tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: device connectivity settings template refactor

pull/9483/head
rusikv 3 years ago
parent
4cdd5ce6d4
commit
673d28fe92
2 changed files with 40 additions and 154 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 172
      ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
  2. 22
      ui-ngx/src/app/modules/home/pages/admin/general-settings.component.scss

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>
</div> <input matInput formControlName="host"/>
</fieldset> </mat-form-field>
<fieldset *ngIf="protocol === 'http'" [disabled]="isLoading$ | async" formGroupName="https" class="fields-group"> <mat-form-field fxFlex>
<mat-slide-toggle class="slide" formControlName="enabled"> <mat-label translate>admin.device-connectivity.port</mat-label>
{{ 'admin.device-connectivity.https' | translate }} <input matInput type="number" min="0" max="65535" formControlName="port"/>
</mat-slide-toggle> <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
<div class="fields-row"> {{ 'admin.device-connectivity.port-pattern' | translate }}
<mat-form-field class="mat-block" fxFlex> </mat-error>
<mat-label translate>admin.device-connectivity.host</mat-label> <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('min') ||
<input matInput formControlName="host"/> deviceConnectivitySettingsForm.get(protocol + '.port').hasError('max')">
</mat-form-field> {{ 'admin.device-connectivity.port-range' | translate }}
<mat-form-field class="mat-block" fxFlex> </mat-error>
<mat-label translate>admin.device-connectivity.port</mat-label> </mat-form-field>
<input matInput type="number" min="0" max="65535" formControlName="port"/> </div>
<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> </div>
</fieldset> </ng-template>
<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: 12px;
}
.hint {
display: block;
} }
.fields-group { .margin-bottom {
.slide { margin-bottom: 12px;
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;
}
}

Write Preview
Loading…
Cancel
Save