Improves the SpinnerComponent

- The AppComponent listens to `stable`-state and `user` to determine whether the spinner should be hidden.
- Show the spinner only if the login data are correct.
- If the user is anonymous, the spinner will be hidden when the app is stable.
This commit is contained in:
GabrielMeyer 2019-05-27 17:58:43 +02:00
parent 1599e91fa5
commit 6aa2508e39
2 changed files with 41 additions and 7 deletions

View File

@ -16,6 +16,7 @@ import { PrioritizeService } from './core/core-services/prioritize.service';
import { PingService } from './core/core-services/ping.service'; import { PingService } from './core/core-services/ping.service';
import { SpinnerService } from './core/ui-services/spinner.service'; import { SpinnerService } from './core/ui-services/spinner.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { ViewUser } from './site/users/models/view-user';
/** /**
* Angular's global App Component * Angular's global App Component
@ -26,6 +27,16 @@ import { Router } from '@angular/router';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
/**
* Member to hold the state of `stable`.
*/
private isStable: boolean;
/**
* Member to hold the user.
*/
private user: ViewUser;
/** /**
* Master-component of all apps. * Master-component of all apps.
* *
@ -49,11 +60,11 @@ export class AppComponent {
appRef: ApplicationRef, appRef: ApplicationRef,
servertimeService: ServertimeService, servertimeService: ServertimeService,
router: Router, router: Router,
operator: OperatorService, private operator: OperatorService,
loginDataService: LoginDataService, loginDataService: LoginDataService,
constantsService: ConstantsService, // Needs to be started, so it can register itself to the WebsocketService constantsService: ConstantsService, // Needs to be started, so it can register itself to the WebsocketService
themeService: ThemeService, themeService: ThemeService,
spinnerService: SpinnerService, private spinnerService: SpinnerService,
countUsersService: CountUsersService, // Needed to register itself. countUsersService: CountUsersService, // Needed to register itself.
configService: ConfigService, configService: ConfigService,
loadFontService: LoadFontService, loadFontService: LoadFontService,
@ -88,10 +99,24 @@ export class AppComponent {
filter(s => s), filter(s => s),
auditTime(1000) auditTime(1000)
) )
.pipe(take(2)) .subscribe(stable => {
.subscribe(() => { // check the stable state only once.
spinnerService.setVisibility(false); if (!this.isStable && stable) {
this.isStable = true;
this.checkConnectionProgress();
}
}); });
// subscribe, to get the user.
operator.getViewUserObservable().subscribe(user => {
// check the user only once
if ((!this.user && user) || operator.isAnonymous) {
this.user = user;
this.checkConnectionProgress();
// if the user is logging out, remove this user.
} else if (user === null) {
this.user = user;
}
});
} }
/** /**
@ -122,4 +147,14 @@ export class AppComponent {
return string; return string;
}; };
} }
/**
* Function to check if the user is existing and the app is already stable.
* If both conditions true, hide the spinner.
*/
private checkConnectionProgress(): void {
if ((this.user || this.operator.isAnonymous) && this.isStable) {
this.spinnerService.setVisibility(false);
}
}
} }

View File

@ -149,10 +149,10 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
* Send username and password to the {@link AuthService} * Send username and password to the {@link AuthService}
*/ */
public async formLogin(): Promise<void> { public async formLogin(): Promise<void> {
this.spinnerService.setVisibility(true, this.translate.instant('Loading data. Please wait...'));
this.loginErrorMsg = ''; this.loginErrorMsg = '';
try { try {
await this.authService.login(this.loginForm.value.username, this.loginForm.value.password, () => { await this.authService.login(this.loginForm.value.username, this.loginForm.value.password, () => {
this.spinnerService.setVisibility(true, this.translate.instant('Loading data. Please wait...'));
this.clearOperatorSubscription(); // We take control, not the subscription. this.clearOperatorSubscription(); // We take control, not the subscription.
}); });
} catch (e) { } catch (e) {
@ -161,7 +161,6 @@ export class LoginMaskComponent extends BaseComponent implements OnInit, OnDestr
}); });
this.loginErrorMsg = e; this.loginErrorMsg = e;
} }
this.spinnerService.setVisibility(false);
} }
/** /**