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

Merge pull request #200 from rkflx/rkflx/polish-statistics-bar

Browse source 
Polish formatting and behaviour of track statistics bar
This commit is contained in:
Norbert Renner 2019-06-01 12:13:57 +02:00 • committed by GitHub
commit 8edf0f7906
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 100 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

64
index.html
View file

@ -927,10 +927,10 @@
Distance Distance
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="distance">0</span> <span id="distance">-</span>
<abbr <abbr
data-i18n="[title]footer.kilometer;footer.kilometer-abbrev" data-i18n="[title]footer.kilometer;footer.kilometer-abbrev"
title="kilometer" title="kilometers"
>km</abbr >km</abbr
> >
</p> </p>
@ -943,54 +943,72 @@
Travel time Travel time
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="totaltime">0</span> <span id="totaltime">-</span>
<abbr <abbr
data-i18n="[title]footer.minutes;footer.minutes-abbrev" data-i18n="[title]footer.hours;footer.hours-abbrev"
title="minutes" title="hours"
>min</abbr >h</abbr
> >
</p> </p>
</li> </li>
<li hidden> <li hidden>
<div <div class="text-muted small hidden-sm-down">
class="text-muted small hidden-sm-down" <span data-i18n="footer.total-energy"
data-i18n="footer.total-energy" >Total Energy</span
>
|
<span data-i18n="footer.energy-per-100km"
>Energy per 100 km</span
> >
Total Energy (per 100km)
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="totalenergy">0 (0)</span> <span id="totalenergy">-</span>
<abbr <abbr
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev" data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
title="kilowatt hour" title="kilowatt hours"
>kWh</abbr
>
| <span id="meanenergy">-</span>
<abbr
data-i18n="[title]footer.kilowatthour;footer.kilowatthour-abbrev"
title="kilowatt hours"
>kWh</abbr >kWh</abbr
> >
</p> </p>
</li> </li>
<li> <li>
<div <div class="text-muted small hidden-sm-down">
class="text-muted small hidden-sm-down" <span data-i18n="footer.ascend">Ascend</span> |
data-i18n="footer.ascend" <span data-i18n="footer.plain-ascend"
>Plain ascend</span
> >
Ascend (Plain ascend)
</div> </div>
<p class="stats-label"> <p class="stats-label">
<span id="ascend">0 (0)</span> <span id="ascend">-</span>
<abbr <abbr
data-i18n="[title]footer.meter;footer.meter-abbrev" data-i18n="[title]footer.meter;footer.meter-abbrev"
title="meter" title="meters"
>m</abbr
>
| <span id="plainascend">-</span>
<abbr
data-i18n="[title]footer.meter;footer.meter-abbrev"
title="meters"
>m</abbr >m</abbr
> >
</p> </p>
</li> </li>
<li> <li>
<div <div class="text-muted small hidden-sm-down">
class="text-muted small hidden-sm-down" <span data-i18n="footer.cost">Cost</span> |
data-i18n="footer.cost" <span data-i18n="footer.mean-cost-factor"
>Mean cost factor</span
> >
Cost (Mean cost factor)
</div> </div>
<p class="stats-label"><span id="cost">- (-)</span></p> <p class="stats-label">
<span id="cost">-</span> |
<span id="meancostfactor">-</span>
</p>
</li> </li>
</ul> </ul>

59
js/control/TrackStats.js
View file

@ -1,30 +1,61 @@
BR.TrackStats = L.Class.extend({ BR.TrackStats = L.Class.extend({
update: function(polyline, segments) { 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), var stats = this.calcStats(polyline, segments),
length1 = L.Util.formatNum(stats.trackLength / 1000, 1), length1 = L.Util.formatNum(
length3 = L.Util.formatNum(stats.trackLength / 1000, 3), stats.trackLength / 1000,
1
).toLocaleString(),
length3 = L.Util.formatNum(
stats.trackLength / 1000,
3
).toLocaleString(),
formattedAscend = stats.filteredAscend.toLocaleString(),
formattedPlainAscend = stats.plainAscend.toLocaleString(),
formattedCost = stats.cost.toLocaleString(),
meanCostFactor = stats.trackLength meanCostFactor = stats.trackLength
? L.Util.formatNum(stats.cost / stats.trackLength, 2) ? L.Util.formatNum(
: '', stats.cost / stats.trackLength,
formattedTime = L.Util.formatNum(stats.totalTime / 60, 1), 2
formattedEnergy = L.Util.formatNum(stats.totalEnergy / 3600000, 2), ).toLocaleString()
: '0',
formattedTime =
Math.trunc(stats.totalTime / 3600) +
':' +
('0' + Math.trunc((stats.totalTime % 3600) / 60)).slice(-2),
formattedEnergy = L.Util.formatNum(
stats.totalEnergy / 3600000,
2
).toLocaleString(),
meanEnergy = stats.trackLength meanEnergy = stats.trackLength
? L.Util.formatNum( ? L.Util.formatNum(
stats.totalEnergy / 36 / stats.trackLength, stats.totalEnergy / 36 / stats.trackLength,
2 2
) ).toLocaleString()
: ''; : '0';
$('#distance').html(length1); $('#distance').html(length1);
// alternative 3-digit format down to meters as tooltip // alternative 3-digit format down to meters as tooltip
$('#distance').attr('title', length3 + ' km'); $('#distance').attr('title', length3 + ' km');
$('#ascend').html( $('#ascend').html(formattedAscend);
stats.filteredAscend + ' (' + stats.plainAscend + ')' $('#plainascend').html(formattedPlainAscend);
); $('#cost').html(formattedCost);
$('#cost').html(stats.cost + ' (' + meanCostFactor + ')'); $('#meancostfactor').html(meanCostFactor);
$('#totaltime').html(formattedTime); $('#totaltime').html(formattedTime);
$('#totalenergy').html(formattedEnergy + ' (' + meanEnergy + ')'); $('#totalenergy').html(formattedEnergy);
$('#meanenergy').html(meanEnergy);
document.getElementById( document.getElementById(
'totaltime' 'totaltime'
).parentElement.parentElement.hidden = !stats.totalTime; ).parentElement.parentElement.hidden = !stats.totalTime;

19
locales/en.json
View file

@ -33,18 +33,21 @@
"trackname": "Name" "trackname": "Name"
}, },
"footer": { "footer": {
"ascend": "Ascend (Plain ascend)", "ascend": "Ascend",
"cost": "Cost (Mean cost factor)", "plain-ascend": "Plain ascend",
"cost": "Cost",
"mean-cost-factor": "Mean cost factor",
"distance": "Distance", "distance": "Distance",
"kilometer": "kilometer", "kilometer": "kilometers",
"kilometer-abbrev": "km", "kilometer-abbrev": "km",
"kilowatthour": "kilowatt hour", "kilowatthour": "kilowatt hours",
"kilowatthour-abbrev": "kWh", "kilowatthour-abbrev": "kWh",
"meter": "meter", "meter": "meters",
"meter-abbrev": "m", "meter-abbrev": "m",
"minutes": "minutes", "hours": "hours",
"minutes-abbrev": "min", "hours-abbrev": "h",
"total-energy": "Total Energy (per 100km)", "total-energy": "Total Energy",
"energy-per-100km": "Energy per 100 km",
"travel-time": "Travel time" "travel-time": "Travel time"
}, },
"layers": { "layers": {