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 {

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

File diff suppressed because it is too large Load Diff

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,