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", "dialogTitle": "Launch command",
"dialogHideDashboardToolbar": true, "dialogHideDashboardToolbar": true,
"dialogWidth": null, "dialogWidth": null,
"dialogHeight": 35, "dialogHeight": 40,
"openInSeparateDialog": true, "openInSeparateDialog": true,
"openInPopover": false, "openInPopover": false,
"id": "337c767b-3217-d3d3-b955-7b0bd0858a1d" "id": "337c767b-3217-d3d3-b955-7b0bd0858a1d"
@ -5087,14 +5087,14 @@
"useMarkdownTextFunction": true, "useMarkdownTextFunction": true,
"markdownTextFunction": "return `<div class=\"action-container\">\n<tb-gateway-command deviceId=\"${data[0].entityId}\"></tb-gateway-command>\n </div>`;", "markdownTextFunction": "return `<div class=\"action-container\">\n<tb-gateway-command deviceId=\"${data[0].entityId}\"></tb-gateway-command>\n </div>`;",
"applyDefaultMarkdownStyle": false, "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", "title": "New Markdown/HTML Card",
"showTitleIcon": false, "showTitleIcon": false,
"iconColor": "rgba(0, 0, 0, 0.87)", "iconColor": "rgba(0, 0, 0, 0.87)",
"iconSize": "24px", "iconSize": "24px",
"titleTooltip": "", "titleTooltip": "",
"dropShadow": true, "dropShadow": false,
"enableFullscreen": false, "enableFullscreen": false,
"widgetStyle": {}, "widgetStyle": {},
"titleStyle": { "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"> <div mat-dialog-content tb-toast fxLayout="column" toastTarget="dockerCommandDialogContent">
<span style="padding-bottom: 15px;">{{ 'gateway.docker-label' | translate }}</span> <span style="padding-bottom: 15px;">{{ 'gateway.docker-label' | translate }}</span>
<div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0"> <div fxFlex fxLayout="row" style="justify-content: space-between; flex-grow: 0; align-items: center">
<mat-button-toggle-group [formControl]="selectedOSCControl" aria-label="Favorite Color" style="width: max-content; flex-grow: 0"> <tb-toggle-select [formControl]="selectedOSCControl" appearance="stroked" style="width: max-content; flex-grow: 0">
<mat-button-toggle [value]="osTypes.windows"><span translate>gateway.windows </span></mat-button-toggle> <tb-toggle-option [value]="osTypes.windows"><span>Windows </span></tb-toggle-option>
<mat-button-toggle [value]="osTypes.linux"><span translate>gateway.linux-macos </span></mat-button-toggle> <tb-toggle-option [value]="osTypes.linux"><span>Linux/MacOS </span></tb-toggle-option>
</mat-button-toggle-group> </tb-toggle-select>
<div class="tb-help" [tb-help]="helpLink"></div> <div class="tb-help" [tb-help]="helpLink"></div>
</div> </div>
<div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value !== osTypes.windows"> <ng-container [ngSwitch]="selectedOSCControl.value">
<div fxLayout="row" fxLayoutAlign="start center"> <ng-template [ngSwitchCase]="osTypes.windows">
<pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre> <tb-markdown usePlainMarkdown containerClass="start-code" data="
<button mat-icon-button ```bash
color="primary" {{windowsCode}}
ngxClipboard {:copy-code}
cbContent="{{ linuxCode }}" ```
(cbOnSuccess)="onDockerCodeCopied()" "></tb-markdown>
matTooltip="{{ 'gateway.copy-command' | translate }}" </ng-template>
matTooltipPosition="above"> <ng-template [ngSwitchCase]="osTypes.linux">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <tb-markdown usePlainMarkdown containerClass="start-code" data="
</button> ```bash
</div> {{linuxCode}}
</div> {:copy-code}
<div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value === osTypes.windows"> ```
<div fxLayout="row" fxLayoutAlign="start center"> "></tb-markdown>
<pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ windowsCode }}</code></pre> </ng-template>
<button mat-icon-button </ng-container>
color="primary" <!-- <div class="mat-content" fxLayout="column" *ngIf="selectedOSCControl.value !== osTypes.windows">-->
ngxClipboard <!-- <div fxLayout="row" fxLayoutAlign="start center">-->
cbContent="{{ windowsCode }}" <!-- <pre class="tb-highlight" fxFlex><code style="white-space: pre-wrap;">{{ linuxCode }}</code></pre>-->
(cbOnSuccess)="onDockerCodeCopied()" <!-- <button mat-icon-button-->
matTooltip="{{ 'gateway.copy-command' | translate }}" <!-- color="primary"-->
matTooltipPosition="above"> <!-- ngxClipboard-->
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <!-- cbContent="{{ linuxCode }}"-->
</button> <!-- (cbOnSuccess)="onDockerCodeCopied()"-->
</div> <!-- matTooltip="{{ 'gateway.copy-command' | translate }}"-->
</div> <!-- 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> </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({ @Component({
selector: 'tb-gateway-command', selector: 'tb-gateway-command',
templateUrl: './device-gateway-command.component.html', templateUrl: './device-gateway-command.component.html',
styleUrls: [] styleUrls: ['./device-gateway-command.component.scss']
}) })
export class DeviceGatewayCommandComponent implements OnInit { 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-group style="max-height: calc(100% - 117px); flex-grow: 1">
<mat-tab label="{{'gateway.thingsboard-general' | translate}}"> <mat-tab label="{{'gateway.thingsboard-general' | translate}}">
<div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding"> <div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi> <div style="padding-top: 20px" class="tb-form-panel">
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteConfiguration"> <mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteConfiguration">
{{ 'gateway.remote-configuration' | translate }} {{ '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;" style="cursor:pointer;"
matTooltip="{{'gateway.hints.remote-configuration' | translate }}">info matTooltip="{{'gateway.hints.remote-configuration' | translate }}">info
</mat-icon> </mat-icon>
</mat-slide-toggle> </mat-slide-toggle>
<mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteShell"> <mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteShell">
{{ 'gateway.remote-shell' | translate }} {{ '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;" style="cursor:pointer;"
matTooltip="{{'gateway.hints.remote-shell' | translate }}">info matTooltip="{{'gateway.hints.remote-shell' | translate }}">info
</mat-icon> </mat-icon>
</mat-slide-toggle> </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> <mat-label translate>gateway.thingsboard-host</mat-label>
<input matInput formControlName="host"/> <input matInput formControlName="host"/>
<mat-icon class="mat-form-field-infix pointer-event suffix-icon" <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
@ -57,7 +56,7 @@
{{ 'gateway.thingsboard-host-required' | translate }} {{ 'gateway.thingsboard-host-required' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>gateway.thingsboard-port</mat-label>
<input matInput formControlName="port" type="number" min="0"/> <input matInput formControlName="port" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('required')">
@ -72,25 +71,26 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('pattern')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('pattern')">
{{'gateway.thingsboard-port-pattern' | translate }} {{'gateway.thingsboard-port-pattern' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.port' | translate }}">info_outlined matTooltip="{{'gateway.hints.port' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
<mat-expansion-panel expanded="true" disabled> <div class="tb-form-panel">
<mat-expansion-panel-header> <div translate class="expansion-panel-header tb-form-panel-title tb-form-panel-title">security.security</div>
<mat-panel-title translate class="expansion-panel-header">security.security</mat-panel-title> <div fxLayout="column" formGroupName="security">
</mat-expansion-panel-header> <tb-toggle-header fxFlex="100" class="security-toggle-group"
<div fxLayout="row wrap" formGroupName="security"> [value]="gatewayConfigGroup.get('thingsboard.security.type').value"
<mat-button-toggle-group class="security-toggle-group" formControlName="type" fxFlex="100"> name="securityTypeToggle" (valueChange)="updateSecurityValidators($event)">
<mat-button-toggle *ngFor="let securityType of securityTypes | keyvalue" [value]="securityType.key"> <tb-toggle-option *ngFor="let securityType of securityTypes | keyvalue"
{{ securityType.value | translate }} [value]="securityType.key">{{ securityType.value | translate }}</tb-toggle-option>
</mat-button-toggle> </tb-toggle-header>
</mat-button-toggle-group> <div fxLayout="row wrap">
<mat-form-field <mat-form-field appearance="outline"
*ngIf="gatewayConfigGroup.get('thingsboard.security.type').value.toLowerCase().includes('accesstoken')" *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value.toLowerCase().includes('accesstoken')"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.access-token</mat-label> <mat-label translate>security.access-token</mat-label>
@ -98,40 +98,44 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').hasError('required')">
{{'security.access-token-required' | translate}} {{'security.access-token-required' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.token' | translate }}">info_outlined matTooltip="{{'gateway.hints.token' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.clientId</mat-label> <mat-label translate>security.clientId</mat-label>
<input matInput formControlName="clientId"/> <input matInput formControlName="clientId"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').hasError('required')">
{{'security.clientId-required' | translate}} {{'security.clientId-required' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.client-id' | translate }}">info_outlined matTooltip="{{'gateway.hints.client-id' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.username</mat-label> <mat-label translate>security.username</mat-label>
<input matInput formControlName="username"/> <input matInput formControlName="username"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')">
{{'security.username-required' | translate}} {{'security.username-required' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.username' | translate }}">info_outlined matTooltip="{{'gateway.hints.username' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>security.password</mat-label> <mat-label translate>security.password</mat-label>
<input matInput formControlName="password"/> <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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.password' | translate }}">info_outlined matTooltip="{{'gateway.hints.password' | translate }}">info_outlined
</mat-icon> </mat-icon>
@ -167,76 +171,74 @@
dropLabel="{{'gateway.drop-file' | translate}}"> dropLabel="{{'gateway.drop-file' | translate}}">
</tb-file-input> </tb-file-input>
</div> </div>
</mat-expansion-panel> </div>
</mat-accordion> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="{{'gateway.logs.logs' | translate}}"> <mat-tab label="{{'gateway.logs.logs' | translate}}">
<div formGroupName="logs" fxLayout="column" class="mat-content mat-padding"> <div formGroupName="logs" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi> <div class="tb-form-panel" style="padding-top: 20px">
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div fxLayout="row wrap"> <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> <mat-label translate>gateway.logs.date-format</mat-label>
<input matInput formControlName="dateFormat"/> <input matInput formControlName="dateFormat"/>
<mat-error *ngIf="gatewayConfigGroup.get('logs.dateFormat').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('logs.dateFormat').hasError('required')">
{{'gateway.logs.date-format-required' | translate }} {{'gateway.logs.date-format-required' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.date-form' | translate }}">info_outlined matTooltip="{{'gateway.hints.date-form' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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> <mat-label translate>gateway.logs.log-format</mat-label>
<textarea matInput formControlName="logFormat" rows="2"></textarea> <textarea matInput formControlName="logFormat" rows="2"></textarea>
<mat-error *ngIf="gatewayConfigGroup.get('logs.logFormat').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('logs.logFormat').hasError('required')">
{{'gateway.logs.log-format-required' | translate }} {{'gateway.logs.log-format-required' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.log-format' | translate }}">info_outlined matTooltip="{{'gateway.hints.log-format' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
<mat-expansion-panel expanded="true" disabled formGroupName="remote" > <div class="tb-form-panel" formGroupName="remote">
<mat-expansion-panel-header> <div translate class="expansion-panel-header tb-form-panel-title">gateway.logs.remote</div>
<mat-panel-title translate class="expansion-panel-header">gateway.logs.remote</mat-panel-title>
</mat-expansion-panel-header>
<mat-slide-toggle color="primary" formControlName="enabled"> <mat-slide-toggle color="primary" formControlName="enabled">
{{ 'gateway.logs.remote-logs' | translate }} {{ '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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.remote-log' | translate }}">info matTooltip="{{'gateway.hints.remote-log' | translate }}">info
</mat-icon> </mat-icon>
</mat-slide-toggle> </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-label translate>gateway.logs.level</mat-label>
<mat-select formControlName="logLevel"> <mat-select formControlName="logLevel">
<mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option> <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</mat-expansion-panel> </div>
<mat-expansion-panel expanded="true" disabled formGroupName="local" > <div class="tb-form-panel" formGroupName="local">
<mat-expansion-panel-header> <div translate class="expansion-panel-header tb-form-panel-title">gateway.logs.local</div>
<mat-panel-title translate class="expansion-panel-header">gateway.logs.local</mat-panel-title> <div fxLayout="column">
</mat-expansion-panel-header> <tb-toggle-header fxFlex="100" class="security-toggle-group"
<mat-button-toggle-group class="security-toggle-group" [formControl]="logSelector" fxFlex="100" [value]="logSelector.value" name="logTypeToggle" (valueChange)="updateLogType($event)">
name="logSelector"> <tb-toggle-option *ngFor="let logConfig of localLogsConfigLabels| keyvalue" [value]="logConfig.key"
<mat-button-toggle *ngFor="let logConfig of localLogsConfigLabels| keyvalue" [value]="logConfig.key" class="first-capital">{{ logConfig.value }}</tb-toggle-option>
class="first-capital"> </tb-toggle-header>
{{ logConfig.value }} <div fxFlex="100" fxLayout="row wrap" fxLayout.lt-sm="column"
</mat-button-toggle> [formGroup]="getLogFormGroup(logSelector.value)">
</mat-button-toggle-group> <mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
<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)">
<mat-label translate>gateway.logs.level</mat-label> <mat-label translate>gateway.logs.level</mat-label>
<mat-select formControlName="logLevel"> <mat-select formControlName="logLevel">
<mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option> <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </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> <mat-label translate>gateway.logs.file-path</mat-label>
<input matInput formControlName="filePath"/> <input matInput formControlName="filePath"/>
<mat-error <mat-error
@ -245,7 +247,7 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<div fxLayout="row" fxFlex="50" fxLayoutGap="15px"> <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> <mat-label translate>gateway.logs.saving-period</mat-label>
<input matInput formControlName="savingTime" type="number" min="0"/> <input matInput formControlName="savingTime" type="number" min="0"/>
<mat-error <mat-error
@ -257,7 +259,7 @@
{{'gateway.logs.saving-period-min' | translate }} {{'gateway.logs.saving-period-min' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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-label translate></mat-label>
<mat-select formControlName="savingPeriod"> <mat-select formControlName="savingPeriod">
<mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key"> <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">
@ -266,7 +268,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div> </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> <mat-label translate>gateway.logs.backup-count</mat-label>
<input matInput formControlName="backupCount" type="number" min="0"/> <input matInput formControlName="backupCount" type="number" min="0"/>
<mat-error <mat-error
@ -277,36 +279,36 @@
*ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('min')"> *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('min')">
{{'gateway.logs.backup-count-min' | translate }} {{'gateway.logs.backup-count-min' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.backup-count' | translate }}">info_outlined matTooltip="{{'gateway.hints.backup-count' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
</mat-accordion> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="{{'gateway.storage' | translate}}"> <mat-tab label="{{'gateway.storage' | translate}}">
<div formGroupName="storage" fxLayout="column" class="mat-content mat-padding"> <div formGroupName="storage" fxLayout="column" class="mat-content mat-padding">
<mat-accordion> <div class="tb-form-panel">
<mat-expansion-panel expanded="true" disabled> <div translate class="expansion-panel-header tb-form-panel-title">gateway.storage
<mat-expansion-panel-header>
<mat-panel-title translate class="expansion-panel-header">gateway.storage
<span class="tb-hint">{{'gateway.hints.storage' | translate}}</span> <span class="tb-hint">{{'gateway.hints.storage' | translate}}</span>
</mat-panel-title> </div>
</mat-expansion-panel-header> <div fxLayout="column">
<div fxLayout="row wrap" fxLayout.lt-sm="column"> <tb-toggle-header fxFlex="100" class="security-toggle-group"
<mat-button-toggle-group fxLayout="row wrap" fxLayout.lt-sm="column" class="security-toggle-group" formControlName="type" [value]="gatewayConfigGroup.get('storage.type').value" name="storageType"
fxFlex="100"> (valueChange)="updateStorageType($event)">
<mat-button-toggle *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key"> <tb-toggle-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
{{ storageType.value | translate }} {{ storageType.value | translate }}</tb-toggle-option>
</mat-button-toggle>
</tb-toggle-header>
<div class="line-break "></div> <div class="line-break "></div>
<span class="tb-hint" style="padding-left: 0"> <span class="tb-hint" style="padding-left: 0">
{{'gateway.hints.' + gatewayConfigGroup.get('storage.type').value | translate}}</span> {{'gateway.hints.' + gatewayConfigGroup.get('storage.type').value | translate}}</span>
</mat-button-toggle-group> <div fxLayout="row wrap" fxLayout.lt-sm="column">
<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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-read-record-count</mat-label> <mat-label translate>gateway.storage-read-record-count</mat-label>
<input matInput formControlName="read_records_count"/> <input matInput formControlName="read_records_count"/>
@ -319,12 +321,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('pattern')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('pattern')">
{{'gateway.storage-read-record-count-pattern' | translate}} {{'gateway.storage-read-record-count-pattern' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.read-record-count' | translate }}">info_outlined matTooltip="{{'gateway.hints.read-record-count' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-records</mat-label> <mat-label translate>gateway.storage-max-records</mat-label>
<input matInput formControlName="max_records_count"/> <input matInput formControlName="max_records_count"/>
@ -337,24 +340,26 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('pattern')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('pattern')">
{{'gateway.storage-max-records-pattern' | translate}} {{'gateway.storage-max-records-pattern' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-records-count' | translate }}">info_outlined matTooltip="{{'gateway.hints.max-records-count' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-data-folder-path</mat-label> <mat-label translate>gateway.storage-data-folder-path</mat-label>
<input matInput formControlName="data_folder_path"/> <input matInput formControlName="data_folder_path"/>
<mat-error *ngIf="gatewayConfigGroup.get('storage.data_folder_path').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.data_folder_path').hasError('required')">
{{'gateway.storage-data-folder-path-required' | translate}} {{'gateway.storage-data-folder-path-required' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-files</mat-label> <mat-label translate>gateway.storage-max-files</mat-label>
<input matInput formControlName="max_file_count"/> <input matInput formControlName="max_file_count"/>
@ -367,12 +372,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('pattern')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('pattern')">
{{'gateway.storage-max-files-pattern' | translate}} {{'gateway.storage-max-files-pattern' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-file-count' | translate }}">info_outlined matTooltip="{{'gateway.hints.max-file-count' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-read-record-count</mat-label> <mat-label translate>gateway.storage-max-read-record-count</mat-label>
<input matInput formControlName="max_read_records_count"/> <input matInput formControlName="max_read_records_count"/>
@ -385,12 +391,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('pattern')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('pattern')">
{{'gateway.storage-max-read-record-count-pattern' | translate}} {{'gateway.storage-max-read-record-count-pattern' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-read-count' | translate }}">info_outlined matTooltip="{{'gateway.hints.max-read-count' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-max-file-records</mat-label> <mat-label translate>gateway.storage-max-file-records</mat-label>
<input matInput formControlName="max_records_per_file"/> <input matInput formControlName="max_records_per_file"/>
@ -403,24 +410,26 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('pattern')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('pattern')">
{{'gateway.storage-max-records-pattern' | translate}} {{'gateway.storage-max-records-pattern' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.max-records' | translate }}">info_outlined matTooltip="{{'gateway.hints.max-records' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.storage-path</mat-label> <mat-label translate>gateway.storage-path</mat-label>
<input matInput formControlName="data_file_path"/> <input matInput formControlName="data_file_path"/>
<mat-error *ngIf="gatewayConfigGroup.get('storage.data_file_path').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.data_file_path').hasError('required')">
{{'gateway.storage-path-required' | translate}} {{'gateway.storage-path-required' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.messages-ttl-check-in-hours</mat-label> <mat-label translate>gateway.messages-ttl-check-in-hours</mat-label>
<input matInput formControlName="messages_ttl_check_in_hours"/> <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')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('pattern')">
{{'gateway.messages-ttl-check-in-hours-pattern' | translate}} {{'gateway.messages-ttl-check-in-hours-pattern' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.ttl-check-hour' | translate }}">info_outlined matTooltip="{{'gateway.hints.ttl-check-hour' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type" style="flex-grow: 0">
<mat-label translate>gateway.messages-ttl-in-days</mat-label> <mat-label translate>gateway.messages-ttl-in-days</mat-label>
<input matInput formControlName="messages_ttl_in_days"/> <input matInput formControlName="messages_ttl_in_days"/>
@ -451,20 +461,20 @@
<mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('pattern')"> <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('pattern')">
{{'gateway.messages-ttl-in-days-pattern' | translate}} {{'gateway.messages-ttl-in-days-pattern' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.ttl-messages-day' | translate }}">info_outlined matTooltip="{{'gateway.hints.ttl-messages-day' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
</mat-accordion> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="{{'gateway.grpc' | translate}}"> <mat-tab label="{{'gateway.grpc' | translate}}">
<div formGroupName="grpc" fxLayout="column" class="mat-content mat-padding"> <div formGroupName="grpc" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi> <div class="tb-form-panel" style="padding-top: 20px">
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div fxLayout="row wrap" fxLayout.lt-md="column"> <div fxLayout="row wrap" fxLayout.lt-md="column">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="enabled"> <mat-slide-toggle color="primary" fxFlex="100" formControlName="enabled">
{{ 'gateway.grpc' | translate }} {{ 'gateway.grpc' | translate }}
@ -472,7 +482,7 @@
<mat-slide-toggle color="primary" fxFlex="100" formControlName="keepalivePermitWithoutCalls"> <mat-slide-toggle color="primary" fxFlex="100" formControlName="keepalivePermitWithoutCalls">
{{ 'gateway.permit-without-calls' | translate }} {{ 'gateway.permit-without-calls' | translate }}
</mat-slide-toggle> </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> <mat-label translate>gateway.server-port</mat-label>
<input matInput formControlName="serverPort" type="number" min="0"/> <input matInput formControlName="serverPort" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('required')">
@ -488,7 +498,7 @@
{{'gateway.thingsboard-port-pattern' | translate }} {{'gateway.thingsboard-port-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>gateway.grpc-keep-alive-timeout</mat-label>
<input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/> <input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('required')">
@ -501,7 +511,7 @@
{{'gateway.grpc-keep-alive-timeout-pattern' | translate }} {{'gateway.grpc-keep-alive-timeout-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>gateway.grpc-keep-alive</mat-label>
<input matInput formControlName="keepAliveTimeMs" type="number" min="0"/> <input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('required')">
@ -514,7 +524,7 @@
{{'gateway.grpc-keep-alive-pattern' | translate }} {{'gateway.grpc-keep-alive-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>gateway.grpc-min-time-between-pings</mat-label>
<input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/> <input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('required')">
@ -527,7 +537,7 @@
{{'gateway.grpc-min-time-between-pings-pattern' | translate }} {{'gateway.grpc-min-time-between-pings-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>gateway.grpc-max-pings-without-data</mat-label>
<input matInput formControlName="maxPingsWithoutData" type="number" min="0"/> <input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('required')">
@ -540,7 +550,7 @@
{{'gateway.grpc-max-pings-without-data-pattern' | translate }} {{'gateway.grpc-max-pings-without-data-pattern' | translate }}
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label translate>gateway.grpc-min-ping-interval-without-data</mat-label>
<input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/> <input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('required')">
@ -554,19 +564,17 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
</mat-accordion>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="{{'gateway.statistics.statistics' | translate}}"> <mat-tab label="{{'gateway.statistics.statistics' | translate}}">
<div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding"> <div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi> <div class="tb-form-panel" style="padding-top: 20px">
<mat-expansion-panel expanded="true" disabled style="padding-top: 20px">
<div fxLayout="row wrap" formGroupName="statistics"> <div fxLayout="row wrap" formGroupName="statistics">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="enable"> <mat-slide-toggle color="primary" fxFlex="100" formControlName="enable">
{{ 'gateway.statistics.statistics' | translate }} {{ 'gateway.statistics.statistics' | translate }}
</mat-slide-toggle> </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> <mat-label translate>gateway.statistics.send-period</mat-label>
<input matInput formControlName="statsSendPeriodInSeconds" type="number" min="1"/> <input matInput formControlName="statsSendPeriodInSeconds" type="number" min="1"/>
<mat-error <mat-error
@ -583,31 +591,31 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
<mat-expansion-panel expanded="true" disabled> <div class="tb-form-panel">
<mat-expansion-panel-header> <div class="expansion-panel-header tb-form-panel-title">{{"gateway.statistics.commands" |translate}}
<mat-panel-title class="expansion-panel-header">{{"gateway.statistics.commands" |translate}}
<span class="tb-hint"> <span class="tb-hint">
{{'gateway.hints.commands' | translate}}</span></mat-panel-title> {{'gateway.hints.commands' | translate}}</span></div>
</mat-expansion-panel-header>
<div fxLayout="column" formGroupName="statistics"> <div fxLayout="column" formGroupName="statistics">
<div fxLayout="row" formArrayName="commands" <div fxLayout="row" formArrayName="commands"
*ngFor="let commandControl of commandFormArray().controls; let $index = index" *ngFor="let commandControl of commandFormArray().controls; let $index = index"
style="margin-bottom: 15px"> style="margin-bottom: 15px">
<mat-card fxFlex.lt-md fxLayout="row wrap" fxLayout.lt-md="column" [formGroupName]="$index" class="statistics-block"> <mat-card fxFlex.lt-md fxLayout="row wrap" fxLayout.lt-md="column" [formGroupName]="$index"
<mat-form-field fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type"> 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> <mat-label translate>gateway.statistics.attribute-name</mat-label>
<input matInput formControlName="attributeOnGateway"/> <input matInput formControlName="attributeOnGateway"/>
<mat-error <mat-error
*ngIf="commandControl.get('attributeOnGateway').hasError('required')"> *ngIf="commandControl.get('attributeOnGateway').hasError('required')">
{{'gateway.statistics.attribute-name-required' | translate }} {{'gateway.statistics.attribute-name-required' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.attribute' | translate }}">info_outlined matTooltip="{{'gateway.hints.attribute' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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> <mat-label translate>gateway.statistics.timeout</mat-label>
<input matInput formControlName="timeout" type="number" min="0"/> <input matInput formControlName="timeout" type="number" min="0"/>
<mat-error <mat-error
@ -622,19 +630,22 @@
*ngIf="commandControl.get('timeout').hasError('pattern')"> *ngIf="commandControl.get('timeout').hasError('pattern')">
{{'gateway.statistics.timeout-pattern' | translate }} {{'gateway.statistics.timeout-pattern' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.timeout' | translate }}">info_outlined matTooltip="{{'gateway.hints.timeout' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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> <mat-label translate>gateway.statistics.command</mat-label>
<input matInput formControlName="command"/> <input matInput formControlName="command"/>
<mat-error <mat-error
*ngIf="commandControl.get('command').hasError('required')"> *ngIf="commandControl.get('command').hasError('required')">
{{'gateway.statistics.command-required' | translate }} {{'gateway.statistics.command-required' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.command' | translate }}">info_outlined matTooltip="{{'gateway.hints.command' | translate }}">info_outlined
</mat-icon> </mat-icon>
@ -655,24 +666,22 @@
{{ 'gateway.statistics.add' | translate }} {{ 'gateway.statistics.add' | translate }}
</button> </button>
</div> </div>
</mat-expansion-panel> </div>
</mat-accordion>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="{{'gateway.other' | translate}}"> <mat-tab label="{{'gateway.other' | translate}}">
<div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding"> <div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
<mat-accordion multi> <div class="tb-form-panel" formGroupName="checkingDeviceActivity">
<mat-expansion-panel expanded="true" disabled formGroupName="checkingDeviceActivity"> <div class="expansion-panel-header tb-form-panel-title">
<mat-expansion-panel-header>
<mat-panel-title class="expansion-panel-header">
<mat-slide-toggle color="primary" fxFlex="100" formControlName="checkDeviceInactivity"> <mat-slide-toggle color="primary" fxFlex="100" formControlName="checkDeviceInactivity">
{{ 'gateway.checking-device-activity' | translate }} {{ 'gateway.checking-device-activity' | translate }}
</mat-slide-toggle> </mat-slide-toggle>
<span class="tb-hint" style="padding-left: 40px; margin-top: -15px;">{{'gateway.hints.check-device-activity' | translate}}</span> <span class="tb-hint"
</mat-panel-title> style="padding-left: 40px; margin-top: -15px;">{{'gateway.hints.check-device-activity' | translate}}</span>
</mat-expansion-panel-header> </div>
<div fxLayout="row wrap" fxLayout.lt-sm="column"> <div fxLayout="row wrap" fxLayout.lt-sm="column">
<mat-form-field <mat-form-field
appearance="outline"
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value" *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.inactivity-timeout-seconds</mat-label> <mat-label translate>gateway.inactivity-timeout-seconds</mat-label>
@ -685,12 +694,14 @@
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('min')"> *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('min')">
{{'gateway.inactivity-timeout-seconds-min' | translate }} {{'gateway.inactivity-timeout-seconds-min' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.inactivity-timeout' | translate }}">info_outlined matTooltip="{{'gateway.hints.inactivity-timeout' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
<mat-form-field <mat-form-field
appearance="outline"
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value" *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value"
fxFlex="calc(50%-15px)" class="mat-block tb-value-type"> fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
<mat-label translate>gateway.inactivity-check-period-seconds</mat-label> <mat-label translate>gateway.inactivity-check-period-seconds</mat-label>
@ -703,19 +714,18 @@
*ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('min')"> *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('min')">
{{'gateway.inactivity-check-period-seconds-min' | translate }} {{'gateway.inactivity-check-period-seconds-min' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.inactivity-period' | translate }}">info_outlined matTooltip="{{'gateway.hints.inactivity-period' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
<mat-expansion-panel expanded="true" disabled> <div class="tb-form-panel">
<mat-expansion-panel-header> <div translate class="expansion-panel-header tb-form-panel-title">gateway.advanced</div>
<mat-panel-title translate class="expansion-panel-header">gateway.advanced</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="row wrap" fxLayout.lt-sm="column"> <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> <mat-label translate>gateway.min-pack-send-delay</mat-label>
<input matInput formControlName="minPackSendDelayMS" type="number" min="0"/> <input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('required')">
@ -724,12 +734,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('min')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('min')">
{{ 'gateway.min-pack-send-delay-min' | translate }} {{ 'gateway.min-pack-send-delay-min' | translate }}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.minimal-pack-delay' | translate }}">info_outlined matTooltip="{{'gateway.hints.minimal-pack-delay' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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> <mat-label translate>gateway.mqtt-qos</mat-label>
<input matInput formControlName="qos" type="number" min="0" max="1"/> <input matInput formControlName="qos" type="number" min="0" max="1"/>
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('required')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('required')">
@ -741,12 +752,13 @@
<mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('max')"> <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('max')">
{{ 'gateway.mqtt-qos-range' | translate}} {{ 'gateway.mqtt-qos-range' | translate}}
</mat-error> </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;" matSuffix style="cursor:pointer;"
matTooltip="{{'gateway.hints.qos' | translate }}">info_outlined matTooltip="{{'gateway.hints.qos' | translate }}">info_outlined
</mat-icon> </mat-icon>
</mat-form-field> </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> <mat-label translate>gateway.statistics.check-connectors-configuration</mat-label>
<input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/> <input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/>
<mat-error <mat-error
@ -763,9 +775,8 @@
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
</mat-expansion-panel> </div>
</mat-accordion>
</div> </div>
</mat-tab> </mat-tab>
</mat-tab-group> </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); color: rgba(0, 0, 0, .12);
} }
.tb-form-panel {
margin-bottom: 20px;
}
.mat-toolbar { .mat-toolbar {
background: transparent; background: transparent;
color: rgba(0, 0, 0, .87) !important; color: rgba(0, 0, 0, .87) !important;
@ -41,6 +45,11 @@
margin-right: 15px; margin-right: 15px;
} }
.slider-icon {
position: absolute;
transform: translateY(-3px);
}
.block-title { .block-title {
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
@ -53,41 +62,11 @@
} }
.security-toggle-group { .security-toggle-group {
padding-bottom: 0;
background: transparent !important;
margin-bottom: 15px; margin-bottom: 15px;
border: none; margin-right: auto;
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;
}
::ng-deep span { ::ng-deep span {
text-transform: capitalize; padding: 0 25px;
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;
} }
} }
@ -96,41 +75,6 @@
margin-bottom: 10px; 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 { .statistics-block {
margin-bottom: 15px; margin-bottom: 15px;
padding-left: 15px; padding-left: 15px;
@ -167,10 +111,6 @@
z-index: 100; z-index: 100;
} }
.suffix-icon {
position: absolute;
transform: translateY(-3px);
}
mat-panel-title { mat-panel-title {
display: block; 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; logSelector: FormControl;
securityType: SecurityTypes;
constructor(protected router: Router, constructor(protected router: Router,
protected store: Store<AppState>, protected store: Store<AppState>,
@ -259,6 +261,7 @@ export class GatewayConfigurationComponent implements OnInit {
const securityGroup = this.gatewayConfigGroup.get('thingsboard.security') as FormGroup; const securityGroup = this.gatewayConfigGroup.get('thingsboard.security') as FormGroup;
securityGroup.get('type').valueChanges.subscribe(type => { securityGroup.get('type').valueChanges.subscribe(type => {
this.removeAllSecurityValidators(); this.removeAllSecurityValidators();
console.log(type);
if (type === SecurityTypes.ACCESS_TOKEN) { if (type === SecurityTypes.ACCESS_TOKEN) {
securityGroup.get('accessToken').addValidators([Validators.required]); securityGroup.get('accessToken').addValidators([Validators.required]);
securityGroup.get('accessToken').updateValueAndValidity(); securityGroup.get('accessToken').updateValueAndValidity();
@ -317,6 +320,18 @@ export class GatewayConfigurationComponent implements OnInit {
this.fetchConfigAttribute(this.device); 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) { fetchConfigAttribute(entityId: EntityId) {
if (entityId.id === NULL_UUID) return; if (entityId.id === NULL_UUID) return;
this.attributeService.getEntityAttributes(entityId, AttributeScope.CLIENT_SCOPE, this.attributeService.getEntityAttributes(entityId, AttributeScope.CLIENT_SCOPE,