Add and unify loading notifications

Changes: - layertree - print - elevation widget - loading - query grid component Added: - share component - search input - login/logout/pwd change - KML import - profile
camptocamp · Dec 19, 2019 · 65ef478 · 65ef478
1 parent 11fb680
commit 65ef478
Show file tree

Hide file tree

Showing 27 changed files with 365 additions and 19 deletions.
diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
@@ -13,7 +13,9 @@
   </head>
   <body ng-class="{'gmf-profile-chart-active': !!profileChartActive}">
   <div ng-show="mainCtrl.loading" class="loading-mask">
-    <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+    <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
+      <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+    </i>
   </div>
   <header>
     <div class="logo">

diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -13,7 +13,9 @@
   </head>
   <body ng-class="{'gmf-profile-chart-active': !!profileChartActive, 'gmf-query-grid-active': !!queryGridActive}" ng-keydown="mainCtrl.onKeydown($event)">
   <div ng-show="mainCtrl.loading" class="loading-mask">
-    <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+    <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
+      <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+    </i>
   </div>
   <header>
     <div class="logo">

diff --git a/contribs/gmf/apps/mobile/index.html.ejs b/contribs/gmf/apps/mobile/index.html.ejs
@@ -18,7 +18,9 @@
                    'gmf-mobile-nav-left-is-visible': mainCtrl.leftNavVisible,
                    'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavVisible}">
     <div ng-show="mainCtrl.loading" class="loading-mask">
-      <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
+        <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+      </i>
     </div>
     <main ng-class="{'gmf-search-is-active': mainCtrl.searchOverlayVisible}">
       <gmf-map

diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -17,7 +17,9 @@
                    'gmf-mobile-nav-left-is-visible': mainCtrl.leftNavVisible,
                    'gmf-mobile-nav-right-is-visible': mainCtrl.rightNavVisible}">
     <div ng-show="mainCtrl.loading" class="loading-mask">
-      <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+      <i class="fa custom-spinner-loading fa-spin spinner-loading-mask">
+        <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+      </i>
     </div>
     <main ng-class="{'gmf-search-is-active': mainCtrl.searchOverlayVisible}">
       <gmf-map

diff --git a/contribs/gmf/src/authentication/component.html b/contribs/gmf/src/authentication/component.html
@@ -148,6 +148,11 @@
         class="form-control btn prime"
         value="{{'Connect' | translate}}" />
     </div>
+    <div class="login-spinner" ng-if="$ctrl.isLoading">
+      <i class="fa custom-spinner-connect fa-spin">
+        <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+      </i>
+    </div>
     <div ng-show="$ctrl.allowPasswordReset" class="form-group">
       <a ng-click="$ctrl.resetPassword()"
          href="">{{'Password forgotten?' | translate}}</a>

