From aeb93e33b62fa5b6eecf09bf02376f49396a8b7f Mon Sep 17 00:00:00 2001 From: Henrik Fehlauer Date: Thu, 30 May 2019 23:52:59 +0200 Subject: [PATCH 1/3] Polish UI of track statistics bar 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"). --- index.html | 37 ++++++++++++++++++++++++++----------- js/control/TrackStats.js | 29 +++++++++++++++++++++-------- locales/en.json | 12 ++++++------ 3 files changed, 53 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index f602e7c..e3e2629 100644 --- a/index.html +++ b/index.html @@ -927,10 +927,10 @@ Distance

- 0 + - km

@@ -943,7 +943,7 @@ Travel time

- 0 + - - Total Energy (per 100km) + Total Energy | Energy per 100 km

- 0 (0) + - kWh + | - + kWh

@@ -972,13 +978,19 @@ class="text-muted small hidden-sm-down" data-i18n="footer.ascend" > - Ascend (Plain ascend) + Ascend | Plain ascend

- 0 (0) + - m + | - + m

@@ -988,9 +1000,12 @@ class="text-muted small hidden-sm-down" data-i18n="footer.cost" > - Cost (Mean cost factor) + Cost | Mean cost factor -

- (-)

+

+ - | + - +

diff --git a/js/control/TrackStats.js b/js/control/TrackStats.js index a3eb039..74e9d1f 100644 --- a/js/control/TrackStats.js +++ b/js/control/TrackStats.js @@ -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; diff --git a/locales/en.json b/locales/en.json index c5afd80..0961c8e 100644 --- a/locales/en.json +++ b/locales/en.json @@ -33,18 +33,18 @@ "trackname": "Name" }, "footer": { - "ascend": "Ascend (Plain ascend)", - "cost": "Cost (Mean cost factor)", + "ascend": "Ascend | Plain ascend", + "cost": "Cost | Mean cost factor", "distance": "Distance", - "kilometer": "kilometer", + "kilometer": "kilometers", "kilometer-abbrev": "km", - "kilowatthour": "kilowatt hour", + "kilowatthour": "kilowatt hours", "kilowatthour-abbrev": "kWh", - "meter": "meter", + "meter": "meters", "meter-abbrev": "m", "minutes": "minutes", "minutes-abbrev": "min", - "total-energy": "Total Energy (per 100km)", + "total-energy": "Total Energy | Energy per 100 km", "travel-time": "Travel time" }, "layers": { From 3ee90b5cd95f3f29313ce176d16146df171a629f Mon Sep 17 00:00:00 2001 From: Henrik Fehlauer Date: Thu, 30 May 2019 23:52:59 +0200 Subject: [PATCH 2/3] Separate formatting from translations --- index.html | 33 ++++++++++++++++++--------------- locales/en.json | 9 ++++++--- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index e3e2629..b077b09 100644 --- a/index.html +++ b/index.html @@ -952,11 +952,14 @@

  • -
    - Ascend | Plain ascend +
    + Ascend | + Plain ascend

    - @@ -996,11 +999,11 @@

  • -
    - Cost | Mean cost factor +
    + Cost | + Mean cost factor

    - | diff --git a/locales/en.json b/locales/en.json index 0961c8e..81c2677 100644 --- a/locales/en.json +++ b/locales/en.json @@ -33,8 +33,10 @@ "trackname": "Name" }, "footer": { - "ascend": "Ascend | Plain ascend", - "cost": "Cost | Mean cost factor", + "ascend": "Ascend", + "plain-ascend": "Plain ascend", + "cost": "Cost", + "mean-cost-factor": "Mean cost factor", "distance": "Distance", "kilometer": "kilometers", "kilometer-abbrev": "km", @@ -44,7 +46,8 @@ "meter-abbrev": "m", "minutes": "minutes", "minutes-abbrev": "min", - "total-energy": "Total Energy | Energy per 100 km", + "total-energy": "Total Energy", + "energy-per-100km": "Energy per 100 km", "travel-time": "Travel time" }, "layers": { From 9bc38fea89486b4d40158f64b82083985ac63d8b Mon Sep 17 00:00:00 2001 From: Henrik Fehlauer Date: Thu, 30 May 2019 23:52:59 +0200 Subject: [PATCH 3/3] Improve number formatting Use locale-aware number formatting (i.e. add grouping separators). Use hours and minutes to format travel time. --- index.html | 6 +++--- js/control/TrackStats.js | 36 +++++++++++++++++++++++++++--------- locales/en.json | 4 ++-- 3 files changed, 32 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index b077b09..68644c9 100644 --- a/index.html +++ b/index.html @@ -945,9 +945,9 @@

    - minh

    • diff --git a/js/control/TrackStats.js b/js/control/TrackStats.js index 74e9d1f..f2fdd2a 100644 --- a/js/control/TrackStats.js +++ b/js/control/TrackStats.js @@ -14,26 +14,44 @@ BR.TrackStats = L.Class.extend({ } var stats = this.calcStats(polyline, segments), - length1 = L.Util.formatNum(stats.trackLength / 1000, 1), - length3 = L.Util.formatNum(stats.trackLength / 1000, 3), + length1 = L.Util.formatNum( + 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 - ? L.Util.formatNum(stats.cost / stats.trackLength, 2) + ? L.Util.formatNum( + stats.cost / stats.trackLength, + 2 + ).toLocaleString() : '0', - formattedTime = L.Util.formatNum(stats.totalTime / 60, 1), - formattedEnergy = L.Util.formatNum(stats.totalEnergy / 3600000, 2), + 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 ? L.Util.formatNum( stats.totalEnergy / 36 / stats.trackLength, 2 - ) + ).toLocaleString() : '0'; $('#distance').html(length1); // alternative 3-digit format down to meters as tooltip $('#distance').attr('title', length3 + ' km'); - $('#ascend').html(stats.filteredAscend); - $('#plainascend').html(stats.plainAscend); - $('#cost').html(stats.cost); + $('#ascend').html(formattedAscend); + $('#plainascend').html(formattedPlainAscend); + $('#cost').html(formattedCost); $('#meancostfactor').html(meanCostFactor); $('#totaltime').html(formattedTime); $('#totalenergy').html(formattedEnergy); diff --git a/locales/en.json b/locales/en.json index 81c2677..9f629a0 100644 --- a/locales/en.json +++ b/locales/en.json @@ -44,8 +44,8 @@ "kilowatthour-abbrev": "kWh", "meter": "meters", "meter-abbrev": "m", - "minutes": "minutes", - "minutes-abbrev": "min", + "hours": "hours", + "hours-abbrev": "h", "total-energy": "Total Energy", "energy-per-100km": "Energy per 100 km", "travel-time": "Travel time"