diff --git a/src/components/RouteStatistics.tsx b/src/components/RouteStatistics.tsx index a7027ed2..f60a8cf6 100644 --- a/src/components/RouteStatistics.tsx +++ b/src/components/RouteStatistics.tsx @@ -4,7 +4,7 @@ import clsx from 'clsx' import { TimelineStatistics, getTimelineStatistics } from '~/api/derived' import type { Route } from '~/types' -import { formatRouteDistance, formatRouteDuration } from '~/utils/format' +import { formatDistance, formatRouteDuration } from '~/utils/format' const formatEngagement = (timeline?: TimelineStatistics): string => { if (!timeline) return '' @@ -28,7 +28,7 @@ const RouteStatistics: VoidComponent = (props) => {
Distance - {formatRouteDistance(props.route)} + {formatDistance(props.route?.length)}
diff --git a/src/pages/dashboard/activities/RouteActivity.tsx b/src/pages/dashboard/activities/RouteActivity.tsx index 0958858c..954edc2c 100644 --- a/src/pages/dashboard/activities/RouteActivity.tsx +++ b/src/pages/dashboard/activities/RouteActivity.tsx @@ -13,7 +13,7 @@ import TopAppBar from '~/components/material/TopAppBar' import RouteStaticMap from '~/components/RouteStaticMap' import RouteStatistics from '~/components/RouteStatistics' import Timeline from '~/components/Timeline' -import { parseDateStr } from '~/utils/format' +import { dayjs } from '~/utils/format' const RouteVideoPlayer = lazy(() => import('~/components/RouteVideoPlayer')) @@ -27,7 +27,7 @@ const RouteActivity: VoidComponent = (props) => { const routeName = () => `${props.dongleId}|${props.dateStr}` const [route] = createResource(routeName, getRoute) - const [startTime] = createResource(route, (route) => parseDateStr(route.start_time)?.format('ddd, MMM D, YYYY')) + const [startTime] = createResource(route, (route) => dayjs(route.start_time)?.format('ddd, MMM D, YYYY')) let videoRef: HTMLVideoElement diff --git a/src/utils/format.spec.ts b/src/utils/format.spec.ts index b3a1a499..5002a3ee 100644 --- a/src/utils/format.spec.ts +++ b/src/utils/format.spec.ts @@ -1,6 +1,31 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { formatDate } from './format' +import { formatDate, formatDistance, formatDuration } from './format' + + +describe('formatDistance', () => { + it('should format distance', () => { + expect(formatDistance(0)).toBe('0.0 mi') + expect(formatDistance(1.234)).toBe('1.2 mi') + }) + it('should be blank for undefined distance', () => { + expect(formatDistance(undefined)).toBe('') + }) +}) + + +describe('formatDuration', () => { + it('should format duration', () => { + expect(formatDuration(0)).toBe('0m') + expect(formatDuration(12)).toBe('12m') + expect(formatDuration(12.34)).toBe('12m') + expect(formatDuration(90)).toBe('1h 30m') + expect(formatDuration(120)).toBe('2h 0m') + }) + it('should be blank for undefined duration', () => { + expect(formatDuration(undefined)).toBe('') + }) +}) describe('formatDate', () => { diff --git a/src/utils/format.ts b/src/utils/format.ts index 680f4dd7..540fca9c 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -13,16 +13,11 @@ export { dayjs } export const formatDistance = (miles: number | undefined): string => { if (miles === undefined) return '' - return `${miles.toFixed(1) ?? 0} mi` -} - -export const formatRouteDistance = (route: Route | undefined): string => { - if (route?.length === undefined) return '' - return formatDistance(route.length) + return `${miles.toFixed(1)} mi` } const _formatDuration = (duration: Duration): string => { - if (duration.asHours() > 0) { + if (duration.hours() > 0) { return duration.format('H[h] m[m]') } else { return duration.format('m[m]') @@ -33,7 +28,7 @@ export const formatDuration = (minutes: number | undefined): string => { if (minutes === undefined) return '' const duration = dayjs.duration({ hours: Math.floor(minutes / 60), - minutes: minutes % 60, + minutes: Math.round(minutes % 60), }) return _formatDuration(duration) } @@ -51,10 +46,6 @@ export const formatRouteDuration = (route: Route | undefined): string => { return duration ? _formatDuration(duration) : '' } -export const parseDateStr = (dateStr: string): Dayjs => { - return dayjs(dateStr, 'YYYY-MM-DD--HH-mm-ss') -} - const parseTimestamp = (input: dayjs.ConfigType): dayjs.Dayjs => { if (typeof input === 'number') { // Assume number is unix timestamp, convert to seconds