171 lines
9.7 KiB
HTML
171 lines
9.7 KiB
HTML
<!--
|
|
|
|
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-icon matSuffix
|
|
matTooltipPosition="above"
|
|
matTooltipClass="tb-error-tooltip"
|
|
[matTooltip]="'admin.mobile-app.label-required' | translate"
|
|
*ngIf="mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').hasError('required')
|
|
&& mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').touched"
|
|
class="tb-error">
|
|
warning
|
|
</mat-icon>
|
|
</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>
|