Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Improve formatting of route distance/duration #359

Merged
merged 1 commit into from
Sep 2, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/libs/route_utils.js
Original file line number Diff line number Diff line change
@@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm surprised eslint didn't say that it should be const.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh nevermind. Didn't see below. :)


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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We had a debate about this but I still prefer using else if in such cases. But you can completely ignore this comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seriously, this pyramid was ridiculous…

if (m > 5) {
  if (m > 1000) {
    if (m > 99000) {

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That wasn't my point. I didn't like that pyramid either.

return `${(m / 1000).toFixed(1).replace('.', ',')}&nbsp;km`;
}
if (m > 5) {
return `${m.toFixed(0)}&nbsp;m`;
}
return '';
}
28 changes: 3 additions & 25 deletions src/panel/direction/road_map_panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
37 changes: 37 additions & 0 deletions tests/units/route_utils.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { formatDuration, formatDistance } from '../../src/libs/route_utils';

describe('route_utils', () => {
describe('formatDuration', () => {
const cases = [
{ seconds: 0, result: '1&nbsp;min' },
{ seconds: 37, result: '1&nbsp;min' },
{ seconds: 125, result: '2&nbsp;min' },
{ seconds: 3600, result: '1&nbsp;h' },
{ seconds: 5100, result: '1&nbsp;h&nbsp;25&nbsp;min' },
{ seconds: 36000, result: '10&nbsp;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&nbsp;m' },
{ meters: 500, result: '500&nbsp;m' },
{ meters: 1234, result: '1,2&nbsp;km' },
{ meters: 9999, result: '10,0&nbsp;km' },
{ meters: 123456, result: '123&nbsp;km' },
];

cases.map(({ meters, result }) =>
test(`Formats ${meters} meters as '${result}'`, () => {
expect(formatDistance(meters)).toEqual(result);
})
);
});
});