enh(device): Detect connection type from browser, when no cordova network plugin

enh(home): Add progress bar during network scan

app/config.json

@@ -6,7 +6,7 @@
     "fallbackLanguage": "en",
     "rememberMe": true,
     "showUDHistory": true,
-    "timeout": 40000,
+    "timeout": 30000,
     "timeWarningExpireMembership": 5184000,
     "timeWarningExpire": 7776000,
     "keepAuthIdle": 600,

www/css/style.css

@@ -27,6 +27,29 @@
   color: grey;
 }
 
+#home .progress-bar {
+  display: inline-block;
+  width: 50vw;
+  max-width: 300px;
+  position: relative;
+  height: 12px;
+  border-radius: 5px;
+  border: 1px solid gray;
+}
+#home .progress-fill {
+  height: 100%;
+  background-color: currentColor;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 5px;
+}
+#home .progress-text {
+  font-size: 12px;
+  color: currentColor !important;
+  opacity: 0.7;
+}
+
 #modal-license {
   color:rgb(0, 0, 0);
 }

www/js/controllers/home-controllers.js

@@ -24,11 +24,12 @@ angular.module('cesium.home.controllers', ['cesium.platform', 'cesium.services']
   .controller('HomeCtrl', HomeController)
 ;
 
-function HomeController($scope, $state, $timeout, $ionicHistory, $translate, $http, $q, $location,
-                        UIUtils, BMA, Device, csConfig, csHttp, csCache, csPlatform, csCurrency, csSettings) {
+function HomeController($scope, $state, $timeout, $interval, $ionicHistory, $translate, $http, $q, $location,
+                        UIUtils, BMA, Device, csConfig, csHttp, csCache, csPlatform, csNetwork, csCurrency, csSettings) {
   'ngInject';
 
   $scope.loading = true;
+  $scope.loadingPct = 0;
   $scope.loadingMessage = '';
   $scope.locales = angular.copy(csSettings.locales);
   $scope.smallscreen = UIUtils.screen.isSmall();
@@ -58,6 +59,22 @@ function HomeController($scope, $state, $timeout, $ionicHistory, $translate, $ht
     }
     else {
 
+      // Loading progress percent
+      var startTime = Date.now();
+      var interval = $interval(function(){
+        var duration = Date.now() - startTime;
+        var timeout = Math.max(csNetwork.data.timeout, duration);
+        console.debug('[home] Start duration: ' + duration);
+        // Waiting to start
+        if (!$scope.loadingMessage) {
+          $scope.loadingPct = Math.min($scope.loadingPct+2, 99);
+        }
+        if (duration < timeout) {
+          var loadingPct = duration / timeout * 100;
+          $scope.loadingPct = Math.min(loadingPct, 99);
+        }
+      }, 100);
+
       // Wait platform to be ready
       csPlatform.ready()
         .catch(function(err) {
@@ -65,8 +82,12 @@ function HomeController($scope, $state, $timeout, $ionicHistory, $translate, $ht
           $scope.error = err;
         })
         .then(function() {
+          // Stop progression
+          $interval.cancel(interval);
+          // Mark as loaded
           $scope.loading = false;
           $scope.loadingMessage = '';
+          $scope.loadingPct = 100;
         });
     }
   };
@@ -74,6 +95,8 @@ function HomeController($scope, $state, $timeout, $ionicHistory, $translate, $ht
 
   $scope.reload = function() {
     $scope.loading = true;
+    $scope.loadingPct = 0;
+    $scope.loadingMessage = '';
     delete $scope.error;
 
     $timeout($scope.enter, 200);

www/js/services/device-services.js

@@ -151,9 +151,39 @@ angular.module('cesium.device.services', ['cesium.utils.services', 'cesium.setti
     };
     exports.network = {
       connectionType: function () {
-        if (!exports.network.enable) return 'unknown';
+
+        // If desktop: use ethernet as default connection type
+        if (exports.isDesktop()) {
+          return 'ethernet';
+        }
+
         try {
-          return navigator.connection.type || 'unknown';
+          var connectionType = navigator.connection && (navigator.connection.effectiveType || navigator.connection.type) || 'unknown';
+          console.debug('[device] Navigator connection type: ' + connectionType);
+          switch (connectionType) {
+            case 'slow-2g':
+            case '2g':
+            case 'cell_2g':
+              return 'cell_2g';
+            case '3g':
+            case 'cell_3g':
+              return 'cell_3g';
+            case 'cell': // iOS
+            case '4g':
+            case 'cell_4g':
+              return 'cell_4g';
+            case '5g':
+            case 'cell_5g':
+              return 'cell_5g';
+            case 'wifi':
+              return 'wifi';
+            case 'ethernet':
+              return 'ethernet';
+            case 'none':
+              return 'none';
+            default:
+              return 'unknown'
+          }
         } catch (err) {
           console.error('[device] Cannot get connection type: ' + (err && err.message || err), err);
           return 'unknown';
@@ -161,7 +191,7 @@ angular.module('cesium.device.services', ['cesium.utils.services', 'cesium.setti
       },
       isOnline: function () {
         try {
-          return navigator.connection.type !== Connection.NONE;
+          return exports.network.connectionType() !== 'none';
         } catch (err) {
           console.error('[device] Cannot check if online: ' + (err && err.message || err), err);
           return true;
@@ -169,7 +199,7 @@ angular.module('cesium.device.services', ['cesium.utils.services', 'cesium.setti
       },
       isOffline: function () {
         try {
-          return navigator.connection.type === Connection.NONE;
+          return exports.network.connectionType() === 'none';
         } catch (err) {
           console.error('[device] Cannot check if offline: ' + (err && err.message || err), err);
           return true;
@@ -182,11 +212,6 @@ angular.module('cesium.device.services', ['cesium.utils.services', 'cesium.setti
         try {
           var connectionType = exports.network.connectionType();
 
-          // If desktop: use ethernet as default connection type
-          if (connectionType === 'unknown' && exports.isDesktop()) {
-            connectionType = 'ethernet';
-          }
-
           switch (connectionType) {
             case 'ethernet':
               timeout = 1000; // 1 s
@@ -194,10 +219,10 @@ angular.module('cesium.device.services', ['cesium.utils.services', 'cesium.setti
             case 'wifi':
               timeout = 2000;
               break;
-            case 'cell': // (e.g. iOS)
             case 'cell_5g':
               timeout = 3000;
               break;
+            case 'cell': // (e.g. iOS)
             case 'cell_4g':
               timeout = 5000;
               break;
@@ -205,7 +230,7 @@ angular.module('cesium.device.services', ['cesium.utils.services', 'cesium.setti
               timeout = 10000; // 10s
               break;
             case 'cell_2g':
-              timeout = 40000; // 40s
+              timeout = 30000; // 30s
               break;
             case 'none':
               timeout = 0;

www/js/services/settings-services.js

@@ -22,6 +22,8 @@ angular.module('cesium.settings.services', ['ngApi', 'cesium.config'])
       -1,
       500,
       1000,
+      2000,
+      3000,
       5000,
       10000,
       30000,
@@ -94,7 +96,7 @@ angular.module('cesium.settings.services', ['ngApi', 'cesium.config'])
     persistCache: false, // disable by default (waiting resolution of issue #885)
     walletHistoryTimeSecond: 30 * 24 * 60 * 60, // 30 days
     walletHistorySliceSecond: 5 * 24 * 60 * 60, // download using 5 days slice - need for cache
-    walletHistoryScrollMaxTimeSecond: 2 * 30 * 24 * 60 * 60, // Limit TX load infinite scroll to 2 month
+    walletHistoryScrollMaxTimeSecond: 3 * 30 * 24 * 60 * 60, // Limit TX load infinite scroll to 3 month
     walletHistoryAutoRefresh: true, // Reload TX history on new block ? Overwritten to false if device
     rememberMe: true,
     keepAuthIdle: 10 * 60,

www/templates/home/home.html

@@ -39,8 +39,17 @@
         </h4>
 
         <div class="center padding" ng-if="loading">
-          <ion-spinner icon="android" ></ion-spinner>
-          <p class="text-italic" translate-values=":currency:{currency: $root.currency.name}" translate>{{loadingMessage}}</p>
+          <p class="text-center" translate>COMMON.LOADING</p>
+
+          <div class="progress-bar" ng-if="loadingPct">
+            <div class="progress-fill" style="width: {{loadingPct + '%'}}">
+            </div>
+          </div>
+
+          <p class="text-italic progress-text" ng-if="loadingPct">
+            <span translate-values=":currency:{currency: $root.currency.name}" translate>{{loadingMessage}}</span>
+            <span>({{loadingPct|formatInteger}}&nbsp;%)</small>
+          </p>
         </div>
 
         <div class="center padding animate-fade-in animate-show-hide ng-hide" ng-show="!loading && error">
@@ -145,6 +154,8 @@
           </p>
 
 
+        </div>
+
         <div class="text-center no-padding visible-xs stable">
           <br/>
           <!-- version -->
@@ -153,9 +164,6 @@
           <!-- about -->
           <a href="#" ng-click="showAboutModal()" translate>HOME.BTN_ABOUT</a>
         </div>
-
-        </div>
-
       </div>
 
       <!-- left col spacer-->