From 5f586215379aef85ff668d99f7fddddc4eb12c98 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Thu, 10 Oct 2019 14:44:04 +0200
Subject: [PATCH] Fix #179 - progress bar (works with FF, not Chrome)
---
src/app/app.component.html | 9 ++++---
src/app/app.component.scss | 20 ++++++++++++--
src/app/app.component.ts | 26 +------------------
.../calculator.component.ts | 6 ++++-
.../formulaire/definition/form-definition.ts | 8 ++++++
5 files changed, 38 insertions(+), 31 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index ada2c37dd..1ae0012df 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -65,13 +65,16 @@
[title]="uitextSidenavHelp" (click)="sidenav.close()">
<mat-icon>help</mat-icon>
</a>
+ <span style="color: white; font-weight: bold; font-size: 2em; margin-right: 50px;">{{ progressBarValue }}</span>
- <mat-progress-bar *ngIf="showProgressBar" color="accent" id="loading-progress-bar"
- [mode]="progressBarMode" [value]="progessBarValue">
- </mat-progress-bar>
<div id="toolbar-bottom-spacer"></div>
+
</mat-toolbar>
+ <div id="loading-progress-bar" *ngIf="showProgressBar">
+ <div id="progress-slider"></div>
+ </div>
+
</header>
<main>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 5573c4aea..ae416e96d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,6 +4,8 @@ $navbar_height: 54px; // @TODO not really generic
// rules
+@import "../theme.scss";
+
.dropdown-menu > li > a:hover {
background-color: rgb(172, 172, 172);
background-image: none;
@@ -31,10 +33,24 @@ button:focus {
}
#loading-progress-bar {
- z-index: 200;
- position: absolute;
+ position: fixed;
top: $navbar_height;
+ z-index: 200;
width: 100%;
+ height: 4px;
+ background-color:#fafafa;
+
+ #progress-slider {
+ width: 25%;
+ height: 4px;
+ background-color: mat-color($accent);
+ animation: 2s scroll linear infinite;
+ }
+}
+
+@keyframes scroll {
+ from { transform: translateX(-100%); }
+ to { transform: translateX(400%); }
}
#open-menu {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e8686b733..3a6e7f6b6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy, HostListener, ViewChild } from "@angular/core";
-import { Router, Event, NavigationEnd, ActivationEnd, NavigationStart, NavigationCancel, NavigationError } from "@angular/router";
+import { Router, Event, NavigationEnd, ActivationEnd } from "@angular/router";
import { MatDialog } from "@angular/material/dialog";
import { MatSidenav } from "@angular/material/sidenav";
import { MatToolbar } from "@angular/material/toolbar";
@@ -48,12 +48,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
/** shows or hides the progressbar under the navbar */
public showProgressBar = false;
- /** if true, progress bar will be in "determinate" mode, else in "indeterminate" mode */
- public progressBarDeterminate = true;
-
- /** progress bar percentage, for "determinate" mode */
- public progessBarValue = 0;
-
/** liste des modules de calcul ouverts */
private _calculators: Array<{
title: string,
@@ -93,15 +87,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
ServiceFactory.instance.notificationsService = notificationsService;
this.router.events.subscribe((event: Event) => {
- // show loading bar when changing route
- if (event instanceof NavigationStart) {
- this.showLoading(true);
- }
// close side navigation when clicking a calculator tab
if (event instanceof NavigationEnd) {
this.sidenav.close();
window.scrollTo(0, 0);
- this.showLoading(false);
}
// [de]activate calc tabs depending on loaded route
if (event instanceof ActivationEnd) {
@@ -118,10 +107,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
this.setActiveCalc(null);
}
}
- // hide loading bar on routing errors
- if (event instanceof NavigationCancel || event instanceof NavigationError) {
- this.showLoading(false);
- }
});
// hotkeys listeners
@@ -225,10 +210,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
return this.router.url;
}
- public get progressBarMode() {
- return this.progressBarDeterminate ? "determinate" : "indeterminate";
- }
-
public setActiveCalc(uid: string) {
this._calculators.forEach((calc) => {
calc.active = (calc.uid === uid);
@@ -296,11 +277,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
this.errorService.removeObserver(this);
}
- private showLoading(show: boolean) {
- this.showProgressBar = show;
- this.progressBarDeterminate = ! show;
- }
-
public get enableHeaderDoc(): boolean {
return this.currentRoute === "/list" && this._calculators.length === 0;
}
diff --git a/src/app/components/generic-calculator/calculator.component.ts b/src/app/components/generic-calculator/calculator.component.ts
index f655bd60f..a7034fa79 100644
--- a/src/app/components/generic-calculator/calculator.component.ts
+++ b/src/app/components/generic-calculator/calculator.component.ts
@@ -295,8 +295,12 @@ export class GenericCalculatorComponent implements OnInit, DoCheck, AfterViewChe
}
public doCompute() {
- this._formulaire.doCompute();
+ this.appComponent.showProgressBar = true;
this._computeClicked = true;
+ setTimeout(() => {
+ this._formulaire.doCompute();
+ this.appComponent.showProgressBar = false;
+ }, 100); // 100ms is important, a lower value may make the progress bar never appear :/
}
public onCalcResultsViewChecked() {
diff --git a/src/app/formulaire/definition/form-definition.ts b/src/app/formulaire/definition/form-definition.ts
index 41094efef..b178d3a3d 100644
--- a/src/app/formulaire/definition/form-definition.ts
+++ b/src/app/formulaire/definition/form-definition.ts
@@ -363,6 +363,14 @@ export abstract class FormulaireDefinition extends FormulaireNode implements Obs
}, sender);
}
+ /**
+ * Forwards Nub's progress updated notification.
+ * Used by CalculatorComponent to update progress bar
+ */
+ protected notifyNubProgressUpdated(sender: any, data: any) {
+ this.notifyObservers(data, sender);
+ }
+
/**
* réinitialisation du formulaire suite à un changement d'une valeur, d'une option, ... :
* effacement des résultats, application des dépendances, ...
--
GitLab