From fa906593b66274e1ce09948c56561e0d84b76a43 Mon Sep 17 00:00:00 2001
From: Benoit Lavenier <benoit.lavenier@e-is.pro>
Date: Thu, 17 Aug 2023 12:37:34 +0200
Subject: [PATCH] enh(device): Detect connection type from browser, when no
cordova network plugin enh(home): Add progress bar during network scan
---
app/config.json | 2 +-
www/css/style.css | 23 +++++++++++++
www/js/controllers/home-controllers.js | 27 +++++++++++++--
www/js/services/device-services.js | 47 ++++++++++++++++++++------
www/js/services/settings-services.js | 4 ++-
www/templates/home/home.html | 30 ++++++++++------
6 files changed, 107 insertions(+), 26 deletions(-)
diff --git a/app/config.json b/app/config.json
index 118f7938a..efd89cb17 100644
--- a/app/config.json
+++ b/app/config.json
@@ -6,7 +6,7 @@
"fallbackLanguage": "en",
"rememberMe": true,
"showUDHistory": true,
- "timeout": 40000,
+ "timeout": 30000,
"timeWarningExpireMembership": 5184000,
"timeWarningExpire": 7776000,
"keepAuthIdle": 600,
diff --git a/www/css/style.css b/www/css/style.css
index e48547510..986697a80 100644
--- a/www/css/style.css
+++ b/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);
}
diff --git a/www/js/controllers/home-controllers.js b/www/js/controllers/home-controllers.js
index cfdd6894c..8f018a5e8 100644
--- a/www/js/controllers/home-controllers.js
+++ b/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);
diff --git a/www/js/services/device-services.js b/www/js/services/device-services.js
index 4681bb126..71f34ad2f 100644
--- a/www/js/services/device-services.js
+++ b/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;
diff --git a/www/js/services/settings-services.js b/www/js/services/settings-services.js
index 7d9b60678..d59337abb 100644
--- a/www/js/services/settings-services.js
+++ b/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,
diff --git a/www/templates/home/home.html b/www/templates/home/home.html
index 0b98de007..d4c01c896 100644
--- a/www/templates/home/home.html
+++ b/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}} %)</small>
+ </p>
</div>
<div class="center padding animate-fade-in animate-show-hide ng-hide" ng-show="!loading && error">
@@ -145,17 +154,16 @@
</p>
- <div class="text-center no-padding visible-xs stable">
- <br/>
- <!-- version -->
- {{:locale:'COMMON.APP_VERSION'|translate:{version: config.version} }}
- |
- <!-- about -->
- <a href="#" ng-click="showAboutModal()" translate>HOME.BTN_ABOUT</a>
- </div>
-
</div>
+ <div class="text-center no-padding visible-xs stable">
+ <br/>
+ <!-- version -->
+ {{:locale:'COMMON.APP_VERSION'|translate:{version: config.version} }}
+ |
+ <!-- about -->
+ <a href="#" ng-click="showAboutModal()" translate>HOME.BTN_ABOUT</a>
+ </div>
</div>
<!-- left col spacer-->
--
GitLab