tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: push-notifications to mobile

pull/8522/head
ViacheslavKlimov 3 years ago
parent
9add2962a6
commit
1c62494973
8 changed files with 135 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
  2. 18
      ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.ts
  3. 43
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
  4. 3
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
  5. 9
      ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
  6. 26
      ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
  7. 19
      ui-ngx/src/app/shared/models/notification.models.ts
  8. 9
      ui-ngx/src/assets/locale/locale.constant-en_US.json

25
ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
View File

@ -58,7 +58,7 @@
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;"> <mat-card-content style="padding-top: 16px;">
<form [formGroup]="slackSettingsForm" (ngSubmit)="saveNotification()"> <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs"> <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<section formGroupName="SLACK"> <section formGroupName="SLACK">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
@ -66,8 +66,29 @@
<input matInput formControlName="botToken" /> <input matInput formControlName="botToken" />
</mat-form-field> </mat-form-field>
</section> </section>
</fieldset>
</form>
</mat-card-content>
<mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.mobile-settings</span>
</mat-card-title>
<span fxFlex></span>
<!-- <div tb-help="slackSettings"></div>-->
</mat-card-header>
<mat-card-content style="padding-top: 16px;">
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<section formGroupName="MOBILE">
<tb-file-input style="margin-bottom: 16px;"
required
formControlName="firebaseServiceAccountCredentials"
dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
[label]="'admin.firebase-service-account-file' | translate">
</tb-file-input>
</section>
<div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap"> <div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap">
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || slackSettingsForm.invalid || !slackSettingsForm.dirty" <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
type="submit">{{'action.save' | translate}} type="submit">{{'action.save' | translate}}
</button> </button>
</div> </div>

18
ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.ts
View File

@ -42,7 +42,7 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
smsProvider: FormGroup; smsProvider: FormGroup;
private adminSettings: AdminSettings<SmsProviderConfiguration>; private adminSettings: AdminSettings<SmsProviderConfiguration>;
slackSettingsForm: FormGroup; notificationSettingsForm: FormGroup;
private notificationSettings: NotificationSettings; private notificationSettings: NotificationSettings;
private readonly authUser: AuthUser; private readonly authUser: AuthUser;
@ -60,7 +60,7 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
this.notificationService.getNotificationSettings().subscribe( this.notificationService.getNotificationSettings().subscribe(
(settings) => { (settings) => {
this.notificationSettings = settings; this.notificationSettings = settings;
this.slackSettingsForm.reset(this.notificationSettings); this.notificationSettingsForm.reset(this.notificationSettings);
} }
); );
if (this.isSysAdmin()) { if (this.isSysAdmin()) {
@ -108,24 +108,28 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
} }
confirmForm(): FormGroup { confirmForm(): FormGroup {
return this.smsProvider.dirty ? this.smsProvider : this.slackSettingsForm; return this.smsProvider.dirty ? this.smsProvider : this.notificationSettingsForm;
} }
private buildGeneralServerSettingsForm() { private buildGeneralServerSettingsForm() {
this.slackSettingsForm = this.fb.group({ this.notificationSettingsForm = this.fb.group({
deliveryMethodsConfigs: this.fb.group({ deliveryMethodsConfigs: this.fb.group({
SLACK: this.fb.group({ SLACK: this.fb.group({
botToken: [''] botToken: ['']
}),
MOBILE: this.fb.group({
firebaseServiceAccountCredentialsFileName: [''],
firebaseServiceAccountCredentials: ['']
}) })
}) })
}); });
this.registerDisableOnLoadFormControl(this.slackSettingsForm.get('deliveryMethodsConfigs')); this.registerDisableOnLoadFormControl(this.notificationSettingsForm.get('deliveryMethodsConfigs'));
} }
saveNotification(): void { saveNotification(): void {
this.notificationSettings = deepTrim({ this.notificationSettings = deepTrim({
...this.notificationSettings, ...this.notificationSettings,
...this.slackSettingsForm.value ...this.notificationSettingsForm.value
}); });
// eslint-disable-next-line guard-for-in // eslint-disable-next-line guard-for-in
for (const method in this.notificationSettings.deliveryMethodsConfigs) { for (const method in this.notificationSettings.deliveryMethodsConfigs) {
@ -138,7 +142,7 @@ export class SmsProviderComponent extends PageComponent implements HasConfirmFor
} }
this.notificationService.saveNotificationSettings(this.notificationSettings).subscribe(setting => { this.notificationService.saveNotificationSettings(this.notificationSettings).subscribe(setting => {
this.notificationSettings = setting; this.notificationSettings = setting;
this.slackSettingsForm.reset(this.notificationSettings); this.notificationSettingsForm.reset(this.notificationSettings);
}); });
} }

