Igor Kulikov
4 years ago
25 changed files with 756 additions and 155 deletions
@ -0,0 +1,34 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<div class="tb-getting-started-completed-dialog-container" fxLayout="column"> |
|||
<div fxLayout="row" fxLayoutAlign="start center" style="height: 64px; padding: 8px;"> |
|||
<span fxFlex></span> |
|||
<button mat-icon-button (click)="close()" type="button"> |
|||
<mat-icon class="material-icons">close</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div fxLayout="row" fxLayoutAlign="center center" style="height: 70px;"> |
|||
<div class="tb-done-container" fxLayout="row" fxLayoutAlign="center center"> |
|||
<mat-icon class="tb-done-icon" color="primary">done</mat-icon> |
|||
</div> |
|||
</div> |
|||
<div fxLayout="column" fxLayoutAlign="start center" style="padding-top: 30px;"> |
|||
<div class="tb-done-welcome-title" translate>widgets.getting-started.done-welcome-title</div> |
|||
<div class="tb-done-welcome-text" translate>widgets.getting-started.done-welcome-text</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,62 @@ |
|||
/** |
|||
* 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. |
|||
*/ |
|||
.tb-getting-started-completed-dialog { |
|||
.mat-mdc-dialog-container .mdc-dialog__surface { |
|||
border-radius: 8px; |
|||
background-image: url(/assets/home/greetings_bg.svg); |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.tb-getting-started-completed-dialog-container { |
|||
width: 500px; |
|||
height: 290px; |
|||
} |
|||
|
|||
.tb-done-container { |
|||
width: 70px; |
|||
height: 70px; |
|||
border-radius: 50%; |
|||
background: rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.tb-done-icon { |
|||
width: 62px; |
|||
height: 62px; |
|||
line-height: 56px; |
|||
font-size: 36px; |
|||
text-align: center; |
|||
border-radius: 50%; |
|||
border: 2px solid #305680; |
|||
background: #FFFFFF; |
|||
} |
|||
|
|||
.tb-done-welcome-title { |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
line-height: 24px; |
|||
letter-spacing: 0.1px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
padding-bottom: 8px; |
|||
} |
|||
|
|||
.tb-done-welcome-text { |
|||
font-weight: 400; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
letter-spacing: 0.15px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
///
|
|||
/// 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, ViewEncapsulation } from '@angular/core'; |
|||
import { MatDialogRef } from '@angular/material/dialog'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { UntypedFormGroup } from '@angular/forms'; |
|||
import { DialogComponent } from '@shared/components/dialog.component'; |
|||
import { Router } from '@angular/router'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-getting-started-completed-dialog', |
|||
templateUrl: './getting-started-completed-dialog.component.html', |
|||
styleUrls: ['./getting-started-completed-dialog.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class GettingStartedCompletedDialogComponent extends |
|||
DialogComponent<GettingStartedCompletedDialogComponent, void> { |
|||
|
|||
addDocLinkFormGroup: UntypedFormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
protected router: Router, |
|||
public dialogRef: MatDialogRef<GettingStartedCompletedDialogComponent, void>) { |
|||
super(store, router, dialogRef); |
|||
dialogRef.addPanelClass('tb-getting-started-completed-dialog'); |
|||
} |
|||
|
|||
close(): void { |
|||
this.dialogRef.close(); |
|||
} |
|||
} |
|||
@ -0,0 +1,101 @@ |
|||
<!-- |
|||
|
|||
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. |
|||
|
|||
--> |
|||
<div class="tb-title" translate>widgets.getting-started.get-started</div> |
|||
<div class="tb-get-started-container"> |
|||
<mat-stepper #matStepper class="tb-get-started" orientation="vertical" [linear]="false" |
|||
[selectedIndex]="gettingStarted.lastSelectedIndex" |
|||
(selectionChange)="updateSelectedIndex($event)"> |
|||
<ng-template matStepperIcon="edit" let-index="index"> |
|||
{{ index + 1 }} |
|||
</ng-template> |
|||
<ng-container [ngSwitch]="authUser.authority"> |
|||
<ng-template [ngSwitchCase]="authority.SYS_ADMIN"> |
|||
<mat-step [completed]="gettingStarted.maxSelectedIndex > -1"> |
|||
<ng-template matStepLabel> |
|||
<div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div translate>widgets.getting-started.sys-admin.step1.title</div> |
|||
<a *ngIf="matStepper.selectedIndex === 0" mat-button color="primary" routerLink="/tenants">{{ 'tenant.tenants' | translate }}</a> |
|||
</div> |
|||
</ng-template> |
|||
<div [innerHTML]="'widgets.getting-started.sys-admin.step1.content' | translate | safe: 'html'"></div> |
|||
<a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/tenants/#adding-a-tenant" target="_blank"> |
|||
<mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step1.how-to-create-tenant' | translate }}</a> |
|||
</mat-step> |
|||
<mat-step [completed]="gettingStarted.maxSelectedIndex > 0"> |
|||
<ng-template matStepLabel> |
|||
<div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div translate>widgets.getting-started.sys-admin.step2.title</div> |
|||
<a *ngIf="matStepper.selectedIndex === 1" mat-button color="primary" routerLink="/settings/outgoing-mail">{{ 'admin.settings' | translate }}</a> |
|||
</div> |
|||
</ng-template> |
|||
<div [innerHTML]="'widgets.getting-started.sys-admin.step2.content' | translate | safe: 'html'"></div> |
|||
<a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/mail-settings/" target="_blank"> |
|||
<mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step2.how-to-configure-mail-server' | translate }}</a> |
|||
</mat-step> |
|||
<mat-step [completed]="gettingStarted.maxSelectedIndex > 1"> |
|||
<ng-template matStepLabel> |
|||
<div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div translate>widgets.getting-started.sys-admin.step3.title</div> |
|||
<a *ngIf="matStepper.selectedIndex === 2" mat-button color="primary" routerLink="/settings/notifications">{{ 'admin.settings' | translate }}</a> |
|||
</div> |
|||
</ng-template> |
|||
<div [innerHTML]="'widgets.getting-started.sys-admin.step3.content' | translate | safe: 'html'"></div> |
|||
<a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/ui/sms-provider-settings/" target="_blank"> |
|||
<mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step3.how-to-configure-sms-provider' | translate }}</a> |
|||
</mat-step> |
|||
<mat-step [completed]="gettingStarted.maxSelectedIndex > 2"> |
|||
<ng-template matStepLabel> |
|||
<div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div translate>widgets.getting-started.sys-admin.step4.title</div> |
|||
<a *ngIf="matStepper.selectedIndex === 3" mat-button color="primary" routerLink="/security-settings/2fa">{{ 'admin.settings' | translate }}</a> |
|||
</div> |
|||
</ng-template> |
|||
<div [innerHTML]="'widgets.getting-started.sys-admin.step4.content' | translate | safe: 'html'"></div> |
|||
<a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/two-factor-authentication/" target="_blank"> |
|||
<mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step4.how-to-configure-2fa' | translate }}</a> |
|||
</mat-step> |
|||
<mat-step [completed]="gettingStarted.maxSelectedIndex > 3"> |
|||
<ng-template matStepLabel> |
|||
<div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div translate>widgets.getting-started.sys-admin.step5.title</div> |
|||
<a *ngIf="matStepper.selectedIndex === 4" mat-button color="primary" routerLink="/security-settings/oauth2">{{ 'admin.settings' | translate }}</a> |
|||
</div> |
|||
</ng-template> |
|||
<div [innerHTML]="'widgets.getting-started.sys-admin.step5.content' | translate | safe: 'html'"></div> |
|||
<a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/oauth-2-support/" target="_blank"> |
|||
<mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step5.how-to-configure-oauth2' | translate }}</a> |
|||
</mat-step> |
|||
<mat-step [completed]="gettingStarted.maxSelectedIndex > 4"> |
|||
<ng-template matStepLabel> |
|||
<div style="width: 100%;" fxLayout="row" fxLayoutAlign="space-between center"> |
|||
<div translate>widgets.getting-started.sys-admin.step6.title</div> |
|||
<a *ngIf="matStepper.selectedIndex === 5" mat-button color="primary" routerLink="/notification/rules">{{ 'admin.settings' | translate }}</a> |
|||
</div> |
|||
</ng-template> |
|||
<div [innerHTML]="'widgets.getting-started.sys-admin.step6.content' | translate | safe: 'html'"></div> |
|||
<a mat-stroked-button color="primary" href="https://thingsboard.io/docs/user-guide/to-do/" target="_blank"> |
|||
<mat-icon>description</mat-icon>{{ 'widgets.getting-started.sys-admin.step6.how-to-configure-notifications' | translate }}</a> |
|||
</mat-step> |
|||
</ng-template> |
|||
</ng-container> |
|||
</mat-stepper> |
|||
<div *ngIf="allCompleted" fxLayout="column" fxLayoutAlign="center center" style="padding-top: 24px;"> |
|||
<button (click)="gettingStartedCompleted()" mat-flat-button color="primary"> |
|||
<mat-icon>rocket_launch</mat-icon>{{ 'widgets.getting-started.finish' | translate }}</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,118 @@ |
|||
/** |
|||
* 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 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
|
|||
.tb-title { |
|||
font-weight: 600; |
|||
font-size: 20px; |
|||
line-height: 24px; |
|||
letter-spacing: 0.1px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
padding-bottom: 24px; |
|||
@media screen and (min-width: 960px) and (max-width: 1819px) { |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.25px; |
|||
padding-bottom: 20px; |
|||
} |
|||
} |
|||
.tb-get-started-container { |
|||
flex: 1; |
|||
overflow: auto; |
|||
} |
|||
} |
|||
|
|||
:host ::ng-deep { |
|||
|
|||
.tb-get-started .mat-vertical-stepper-header { |
|||
border-radius: 12px; |
|||
padding: 12px; |
|||
height: auto; |
|||
} |
|||
|
|||
.tb-get-started .mat-vertical-stepper-header[aria-selected="true"] { |
|||
background: rgba(0, 0, 0, 0.03); |
|||
border-bottom-right-radius: 0; |
|||
border-bottom-left-radius: 0; |
|||
} |
|||
|
|||
.tb-get-started .mat-vertical-content-container { |
|||
margin-left: 0; |
|||
border-bottom-left-radius: 12px; |
|||
border-bottom-right-radius: 12px; |
|||
background: rgba(0, 0, 0, 0.03); |
|||
} |
|||
|
|||
.tb-get-started .mat-stepper-vertical-line::before { |
|||
content: none; |
|||
} |
|||
|
|||
.tb-get-started .mat-step-label { |
|||
width: 100%; |
|||
white-space: inherit; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
color: rgba(0, 0, 0, 0.76); |
|||
} |
|||
|
|||
.tb-get-started .mat-step-label.mat-step-label-selected { |
|||
font-weight: 500; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
color: rgba(0, 0, 0, 0.87); |
|||
} |
|||
|
|||
.tb-get-started .mat-vertical-content p { |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
letter-spacing: 0.2px; |
|||
color: rgba(0, 0, 0, 0.54); |
|||
} |
|||
|
|||
@media screen and (min-width: 960px) and (max-width: 1819px) { |
|||
.tb-get-started .mat-step-label { |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
} |
|||
.tb-get-started .mat-step-label.mat-step-label-selected { |
|||
font-size: 13px; |
|||
line-height: 16px; |
|||
} |
|||
|
|||
.tb-get-started .mdc-button { |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
} |
|||
|
|||
.tb-get-started .mat-vertical-content p { |
|||
font-size: 12px; |
|||
line-height: 16px; |
|||
letter-spacing: 0.25px; |
|||
} |
|||
|
|||
.tb-get-started .mat-vertical-content { |
|||
padding: 0 16px 16px 16px; |
|||
} |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,134 @@ |
|||
///
|
|||
/// 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 { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { UserSettingsService } from '@core/http/user-settings.service'; |
|||
import { getCurrentAuthUser } from '@core/auth/auth.selectors'; |
|||
import { WidgetContext } from '@home/models/widget-component.models'; |
|||
import { MatDialog } from '@angular/material/dialog'; |
|||
import { |
|||
GettingStartedCompletedDialogComponent |
|||
} from '@home/components/widget/lib/home-page/getting-started-completed-dialog.component'; |
|||
import { GettingStarted } from '@shared/models/user-settings.models'; |
|||
import { CdkStep, StepperSelectionEvent } from '@angular/cdk/stepper'; |
|||
import { isUndefined } from '@core/utils'; |
|||
import { MatStepper } from '@angular/material/stepper'; |
|||
import { first } from 'rxjs/operators'; |
|||
import { Authority } from '@shared/models/authority.enum'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-getting-started-widget', |
|||
templateUrl: './getting-started-widget.component.html', |
|||
styleUrls: ['./getting-started-widget.component.scss'] |
|||
}) |
|||
export class GettingStartedWidgetComponent extends PageComponent implements OnInit, OnDestroy { |
|||
|
|||
@ViewChild('matStepper') |
|||
matStepper: MatStepper; |
|||
|
|||
@Input() |
|||
ctx: WidgetContext; |
|||
|
|||
authority = Authority; |
|||
|
|||
authUser = getCurrentAuthUser(this.store); |
|||
gettingStarted: GettingStarted = { |
|||
lastSelectedIndex: 0, |
|||
maxSelectedIndex: 0 |
|||
}; |
|||
allCompleted = false; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private cd: ChangeDetectorRef, |
|||
private userSettingsService: UserSettingsService, |
|||
private dialog: MatDialog) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit() { |
|||
this.userSettingsService.getGettingStarted().subscribe( |
|||
(gettingStarted) => { |
|||
if (gettingStarted) { |
|||
this.gettingStarted = gettingStarted; |
|||
if (isUndefined(this.gettingStarted.lastSelectedIndex)) { |
|||
this.gettingStarted.lastSelectedIndex = 0; |
|||
} |
|||
if (isUndefined(this.gettingStarted.maxSelectedIndex)) { |
|||
this.gettingStarted.maxSelectedIndex = 0; |
|||
} |
|||
if (this.gettingStarted.lastSelectedIndex > 0 && this.gettingStarted.lastSelectedIndex < this.matStepper.steps.length) { |
|||
const animationDuration = this.matStepper.animationDuration; |
|||
this.matStepper.animationDuration = '0'; |
|||
this.matStepper.selectedIndex = this.gettingStarted.lastSelectedIndex; |
|||
this.matStepper.animationDone.pipe(first()).subscribe(() => { |
|||
setTimeout(() => {this.matStepper.animationDuration = animationDuration;}, 0); |
|||
}); |
|||
} |
|||
if (this.matStepper.steps.length) { |
|||
this.updateCompletedSteps(); |
|||
this.cd.markForCheck(); |
|||
} else { |
|||
this.matStepper.steps.changes.subscribe( |
|||
() => { |
|||
this.updateCompletedSteps(); |
|||
this.cd.markForCheck(); |
|||
} |
|||
); |
|||
} |
|||
} |
|||
} |
|||
); |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
super.ngOnDestroy(); |
|||
} |
|||
|
|||
isSelected(step: CdkStep) { |
|||
return this.matStepper?.selected === step; |
|||
} |
|||
|
|||
gettingStartedCompleted() { |
|||
this.dialog.open<GettingStartedCompletedDialogComponent, any, |
|||
void>(GettingStartedCompletedDialogComponent, { |
|||
disableClose: true, |
|||
autoFocus: false, |
|||
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] |
|||
}).afterClosed().subscribe(); |
|||
} |
|||
|
|||
updateSelectedIndex(event: StepperSelectionEvent) { |
|||
if (this.gettingStarted.lastSelectedIndex !== event.selectedIndex) { |
|||
this.gettingStarted.lastSelectedIndex = event.selectedIndex; |
|||
if (event.selectedIndex > this.gettingStarted.maxSelectedIndex) { |
|||
this.gettingStarted.maxSelectedIndex = event.selectedIndex; |
|||
this.updateCompletedSteps(); |
|||
} |
|||
this.userSettingsService |
|||
.updateGettingStarted(this.gettingStarted, {ignoreLoading: true}).subscribe(); |
|||
} |
|||
} |
|||
|
|||
updateCompletedSteps() { |
|||
if (this.gettingStarted.maxSelectedIndex >= this.matStepper.steps.length-1) { |
|||
this.allCompleted = true; |
|||
} |
|||
} |
|||
|
|||
} |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue