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

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

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(
+        $('#ascend').html(stats.filteredAscend);
-            stats.filteredAscend + ' (' + stats.plainAscend + ')'
+        $('#plainascend').html(stats.plainAscend);
-        );
+        $('#cost').html(stats.cost);
-        $('#cost').html(stats.cost + ' (' + meanCostFactor + ')');
+        $('#meancostfactor').html(meanCostFactor);
         $('#totaltime').html(formattedTime);
-        $('#totalenergy').html(formattedEnergy + ' (' + meanEnergy + ')');
+        $('#totalenergy').html(formattedEnergy);
-
+        $('#meanenergy').html(meanEnergy);
         document.getElementById(
             'totaltime'
         ).parentElement.parentElement.hidden = !stats.totalTime;

locales/en.json

@@ -33,18 +33,18 @@
     "trackname": "Name"
   },
   "footer": {
-    "ascend": "Ascend (Plain ascend)",
+    "ascend": "Ascend | Plain ascend",
-    "cost": "Cost (Mean cost factor)",
+    "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": {