ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Polish UI of track statistics bar

Browse source 
Use "x | y" format instead "x (y)"
(The old format was a bit confusing, e.g. the second part of the label
could be mistaken for an "explanation" of the first part, while it
actually is an entirely separate label.)

Repeat unit for every metric.

Use plural for units.

Use "-" everywhere when a metric is not yet available instead of mixing
"-" and "0".

Properly revert to initial "-" when removing route instead of showing
"0".

Show "0" instead of "" when route length cannot be calculated yet.

Slightly change wording ("Energy per 100km").
This commit is contained in:
Henrik Fehlauer 2019-05-30 23:52:59 +02:00
parent 0b88114ae1
commit aeb93e33b6
3 changed files with 53 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

29
js/control/TrackStats.js
View file

@ -1,11 +1,24 @@
BR.TrackStats = L.Class.extend({
update: function(polyline, segments) {
if (segments.length == 0) {
$('#distance').html('-');
$('#distance').attr('title', '');
$('#ascend').html('-');
$('#plainascend').html('-');
$('#cost').html('-');
$('#meancostfactor').html('-');
$('#totaltime').html('-');
$('#totalenergy').html('-');
$('#meanenergy').html('-');
return;
}
var stats = this.calcStats(polyline, segments),
length1 = L.Util.formatNum(stats.trackLength / 1000, 1),
length3 = L.Util.formatNum(stats.trackLength / 1000, 3),
meanCostFactor = stats.trackLength
? L.Util.formatNum(stats.cost / stats.trackLength, 2)
: '',
: '0',
formattedTime = L.Util.formatNum(stats.totalTime / 60, 1),
formattedEnergy = L.Util.formatNum(stats.totalEnergy / 3600000, 2),
meanEnergy = stats.trackLength
@ -13,18 +26,18 @@ BR.TrackStats = L.Class.extend({
stats.totalEnergy / 36 / stats.trackLength,
2
)
: '';
: '0';
$('#distance').html(length1);
// alternative 3-digit format down to meters as tooltip
$('#distance').attr('title', length3 + ' km');
$('#ascend').html(
stats.filteredAscend + ' (' + stats.plainAscend + ')'
);
$('#cost').html(stats.cost + ' (' + meanCostFactor + ')');
$('#ascend').html(stats.filteredAscend);
$('#plainascend').html(stats.plainAscend);
$('#cost').html(stats.cost);
$('#meancostfactor').html(meanCostFactor);
$('#totaltime').html(formattedTime);
$('#totalenergy').html(formattedEnergy + ' (' + meanEnergy + ')');
$('#totalenergy').html(formattedEnergy);
$('#meanenergy').html(meanEnergy);
document.getElementById(
'totaltime'
).parentElement.parentElement.hidden = !stats.totalTime;