From 44d16b2150682220002002a4faa84cd6db593b24 Mon Sep 17 00:00:00 2001 From: Maksym Dudnik Date: Fri, 30 Jun 2023 11:42:36 +0300 Subject: [PATCH] device wizard and device component revert changes --- .../device/device-credentials.module.ts | 7 +- .../device-example-command.component.html | 86 ---------------- .../device-example-command.component.scss | 41 -------- .../device-example-command.component.ts | 98 ------------------- .../device-wizard-dialog.component.html | 15 +-- .../device-wizard-dialog.component.scss | 4 - .../wizard/device-wizard-dialog.component.ts | 40 +++----- 7 files changed, 17 insertions(+), 274 deletions(-) delete mode 100644 ui-ngx/src/app/modules/home/components/device/device-example-command.component.html delete mode 100644 ui-ngx/src/app/modules/home/components/device/device-example-command.component.scss delete mode 100644 ui-ngx/src/app/modules/home/components/device/device-example-command.component.ts diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.module.ts b/ui-ngx/src/app/modules/home/components/device/device-credentials.module.ts index 692e2e36d1..5254bd5955 100644 --- a/ui-ngx/src/app/modules/home/components/device/device-credentials.module.ts +++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.module.ts @@ -22,7 +22,6 @@ import { DeviceCredentialsComponent } from '@home/components/device/device-crede import { DeviceCredentialsLwm2mComponent } from '@home/components/device/device-credentials-lwm2m.component'; import { DeviceCredentialsLwm2mServerComponent } from '@home/components/device/device-credentials-lwm2m-server.component'; import { DeviceCredentialsMqttBasicComponent } from '@home/components/device/device-credentials-mqtt-basic.component'; -import { DeviceExampleCommandComponent } from '@home/components/device/device-example-command.component'; @NgModule({ declarations: [ @@ -30,8 +29,7 @@ import { DeviceExampleCommandComponent } from '@home/components/device/device-ex DeviceCredentialsComponent, DeviceCredentialsLwm2mComponent, DeviceCredentialsLwm2mServerComponent, - DeviceCredentialsMqttBasicComponent, - DeviceExampleCommandComponent + DeviceCredentialsMqttBasicComponent ], imports: [ CommonModule, @@ -42,8 +40,7 @@ import { DeviceExampleCommandComponent } from '@home/components/device/device-ex DeviceCredentialsComponent, DeviceCredentialsLwm2mComponent, DeviceCredentialsLwm2mServerComponent, - DeviceCredentialsMqttBasicComponent, - DeviceExampleCommandComponent + DeviceCredentialsMqttBasicComponent ] }) export class DeviceCredentialsModule { } diff --git a/ui-ngx/src/app/modules/home/components/device/device-example-command.component.html b/ui-ngx/src/app/modules/home/components/device/device-example-command.component.html deleted file mode 100644 index ea29f533ba..0000000000 --- a/ui-ngx/src/app/modules/home/components/device/device-example-command.component.html +++ /dev/null @@ -1,86 +0,0 @@ - -
- - - MQTT - - - COAP - - - HTTP - - - -
-
- MQTT - {{'device.telemetry-command-setup-step'| translate}} - {{'device.telemetry-command-send-step'| translate}} -
- 
{{ mqttCode }}
- -
-
-
- COAP - {{'device.telemetry-command-setup-step'| translate}} - {{'device.telemetry-command-send-step-coap'| translate}} -
- 
{{ coapCode }}
- - 
JSON example: {{'[{"temperature": 40}, {"isRainy": true}]'}}
-
-
-
- HTTP - {{'device.telemetry-command-setup-step'| translate}} - {{'device.telemetry-command-send-step'| translate}} -
- 
{{ httpCode }}
- -
-
-
-
diff --git a/ui-ngx/src/app/modules/home/components/device/device-example-command.component.scss b/ui-ngx/src/app/modules/home/components/device/device-example-command.component.scss deleted file mode 100644 index 1ffdf91763..0000000000 --- a/ui-ngx/src/app/modules/home/components/device/device-example-command.component.scss +++ /dev/null @@ -1,41 +0,0 @@ -/** - * 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 { - - mat-button-toggle-group, .protocol-title { - margin-bottom: 20px; - } - - span { - margin-bottom: 10px; - } - - .protocol-toggle { - width: fit-content; - } - - .help-title { - padding-bottom: 5px; - } - - .protocol-send-command { - width: 100%; - } - - .pre-wrap { - white-space: pre-wrap; - } -} diff --git a/ui-ngx/src/app/modules/home/components/device/device-example-command.component.ts b/ui-ngx/src/app/modules/home/components/device/device-example-command.component.ts deleted file mode 100644 index ef1511b14c..0000000000 --- a/ui-ngx/src/app/modules/home/components/device/device-example-command.component.ts +++ /dev/null @@ -1,98 +0,0 @@ -/// -/// 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. -/// - -import { Component, Input, OnInit } from '@angular/core'; -import { FormControl } from '@angular/forms'; -import { Router } from '@angular/router'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; -import { TranslateService } from '@ngx-translate/core'; -import { ActionNotificationShow } from '@core/notification/notification.actions'; -import { helpBaseUrl } from '@shared/models/constants'; - -@Component({ - selector: 'tb-device-example-command', - templateUrl: './device-example-command.component.html', - styleUrls: ['./device-example-command.component.scss'] -}) - -export class DeviceExampleCommandComponent implements OnInit { - - @Input() - token: string; - - helpLink: string = helpBaseUrl + '/docs/reference/protocols/'; - - mqttCode: string; - - coapCode: string; - - httpCode: string; - - mqttSetup: string; - - coapSetup: string; - - httpSetup: string; - - protocolCtrl: FormControl; - - constructor(protected router: Router, - protected store: Store, - public translate: TranslateService) { - } - - - ngOnInit(): void { - const HOST = window.location.hostname; - this.mqttCode = `mosquitto_pub -d -q 1 -h ${HOST} -t "v1/devices/me/telemetry" -u "${this.token}" -m "{"temperature":42}"`; - this.coapCode = `cat telemetry-data.json | coap post coap://${HOST}/api/v1/${this.token}/telemetry`; - this.httpCode = `curl -v -X POST --data "{"temperature":42,"humidity":73}" http://${HOST}/api/v1/${this.token}/telemetry --header "Content-Type:application/json"`; - - this.protocolCtrl = new FormControl('mqtt'); - const mqttLink = ' Mqtt Guide'; - - // @ts-ignore - const platform = window.navigator?.userAgentData?.platform || window.navigator.platform, - macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], - windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']; - if (macosPlatforms.indexOf(platform) !== -1) { - this.mqttSetup = 'brew install mosquitto-clients'; - this.coapSetup = 'npm install coap-cli -g'; - this.httpSetup = 'brew install curl'; - } else if (windowsPlatforms.indexOf(platform) !== -1) { - this.mqttSetup = mqttLink; - this.coapSetup = 'npm install coap-cli -g'; - this.httpSetup = 'not required, available by default in windows 10+'; - } else if (/Linux/.test(platform)) { - this.mqttSetup = 'sudo apt-get install mosquitto-clients'; - this.coapSetup = 'npm install coap-cli -g'; - this.httpSetup = 'sudo apt-get install curl'; - } - } - - onDockerCodeCopied() { - this.store.dispatch(new ActionNotificationShow( - { - message: this.translate.instant('gateway.command-copied-message'), - type: 'success', - target: 'dockerCommandDialogContent', - duration: 1200, - verticalPosition: 'bottom', - horizontalPosition: 'left' - })); - } -} diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html index f268c586ba..c1485cf450 100644 --- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html @@ -29,7 +29,7 @@
- + check @@ -178,17 +178,9 @@ -
- - - - -
-
+
@@ -203,11 +195,10 @@
+ (click)="add()">{{ 'action.add' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss index e3fbd3c7c6..0fe18467fd 100644 --- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.scss @@ -37,10 +37,6 @@ } :host ::ng-deep { - .commands-container { - padding: 24px; - } - .mat-mdc-dialog-content { display: flex; flex-direction: column; diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts index 235658a374..92906b571d 100644 --- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts @@ -24,8 +24,6 @@ import { Router } from '@angular/router'; import { createDeviceProfileConfiguration, createDeviceProfileTransportConfiguration, - Device, - DeviceCredentials, DeviceProfile, DeviceProfileInfo, DeviceProfileType, @@ -59,9 +57,9 @@ import { deepTrim } from '@core/utils'; styleUrls: ['./device-wizard-dialog.component.scss'] }) export class DeviceWizardDialogComponent extends - DialogComponent implements OnDestroy, ErrorStateMatcher { + DialogComponent implements OnDestroy, ErrorStateMatcher { - @ViewChild('addDeviceWizardStepper') addDeviceWizardStepper: MatStepper; + @ViewChild('addDeviceWizardStepper', {static: true}) addDeviceWizardStepper: MatStepper; selectedIndex = 0; @@ -71,7 +69,7 @@ export class DeviceWizardDialogComponent extends entityType = EntityType; - deviceTransportTypes = Object.values(DeviceTransportType) as DeviceTransportType[]; + deviceTransportTypes = Object.values(DeviceTransportType); deviceTransportTypeTranslations = deviceTransportTypeTranslationMap; @@ -93,10 +91,6 @@ export class DeviceWizardDialogComponent extends serviceType = ServiceType.TB_RULE_ENGINE; - device: Device; - - deviceCredentials: DeviceCredentials; - private subscriptions: Subscription[] = []; private currentDeviceProfileTransportType = DeviceTransportType.DEFAULT; @@ -104,7 +98,7 @@ export class DeviceWizardDialogComponent extends protected router: Router, @Inject(MAT_DIALOG_DATA) public data: AddEntityDialogData>, @SkipSelf() private errorStateMatcher: ErrorStateMatcher, - public dialogRef: MatDialogRef, + public dialogRef: MatDialogRef, private deviceProfileService: DeviceProfileService, private deviceService: DeviceService, private breakpointObserver: BreakpointObserver, @@ -269,15 +263,13 @@ export class DeviceWizardDialogComponent extends } add(): void { - if (this.deviceCredentials) { - this.dialogRef.close(this.device); - } else if (this.allValid()) { + if (this.allValid()) { this.createDeviceProfile().pipe( mergeMap(profileId => this.createDevice(profileId)), - mergeMap(device => this.saveCredentials(device)), + mergeMap(device => this.saveCredentials(device)) ).subscribe( - (device) => { - this.device = device; + (created) => { + this.dialogRef.close(created); } ); } @@ -334,7 +326,7 @@ export class DeviceWizardDialogComponent extends } } - private createDevice(profileId): Observable { + private createDevice(profileId): Observable> { const device = { name: this.deviceWizardFormGroup.get('name').value, label: this.deviceWizardFormGroup.get('label').value, @@ -357,16 +349,15 @@ export class DeviceWizardDialogComponent extends this.addDeviceWizardStepper.selectedIndex = 0; return throwError(e); }) - ) as Observable; + ); } - private saveCredentials(device: Device): Observable { + private saveCredentials(device: BaseData): Observable { if (this.credentialsFormGroup.get('setCredential').value) { return this.deviceService.getDeviceCredentials(device.id.id).pipe( mergeMap( (deviceCredentials) => { const deviceCredentialsValue = {...deviceCredentials, ...this.credentialsFormGroup.value.credential}; - this.deviceCredentials = deviceCredentialsValue; return this.deviceService.saveDeviceCredentials(deviceCredentialsValue).pipe( catchError(e => { this.addDeviceWizardStepper.selectedIndex = 1; @@ -379,14 +370,7 @@ export class DeviceWizardDialogComponent extends ); } ), - map(() => device)); - } else { - return this.deviceService.getDeviceCredentials(device.id.id).pipe( - map((deviceCredentials) => { - this.deviceCredentials = deviceCredentials; - return device; - }) - ); + map(() => true)); } }