gui: Localize number formatting (fixes #4896) (#4902)

gui/default/index.html

@@ -321,9 +321,9 @@
                     <tr ng-if="!folder.paused">
                       <th><span class="fa fa-fw fa-globe"></span>&nbsp;<span translate>Global State</span></th>
                       <td class="text-right">
-                        <span tooltip data-original-title="{{model[folder.id].globalFiles | alwaysNumber}} {{'files' | translate}}, {{model[folder.id].globalDirectories | alwaysNumber}} {{'directories' | translate}}, ~{{model[folder.id].globalBytes | binary}}B">
-                          <span class="fa fa-files-o"></span>&nbsp;{{model[folder.id].globalFiles | alwaysNumber}}&ensp;
-                          <span class="fa fa-folder-o"></span>&nbsp;{{model[folder.id].globalDirectories | alwaysNumber}}&ensp;
+                        <span tooltip data-original-title="{{model[folder.id].globalFiles | alwaysNumber | localeNumber}} {{'files' | translate}}, {{model[folder.id].globalDirectories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{model[folder.id].globalBytes | binary}}B">
+                          <span class="fa fa-files-o"></span>&nbsp;{{model[folder.id].globalFiles | alwaysNumber | localeNumber}}&ensp;
+                          <span class="fa fa-folder-o"></span>&nbsp;{{model[folder.id].globalDirectories | alwaysNumber | localeNumber}}&ensp;
                           <span class="fa fa-hdd-o"></span>&nbsp;~{{model[folder.id].globalBytes | binary}}B
                         </span>
                       </td>
@@ -331,9 +331,9 @@
                     <tr ng-if="!folder.paused">
                       <th><span class="fa fa-fw fa-home"></span>&nbsp;<span translate>Local State</span></th>
                       <td class="text-right">
-                        <span tooltip data-original-title="{{model[folder.id].localFiles | alwaysNumber}} {{'files' | translate}}, {{model[folder.id].localDirectories | alwaysNumber}} {{'directories' | translate}}, ~{{model[folder.id].localBytes | binary}}B">
-                          <span class="fa fa-files-o"></span>&nbsp;{{model[folder.id].localFiles | alwaysNumber}}&ensp;
-                          <span class="fa fa-folder-o"></span>&nbsp;{{model[folder.id].localDirectories | alwaysNumber}}&ensp;
+                        <span tooltip data-original-title="{{model[folder.id].localFiles | alwaysNumber | localeNumber}} {{'files' | translate}}, {{model[folder.id].localDirectories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{model[folder.id].localBytes | binary}}B">
+                          <span class="fa fa-files-o"></span>&nbsp;{{model[folder.id].localFiles | alwaysNumber | localeNumber}}&ensp;
+                          <span class="fa fa-folder-o"></span>&nbsp;{{model[folder.id].localDirectories | alwaysNumber | localeNumber}}&ensp;
                           <span class="fa fa-hdd-o"></span>&nbsp;~{{model[folder.id].localBytes | binary}}B
                           <span ng-if="model[folder.id].ignorePatterns"><br/><i><small translate class="text-muted">Reduced by ignore patterns</small></i></span>
                         </span>
@@ -355,7 +355,7 @@
                       <th><span class="fa fa-fw fa-exclamation-circle"></span>&nbsp;<span translate>Failed Items</span></th>
                       <!-- Show the number of failed items as a link to bring up the list. -->
                       <td class="text-right">
-                        <a href="" ng-click="showFailed(folder.id)">{{model[folder.id].pullErrors | alwaysNumber}}&nbsp;<span translate>items</span></a>
+                        <a href="" ng-click="showFailed(folder.id)">{{model[folder.id].pullErrors | alwaysNumber | localeNumber}}&nbsp;<span translate>items</span></a>
                       </td>
                     </tr>
                     <tr ng-if="folder.type != 'readwrite'">
@@ -532,9 +532,9 @@
                   <tr>
                     <th><span class="fa fa-fw fa-home"></span>&nbsp;<span translate>Local State (Total)</span></th>
                     <td class="text-right">
-                        <span tooltip data-original-title="{{localStateTotal.files | alwaysNumber}} {{'files' | translate}}, {{ localStateTotal.directories | alwaysNumber}} {{'directories' | translate}}, ~{{ localStateTotal.bytes | binary}}B">
-                        <span class="fa fa-files-o"></span>&nbsp;{{localStateTotal.files | alwaysNumber}}&ensp;
-                        <span class="fa fa-folder-o"></span>&nbsp;{{localStateTotal.directories| alwaysNumber}}&ensp;
+                        <span tooltip data-original-title="{{localStateTotal.files | alwaysNumber | localeNumber}} {{'files' | translate}}, {{ localStateTotal.directories | alwaysNumber | localeNumber}} {{'directories' | translate}}, ~{{ localStateTotal.bytes | binary}}B">
+                        <span class="fa fa-files-o"></span>&nbsp;{{localStateTotal.files | alwaysNumber | localeNumber}}&ensp;
+                        <span class="fa fa-folder-o"></span>&nbsp;{{localStateTotal.directories| alwaysNumber | localeNumber}}&ensp;
                         <span class="fa fa-hdd-o"></span>&nbsp;~{{localStateTotal.bytes | binary}}B
                     </td>
                   </tr>
@@ -544,7 +544,7 @@
                   </tr>
                   <tr>
                     <th><span class="fa fa-fw fa-tachometer"></span>&nbsp;<span translate>CPU Utilization</span></th>
-                    <td class="text-right">{{system.cpuPercent | alwaysNumber | natural:1}}%</td>
+                    <td class="text-right">{{system.cpuPercent | alwaysNumber | localeNumber:2}}%</td>
                   </tr>
                   <tr>
                     <th><span class="fa fa-fw fa-sitemap"></span>&nbsp;<span translate>Listeners</span></th>
@@ -635,7 +635,7 @@
                     <tr ng-if="deviceStatus(deviceCfg) == 'syncing'">
                       <th><span class="fa fa-fw fa-exchange"></span>&nbsp;<span translate>Out of Sync Items</span></th>
                       <td class="text-right">
-                        <a href="" ng-click="showRemoteNeed(deviceCfg)">{{completion[deviceCfg.deviceID]._needItems | alwaysNumber}} <span translate>items</span>, ~{{completion[deviceCfg.deviceID]._needBytes | binary}}B</a>
+                        <a href="" ng-click="showRemoteNeed(deviceCfg)">{{completion[deviceCfg.deviceID]._needItems | alwaysNumber | localeNumber}} <span translate>items</span>, ~{{completion[deviceCfg.deviceID]._needBytes | binary}}B</a>
                       </td>
                     </tr>
                     <tr>
@@ -784,6 +784,7 @@
   <script type="text/javascript" src="syncthing/core/alwaysNumberFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/basenameFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/binaryFilter.js"></script>
+  <script type="text/javascript" src="syncthing/core/localeNumberFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/durationFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/eventService.js"></script>
   <script type="text/javascript" src="syncthing/core/identiconDirective.js"></script>
@@ -791,7 +792,6 @@
   <script type="text/javascript" src="syncthing/core/lastErrorComponentFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/localeService.js"></script>
   <script type="text/javascript" src="syncthing/core/modalDirective.js"></script>
-  <script type="text/javascript" src="syncthing/core/naturalFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/metricFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/notificationDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/pathIsSubDirDirective.js"></script>

gui/default/syncthing/app.js

@@ -82,18 +82,6 @@ function folderList(m) {
     return l;
 }
 
-function decimals(val, num) {
-    var digits, decs;
-
-    if (val === 0) {
-        return 0;
-    }
-
-    digits = Math.floor(Math.log(Math.abs(val)) / Math.log(10));
-    decs = Math.max(0, num - digits);
-    return decs;
-}
-
 function isEmptyObject(obj) {
     var name;
     for (name in obj) {

gui/default/syncthing/core/binaryFilter.js

@@ -6,16 +6,16 @@ angular.module('syncthing.core')
             }
             if (input > 1024 * 1024 * 1024) {
                 input /= 1024 * 1024 * 1024;
-                return input.toFixed(decimals(input, 2)) + ' Gi';
+                return input.toLocaleString(undefined, {maximumFractionDigits: 2}) + ' Gi';
             }
             if (input > 1024 * 1024) {
                 input /= 1024 * 1024;
-                return input.toFixed(decimals(input, 2)) + ' Mi';
+                return input.toLocaleString(undefined, {maximumFractionDigits: 2}) + ' Mi';
             }
             if (input > 1024) {
                 input /= 1024;
-                return input.toFixed(decimals(input, 2)) + ' Ki';
+                return input.toLocaleString(undefined, {maximumFractionDigits: 2}) + ' Ki';
             }
-            return Math.round(input) + ' ';
+            return Math.round(input).toLocaleString(undefined, {maximumFractionDigits: 2}) + ' ';
         };
     });

