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

updates and improvements

Browse Source
This commit is contained in:
Maksym Dudnik 2023-07-17 17:48:36 +03:00
parent e1f18f16af
commit f13badabc5
6 changed files with 22 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -160,12 +160,16 @@
"icon": "terminal",
"useShowWidgetActionFunction": null,
"showWidgetActionFunction": "return true;",
"type": "customPretty",
"customHtml": "<form style=\"min-width: 400px; max-width: 1000px; position: relative;\">\r\n <mat-toolbar color=\"primary\">\r\n <h2 translate>gateway.command</h2>\r\n <span fxFlex></span>\r\n <button mat-icon-button\r\n (click)=\"close()\"\r\n type=\"button\">\r\n <mat-icon class=\"material-icons\">close</mat-icon>\r\n </button>\r\n </mat-toolbar>\r\n <mat-progress-bar color=\"warn\" mode=\"indeterminate\" *ngIf=\"isLoading$ | async\">\r\n </mat-progress-bar>\r\n <div style=\"height: 4px;\" *ngIf=\"!(isLoading$ | async)\"></div>\r\n <tb-gateway-command [token]=\"data.credentials.credentialsId\"></tb-gateway-command>\r\n <div mat-dialog-actions fxLayoutAlign=\"end center\">\r\n <button mat-button color=\"primary\"\r\n type=\"button\"\r\n cdkFocusInitial\r\n [disabled]=\"(isLoading$ | async)\"\r\n (click)=\"close()\">\r\n {{ 'action.ok' | translate }}\r\n </button>\r\n </div>\r\n</form>",
"customCss": "/*=======================================================================*/\r\n/*========== There are two examples: for edit and add entity ==========*/\r\n/*=======================================================================*/\r\n/*======================== Edit entity example ========================*/\r\n/*=======================================================================*/\r\n/*\r\n.edit-entity-form .boolean-value-input {\r\n padding-left: 5px;\r\n}\r\n\r\n.edit-entity-form .boolean-value-input .checkbox-label {\r\n margin-bottom: 8px;\r\n color: rgba(0,0,0,0.54);\r\n font-size: 12px;\r\n}\r\n\r\n.relations-list .header {\r\n padding-right: 5px;\r\n padding-bottom: 5px;\r\n padding-left: 5px;\r\n}\r\n\r\n.relations-list .header .cell {\r\n padding-right: 5px;\r\n padding-left: 5px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: rgba(0, 0, 0, .54);\r\n white-space: nowrap;\r\n}\r\n\r\n.relations-list .mat-form-field-infix {\r\n width: auto !important;\r\n}\r\n\r\n.relations-list .body {\r\n padding-right: 5px;\r\n padding-bottom: 15px;\r\n padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .row {\r\n padding-top: 5px;\r\n}\r\n\r\n.relations-list .body .cell {\r\n padding-right: 5px;\r\n padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .md-button {\r\n margin: 0;\r\n}\r\n*/\r\n/*========================================================================*/\r\n/*========================= Add entity example =========================*/\r\n/*========================================================================*/\r\n/*\r\n.add-entity-form .boolean-value-input {\r\n padding-left: 5px;\r\n}\r\n\r\n.add-entity-form .boolean-value-input .checkbox-label {\r\n margin-bottom: 8px;\r\n color: rgba(0,0,0,0.54);\r\n font-size: 12px;\r\n}\r\n\r\n.relations-list .header {\r\n padding-right: 5px;\r\n padding-bottom: 5px;\r\n padding-left: 5px;\r\n}\r\n\r\n.relations-list .header .cell {\r\n padding-right: 5px;\r\n padding-left: 5px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: rgba(0, 0, 0, .54);\r\n white-space: nowrap;\r\n}\r\n\r\n.relations-list .mat-form-field-infix {\r\n width: auto !important;\r\n}\r\n\r\n.relations-list .body {\r\n padding-right: 5px;\r\n padding-bottom: 15px;\r\n padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .row {\r\n padding-top: 5px;\r\n}\r\n\r\n.relations-list .body .cell {\r\n padding-right: 5px;\r\n padding-left: 5px;\r\n}\r\n\r\n.relations-list .body .md-button {\r\n margin: 0;\r\n}\r\n*/\r\n",
"customFunction": "let $injector = widgetContext.$scope.$injector;\r\nlet customDialog = $injector.get(widgetContext.servicesMap.get('customDialog'));\r\nlet deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));\r\nlet data = {};\r\n\r\nopenEditEntityDialog();\r\n\r\nfunction openEditEntityDialog() {\r\n deviceService.getDeviceCredentials(entityId.id).subscribe(credentials => {\r\n data.credentials = credentials;\r\n customDialog.customDialog(htmlTemplate, EditEntityDialogController).subscribe();\r\n });\r\n}\r\n\r\nfunction EditEntityDialogController(instance) {\r\n let vm = instance;\r\n vm.data = data;\r\n\r\n vm.close = function() {\r\n vm.dialogRef.close(null);\r\n };\r\n\r\n\r\n}",
"customResources": [],
"openInSeparateDialog": false,
"type": "openDashboardState",
"targetDashboardStateId": "launch_command",
"setEntityId": true,
"stateEntityParamName": null,
"openRightLayout": false,
"dialogTitle": "Docker commands",
"dialogHideDashboardToolbar": true,
"dialogWidth": null,
"dialogHeight": 40,
"openInSeparateDialog": true,
"openInPopover": false,
"id": "ae2e5995-505f-a241-5fb2-6cbaf08b1b55"
},

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

@ -42,32 +42,4 @@
"></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>

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

@ -18,78 +18,11 @@
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);
::ng-deep .tb-markdown-view .start-code code[class*="language-"],
::ng-deep .tb-markdown-view .start-code pre[class*="language-"] {
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;
}
}
}
}
}
}
}

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

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { Component, Input, OnInit } from '@angular/core';
import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { Store } from '@ngrx/store';
@ -53,6 +53,7 @@ export class DeviceGatewayCommandComponent implements OnInit {
constructor(protected router: Router,
protected store: Store<AppState>,
private translate: TranslateService,
private cd: ChangeDetectorRef,
private deviceService: DeviceService) {
}
@ -63,6 +64,7 @@ export class DeviceGatewayCommandComponent implements OnInit {
this.deviceService.getDeviceCredentials(this.deviceId).subscribe(credentials => {
this.token = credentials.credentialsId;
this.createRunCode(HOST);
this.cd.detectChanges()
});
}
this.selectedOSCControl = new FormControl('');

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

@ -64,10 +64,6 @@
.security-toggle-group {
margin-bottom: 15px;
margin-right: auto;
::ng-deep span {
padding: 0 25px;
}
}
.logs-label {
@ -111,6 +107,10 @@
z-index: 100;
}
::ng-deep.security-toggle-group span {
padding: 0 25px;
}
mat-panel-title {
display: block;

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

@ -54,10 +54,6 @@
//flex-shrink: 1;
}
mat-expansion-panel {
border: 1px solid #305680;
}
mat-card {
padding-left: 10px;
background: transparent;
@ -75,10 +71,6 @@
flex-grow: 1;
}
.mat-accordion .mat-expansion-panel {
border-radius: 5px;
}
.action-btns {
margin: 10px 10px 0;
}