From aeb93e33b62fa5b6eecf09bf02376f49396a8b7f Mon Sep 17 00:00:00 2001
From: Henrik Fehlauer <rkflx@lab12.net>
Date: Thu, 30 May 2019 23:52:59 +0200
Subject: [PATCH] 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
                         </div>
                         <p class="stats-label">
-                            <span id="distance">0</span>
+                            <span id="distance">-</span>
                             <abbr
                                 data-i18n="[title]footer.kilometer;footer.kilometer-abbrev"
-                                title="kilometer"
+                                title="kilometers"
                                 >km</abbr
                             >
                         </p>
@@ -943,7 +943,7 @@
                             Travel time
                         </div>
                         <p class="stats-label">
-                            <span id="totaltime">0</span>
+                            <span id="totaltime">-</span>
                             <abbr
                                 data-i18n="[title]footer.minutes;footer.minutes-abbrev"
                                 title="minutes"
@@ -956,13 +956,19 @@
                             class="text-muted small hidden-sm-down"
                             data-i18n="footer.total-energy"
                         >
-                            Total Energy (per 100km)
+                            Total Energy | Energy per 100 km
                         </div>
                         <p class="stats-label">
-                            <span id="totalenergy">0 (0)</span>
+                            <span id="totalenergy">-</span>
                             <abbr
                                 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
                             >
                         </p>
@@ -972,13 +978,19 @@
                             class="text-muted small hidden-sm-down"
                             data-i18n="footer.ascend"
                         >
-                            Ascend (Plain ascend)
+                            Ascend | Plain ascend
                         </div>
                         <p class="stats-label">
-                            <span id="ascend">0 (0)</span>
+                            <span id="ascend">-</span>
                             <abbr
                                 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
                             >
                         </p>
@@ -988,9 +1000,12 @@
                             class="text-muted small hidden-sm-down"
                             data-i18n="footer.cost"
                         >
-                            Cost (Mean cost factor)
+                            Cost | Mean cost factor
                         </div>
-                        <p class="stats-label"><span id="cost">- (-)</span></p>
+                        <p class="stats-label">
+                            <span id="cost">-</span> |
+                            <span id="meancostfactor">-</span>
+                        </p>
                     </li>
                 </ul>
 
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": {