43
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
View File

@ -334,6 +334,40 @@
</mat-form-field> </mat-form-field>
</form> </form>
</mat-step> </mat-step>
<mat-step *ngIf="!notificationRequestForm.get('useTemplate').value &&
notificationRequestForm.get('template.configuration.deliveryMethodsTemplates.MOBILE.enabled').value"
[stepControl]="mobileTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.mobile' | translate }}</ng-template>
<div class="tb-hint-available-params mat-body-2">
<span class="content">{{ 'notification.input-field-support-templatization' | translate}}</span>
<span tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(notificationType.GENERAL).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '820px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
</div>
<form [formGroup]="mobileTemplateForm" fxLayoutGap="8px">
<mat-form-field class="mat-block">
<mat-label translate>notification.subject</mat-label>
<input matInput formControlName="subject">
<mat-error *ngIf="mobileTemplateForm.get('subject').hasError('required')">
{{ 'notification.subject-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>notification.message</mat-label>
<textarea matInput
cdkTextareaAutosize
cols="1"
cdkAutosizeMinRows="1"
formControlName="body">
</textarea>
<mat-error *ngIf="mobileTemplateForm.get('body').hasError('required')">
{{ 'notification.message-required' | translate }}
</mat-error>
</mat-form-field>
</form>
</mat-step>
<mat-step> <mat-step>
<ng-template matStepLabel>{{ 'notification.review' | translate }}</ng-template> <ng-template matStepLabel>{{ 'notification.review' | translate }}</ng-template>
<mat-progress-spinner color="warn" mode="indeterminate" <mat-progress-spinner color="warn" mode="indeterminate"
@ -378,6 +412,15 @@
{{ preview.processedTemplates.SLACK.body }} {{ preview.processedTemplates.SLACK.body }}
</div> </div>
</section> </section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:smartphone"></mat-icon>
<div class="group-title" translate>notification.delivery-method.mobile-preview</div>
</div>
<div class="notification-content">
{{ preview.processedTemplates.MOBILE.body }}
</div>
</section>
<section class="preview-group"> <section class="preview-group">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18">supervisor_account</mat-icon> <mat-icon class="tb-mat-18">supervisor_account</mat-icon>

3
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
View File

@ -315,7 +315,7 @@ export class SentNotificationDialogComponent extends
if(this.isSysAdmin()) { if(this.isSysAdmin()) {
return true; return true;
} else if (this.isTenantAdmin()) { } else if (this.isTenantAdmin()) {
return deliveryMethod === NotificationDeliveryMethod.SLACK; return deliveryMethod === NotificationDeliveryMethod.SLACK || deliveryMethod === NotificationDeliveryMethod.MOBILE;
} }
return false; return false;
} }
@ -330,6 +330,7 @@ export class SentNotificationDialogComponent extends
return '/settings/outgoing-mail'; return '/settings/outgoing-mail';
case NotificationDeliveryMethod.SMS: case NotificationDeliveryMethod.SMS:
case NotificationDeliveryMethod.SLACK: case NotificationDeliveryMethod.SLACK:
case NotificationDeliveryMethod.MOBILE:
return '/settings/notifications'; return '/settings/notifications';
} }
} }

