rusikv
2 years ago
21 changed files with 987 additions and 13 deletions
@ -0,0 +1,21 @@ |
|||
{ |
|||
"fqn": "home_page_widgets.mobile_app_qr_code", |
|||
"name": "Mobile app QR code", |
|||
"deprecated": false, |
|||
"image": null, |
|||
"description": null, |
|||
"descriptor": { |
|||
"type": "static", |
|||
"sizeX": 6, |
|||
"sizeY": 3, |
|||
"resources": [], |
|||
"templateHtml": "<tb-mobile-app-qrcode-widget\n [ctx]=\"ctx\">\n</tb-mobile-app-qrcode-widget>", |
|||
"templateCss": "", |
|||
"controllerScript": "self.onInit = function() {\n self.ctx.$scope.mobileAppQrcodeWidget.ngOnInit();\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.mobileAppQrcodeWidget.ngOnDestroy();\n}", |
|||
"settingsSchema": "", |
|||
"dataKeySettingsSchema": "", |
|||
"settingsDirective": "", |
|||
"defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"cardHtml\":\"<div class='card'>HTML code here</div>\",\"cardCss\":\".card {\\n font-weight: bold;\\n font-size: 32px;\\n color: #999;\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\"},\"title\":\"HTML Card\",\"dropShadow\":true}" |
|||
}, |
|||
"tags": null |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { HttpClient } from '@angular/common/http'; |
|||
import { Injectable } from '@angular/core'; |
|||
import { defaultHttpOptionsFromConfig, RequestConfig } from '@core/http/http-utils'; |
|||
import { Observable } from 'rxjs'; |
|||
import { MobileAppSettings } from '@shared/models/mobile-app.models'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root' |
|||
}) |
|||
export class MobileAppService { |
|||
|
|||
constructor( |
|||
private http: HttpClient |
|||
) { |
|||
} |
|||
|
|||
public getMobileAppSettings(config?: RequestConfig): Observable<MobileAppSettings> { |
|||
return this.http.get<MobileAppSettings>(`/api/mobile/app/settings`, defaultHttpOptionsFromConfig(config)); |
|||
} |
|||
|
|||
public saveMobileAppSettings(mobileAppSettings: MobileAppSettings, config?: RequestConfig): Observable<MobileAppSettings> { |
|||
return this.http.post<MobileAppSettings>(`/api/mobile/app/settings`, mobileAppSettings, defaultHttpOptionsFromConfig(config)); |
|||
} |
|||
|
|||
public getMobileAppDeepLink( config?: RequestConfig): Observable<string> { |
|||
return this.http.get<string>(`/api/mobile/deepLink`, defaultHttpOptionsFromConfig(config)); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,40 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<div *ngIf="!previewMode" class="tb-title" translate>admin.mobile-app.connect-mobile-app</div> |
|||
<div class="tb-flex column center align-center"> |
|||
<div class="tb-flex row align-center shrink" style="margin-bottom: 8px" |
|||
[class.row]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.RIGHT" |
|||
[class.row-reverse]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.LEFT"> |
|||
<canvas #canvas class="tb-qrcode"></canvas> |
|||
<div *ngIf="mobileAppSettings?.qrCodeConfig.badgeEnabled" |
|||
class="tb-flex column no-gap tb-badge-container" |
|||
[class.tb-badge-container]="!previewMode"> |
|||
<ng-container *ngIf="mobileAppSettings.qrCodeConfig.badgeStyle === badgeStyle.ORIGINAL;else white"> |
|||
<img *ngIf="mobileAppSettings.iosConfig.enabled" [src]="badgeStyleURLMap.get(badgeStyle.ORIGINAL).iOS"> |
|||
<img *ngIf="mobileAppSettings.androidConfig.enabled" [src]="badgeStyleURLMap.get(badgeStyle.ORIGINAL).android"> |
|||
</ng-container> |
|||
<ng-template #white> |
|||
<img *ngIf="mobileAppSettings.iosConfig.enabled" [src]="badgeStyleURLMap.get(badgeStyle.WHITE).iOS"> |
|||
<img *ngIf="mobileAppSettings.androidConfig.enabled" [src]="badgeStyleURLMap.get(badgeStyle.WHITE).android"> |
|||
</ng-template> |
|||
</div> |
|||
</div> |
|||
<div *ngIf="mobileAppSettings?.qrCodeConfig.qrCodeLabelEnabled" class="tb-qrcode-label"> |
|||
{{ mobileAppSettings.qrCodeConfig.qrCodeLabel }} |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,56 @@ |
|||
/** |
|||
* Copyright © 2016-2024 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 '../../../../../../scss/constants'; |
|||
|
|||
:host { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.tb-title { |
|||
align-self: start; |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
line-height: 24px; |
|||
letter-spacing: 0.1px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
@media #{$mat-md-lg} { |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.25px; |
|||
} |
|||
} |
|||
|
|||
.tb-qrcode-label { |
|||
font-size: 14px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
|
|||
.tb-qrcode { |
|||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08); |
|||
border-radius: 6px; |
|||
} |
|||
|
|||
.tb-badge-container { |
|||
@media #{$mat-lt-lg} { |
|||
display: none; |
|||
} |
|||
} |
|||
@ -0,0 +1,111 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { BadgePosition, BadgeStyle, badgeStyleURLMap, MobileAppSettings } from '@shared/models/mobile-app.models'; |
|||
import { MobileAppService } from '@core/http/mobile-app.service'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { UtilsService } from '@core/services/utils.service'; |
|||
import { interval, mergeMap, Observable, Subject, takeUntil } from 'rxjs'; |
|||
import { MINUTE } from '@shared/models/time/time.models'; |
|||
import { coerceBoolean } from '@shared/decorators/coercion'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-mobile-app-qrcode-widget', |
|||
templateUrl: './mobile-app-qrcode-widget.component.html', |
|||
styleUrls: ['./mobile-app-qrcode-widget.component.scss'] |
|||
}) |
|||
export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnInit, AfterViewInit, OnDestroy { |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
@Input() |
|||
@coerceBoolean() |
|||
previewMode: boolean; |
|||
|
|||
@Input() |
|||
set mobileAppSettings(settings: MobileAppSettings) { |
|||
if (settings) { |
|||
this.mobileAppSettingsValue = settings; |
|||
} |
|||
}; |
|||
|
|||
get mobileAppSettings() { |
|||
return this.mobileAppSettingsValue; |
|||
} |
|||
|
|||
@ViewChild('canvas', {static: false}) canvasRef: ElementRef<HTMLCanvasElement>; |
|||
|
|||
private readonly destroy$ = new Subject<void>(); |
|||
|
|||
badgeStyle = BadgeStyle; |
|||
badgePosition = BadgePosition; |
|||
badgeStyleURLMap = badgeStyleURLMap; |
|||
|
|||
private mobileAppSettingsValue: MobileAppSettings; |
|||
private deepLinkTTL: number; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected cd: ChangeDetectorRef, |
|||
private mobileAppService: MobileAppService, |
|||
private utilsService: UtilsService) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
if (this.ctx) { |
|||
this.ctx.$scope.mobileAppQrcodeWidget = this; |
|||
} |
|||
if (!this.mobileAppSettings) { |
|||
this.mobileAppService.getMobileAppSettings().subscribe((settings => { |
|||
this.mobileAppSettings = settings; |
|||
this.cd.detectChanges(); |
|||
})); |
|||
} |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
this.getMobileAppDeepLink().subscribe(link => { |
|||
this.deepLinkTTL = Number(this.utilsService.getQueryParam('ttl', link)) * MINUTE; |
|||
this.updateQRCode(link); |
|||
interval(this.deepLinkTTL).pipe( |
|||
takeUntil(this.destroy$), |
|||
mergeMap(() => this.getMobileAppDeepLink()) |
|||
).subscribe(link => this.updateQRCode(link)); |
|||
}); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
super.ngOnDestroy(); |
|||
this.destroy$.next(); |
|||
this.destroy$.complete(); |
|||
} |
|||
|
|||
getMobileAppDeepLink(): Observable<string> { |
|||
return this.mobileAppService.getMobileAppDeepLink(); |
|||
} |
|||
|
|||
updateQRCode(link: string) { |
|||
import('qrcode').then((QRCode) => { |
|||
QRCode.toCanvas(this.canvasRef.nativeElement, link, { width: 125}); |
|||
}); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,161 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<mat-card appearance="outlined" class="settings-card"> |
|||
<mat-card-header> |
|||
<mat-card-title> |
|||
<span class="mat-headline-5" translate>admin.mobile-app.mobile-app-qr-code-widget-settings</span> |
|||
</mat-card-title> |
|||
</mat-card-header> |
|||
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
|||
</mat-progress-bar> |
|||
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
|||
<mat-card-content style="padding-top: 16px"> |
|||
<div class="tb-form-panel no-border no-padding" [formGroup]="mobileAppSettingsForm"> |
|||
<div class="tb-form-panel"> |
|||
<div fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div class="tb-form-panel-title" translate>admin.mobile-app.applications</div> |
|||
<tb-toggle-select formControlName="useDefaultApp"> |
|||
<tb-toggle-option [value]="true">{{ 'admin.mobile-app.default' | translate }}</tb-toggle-option> |
|||
<tb-toggle-option [value]="false">{{ 'admin.mobile-app.custom' | translate }}</tb-toggle-option> |
|||
</tb-toggle-select> |
|||
</div> |
|||
<div class="tb-form-panel stroked no-padding no-gap" formGroupName="androidConfig"> |
|||
<div class="tb-form-row no-border no-padding-bottom"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()"> |
|||
{{ 'admin.mobile-app.android' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-panel no-border no-padding-top" |
|||
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value"> |
|||
<div class="tb-form-row column-xs"> |
|||
<div class="tb-fixed-width">{{ 'admin.mobile-app.app-package-name' | translate }}</div> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="appPackage" placeholder="{{'admin.mobile-app.set' | translate}}"> |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'admin.mobile-app.app-package-name-required' | translate" |
|||
*ngIf="mobileAppSettingsForm.get('androidConfig.appPackage').hasError('required') |
|||
&& mobileAppSettingsForm.get('androidConfig.appPackage').touched" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel no-border no-padding-top" |
|||
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value"> |
|||
<div class="tb-form-row column-xs"> |
|||
<div class="tb-fixed-width">{{ 'admin.mobile-app.sha256-certificate-fingerprints' | translate }}</div> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="sha256CertFingerprints" placeholder="{{'admin.mobile-app.set' | translate}}"> |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'admin.mobile-app.sha256-certificate-fingerprints-required' | translate" |
|||
*ngIf="mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').hasError('required') |
|||
&& mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').touched" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel stroked no-padding no-gap" formGroupName="iosConfig"> |
|||
<div class="tb-form-row no-border no-padding-bottom"> |
|||
<mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()"> |
|||
{{ 'admin.mobile-app.ios' | translate }} |
|||
</mat-slide-toggle> |
|||
</div> |
|||
<div class="tb-form-panel no-border no-padding-top" |
|||
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('iosConfig.enabled').value"> |
|||
<div class="tb-form-row column-xs"> |
|||
<div class="tb-fixed-width">{{ 'admin.mobile-app.app-id' | translate }}</div> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="appId" placeholder="{{'admin.mobile-app.set' | translate}}"> |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
[matTooltip]="'admin.mobile-app.app-id-required' | translate" |
|||
*ngIf="mobileAppSettingsForm.get('iosConfig.appId').hasError('required') |
|||
&& mobileAppSettingsForm.get('iosConfig.appId').touched" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel" formGroupName="qrCodeConfig"> |
|||
<div class="tb-flex row space-between align-center"> |
|||
<div class="tb-form-panel-title" translate>admin.mobile-app.appearance-on-home-page</div> |
|||
<tb-toggle-select formControlName="showOnHomePage"> |
|||
<tb-toggle-option [value]="true">{{ 'admin.mobile-app.enabled' | translate }}</tb-toggle-option> |
|||
<tb-toggle-option [value]="false">{{ 'admin.mobile-app.disabled' | translate }}</tb-toggle-option> |
|||
</tb-toggle-select> |
|||
</div> |
|||
<div class="tb-form-panel stroked no-padding no-gap" *ngIf="mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value"> |
|||
<div class="tb-form-row space-between no-border no-padding-bottom column-xs"> |
|||
<mat-slide-toggle class="mat-slide tb-fixed-width" formControlName="badgeEnabled" |
|||
(click)="$event.stopPropagation()"> |
|||
{{ 'admin.mobile-app.badges' | translate }} |
|||
</mat-slide-toggle> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="badgeStyle" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-option *ngFor="let badgeStyle of badgeStyleTranslationsMap | keyvalue" [value]="badgeStyle.key"> |
|||
{{ badgeStyle.value | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-select formControlName="badgePosition" appearance="outline" subscriptSizing="dynamic"> |
|||
<mat-option *ngFor="let badgePosition of badgePositionTranslationsMap | keyvalue" [value]="badgePosition.key"> |
|||
{{ badgePosition.value | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel stroked no-padding no-gap" *ngIf="mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value"> |
|||
<div class="tb-form-row space-between no-border no-padding-bottom column-xs"> |
|||
<mat-slide-toggle class="mat-slide tb-fixed-width" formControlName="qrCodeLabelEnabled" (click)="$event.stopPropagation()"> |
|||
{{ 'admin.mobile-app.label' | translate }} |
|||
</mat-slide-toggle> |
|||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="qrCodeLabel" maxlength="50" placeholder="{{'admin.mobile-app.set' | translate}}"> |
|||
</mat-form-field> |
|||
</div> |
|||
</div> |
|||
<div class="tb-form-panel tb-qrcode-preview" *ngIf="mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value"> |
|||
<div class="tb-form-panel-title" translate>admin.mobile-app.preview</div> |
|||
<tb-mobile-app-qrcode-widget previewMode |
|||
[mobileAppSettings]="mobileAppSettingsForm.getRawValue()"> |
|||
</tb-mobile-app-qrcode-widget> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="tb-flex row flex-end" style="margin-top: 16px"> |
|||
<button mat-button mat-raised-button color="primary" (click)="save()" |
|||
[disabled]="(isLoading$ | async) || mobileAppSettingsForm.invalid || !mobileAppSettingsForm.dirty"> |
|||
{{ 'action.save' | translate }} |
|||
</button> |
|||
</div> |
|||
</mat-card-content> |
|||
</mat-card> |
|||
@ -0,0 +1,28 @@ |
|||
/** |
|||
* Copyright © 2016-2024 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. |
|||
*/ |
|||
|
|||
.tb-fixed-width { |
|||
min-width: 230px; |
|||
} |
|||
|
|||
.tb-qrcode-preview { |
|||
background-color: rgba(0, 0, 0, 0.04); |
|||
box-shadow: none; |
|||
|
|||
.tb-form-panel-title { |
|||
color: rgba(0, 0, 0, 0.38); |
|||
} |
|||
} |
|||
@ -0,0 +1,197 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, OnDestroy } from '@angular/core'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|||
import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard'; |
|||
import { Subject, takeUntil } from 'rxjs'; |
|||
import { MobileAppService } from '@core/http/mobile-app.service'; |
|||
import { |
|||
BadgePosition, |
|||
badgePositionTranslationsMap, |
|||
BadgeStyle, |
|||
badgeStyleTranslationsMap, |
|||
MobileAppSettings |
|||
} from '@shared/models/mobile-app.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-mobile-app-settings', |
|||
templateUrl: './mobile-app-settings.component.html', |
|||
styleUrls: ['mobile-app-settings.component.scss', './settings-card.scss'] |
|||
}) |
|||
export class MobileAppSettingsComponent extends PageComponent implements HasConfirmForm, OnDestroy { |
|||
|
|||
mobileAppSettingsForm: FormGroup; |
|||
|
|||
mobileAppSettings: MobileAppSettings; |
|||
|
|||
private readonly destroy$ = new Subject<void>(); |
|||
|
|||
badgePositionTranslationsMap = badgePositionTranslationsMap; |
|||
badgeStyleTranslationsMap = badgeStyleTranslationsMap; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private mobileAppService: MobileAppService, |
|||
public fb: FormBuilder) { |
|||
super(store); |
|||
this.buildMobileAppSettingsForm(); |
|||
this.mobileAppService.getMobileAppSettings() |
|||
.subscribe(settings => this.processMobileAppSettings(settings)); |
|||
this.mobileAppSettingsForm.get('useDefaultApp').valueChanges.pipe( |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
if (value) { |
|||
this.mobileAppSettingsForm.get('androidConfig.appPackage').clearValidators(); |
|||
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').clearValidators(); |
|||
this.mobileAppSettingsForm.get('iosConfig.appId').clearValidators(); |
|||
} else { |
|||
this.mobileAppSettingsForm.get('androidConfig.appPackage').setValidators([Validators.required]); |
|||
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').setValidators([Validators.required]); |
|||
this.mobileAppSettingsForm.get('iosConfig.appId').setValidators([Validators.required]); |
|||
} |
|||
this.mobileAppSettingsForm.get('androidConfig.appPackage').updateValueAndValidity(); |
|||
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').updateValueAndValidity(); |
|||
this.mobileAppSettingsForm.get('iosConfig.appId').updateValueAndValidity(); |
|||
}); |
|||
this.mobileAppSettingsForm.get('androidConfig.enabled').valueChanges.pipe( |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
if (!this.mobileAppSettingsForm.get('useDefaultApp').value) { |
|||
if (value) { |
|||
this.mobileAppSettingsForm.get('androidConfig.appPackage').setValidators([Validators.required]); |
|||
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').setValidators([Validators.required]); |
|||
} else { |
|||
this.mobileAppSettingsForm.get('androidConfig.appPackage').clearValidators(); |
|||
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').clearValidators(); |
|||
} |
|||
this.mobileAppSettingsForm.get('androidConfig.appPackage').updateValueAndValidity(); |
|||
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').updateValueAndValidity(); |
|||
} |
|||
if (this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) { |
|||
if (value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').enable(); |
|||
if (this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').enable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable(); |
|||
} |
|||
} else { |
|||
if (!this.mobileAppSettingsForm.get('iosConfig.enabled').value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').disable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').disable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable(); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
this.mobileAppSettingsForm.get('iosConfig.enabled').valueChanges.pipe( |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
if (!this.mobileAppSettingsForm.get('useDefaultApp').value) { |
|||
if (value) { |
|||
this.mobileAppSettingsForm.get('iosConfig.appId').setValidators([Validators.required]); |
|||
} else { |
|||
this.mobileAppSettingsForm.get('iosConfig.appId').clearValidators(); |
|||
} |
|||
this.mobileAppSettingsForm.get('iosConfig.appId').updateValueAndValidity(); |
|||
} |
|||
if (this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) { |
|||
if (value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').enable(); |
|||
if (this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').enable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable(); |
|||
} |
|||
} else { |
|||
if (!this.mobileAppSettingsForm.get('androidConfig.enabled').value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').disable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').disable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable(); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').valueChanges.pipe( |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
if (value) { |
|||
if (this.mobileAppSettingsForm.get('androidConfig.enabled').value || this.mobileAppSettingsForm.get('iosConfig.enabled').value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').enable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable(); |
|||
} |
|||
} else { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgeStyle').disable(); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable(); |
|||
} |
|||
}); |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabelEnabled').valueChanges.pipe( |
|||
takeUntil(this.destroy$) |
|||
).subscribe(value => { |
|||
if (value) { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').enable(); |
|||
} else { |
|||
this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').disable(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
super.ngOnDestroy(); |
|||
this.destroy$.next(); |
|||
this.destroy$.complete(); |
|||
} |
|||
|
|||
private buildMobileAppSettingsForm() { |
|||
this.mobileAppSettingsForm = this.fb.group({ |
|||
useDefaultApp: [true, []], |
|||
androidConfig: this.fb.group({ |
|||
enabled: [true, []], |
|||
appPackage: ['', []], |
|||
sha256CertFingerprints: ['', []] |
|||
}), |
|||
iosConfig: this.fb.group({ |
|||
enabled: [true, []], |
|||
appId: ['', []] |
|||
}), |
|||
qrCodeConfig: this.fb.group({ |
|||
showOnHomePage: [true, []], |
|||
badgeEnabled: [true, []], |
|||
badgeStyle: [{value: BadgeStyle.ORIGINAL, disabled: true}, []], |
|||
badgePosition: [{value: BadgePosition.RIGHT, disabled: true}, []], |
|||
qrCodeLabelEnabled: [true, []], |
|||
qrCodeLabel: ['', []] |
|||
}) |
|||
}); |
|||
} |
|||
|
|||
private processMobileAppSettings(mobileAppSettings: MobileAppSettings): void { |
|||
this.mobileAppSettings = {...mobileAppSettings}; |
|||
this.mobileAppSettingsForm.reset(this.mobileAppSettings); |
|||
} |
|||
|
|||
save(): void { |
|||
this.mobileAppSettings = {...this.mobileAppSettings, ...this.mobileAppSettingsForm.getRawValue()}; |
|||
this.mobileAppService.saveMobileAppSettings(this.mobileAppSettings) |
|||
.subscribe((settings) => this.processMobileAppSettings(settings)); |
|||
} |
|||
|
|||
confirmForm(): FormGroup { |
|||
return this.mobileAppSettingsForm; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,81 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 { TenantId } from '@shared/models/id/tenant-id'; |
|||
|
|||
export interface MobileAppSettings { |
|||
tenantId: TenantId; |
|||
useDefaultApp: boolean; |
|||
androidConfig: AndroidConfig; |
|||
iosConfig: IosConfig; |
|||
qrCodeConfig: QRCodeConfig; |
|||
} |
|||
|
|||
export interface AndroidConfig { |
|||
enabled: boolean; |
|||
appPackage: string; |
|||
sha256CertFingerprints: string |
|||
} |
|||
|
|||
export interface IosConfig { |
|||
enabled: boolean; |
|||
appId: string; |
|||
} |
|||
|
|||
export interface QRCodeConfig { |
|||
showOnHomePage: boolean; |
|||
badgeEnabled: boolean; |
|||
badgePosition: BadgePosition; |
|||
badgeStyle: BadgeStyle; |
|||
qrCodeLabelEnabled: boolean; |
|||
qrCodeLabel: string; |
|||
} |
|||
|
|||
export interface MobileOSBadgeURL { |
|||
iOS: string; |
|||
android: string; |
|||
} |
|||
|
|||
export enum BadgePosition { |
|||
RIGHT = 'RIGHT', |
|||
LEFT = 'LEFT' |
|||
} |
|||
|
|||
export const badgePositionTranslationsMap = new Map<BadgePosition, string>([ |
|||
[BadgePosition.RIGHT, 'admin.mobile-app.right'], |
|||
[BadgePosition.LEFT, 'admin.mobile-app.left'] |
|||
]); |
|||
|
|||
export enum BadgeStyle { |
|||
ORIGINAL = 'ORIGINAL', |
|||
WHITE = 'WHITE' |
|||
} |
|||
|
|||
export const badgeStyleTranslationsMap = new Map<BadgeStyle, string>([ |
|||
[BadgeStyle.ORIGINAL, 'admin.mobile-app.original'], |
|||
[BadgeStyle.WHITE, 'admin.mobile-app.white'] |
|||
]); |
|||
|
|||
export const badgeStyleURLMap = new Map<BadgeStyle, MobileOSBadgeURL>([ |
|||
[BadgeStyle.ORIGINAL, { |
|||
iOS: 'assets/android-ios-stores-badges/ios_store_en_black_badge.svg', |
|||
android: 'assets/android-ios-stores-badges/android_store_en_black_badge.svg' |
|||
}], |
|||
[BadgeStyle.WHITE, { |
|||
iOS: 'assets/android-ios-stores-badges/ios_store_en_white_badge.svg', |
|||
android: 'assets/android-ios-stores-badges/android_store_en_black_badge.svg' |
|||
}] |
|||
]); |
|||
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
Loading…
Reference in new issue