From 1d566feab6e75fb8f8ed9c359a065b31fd82eba4 Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Wed, 21 Aug 2019 13:35:17 +0200 Subject: [PATCH] Earlier PDF progress bar Shows an indeterminate spinner before the actual PDF creation --- .../core/pdf-services/pdf-document.service.ts | 27 +++++----- .../app/core/ui-services/progress.service.ts | 49 ++++++++++++------- .../progress-snack-bar.component.html | 2 +- .../progress-snack-bar.component.ts | 30 +++++++++--- .../styles/global-components-style.scss | 4 ++ 5 files changed, 72 insertions(+), 40 deletions(-) diff --git a/client/src/app/core/pdf-services/pdf-document.service.ts b/client/src/app/core/pdf-services/pdf-document.service.ts index 6a41a941a..03caa1611 100644 --- a/client/src/app/core/pdf-services/pdf-document.service.ts +++ b/client/src/app/core/pdf-services/pdf-document.service.ts @@ -392,6 +392,17 @@ export class PdfDocumentService { }; } + /** + * Shows the progress bar earlier + */ + private showProgress(): void { + this.matSnackBar.openFromComponent(ProgressSnackBarComponent, { + duration: 0 + }); + this.progressService.message = this.translate.instant('Creating PDF file...'); + this.progressService.progressMode = 'determinate'; + } + /** * Downloads a pdf with the standard page definitions. * @@ -400,6 +411,7 @@ export class PdfDocumentService { * @param metadata */ public download(docDefinition: object, filename: string, metadata?: object, exportInfo?: MotionExportInfo): void { + this.showProgress(); this.getStandardPaper(docDefinition, metadata, exportInfo).then(doc => { this.createPdf(doc, filename); }); @@ -413,6 +425,7 @@ export class PdfDocumentService { * @param metadata */ public downloadLandscape(docDefinition: object, filename: string, metadata?: object): void { + this.showProgress(); this.getStandardPaper(docDefinition, metadata, null, null, [50, 80, 50, 75], true).then(doc => { this.createPdf(doc, filename); }); @@ -426,6 +439,7 @@ export class PdfDocumentService { * @param logo (optional) url of a logo to be placed as ballot logo */ public downloadWithBallotPaper(docDefinition: object, filename: string, logo?: string): void { + this.showProgress(); this.getBallotPaper(docDefinition, logo).then(doc => { this.createPdf(doc, filename); }); @@ -439,17 +453,6 @@ export class PdfDocumentService { */ private async createPdf(doc: object, filetitle: string): Promise { const filename = `${filetitle}.pdf`; - - // set the required progress info - this.progressService.progressInfo = { - mode: 'determinate', - text: filename - }; - - // open progress bar - this.matSnackBar.openFromComponent(ProgressSnackBarComponent, { - duration: 0 - }); const fonts = this.getPdfFonts(); const vfs = await this.initVfs(); await this.loadAllImages(vfs); @@ -470,7 +473,6 @@ export class PdfDocumentService { // if the worker returns an object, it's always the document if (typeof data === 'object') { - // close progress bar this.matSnackBar.dismiss(); saveAs(data, filename, { autoBOM: true }); } @@ -482,6 +484,7 @@ export class PdfDocumentService { vfs: vfs }); } else { + this.matSnackBar.dismiss(); this.matSnackBar.open(this.translate.instant('Web workers are not supported on your browser.'), '', { duration: 0 }); diff --git a/client/src/app/core/ui-services/progress.service.ts b/client/src/app/core/ui-services/progress.service.ts index 01dfa7dd7..922325a9c 100644 --- a/client/src/app/core/ui-services/progress.service.ts +++ b/client/src/app/core/ui-services/progress.service.ts @@ -7,14 +7,6 @@ import { Subject } from 'rxjs'; */ export type ProgressMode = 'determinate' | 'indeterminate' | 'buffer' | 'query'; -/** - * Shape of the progress info - */ -export interface ProgressInfo { - mode: ProgressMode; - text?: string; -} - /** * Helper service to announce some sort of progress, determinate or indeterminate. */ @@ -23,34 +15,53 @@ export interface ProgressInfo { }) export class ProgressService { /** - * Subject to get progress information + * Subject to get text to display */ - private _progressInfo: Subject = new Subject(); + private _messageSubject: Subject = new Subject(); + + /** + * Subject to get the chosen progress mode + */ + private _progressModeSubject: Subject = new Subject(); /** * Subject to get the progress amount */ - private _progressAmount: Subject = new Subject(); + private _amountSubject: Subject = new Subject(); /** * Get the progress information as observable */ - public get info(): Subject { - return this._progressInfo; + public get messageSubject(): Subject { + return this._messageSubject; } /** - * Get the progres amount as observable + * get the progress mode as observable */ - public get amount(): Subject { - return this._progressAmount; + public get progressModeSubject(): Subject { + return this._progressModeSubject; + } + + /** + * Get the progress amount as observable + */ + public get amountSubject(): Subject { + return this._amountSubject; } /** * Set the progress info. Usually only required once for every part if new information */ - public set progressInfo(newInfo: ProgressInfo) { - setTimeout(() => this._progressInfo.next(newInfo)); + public set message(newText: string) { + setTimeout(() => this._messageSubject.next(newText)); + } + + /** + * Set the new progress mode + */ + public set progressMode(mode: ProgressMode) { + this._progressModeSubject.next(mode); } /** @@ -58,6 +69,6 @@ export class ProgressService { * is available. Required only if the ProgressMode is set to 'determinate' */ public set progressAmount(newAmount: number) { - this._progressAmount.next(newAmount); + this._amountSubject.next(newAmount); } } diff --git a/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.html b/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.html index 2c0641bf2..13dcac229 100644 --- a/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.html +++ b/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.html @@ -2,5 +2,5 @@ {{ message | translate }}
- +
diff --git a/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.ts b/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.ts index df37bb22d..90e6f86bd 100644 --- a/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.ts +++ b/client/src/app/shared/components/progress-snack-bar/progress-snack-bar.component.ts @@ -42,13 +42,18 @@ export class ProgressSnackBarComponent implements OnInit, OnDestroy { /** * The sub for the info */ - private infoSubscription: Subscription; + private messageSubscription: Subscription; /** * The sub for the amount */ private valueSubscription: Subscription; + /** + * + */ + private progressModeSubscription: Subscription; + /** * Public getter of the progress bar mode */ @@ -79,13 +84,17 @@ export class ProgressSnackBarComponent implements OnInit, OnDestroy { * Get the progress subject and subscribe to the info subject */ public ngOnInit(): void { - this.infoSubscription = this.progressService.info.subscribe(info => { - this._message = info.text; - this._mode = info.mode; + this.messageSubscription = this.progressService.messageSubject.subscribe(message => { + this._message = message; this.cd.detectChanges(); }); - this.valueSubscription = this.progressService.amount.pipe(distinctUntilChanged()).subscribe(value => { + this.progressModeSubscription = this.progressService.progressModeSubject.subscribe(mode => { + this._mode = mode; + this.cd.detectChanges(); + }); + + this.valueSubscription = this.progressService.amountSubject.pipe(distinctUntilChanged()).subscribe(value => { if (value - this._value >= 5 || value === 100) { this._value = value; this.cd.detectChanges(); @@ -97,14 +106,19 @@ export class ProgressSnackBarComponent implements OnInit, OnDestroy { * clear the Subscriptions */ public ngOnDestroy(): void { - if (this.infoSubscription) { - this.infoSubscription.unsubscribe(); - this.infoSubscription = null; + if (this.messageSubscription) { + this.messageSubscription.unsubscribe(); + this.messageSubscription = null; } if (this.valueSubscription) { this.valueSubscription.unsubscribe(); this.valueSubscription = null; } + + if (this.progressModeSubscription) { + this.progressModeSubscription.unsubscribe(); + this.progressModeSubscription = null; + } } } diff --git a/client/src/assets/styles/global-components-style.scss b/client/src/assets/styles/global-components-style.scss index 35903ae8c..5d90864c3 100644 --- a/client/src/assets/styles/global-components-style.scss +++ b/client/src/assets/styles/global-components-style.scss @@ -131,4 +131,8 @@ .pbl-ngrid-row:hover { background-color: rgba(0, 0, 0, 0.025); } + + .mat-progress-bar-buffer { + background-color: mat-color($background, card) !important; + } }