9
ui-ngx/src/app/modules/home/pages/notification/template/template-configuration.ts
View File

@ -43,6 +43,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
emailTemplateForm: FormGroup; emailTemplateForm: FormGroup;
smsTemplateForm: FormGroup; smsTemplateForm: FormGroup;
slackTemplateForm: FormGroup; slackTemplateForm: FormGroup;
mobileTemplateForm: FormGroup;
notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[]; notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap; notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
@ -163,11 +164,17 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
body: ['', Validators.required] body: ['', Validators.required]
}); });
this.mobileTemplateForm = this.fb.group({
subject: ['', Validators.required],
body: ['', Validators.required]
});
this.deliveryMethodFormsMap = new Map<NotificationDeliveryMethod, FormGroup>([ this.deliveryMethodFormsMap = new Map<NotificationDeliveryMethod, FormGroup>([
[NotificationDeliveryMethod.WEB, this.webTemplateForm], [NotificationDeliveryMethod.WEB, this.webTemplateForm],
[NotificationDeliveryMethod.EMAIL, this.emailTemplateForm], [NotificationDeliveryMethod.EMAIL, this.emailTemplateForm],
[NotificationDeliveryMethod.SMS, this.smsTemplateForm], [NotificationDeliveryMethod.SMS, this.smsTemplateForm],
[NotificationDeliveryMethod.SLACK, this.slackTemplateForm] [NotificationDeliveryMethod.SLACK, this.slackTemplateForm],
[NotificationDeliveryMethod.MOBILE, this.mobileTemplateForm]
]); ]);
} }

26
ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
View File

@ -259,6 +259,32 @@
</mat-form-field> </mat-form-field>
</form> </form>
</mat-step> </mat-step>
<mat-step *ngIf="templateNotificationForm.get('configuration.deliveryMethodsTemplates.MOBILE.enabled').value"
[stepControl]="mobileTemplateForm">
<ng-template matStepLabel>{{ 'notification.delivery-method.mobile' | translate }}</ng-template>
<div class="tb-hint-available-params mat-body-2">
<span class="content">{{ 'notification.input-field-support-templatization' | translate}}</span>
<span tb-help-popup="{{ notificationTemplateTypeTranslateMap.get(templateNotificationForm.get('notificationType').value).helpId }}"
tb-help-popup-placement="bottom"
trigger-style="letter-spacing:0.25px"
[tb-help-popup-style]="{maxWidth: '800px'}"
trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
</div>
<form [formGroup]="mobileTemplateForm" fxLayoutGap="8px">
<mat-form-field class="mat-block">
<mat-label translate>notification.message</mat-label>
<textarea matInput
cdkTextareaAutosize
cols="1"
cdkAutosizeMinRows="1"
formControlName="body">
</textarea>
<mat-error *ngIf="mobileTemplateForm.get('body').hasError('required')">
{{ 'notification.message-required' | translate }}
</mat-error>
</mat-form-field>
</form>
</mat-step>
</mat-horizontal-stepper> </mat-horizontal-stepper>
</div> </div>
<mat-divider></mat-divider> <mat-divider></mat-divider>

19
ui-ngx/src/app/shared/models/notification.models.ts
View File