gui/default/syncthing/core/localeNumberFilter.js

@@ -0,0 +1,9 @@
+angular.module('syncthing.core')
+    .filter('localeNumber', function () {
+        return function (input, decimals) {
+            if (typeof(decimals) !== 'undefined') {
+                return input.toLocaleString(undefined, {maximumFractionDigits: decimals});
+            }
+            return input.toLocaleString();
+        };
+    });

gui/default/syncthing/core/metricFilter.js

@@ -6,16 +6,16 @@ angular.module('syncthing.core')
             }
             if (input > 1000 * 1000 * 1000) {
                 input /= 1000 * 1000 * 1000;
-                return input.toFixed(decimals(input, 2)) + ' G';
+                return input.toLocaleString(undefined, {maximumFractionDigits: 2}) + ' G';
             }
             if (input > 1000 * 1000) {
                 input /= 1000 * 1000;
-                return input.toFixed(decimals(input, 2)) + ' M';
+                return input.toLocaleString(undefined, {maximumFractionDigits: 2}) + ' M';
             }
             if (input > 1000) {
                 input /= 1000;
-                return input.toFixed(decimals(input, 2)) + ' k';
+                return input.toLocaleString(undefined, {maximumFractionDigits: 2}) + ' k';
             }
-            return Math.round(input) + ' ';
+            return Math.round(input).toLocaleString(undefined, {maximumFractionDigits: 2}) + ' ';
         };
     });

gui/default/syncthing/core/naturalFilter.js

@@ -1,6 +0,0 @@
-angular.module('syncthing.core')
-    .filter('natural', function () {
-        return function (input, valid) {
-            return input.toFixed(decimals(input, valid));
-        };
-    });