diff --git a/contribs/gmf/src/authentication/component.js b/contribs/gmf/src/authentication/component.js
@@ -276,6 +276,11 @@ class AuthenticationController {
 
     this.otpImage;
 
+    /**
+     * @type {boolean}
+     */
+    this.isLoading = false;
+
     $scope.$watch(
       () => this.gmfUser.otp_uri,
       (val) => {
@@ -372,6 +377,7 @@ class AuthenticationController {
   login() {
     const gettextCatalog = this.gettextCatalog;
 
+    this.isLoading = true;
     const errors = [];
     if (this.loginVal === '') {
       errors.push(gettextCatalog.getString('The username is required.'));
@@ -380,16 +386,19 @@ class AuthenticationController {
       errors.push(gettextCatalog.getString('The password is required.'));
     }
     if (errors.length) {
+      this.isLoading = false;
       this.setError_(errors);
     } else {
       this.gmfAuthenticationService_.login(this.loginVal, this.pwdVal, this.otpVal)
         .then(() => {
+          this.isLoading = false;
           this.loginVal = '';
           this.pwdVal = '';
           this.otpVal = '';
           this.resetError_();
         })
         .catch(() => {
+          this.isLoading = false;
           this.pwdVal = '';
           this.otpVal = '';
           this.setError_(gettextCatalog.getString('Incorrect credentials or disabled account.'));
@@ -402,11 +411,15 @@ class AuthenticationController {
    */
   logout() {
     const gettextCatalog = this.gettextCatalog;
+
+    this.isLoading = true;
     this.gmfAuthenticationService_.logout()
       .then(() => {
+        this.isLoading = false;
         this.resetError_();
       })
       .catch(() => {
+        this.isLoading = false;
         this.setError_(gettextCatalog.getString('Could not log out.'));
       });
   }
@@ -417,17 +430,20 @@ class AuthenticationController {
   resetPassword() {
     const gettextCatalog = this.gettextCatalog;
 
+    this.isLoading = true;
     if (!this.loginVal) {
       this.setError_(gettextCatalog.getString('Please, input a login...'));
       return;
     }
 
     this.gmfAuthenticationService_.resetPassword(this.loginVal)
       .then(() => {
+        this.isLoading = false;
         this.resetPasswordModalShown = true;
         this.resetError_();
       })
       .catch(() => {
+        this.isLoading = false;
         this.setError_(gettextCatalog.getString('An error occurred while resetting the password.'));
       });
 

diff --git a/contribs/gmf/src/icons/spinner.svg b/contribs/gmf/src/icons/spinner.svg
diff --git a/contribs/gmf/src/import/importdatasourceComponent.html b/contribs/gmf/src/import/importdatasourceComponent.html
@@ -76,6 +76,12 @@
 
 </div>
 
+<div ng-if="$ctrl.isLoading">
+  <i class="fa custom-spinner-importkml fa-spin">
+    <%=require('gmf/icons/spinner.svg?viewbox&height=1em')%>
+  </i>
+</div>
+
 <div
   class="gmf-importdatasource-layers"
   ng-if="$ctrl.wmsCapabilities !== null || $ctrl.wmtsCapabilities !== null">

diff --git a/contribs/gmf/src/import/importdatasourceComponent.js b/contribs/gmf/src/import/importdatasourceComponent.js
@@ -227,6 +227,11 @@ class Controller {
      */
     this.serversEngine_ = null;
 
+    /**
+     * @type {boolean}
+     */
+    this.isLoading = false;
+
     /** @type {?ExternalOGCServer[]} */
     const servers = $injector.has('gmfExternalOGCServers') ? $injector.get('gmfExternalOGCServers')
       : null;
@@ -345,15 +350,18 @@ class Controller {
     const url = this.url;
     const serviceType = guessServiceTypeByUrl(url);
 
+    this.isLoading = true;
     this.startWorking_();
     if (serviceType === Type.WMS) {
       this.ngeoQuerent_.wmsGetCapabilities(url).then(
         (wmsCapabilities) => {
           this.wmsCapabilities = wmsCapabilities;
+          this.isLoading = false;
           this.stopWorking_();
           this.search();
         },
         () => {
+          this.isLoading = false;
           // Something went wrong...
           this.stopWorking_(true);
         }
@@ -362,17 +370,20 @@ class Controller {
       this.ngeoQuerent_.wmtsGetCapabilities(url).then(
         (wmtsCapabilities) => {
           this.wmtsCapabilities = wmtsCapabilities;
+          this.isLoading = false;
           this.stopWorking_();
           this.search();
         },
         () => {
+          this.isLoading = false;
           // Something went wrong...
           this.stopWorking_(true);
         }
       );
     } else {
       // Could not determine the type of url
       this.timeout_(() => {
+        this.isLoading = false;
         this.stopWorking_(true);
       });
     }

diff --git a/contribs/gmf/src/layertree/component.html b/contribs/gmf/src/layertree/component.html
@@ -51,8 +51,8 @@
     href
     ng-click="::gmfLayertreeCtrl.toggleActive(layertreeCtrl)"
     ng-if="layertreeCtrl.node.children && layertreeCtrl.layer.loading"
-    class="fa fa-fw fa-refresh fa-sync fa-spin"
-  ></a>
+    class="fa fa-fw custom-spinner-generic fa-spin"
+  ><%=require('gmf/icons/spinner.svg?viewbox&height=1rem')%></a>
   <a
     href
     ng-click="::gmfLayertreeCtrl.toggleActive(layertreeCtrl)"

diff --git a/contribs/gmf/src/permalink/shareComponent.html b/contribs/gmf/src/permalink/shareComponent.html
@@ -31,6 +31,11 @@ <h4 class="modal-title" translate>Share this map</h4>
       <div class="form-group">
         <textarea class="form-control" ng-attr-placeholder="{{'Message (optional)' | translate }}" ng-model="$ctrl.message"></textarea>
       </div>
+      <span class="text-default" ng-if="!$ctrl.isFinishedState">
+        <i class="fa custom-spinner-generic fa-spin">
+          <%=require('gmf/icons/spinner.svg?viewbox&height=1rem')%>
+        </i>
+      </span>
       <span class="text-success" ng-if="$ctrl.successfullySent">
         <i class="fa fa-check" aria-hidden="true"></i>
           {{ 'Link successfully sent.' | translate }}

diff --git a/contribs/gmf/src/permalink/shareComponent.js b/contribs/gmf/src/permalink/shareComponent.js
@@ -165,6 +165,11 @@ class ShareComponentController {
      */
     this.errorOnsend = false;
 
+    /**
+     * @type {boolean}
+     */
+    this.isFinishedState = true;
+
     /**
      * @type {boolean}
      */
@@ -191,13 +196,20 @@ class ShareComponentController {
    * Send the short version of the permalink if the email is provided
    */
   sendShortUrl() {
+
+    this.errorOnsend = false;
+    this.successfullySent = false;
+    this.isFinishedState = false;
+
     // @ts-ignore: scope...
     if (this.$scope_.gmfShareForm.$valid) {
       this.$q_.when(this.gmfShareService_.sendShortUrl(this.permalink_, this.email, this.message))
         .then((resp) => {
           this.successfullySent = true;
+          this.isFinishedState = true;
         }, (resp) => {
           this.errorOnsend = true;
+          this.isFinishedState = true;
         });
     }
   }

diff --git a/contribs/gmf/src/print/component.html b/contribs/gmf/src/print/component.html
@@ -189,7 +189,9 @@
 
     <div class="gmf-print-actions form-group pull-right">
       <span ng-show="$ctrl.isState('PRINTING')">
-        <i class="fa fa-refresh fa-spinner fa-spin"></i>
+        <i class="fa custom-spinner-generic fa-spin">
+            <%=require('gmf/icons/spinner.svg?viewbox&height=1rem')%>
+        </i>
       </span>
 
       <a

diff --git a/contribs/gmf/src/profile/component.html b/contribs/gmf/src/profile/component.html
@@ -2,17 +2,23 @@
   class="gmf-profile-container panel"
   ng-show="ctrl.active">
 
+  <span class="text-default" ng-show="ctrl.isLoading">
+    <i class="custom-spinner-profile fa fa-spin">
+      <%=require('gmf/icons/spinner.svg?viewbox&height=3rem')%>
+    </i>
+  </span>
+
   <div
     class="ngeo-profile"
-    ng-show="!ctrl.isErrored"
+    ng-if="!ctrl.isErrored && !ctrl.isLoading"
     ngeo-profile="ctrl.profileData"
     ngeo-profile-highlight="ctrl.profileHighlight"
     ngeo-profile-options="::ctrl.profileOptions">
   </div>
 
   <ul
     class="gmf-profile-legend"
-    ng-show="!ctrl.isErrored">
+    ng-if="!ctrl.isErrored && !ctrl.isLoading">
 
     <li ng-repeat="name in ::ctrl.getLayersNames()">
       <i
@@ -27,7 +33,7 @@
 
   <div
     class="gmf-profile-export btn-group dropup"
-    ng-show="!ctrl.isErrored">
+    ng-show="!ctrl.isErrored && !ctrl.isLoading">
 
     <a
       class="dropdown-toggle"