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

UI: Improved mobile configuration dialog to single file

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2025-07-04 12:11:18 +03:00
parent a776a214ee
commit 2e4ccac9f6
4 changed files with 35 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.html
View File

@ -43,23 +43,14 @@
[data]=createMarkDownCommand(gitRepositoryLink)></tb-markdown>
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>mobile.configuration-step.configure-api-title</div>
<div translate>mobile.configuration-step.configure-api-text</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(pathToConstants)></tb-markdown>
<div translate>mobile.configuration-step.configure-api-hint</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(configureApi)></tb-markdown>
</div>
<div class="tb-form-panel stroked" *ngIf="setApplication">
<div class="tb-form-panel-title" translate>mobile.configuration-step.configure-package-title</div>
<div translate>mobile.configuration-step.configure-package-text</div>
<div translate>mobile.configuration-step.configure-package-text-install</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(flutterInstallRenameCommand)></tb-markdown>
<div translate>mobile.configuration-step.configure-package-run-commands</div>
<tb-markdown usePlainMarkdown containerClass="tb-command-code"
[data]=createMarkDownCommand(renameCommands)></tb-markdown>
<div class="tb-form-panel-title" translate>mobile.configuration-step.configure-app-settings-title</div>
<div class="flex gap-4">
<div class="flex-1" translate>mobile.configuration-step.configure-app-settings-text</div>
<button mat-stroked-button color="primary" type="button" (click)="downloadSettings()">
<mat-icon class="tb-mat-24">download</mat-icon>
{{ 'mobile.configuration-step.download-file' | translate }}
</button>
</div>
</div>
<div class="tb-form-panel stroked">
<div class="tb-form-panel-title" translate>mobile.configuration-step.run-app-title</div>

64
ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-app-configuration-dialog.component.ts
View File

@ -22,6 +22,7 @@ import { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ActionPreferencesPutUserSettings } from '@core/auth/auth.actions';
import { MobileApp } from '@shared/models/mobile-app.models';
import { ImportExportService } from '@shared/import-export/import-export.service';
export interface MobileAppConfigurationDialogData {
afterAdd: boolean;
@ -36,53 +37,22 @@ export interface MobileAppConfigurationDialogData {
})
export class MobileAppConfigurationDialogComponent extends DialogComponent<MobileAppConfigurationDialogComponent> {
notShowAgain = false;
setApplication = false;
private fileName = 'configs.json';
notShowAgain = false;
showDontShowAgain: boolean;
gitRepositoryLink = 'git clone -b master https://github.com/thingsboard/flutter_thingsboard_app.git';
pathToConstants = 'lib/constants/app_constants.dart';
flutterRunCommand = 'flutter run';
flutterInstallRenameCommand = 'flutter pub global activate rename';
configureApi: string;
renameCommands: string[] = [];
flutterRunCommand = `flutter run --dart-define-from-file ${this.fileName}`;
constructor(protected store: Store<AppState>,
protected router: Router,
@Inject(MAT_DIALOG_DATA) private data: MobileAppConfigurationDialogData,
protected dialogRef: MatDialogRef<MobileAppConfigurationDialogComponent>,
private importExportService: ImportExportService,
) {
super(store, router, dialogRef);
this.showDontShowAgain = this.data.afterAdd;
this.setApplication = !!this.data.androidApp || !!this.data.iosApp;
this.configureApi = `static const thingsBoardApiEndpoint = '${window.location.origin}';`;
if (this.setApplication) {
this.configureApi += '\n';
if (!!this.data.androidApp) {
this.configureApi += `\nstatic const thingsboardAndroidAppSecret = '${this.data.androidApp.appSecret}';`;
}
if (!!this.data.iosApp) {
this.configureApi += `\nstatic const thingsboardIOSAppSecret = '${this.data.iosApp.appSecret}';`;
}
}
if (this.setApplication) {
if (this.data.androidApp?.pkgName === this.data.iosApp?.pkgName) {
this.renameCommands.push(`rename setBundleId --targets android, ios --value "${this.data.androidApp.pkgName}"`);
} else {
if (!!this.data.androidApp) {
this.renameCommands.push(`rename setBundleId --targets android --value "${this.data.androidApp.pkgName}"`);
}
if (!!this.data.iosApp) {
this.renameCommands.push(`rename setBundleId --targets ios --value "${this.data.iosApp.pkgName}"`);
}
}
}
}
close(): void {
@ -94,14 +64,24 @@ export class MobileAppConfigurationDialogComponent extends DialogComponent<Mobil
}
}
createMarkDownCommand(commands: string | string[]): string {
if (Array.isArray(commands)) {
const formatCommands: Array<string> = [];
commands.forEach(command => formatCommands.push(this.createMarkDownSingleCommand(command)));
return formatCommands.join(`\n<br />\n\n`);
} else {
return this.createMarkDownSingleCommand(commands);
createMarkDownCommand(commands: string): string {
return this.createMarkDownSingleCommand(commands);
}
downloadSettings(): void {
const settings: any = {
thingsBoardApiEndpoint: window.location.origin
};
if (!!this.data.androidApp) {
settings.androidApplicationId = this.data.androidApp.pkgName;
settings.thingsboardOAuth2CallbackUrlScheme = this.data.androidApp.pkgName + '.auth';
settings.thingsboardAndroidAppSecret = this.data.androidApp.appSecret;
}
if (!!this.data.iosApp) {
settings.iosApplicationId = this.data.iosApp.pkgName;
settings.thingsboardIOSAppSecret = this.data.iosApp.appSecret;
}
this.importExportService.exportJson(settings, this.fileName);
}
private createMarkDownSingleCommand(command: string): string {

2
ui-ngx/src/app/shared/import-export/import-export.service.ts
View File

@ -1188,7 +1188,7 @@ export class ImportExportService {
this.exportJson(data, filename);
}
private exportJson(data: any, filename: string) {
public exportJson(data: any, filename: string) {
if (isObject(data)) {
data = JSON.stringify(data, null, 2);
}

12
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3850,17 +3850,13 @@
"prepare-environment-text": "Flutter ThingsBoard Mobile Application requires Flutter SDK. Follow instructions to set up Flutter SDK.",
"get-source-code-title": "Get app source code",
"get-source-code-text": "You can get Flutter ThingsBoard Mobile Application source code by cloning it from the GitHub repository:",
"configure-api-title": "Configure ThingsBoard API endpoint",
"configure-api-text": "Open the flutter_thingsboard_app project in your editor/IDE. Edit:",
"configure-api-hint": "Set the value of the thingsBoardApiEndpoint constant to match the API endpoint of your ThingsBoard server instance. Do not use “localhost” or “127.0.0.1” hostnames.",
"configure-app-settings-title": "Configure app settings",
"configure-app-settings-text": "Download the configuration file and place it into the root directory of the project you cloned in the previous step.",
"download-file": "Download file",
"run-app-title": "Run the app",
"run-app-text": "Run the app as described in your IDE.\nIf using the terminal, run the app with the following command:",
"more-information": "Detailed information may be found in our Getting Started documentation.",
"getting-started": "Getting Started",
"configure-package-title": "Configure application package",
"configure-package-text": "You can manually change the Application Package or use third party CLI tool.",
"configure-package-text-install": "To install the Rename CLI Tool, execute the following command:",
"configure-package-run-commands": "Run these commands in the root directory of your project:"
"getting-started": "Getting Started"
}
},
"notification": {