Improve formatting of route distance/duration

src/libs/route_utils.js

@@ -0,0 +1,30 @@
+
+export function formatDuration(sec) {
+  sec = Math.max(60, sec); // For duration < 60s, return '1 min'
+  let min = Math.round(sec / 60);
+
+  if (min < 60) {
+    return `${min}&nbsp;min`;
+  }
+
+  const hour = Math.floor(min / 60);
+  min = min - 60 * hour;
+  let ret = `${hour}&nbsp;h`;
+  if (min > 0 && hour < 10) {
+    ret += `&nbsp;${min < 10 ? '0' : ''}${min}&nbsp;min`;
+  }
+  return ret;
+}
+
+export function formatDistance(m) {
+  if (m > 99000) {
+    return `${Math.round(m / 1000)}&nbsp;km`;
+  }
+  if (m > 1000) {
+    return `${(m / 1000).toFixed(1).replace('.', ',')}&nbsp;km`;
+  }
+  if (m > 5) {
+    return `${m.toFixed(0)}&nbsp;m`;
+  }
+  return '';
+}

src/panel/direction/road_map_panel.js

@@ -4,6 +4,7 @@ import Device from '../../libs/device';
 import RoadMapPreviewPanel from './road_map_preview';
 import Telemetry from '../../libs/telemetry';
 import { openShareModal } from 'src/modals/ShareModal';
+import { formatDuration, formatDistance } from 'src/libs/route_utils';
 
 export default class RoadMapPanel {
   constructor(onOpen, onClose) {
@@ -96,34 +97,11 @@ export default class RoadMapPanel {
   }
 
   duration(sec) {
-    sec = Math.max(60, sec); // For duration < 60s, return '1min'
-    let min = Math.round(sec / 60);
-    const hour = Math.floor(min / 60);
-    let ret = '';
-    if (hour) {
-      ret += hour + 'h ';
-      min = min - 60 * hour;
-    }
-    if ((hour > 0 || min > 0) && hour < 10) {
-      ret += min + 'min ';
-    }
-    return ret;
+    return formatDuration(sec);
   }
 
   distance(m) {
-    let ret = '';
-    if (m > 5) {
-      if (m > 1000) {
-        if (m > 99000) {
-          ret = `${Math.round(m / 1000)}km`;
-        } else {
-          ret = `${(m / 1000).toFixed(1).replace('.', ',')}km`;
-        }
-      } else {
-        ret = `${m.toFixed(0)}m`;
-      }
-    }
-    return ret;
+    return formatDistance(m);
   }
 
   highlightStepMarker(i) {

tests/units/route_utils.js

@@ -0,0 +1,37 @@
+import { formatDuration, formatDistance } from '../../src/libs/route_utils';
+
+describe('route_utils', () => {
+  describe('formatDuration', () => {
+    const cases = [
+      { seconds: 0, result: '1 min' },
+      { seconds: 37, result: '1 min' },
+      { seconds: 125, result: '2 min' },
+      { seconds: 3600, result: '1 h' },
+      { seconds: 5100, result: '1 h 25 min' },
+      { seconds: 36000, result: '10 h' },
+    ];
+
+    cases.map(({ seconds, result }) =>
+      test(`Formats ${seconds} seconds as '${result}'`, () => {
+        expect(formatDuration(seconds)).toEqual(result);
+      })
+    );
+  });
+
+  describe('formatDistance', () => {
+    const cases = [
+      { meters: 0, result: '' },
+      { meters: 15, result: '15 m' },
+      { meters: 500, result: '500 m' },
+      { meters: 1234, result: '1,2 km' },
+      { meters: 9999, result: '10,0 km' },
+      { meters: 123456, result: '123 km' },
+    ];
+
+    cases.map(({ meters, result }) =>
+      test(`Formats ${meters} meters as '${result}'`, () => {
+        expect(formatDistance(meters)).toEqual(result);
+      })
+    );
+  });
+});