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
This commit is contained in:
Jakob Borg 2017-03-31 06:32:54 +00:00 committed by Audrius Butkevicius
parent cbdb036b69
commit c3820fbbf2
5 changed files with 55 additions and 4 deletions

View File

@ -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

View File

@ -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>

View File

@ -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) {

View File

@ -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) + ' ';
};
});

View File

@ -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) { }
}
});