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

reuse of existing components

Browse Source
This commit is contained in:
Maksym Dudnik 2023-07-16 16:08:18 +03:00
parent 7912871849
commit e1f18f16af
7 changed files with 593 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
application/src/main/data/json/demo/dashboards/gateway_list.json
View File

@ -1907,7 +1907,7 @@
"dialogTitle": "Launch command",
"dialogHideDashboardToolbar": true,
"dialogWidth": null,
"dialogHeight": 35,
"dialogHeight": 40,
"openInSeparateDialog": true,
"openInPopover": false,
"id": "337c767b-3217-d3d3-b955-7b0bd0858a1d"
@ -5087,14 +5087,14 @@
"useMarkdownTextFunction": true,
"markdownTextFunction": "return `<div class=\"action-container\">\n<tb-gateway-command deviceId=\"${data[0].entityId}\"></tb-gateway-command>\n </div>`;",
"applyDefaultMarkdownStyle": false,
"markdownCss": ".action-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex-direction: row;\r\n height: 100%;\r\n width: 100%;\r\n align-content: center;\r\n}\r\n\r\nbutton {\r\n flex-grow: 1;\r\n margin: 10px;\r\n min-width: 150px;\r\n height: auto;\r\n}"
"markdownCss": ".action-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex-direction: row;\r\n height: 100%;\r\n width: 100%;\r\n}\r\n\r\nbutton {\r\n flex-grow: 1;\r\n margin: 10px;\r\n min-width: 150px;\r\n height: auto;\r\n}"
},
"title": "New Markdown/HTML Card",
"showTitleIcon": false,
"iconColor": "rgba(0, 0, 0, 0.87)",
"iconSize": "24px",
"titleTooltip": "",
"dropShadow": true,
"dropShadow": false,
"enableFullscreen": false,
"widgetStyle": {},
"titleStyle": {

84
ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
View File

@ -17,39 +17,57 @@
-->
<div mat-dialog-content tb-toast fxLayout="column" toastTarget="dockerCommandDialogContent">
<span style="padding-bottom: 15px;">{{ 'gateway.docker-label' | translate }}</span>
<div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0">
<mat-button-toggle-group [formControl]="selectedOSCControl" aria-label="Favorite Color" style="width: max-content; flex-grow: 0">
<mat-button-toggle [value]="osTypes.windows"><span translate>gateway.windows </span></mat-button-toggle>
<mat-button-toggle [value]="osTypes.linux"><span translate>gateway.linux-macos </span></mat-button-toggle>
</mat-button-toggle-group>
<div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0; align-items: center">
<tb-toggle-select [formControl]="selectedOSCControl" appearance="stroked" style="width: max-content; flex-grow: 0">
<tb-toggle-option [value]="osTypes.windows"><span>Windows </span></tb-toggle-option>
<tb-toggle-option [value]="osTypes.linux"><span>Linux/MacOS </span></tb-toggle-option>
</tb-toggle-select>
<div class="tb-help" [tb-help]="helpLink"></div>
</div>
<div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value !== osTypes.windows">
<div fxLayout="row" fxLayoutAlign="start center">
<pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>
<button mat-icon-button
color="primary"
ngxClipboard
cbContent="{{ linuxCode }}"
(cbOnSuccess)="onDockerCodeCopied()"
matTooltip="{{ 'gateway.copy-command' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
</button>
</div>
</div>
<div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value === osTypes.windows">
<div fxLayout="row" fxLayoutAlign="start center">
<pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre>
<button mat-icon-button
color="primary"
ngxClipboard
cbContent="{{ windowsCode }}"
(cbOnSuccess)="onDockerCodeCopied()"
matTooltip="{{ 'gateway.copy-command' | translate }}"
matTooltipPosition="above">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
</button>
</div>
</div>
<ng-container [ngSwitch]="selectedOSCControl.value">
<ng-template [ngSwitchCase]="osTypes.windows">
<tb-markdown usePlainMarkdown containerClass="start-code" data="
```bash
{{windowsCode}}
{:copy-code}
```
"></tb-markdown>
</ng-template>
<ng-template [ngSwitchCase]="osTypes.linux">
<tb-markdown usePlainMarkdown containerClass="start-code" data="
```bash
{{linuxCode}}
{:copy-code}
```
"></tb-markdown>
</ng-template>
</ng-container>
<!-- <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value !== osTypes.windows">-->
<!-- <div fxLayout="row" fxLayoutAlign="start center">-->
<!-- <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>-->
<!-- <button mat-icon-button-->
<!-- color="primary"-->
<!-- ngxClipboard-->
<!-- cbContent="{{ linuxCode }}"-->
<!-- (cbOnSuccess)="onDockerCodeCopied()"-->
<!-- matTooltip="{{ 'gateway.copy-command' | translate }}"-->
<!-- matTooltipPosition="above">-->
<!-- <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value === osTypes.windows">-->
<!-- <div fxLayout="row" fxLayoutAlign="start center">-->
<!-- <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre>-->
<!-- <button mat-icon-button-->
<!-- color="primary"-->
<!-- ngxClipboard-->
<!-- cbContent="{{ windowsCode }}"-->
<!-- (cbOnSuccess)="onDockerCodeCopied()"-->
<!-- matTooltip="{{ 'gateway.copy-command' | translate }}"-->
<!-- matTooltipPosition="above">-->
<!-- <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
</div>

95
ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.scss Normal file
View File

@ -0,0 +1,95 @@
/**
* Copyright © 2016-2023 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.
*/
:host {
width: 100%;
height: 100%;
display: block;
::ng-deep.tb-markdown-view {
.start-code {
.code-wrapper {
padding: 0;
pre[class*=language-] {
margin: 0;
padding: 9px 38px 9px 16px;
background: rgba(0, 0, 0, 0.03);
border-radius: 6px;
border: none;
}
code[class*="language-"], pre[class*="language-"] {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.25px;
color: rgba(0, 0, 0, 0.38);
overflow: hidden;
white-space: break-spaces;
word-break: break-all;
& * {
color: rgba(0, 0, 0, 0.38);
cursor: inherit;
background: transparent;
}
}
button.clipboard-btn {
right: 0;
height: 34px;
p, div {
background: transparent;
}
p {
margin: 0;
padding: 7px;
color: #305680;
}
div {
top: 0;
padding: 8px;
height: 34px;
width: 34px;
img {
display: none;
}
&:after {
content: "";
position: initial;
display: block;
width: 18px;
height: 18px;
background: #305680;
-webkit-mask-image: url(/assets/copy-code-icon.svg);
-webkit-mask-repeat: no-repeat;
mask-image: url(/assets/copy-code-icon.svg);
mask-repeat: no-repeat;
}
}
}
}
}
}
}

2
ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts
View File

@ -33,7 +33,7 @@ enum OsType {
@Component({
selector: 'tb-gateway-command',
templateUrl: './device-gateway-command.component.html',
styleUrls: []
styleUrls: ['./device-gateway-command.component.scss']
})
export class DeviceGatewayCommandComponent implements OnInit {

299
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
View File

@ -29,24 +29,23 @@
<mat-tab-group style="max-height: calc(100% - 117px); flex-grow: 1">
<mat-tab label="{{'gateway.thingsboard-general' | translate}}">
<div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi>
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div style="padding-top: 20px" class="tb-form-panel">
<div fxLayout="row wrap">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteConfiguration">
{{ 'gateway.remote-configuration' | translate }}
<mat-icon class="material-icons-outlined suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="material-icons-outlined suffix-icon slider-icon " aria-hidden="false" aria-label="help-icon"
style="cursor:pointer;"
matTooltip="{{'gateway.hints.remote-configuration' | translate }}">info
</mat-icon>
</mat-slide-toggle>
<mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteShell">
{{ 'gateway.remote-shell' | translate }}
<mat-icon class="material-icons-outlined suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="material-icons-outlined suffix-icon slider-icon " aria-hidden="false" aria-label="help-icon"
style="cursor:pointer;"
matTooltip="{{'gateway.hints.remote-shell' | translate }}">info
</mat-icon>
</mat-slide-toggle>
<mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.thingsboard-host</mat-label>
<input matInput formControlName="host"/>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon"
@ -57,7 +56,7 @@
{{ 'gateway.thingsboard-host-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.thingsboard-port</mat-label>
<input matInput formControlName="port" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('required')">
@ -72,25 +71,26 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('pattern')">
{{'gateway.thingsboard-port-pattern' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.port' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
</div>
</mat-expansion-panel>
<mat-expansion-panel expanded="true" disabled>
<mat-expansion-panel-header>
<mat-panel-title translate class="expansion-panel-header">security.security</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row wrap" formGroupName="security">
<mat-button-toggle-group class="security-toggle-group" formControlName="type" fxFlex="100">
<mat-button-toggle *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key">
{{ securityType.value | translate }}
</mat-button-toggle>
</mat-button-toggle-group>
<mat-form-field
</div>
<div class="tb-form-panel">
<div translate class="expansion-panel-header tb-form-panel-title tb-form-panel-title">security.security</div>
<div fxLayout="column" formGroupName="security">
<tb-toggle-header fxFlex="100" class="security-toggle-group"
[value]="gatewayConfigGroup.get('thingsboard.security.type').value"
name="securityTypeToggle" (valueChange)="updateSecurityValidators($event)">
<tb-toggle-option *ngFor="let securityType of securityTypes | keyvalue"
[value]="securityType.key">{{ securityType.value | translate }}</tb-toggle-option>
</tb-toggle-header>
<div fxLayout="row wrap">
<mat-form-field appearance="outline"
*ngIf="gatewayConfigGroup.get('thingsboard.security.type').value.toLowerCase().includes('accesstoken')"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.access-token</mat-label>
@ -98,40 +98,44 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').hasError('required')">
{{'security.access-token-required' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.token' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.clientId</mat-label>
<input matInput formControlName="clientId"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').hasError('required')">
{{'security.clientId-required' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.client-id' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.username</mat-label>
<input matInput formControlName="username"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')">
{{'security.username-required' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.username' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.password</mat-label>
<input matInput formControlName="password"/>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.password' | translate }}">info_outlined
</mat-icon>
@ -167,76 +171,74 @@
dropLabel="{{'gateway.drop-file' | translate}}">
</tb-file-input>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
</mat-tab>
<mat-tab label="{{'gateway.logs.logs' | translate}}">
<div formGroupName="logs" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi>
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div class="tb-form-panel" style="padding-top: 20px">
<div fxLayout="row wrap">
<mat-form-field fxFlex="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="100" class="mat-block tb-value-type">
<mat-label translate>gateway.logs.date-format</mat-label>
<input matInput formControlName="dateFormat"/>
<mat-error *ngIf="gatewayConfigGroup.get('logs.dateFormat').hasError('required')">
{{'gateway.logs.date-format-required' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.date-form' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field fxFlex="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="100" class="mat-block tb-value-type">
<mat-label translate>gateway.logs.log-format</mat-label>
<textarea matInput formControlName="logFormat" rows="2"></textarea>
<mat-error *ngIf="gatewayConfigGroup.get('logs.logFormat').hasError('required')">
{{'gateway.logs.log-format-required' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.log-format' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
</div>
</mat-expansion-panel>
<mat-expansion-panel expanded="true" disabled formGroupName="remote" >
<mat-expansion-panel-header>
<mat-panel-title translate class="expansion-panel-header">gateway.logs.remote</mat-panel-title>
</mat-expansion-panel-header>
</div>
<div class="tb-form-panel" formGroupName="remote">
<div translate class="expansion-panel-header tb-form-panel-title">gateway.logs.remote</div>
<mat-slide-toggle color="primary" formControlName="enabled">
{{ 'gateway.logs.remote-logs' | translate }}
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon slider-icon " aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.remote-log' | translate }}">info
</mat-icon>
</mat-slide-toggle>
<mat-form-field class="mat-block tb-value-type">
<mat-form-field appearance="outline" class="mat-block tb-value-type">
<mat-label translate>gateway.logs.level</mat-label>
<mat-select formControlName="logLevel">
<mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option>
</mat-select>
</mat-form-field>
</mat-expansion-panel>
<mat-expansion-panel expanded="true" disabled formGroupName="local" >
<mat-expansion-panel-header>
<mat-panel-title translate class="expansion-panel-header">gateway.logs.local</mat-panel-title>
</mat-expansion-panel-header>
<mat-button-toggle-group class="security-toggle-group" [formControl]="logSelector" fxFlex="100"
name="logSelector">
<mat-button-toggle *ngFor="let logConfig of localLogsConfigLabels| keyvalue" [value]="logConfig.key"
class="first-capital">
{{ logConfig.value }}
</mat-button-toggle>
</mat-button-toggle-group>
<div fxFlex="100" fxLayout="row wrap" fxLayout.lt-sm="column" [formGroup]="getLogFormGroup(logSelector.value)">
<mat-form-field class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
</div>
<div class="tb-form-panel" formGroupName="local">
<div translate class="expansion-panel-header tb-form-panel-title">gateway.logs.local</div>
<div fxLayout="column">
<tb-toggle-header fxFlex="100" class="security-toggle-group"
[value]="logSelector.value" name="logTypeToggle" (valueChange)="updateLogType($event)">
<tb-toggle-option *ngFor="let logConfig of localLogsConfigLabels| keyvalue" [value]="logConfig.key"
class="first-capital">{{ logConfig.value }}</tb-toggle-option>
</tb-toggle-header>
<div fxFlex="100" fxLayout="row wrap" fxLayout.lt-sm="column"
[formGroup]="getLogFormGroup(logSelector.value)">
<mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
<mat-label translate>gateway.logs.level</mat-label>
<mat-select formControlName="logLevel">
<mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
<mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
<mat-label translate>gateway.logs.file-path</mat-label>
<input matInput formControlName="filePath"/>
<mat-error
@ -245,7 +247,7 @@
</mat-error>
</mat-form-field>
<div fxLayout="row" fxFlex="50" fxLayoutGap="15px">
<mat-form-field class="mat-block tb-value-type" fxFlex>
<mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex>
<mat-label translate>gateway.logs.saving-period</mat-label>
<input matInput formControlName="savingTime" type="number" min="0"/>
<mat-error
@ -257,7 +259,7 @@
{{'gateway.logs.saving-period-min' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block tb-value-type" style="min-width: 110px; width: 30%">
<mat-form-field appearance="outline" class="mat-block tb-value-type" style="min-width: 110px; width: 30%">
<mat-label translate></mat-label>
<mat-select formControlName="savingPeriod">
<mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">
@ -266,7 +268,7 @@
</mat-select>
</mat-form-field>
</div>
<mat-form-field class="mat-block tb-value-type" fxFlex="calc(50%-30px)">
<mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex="calc(50%-30px)">
<mat-label translate>gateway.logs.backup-count</mat-label>
<input matInput formControlName="backupCount" type="number" min="0"/>
<mat-error
@ -277,36 +279,36 @@
*ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('min')">
{{'gateway.logs.backup-count-min' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.backup-count' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
</mat-tab>
<mat-tab label="{{'gateway.storage' | translate}}">
<div formGroupName="storage" fxLayout="column" class="mat-content mat-padding">
<mat-accordion>
<mat-expansion-panel expanded="true" disabled>
<mat-expansion-panel-header>
<mat-panel-title translate class="expansion-panel-header">gateway.storage
<div class="tb-form-panel">
<div translate class="expansion-panel-header tb-form-panel-title">gateway.storage
<span class="tb-hint">{{'gateway.hints.storage' | translate}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row wrap" fxLayout.lt-sm="column">
<mat-button-toggle-group fxLayout="row wrap" fxLayout.lt-sm="column" class="security-toggle-group" formControlName="type"
fxFlex="100">
<mat-button-toggle *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
{{ storageType.value | translate }}
</mat-button-toggle>
</div>
<div fxLayout="column">
<tb-toggle-header fxFlex="100" class="security-toggle-group"
[value]="gatewayConfigGroup.get('storage.type').value" name="storageType"
(valueChange)="updateStorageType($event)">
<tb-toggle-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
{{ storageType.value | translate }}</tb-toggle-option>
</tb-toggle-header>
<div class="line-break "></div>
<span class="tb-hint" style="padding-left: 0">
{{'gateway.hints.' + gatewayConfigGroup.get('storage.type').value | translate}}</span>
</mat-button-toggle-group>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'memory'"
<div fxLayout="row wrap" fxLayout.lt-sm="column">
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'memory'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-read-record-count</mat-label>
<input matInput formControlName="read_records_count"/>
@ -319,12 +321,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('pattern')">
{{'gateway.storage-read-record-count-pattern' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.read-record-count' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'memory'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'memory'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-records</mat-label>
<input matInput formControlName="max_records_count"/>
@ -337,24 +340,26 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('pattern')">
{{'gateway.storage-max-records-pattern' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-records-count' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-data-folder-path</mat-label>
<input matInput formControlName="data_folder_path"/>
<mat-error *ngIf="gatewayConfigGroup.get('storage.data_folder_path').hasError('required')">
{{'gateway.storage-data-folder-path-required' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-files</mat-label>
<input matInput formControlName="max_file_count"/>
@ -367,12 +372,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('pattern')">
{{'gateway.storage-max-files-pattern' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-file-count' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-read-record-count</mat-label>
<input matInput formControlName="max_read_records_count"/>
@ -385,12 +391,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('pattern')">
{{'gateway.storage-max-read-record-count-pattern' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-read-count' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-file-records</mat-label>
<input matInput formControlName="max_records_per_file"/>
@ -403,24 +410,26 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('pattern')">
{{'gateway.storage-max-records-pattern' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-records' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-path</mat-label>
<input matInput formControlName="data_file_path"/>
<mat-error *ngIf="gatewayConfigGroup.get('storage.data_file_path').hasError('required')">
{{'gateway.storage-path-required' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.messages-ttl-check-in-hours</mat-label>
<input matInput formControlName="messages_ttl_check_in_hours"/>
@ -433,12 +442,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('pattern')">
{{'gateway.messages-ttl-check-in-hours-pattern' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.ttl-check-hour' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
<mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type" style="flex-grow: 0">
<mat-label translate>gateway.messages-ttl-in-days</mat-label>
<input matInput formControlName="messages_ttl_in_days"/>
@ -451,20 +461,20 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('pattern')">
{{'gateway.messages-ttl-in-days-pattern' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.ttl-messages-day' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
</mat-tab>
<mat-tab label="{{'gateway.grpc' | translate}}">
<div formGroupName="grpc" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi>
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div class="tb-form-panel" style="padding-top: 20px">
<div fxLayout="row wrap" fxLayout.lt-md="column">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="enabled">
{{ 'gateway.grpc' | translate }}
@ -472,7 +482,7 @@
<mat-slide-toggle color="primary" fxFlex="100" formControlName="keepalivePermitWithoutCalls">
{{ 'gateway.permit-without-calls' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-label translate>gateway.server-port</mat-label>
<input matInput formControlName="serverPort" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('required')">
@ -488,7 +498,7 @@
{{'gateway.thingsboard-port-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-label translate>gateway.grpc-keep-alive-timeout</mat-label>
<input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('required')">
@ -501,7 +511,7 @@
{{'gateway.grpc-keep-alive-timeout-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-label translate>gateway.grpc-keep-alive</mat-label>
<input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('required')">
@ -514,7 +524,7 @@
{{'gateway.grpc-keep-alive-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-label translate>gateway.grpc-min-time-between-pings</mat-label>
<input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('required')">
@ -527,7 +537,7 @@
{{'gateway.grpc-min-time-between-pings-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-label translate>gateway.grpc-max-pings-without-data</mat-label>
<input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('required')">
@ -540,7 +550,7 @@
{{'gateway.grpc-max-pings-without-data-pattern' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
<mat-label translate>gateway.grpc-min-ping-interval-without-data</mat-label>
<input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('required')">
@ -554,19 +564,17 @@
</mat-error>
</mat-form-field>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</mat-tab>
<mat-tab label="{{'gateway.statistics.statistics' | translate}}">
<div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi>
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div class="tb-form-panel" style="padding-top: 20px">
<div fxLayout="row wrap" formGroupName="statistics">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="enable">
{{ 'gateway.statistics.statistics' | translate }}
</mat-slide-toggle>
<mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.statistics.send-period</mat-label>
<input matInput formControlName="statsSendPeriodInSeconds" type="number" min="1"/>
<mat-error
@ -583,31 +591,31 @@
</mat-error>
</mat-form-field>
</div>
</mat-expansion-panel>
<mat-expansion-panel expanded="true" disabled>
<mat-expansion-panel-header>
<mat-panel-title class="expansion-panel-header">{{"gateway.statistics.commands" |translate}}
</div>
<div class="tb-form-panel">
<div class="expansion-panel-header tb-form-panel-title">{{"gateway.statistics.commands" |translate}}
<span class="tb-hint">
{{'gateway.hints.commands' | translate}}</span></mat-panel-title>
</mat-expansion-panel-header>
{{'gateway.hints.commands' | translate}}</span></div>
<div fxLayout="column" formGroupName="statistics">
<div fxLayout="row" formArrayName="commands"
*ngFor="let commandControl of commandFormArray().controls; let $index = index"
style="margin-bottom: 15px">
<mat-card fxFlex.lt-md fxLayout="row wrap" fxLayout.lt-md="column" [formGroupName]="$index" class="statistics-block">
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type">
<mat-card fxFlex.lt-md fxLayout="row wrap" fxLayout.lt-md="column" [formGroupName]="$index"
class="statistics-block">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type">
<mat-label translate>gateway.statistics.attribute-name</mat-label>
<input matInput formControlName="attributeOnGateway"/>
<mat-error
*ngIf="commandControl.get('attributeOnGateway').hasError('required')">
{{'gateway.statistics.attribute-name-required' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.attribute' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type">
<mat-label translate>gateway.statistics.timeout</mat-label>
<input matInput formControlName="timeout" type="number" min="0"/>
<mat-error
@ -622,19 +630,22 @@
*ngIf="commandControl.get('timeout').hasError('pattern')">
{{'gateway.statistics.timeout-pattern' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.timeout' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type" style="flex-grow: 0">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type"
style="flex-grow: 0">
<mat-label translate>gateway.statistics.command</mat-label>
<input matInput formControlName="command"/>
<mat-error
*ngIf="commandControl.get('command').hasError('required')">
{{'gateway.statistics.command-required' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.command' | translate }}">info_outlined
</mat-icon>
@ -655,24 +666,22 @@
{{ 'gateway.statistics.add' | translate }}
</button>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</mat-tab>
<mat-tab label="{{'gateway.other' | translate}}">
<div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi>
<mat-expansion-panel expanded="true" disabled formGroupName="checkingDeviceActivity">
<mat-expansion-panel-header>
<mat-panel-title class="expansion-panel-header">
<div class="tb-form-panel" formGroupName="checkingDeviceActivity">
<div class="expansion-panel-header tb-form-panel-title">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="checkDeviceInactivity">
{{ 'gateway.checking-device-activity' | translate }}
</mat-slide-toggle>
<span class="tb-hint" style="padding-left: 40px; margin-top: -15px;">{{'gateway.hints.check-device-activity' | translate}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<span class="tb-hint"
style="padding-left: 40px; margin-top: -15px;">{{'gateway.hints.check-device-activity' | translate}}</span>
</div>
<div fxLayout="row wrap" fxLayout.lt-sm="column">
<mat-form-field
appearance="outline"
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.inactivity-timeout-seconds</mat-label>
@ -685,12 +694,14 @@
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('min')">
{{'gateway.inactivity-timeout-seconds-min' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.inactivity-timeout' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field
appearance="outline"
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.inactivity-check-period-seconds</mat-label>
@ -703,19 +714,18 @@
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('min')">
{{'gateway.inactivity-check-period-seconds-min' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.inactivity-period' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
</div>
</mat-expansion-panel>
<mat-expansion-panel expanded="true" disabled>
<mat-expansion-panel-header>
<mat-panel-title translate class="expansion-panel-header">gateway.advanced</mat-panel-title>
</mat-expansion-panel-header>
</div>
<div class="tb-form-panel">
<div translate class="expansion-panel-header tb-form-panel-title">gateway.advanced</div>
<div fxLayout="row wrap" fxLayout.lt-sm="column">
<mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.min-pack-send-delay</mat-label>
<input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('required')">
@ -724,12 +734,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('min')">
{{ 'gateway.min-pack-send-delay-min' | translate }}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.minimal-pack-delay' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.mqtt-qos</mat-label>
<input matInput formControlName="qos" type="number" min="0" max="1"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('required')">
@ -741,12 +752,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('max')">
{{ 'gateway.mqtt-qos-range' | translate}}
</mat-error>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false" aria-label="help-icon"
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
aria-label="help-icon"
matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.qos' | translate }}">info_outlined
</mat-icon>
</mat-form-field>
<mat-form-field fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.statistics.check-connectors-configuration</mat-label>
<input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/>
<mat-error
@ -763,9 +775,8 @@
</mat-error>
</mat-form-field>
</div>
</mat-expansion-panel>
</div>
</mat-accordion>
</div>
</mat-tab>
</mat-tab-group>

82
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
View File

@ -22,6 +22,10 @@
color: rgba(0, 0, 0, .12);
}
.tb-form-panel {
margin-bottom: 20px;
}
.mat-toolbar {
background: transparent;
color: rgba(0, 0, 0, .87) !important;
@ -41,6 +45,11 @@
margin-right: 15px;
}
.slider-icon {
position: absolute;
transform: translateY(-3px);
}
.block-title {
font-size: 20px;
font-weight: 400;
@ -53,41 +62,11 @@
}
.security-toggle-group {
padding-bottom: 0;
background: transparent !important;
margin-bottom: 15px;
border: none;
overflow: auto;
.mat-button-toggle {
border-radius: 15px;
border: 1px solid rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, .05);
margin: 5px;
color: rgba(0, 0, 0, .2);
font-weight: 500;
}
.mat-button-toggle-checked {
border-radius: 15px;
border: 1px solid #305680;
background: white;
color: #305680;
}
margin-right: auto;
::ng-deep span {
text-transform: capitalize;
line-height: 20px;
font-size: 13px;
padding: 5px 25px;
}
::ng-deep .mat-button-toggle-ripple {
border-radius: 15px;
}
::ng-deep .mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
opacity: 0 !important;
padding: 0 25px;
}
}
@ -96,41 +75,6 @@
margin-bottom: 10px;
}
.logs-toggle-group {
border: none;
border-radius: 15px;
background: rgba(0, 0, 0, .05);
color: rgba(0, 0, 0, .2);
font-weight: 500;
.mat-button-toggle {
border: none;
background: rgba(0, 0, 0, .0);
color: rgba(0, 0, 0, .2);
font-weight: 500;
}
.mat-button-toggle-checked {
border-radius: 15px;
color: white;
background: #305680;
}
::ng-deep span {
line-height: 20px;
font-size: 13px;
padding: 5px 25px;
}
::ng-deep .mat-button-toggle-ripple {
border-radius: 15px;
}
::ng-deep .mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
opacity: 0 !important;
}
}
.statistics-block {
margin-bottom: 15px;
padding-left: 15px;
@ -167,10 +111,6 @@
z-index: 100;
}
.suffix-icon {
position: absolute;
transform: translateY(-3px);
}
mat-panel-title {
display: block;

15
ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.ts
View File

@ -133,6 +133,8 @@ export class GatewayConfigurationComponent implements OnInit {
logSelector: FormControl;
securityType: SecurityTypes;
constructor(protected router: Router,
protected store: Store<AppState>,
@ -259,6 +261,7 @@ export class GatewayConfigurationComponent implements OnInit {
const securityGroup = this.gatewayConfigGroup.get('thingsboard.security') as FormGroup;
securityGroup.get('type').valueChanges.subscribe(type => {
this.removeAllSecurityValidators();
console.log(type);
if (type === SecurityTypes.ACCESS_TOKEN) {
securityGroup.get('accessToken').addValidators([Validators.required]);
securityGroup.get('accessToken').updateValueAndValidity();
@ -317,6 +320,18 @@ export class GatewayConfigurationComponent implements OnInit {
this.fetchConfigAttribute(this.device);
}
updateSecurityValidators(value: SecurityTypes) {
this.gatewayConfigGroup.get('thingsboard.security.type').setValue(value, {emitEvent: true});
}
updateLogType(value: LocalLogsConfigs) {
this.logSelector.setValue(value);
}
updateStorageType(value: StorageTypes) {
this.gatewayConfigGroup.get('storage.type').setValue(value, {emitEvent: true})
}
fetchConfigAttribute(entityId: EntityId) {
if (entityId.id === NULL_UUID) return;
this.attributeService.getEntityAttributes(entityId, AttributeScope.CLIENT_SCOPE,