@ -89,7 +89,7 @@ export interface NotificationSettings {
deliveryMethodsConfigs: { [key in NotificationDeliveryMethod]: NotificationDeliveryMethodConfig }; deliveryMethodsConfigs: { [key in NotificationDeliveryMethod]: NotificationDeliveryMethodConfig };
} }
export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig>{ export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig & MobileNotificationDeliveryMethodConfig>{
enabled: boolean; enabled: boolean;
method: NotificationDeliveryMethod; method: NotificationDeliveryMethod;
} }
@ -98,6 +98,10 @@ interface SlackNotificationDeliveryMethodConfig {
botToken: string; botToken: string;
} }
interface MobileNotificationDeliveryMethodConfig {
firebaseServiceAccountCredentials: string;
}
export interface SlackConversation { export interface SlackConversation {
id: string; id: string;
title: string; title: string;
@ -292,7 +296,8 @@ interface NotificationTemplateConfig {
} }
export interface DeliveryMethodNotificationTemplate extends export interface DeliveryMethodNotificationTemplate extends
Partial<WebDeliveryMethodNotificationTemplate & EmailDeliveryMethodNotificationTemplate & SlackDeliveryMethodNotificationTemplate>{ Partial<WebDeliveryMethodNotificationTemplate & EmailDeliveryMethodNotificationTemplate &
SlackDeliveryMethodNotificationTemplate & MobileDeliveryMethodNotificationTemplate> {
body?: string; body?: string;
enabled: boolean; enabled: boolean;
method: NotificationDeliveryMethod; method: NotificationDeliveryMethod;
@ -329,6 +334,10 @@ interface SlackDeliveryMethodNotificationTemplate {
conversationId: string; conversationId: string;
} }
interface MobileDeliveryMethodNotificationTemplate {
subject: string;
}
export enum NotificationStatus { export enum NotificationStatus {
SENT = 'SENT', SENT = 'SENT',
READ = 'READ' READ = 'READ'
@ -338,14 +347,16 @@ export enum NotificationDeliveryMethod {
WEB = 'WEB', WEB = 'WEB',
SMS = 'SMS', SMS = 'SMS',
EMAIL = 'EMAIL', EMAIL = 'EMAIL',
SLACK = 'SLACK' SLACK = 'SLACK',
MOBILE = 'MOBILE'
} }
export const NotificationDeliveryMethodTranslateMap = new Map<NotificationDeliveryMethod, string>([ export const NotificationDeliveryMethodTranslateMap = new Map<NotificationDeliveryMethod, string>([
[NotificationDeliveryMethod.WEB, 'notification.delivery-method.web'], [NotificationDeliveryMethod.WEB, 'notification.delivery-method.web'],
[NotificationDeliveryMethod.SMS, 'notification.delivery-method.sms'], [NotificationDeliveryMethod.SMS, 'notification.delivery-method.sms'],
[NotificationDeliveryMethod.EMAIL, 'notification.delivery-method.email'], [NotificationDeliveryMethod.EMAIL, 'notification.delivery-method.email'],
[NotificationDeliveryMethod.SLACK, 'notification.delivery-method.slack'] [NotificationDeliveryMethod.SLACK, 'notification.delivery-method.slack'],
[NotificationDeliveryMethod.MOBILE, 'notification.delivery-method.mobile']
]); ]);
export enum NotificationRequestStatus { export enum NotificationRequestStatus {

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

@ -420,7 +420,10 @@
"notifications-settings": "Notifications settings", "notifications-settings": "Notifications settings",
"slack-api-token": "Slack API token", "slack-api-token": "Slack API token",
"slack": "Slack", "slack": "Slack",
"slack-settings": "Slack settings" "slack-settings": "Slack settings",
"mobile-settings": "Mobile settings",
"firebase-service-account-file": "Firebase service account credentials JSON file",
"select-firebase-service-account-file": "Drag and drop your Firebase service account credentials file or "
}, },
"alarm": { "alarm": {
"alarm": "Alarm", "alarm": "Alarm",
@ -2847,7 +2850,9 @@
"sms": "SMS", "sms": "SMS",
"sms-preview": "SMS notification preview", "sms-preview": "SMS notification preview",
"web": "Web", "web": "Web",
"web-preview": "Web notification preview" "web-preview": "Web notification preview",
"mobile": "Mobile",
"mobile-preview": "Mobile notification preview"
}, },
"delivery-method-not-configure-click": "Delivery method is not configured. Click to setup.", "delivery-method-not-configure-click": "Delivery method is not configured. Click to setup.",
"delivery-method-not-configure-contact": "Delivery method is not configured. Contact your system administrator.", "delivery-method-not-configure-contact": "Delivery method is not configured. Contact your system administrator.",

Write Preview
Loading…
Cancel
Save