gui: Allow toggleable units for transfer rate (fixes #234)

Click the transfer rate to toggle between binary-exponent bytes (KiB/s,
MiB/s) and metric based bits (kb/s, Mb/s). The setting is persisted in
browser local storage (best effort).

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/4074

gui/default/assets/css/overrides.css

@@ -221,6 +221,13 @@ identicon {
     height: 1em;
 }
 
+a.toggler {
+    color: inherit;
+}
+a.toggler:hover {
+    border-bottom: 1px dashed;
+    text-decoration: none;
+}
 
 /**
  * Progress bars with centered text

gui/default/index.html

@@ -473,11 +473,23 @@
                 <tbody>
                   <tr>
                     <th><span class="fa fa-fw fa-cloud-download"></span>&nbsp;<span translate>Download Rate</span></th>
-                    <td class="text-right">{{connectionsTotal.inbps | binary}}B/s ({{connectionsTotal.inBytesTotal | binary}}B)</td>
+                    <td class="text-right">
+                      <a href="#" class="toggler" ng-click="toggleUnits()">
+                        <span ng-if="!metricRates">{{connectionsTotal.inbps | binary}}B/s</span>
+                        <span ng-if="metricRates">{{connectionsTotal.inbps*8 | metric}}bps</span>
+                        ({{connectionsTotal.inBytesTotal | binary}}B)</span>
+                      </a>
+                    </td>
                   </tr>
                   <tr>
                     <th><span class="fa fa-fw fa-cloud-upload"></span>&nbsp;<span translate>Upload Rate</span></th>
-                    <td class="text-right">{{connectionsTotal.outbps | binary}}B/s ({{connectionsTotal.outBytesTotal | binary}}B)</td>
+                    <td class="text-right">
+                      <a href="#" class="toggler" ng-click="toggleUnits()">
+                        <span ng-if="!metricRates">{{connectionsTotal.outbps | binary}}B/s</span>
+                        <span ng-if="metricRates">{{connectionsTotal.outbps*8 | metric}}bps</span>
+                        ({{connectionsTotal.outBytesTotal | binary}}B)
+                      </a>
+                    </td>
                   </tr>
                   <tr>
                     <th><span class="fa fa-fw fa-home"></span>&nbsp;<span translate>Local State (Total)</span></th>
@@ -705,6 +717,7 @@
   <script src="syncthing/core/localeService.js"></script>
   <script src="syncthing/core/modalDirective.js"></script>
   <script src="syncthing/core/naturalFilter.js"></script>
+  <script src="syncthing/core/metricFilter.js"></script>
   <script src="syncthing/core/notificationDirective.js"></script>
   <script src="syncthing/core/pathIsSubDirDirective.js"></script>
   <script src="syncthing/core/popoverDirective.js"></script>

gui/default/syncthing/core/binaryFilter.js

@@ -1,7 +1,7 @@
 angular.module('syncthing.core')
     .filter('binary', function () {
         return function (input) {
-            if (input === undefined) {
+            if (input === undefined || isNaN(input)) {
                 return '0 ';
             }
             if (input > 1024 * 1024 * 1024) {

gui/default/syncthing/core/metricFilter.js

@@ -0,0 +1,21 @@
+angular.module('syncthing.core')
+    .filter('metric', function () {
+        return function (input) {
+            if (input === undefined || isNaN(input)) {
+                return '0 ';
+            }
+            if (input > 1000 * 1000 * 1000) {
+                input /= 1000 * 1000 * 1000;
+                return input.toFixed(decimals(input, 2)) + ' G';
+            }
+            if (input > 1000 * 1000) {
+                input /= 1000 * 1000;
+                return input.toFixed(decimals(input, 2)) + ' M';
+            }
+            if (input > 1000) {
+                input /= 1000;
+                return input.toFixed(decimals(input, 2)) + ' k';
+            }
+            return Math.round(input) + ' ';
+        };
+    });

gui/default/syncthing/core/syncthingController.js

@@ -52,6 +52,11 @@ angular.module('syncthing.core')
         $scope.scanProgress = {};
         $scope.themes = [];
         $scope.globalChangeEvents = {};
+        $scope.metricRates = false;
+
+        try {
+            $scope.metricRates = (window.localStorage["metricRates"] == "true");
+        } catch (exception) { }
 
         $scope.localStateTotal = {
             bytes: 0,
@@ -1759,7 +1764,6 @@ angular.module('syncthing.core')
         };
 
         $scope.modalLoaded = function () {
-
             // once all modal elements have been processed
             if ($('modal').length === 0) {
 
@@ -1768,4 +1772,10 @@ angular.module('syncthing.core')
             }
         }
 
+        $scope.toggleUnits = function () {
+            $scope.metricRates = !$scope.metricRates;
+            try {
+                window.localStorage["metricRates"] = $scope.metricRates;
+            } catch (exception) { }
+        }
     });