mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-15 04:13:47 +00:00
Refactor/time formatting (#696)
* chore: upgrade related dependencies * fix: skip sentry on dev * refactor: unify time formatting * refactor: display default format for page
This commit is contained in:
Carlos Valente
GitHub
@@ -1,96 +1,8 @@
|
||||
import {
|
||||
forgivingStringToMillis,
|
||||
millisToDelayString,
|
||||
millisToMinutes,
|
||||
millisToSeconds,
|
||||
secondsInMillis,
|
||||
} from '../dateConfig';
|
||||
|
||||
describe('test secondsInMillis function', () => {
|
||||
it('return 0 if value is null', () => {
|
||||
expect(secondsInMillis(null)).toBe(0);
|
||||
});
|
||||
it('returns the seconds value of a millis date', () => {
|
||||
const date = 1686255053619; // Thu Jun 08 2023 20:10:53
|
||||
const seconds = secondsInMillis(date);
|
||||
expect(seconds).toBe(53);
|
||||
});
|
||||
});
|
||||
|
||||
describe('test millisToSeconds function', () => {
|
||||
it('test with null values', () => {
|
||||
const t = { val: null, result: 0 };
|
||||
expect(millisToSeconds(t.val)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with valid millis', () => {
|
||||
const t = { val: 3600000, result: 3600 };
|
||||
expect(millisToSeconds(t.val)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with negative millis', () => {
|
||||
const t = { val: -3600000, result: -3600 };
|
||||
expect(millisToSeconds(t.val)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with 0', () => {
|
||||
const t = { val: 0, result: 0 };
|
||||
expect(millisToSeconds(t.val)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with -0', () => {
|
||||
const t = { val: -0, result: -0 };
|
||||
expect(millisToSeconds(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with 86401000 (24 hours and 1 second)', () => {
|
||||
const t = { val: 86401000, result: 86401 };
|
||||
expect(millisToSeconds(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with -86401000 (-24 hours and 1 second)', () => {
|
||||
const t = { val: -86401000, result: -86401 };
|
||||
expect(millisToSeconds(t.val, false)).toBe(t.result);
|
||||
});
|
||||
});
|
||||
|
||||
describe('test millisToMinutes function', () => {
|
||||
it('test with null values', () => {
|
||||
const t = { val: null, result: 0 };
|
||||
expect(millisToMinutes(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with valid millis', () => {
|
||||
const t = { val: 3600000, result: 60 };
|
||||
expect(millisToMinutes(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with negative millis', () => {
|
||||
const t = { val: -3600000, result: -60 };
|
||||
expect(millisToMinutes(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with 0', () => {
|
||||
const t = { val: 0, result: 0 };
|
||||
expect(millisToMinutes(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with -0', () => {
|
||||
const t = { val: -0, result: -0 };
|
||||
expect(millisToMinutes(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with 86401000 (24 hours and 1 second)', () => {
|
||||
const t = { val: 86401000, result: 1440 };
|
||||
expect(millisToMinutes(t.val, false)).toBe(t.result);
|
||||
});
|
||||
|
||||
it('test with -86401000 (-24 hours and 1 second)', () => {
|
||||
const t = { val: -86401000, result: -1440 };
|
||||
expect(millisToMinutes(t.val, false)).toBe(t.result);
|
||||
});
|
||||
});
|
||||
|
||||
describe('test forgivingStringToMillis()', () => {
|
||||
describe('function handles time with no separators', () => {
|
||||
const testData = [
|
||||
|
||||
@@ -1,23 +1,28 @@
|
||||
import { formatTime } from '../time';
|
||||
import { formatTime, nowInMillis } from '../time';
|
||||
|
||||
describe('nowInMillis()', () => {
|
||||
it('should return the current time in milliseconds', () => {
|
||||
const mockDate = new Date(2022, 1, 1, 13, 0, 0); // This date corresponds to 13:00:00
|
||||
const expectedMillis = 13 * 60 * 60 * 1000;
|
||||
const dateSpy = vi.spyOn(global, 'Date').mockImplementation(() => mockDate as any);
|
||||
|
||||
const result = nowInMillis();
|
||||
|
||||
expect(result).toBe(expectedMillis);
|
||||
dateSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('formatTime()', () => {
|
||||
it('parses 24h strings', () => {
|
||||
const ms = 13 * 60 * 60 * 1000;
|
||||
const options = {
|
||||
showSeconds: true,
|
||||
format: 'irrelevant',
|
||||
};
|
||||
const time = formatTime(ms, options, () => '24');
|
||||
const time = formatTime(ms, {format12: "hh:mm:ss", format24: "HH:mm:ss" }, (_format12, format24) => format24);
|
||||
expect(time).toStrictEqual('13:00:00');
|
||||
});
|
||||
|
||||
it('parses same string in 12h strings', () => {
|
||||
const ms = 13 * 60 * 60 * 1000;
|
||||
const options = {
|
||||
showSeconds: true,
|
||||
format: 'hh:mm:ss a',
|
||||
};
|
||||
const time = formatTime(ms, options, () => '12');
|
||||
const time = formatTime(ms, {format12: "hh:mm:ss a", format24: "HH:mm:ss" }, (format12, _format24) => format12);
|
||||
expect(time).toStrictEqual('01:00:00 PM');
|
||||
});
|
||||
|
||||
@@ -27,23 +32,9 @@ describe('formatTime()', () => {
|
||||
expect(time).toStrictEqual('...');
|
||||
});
|
||||
|
||||
it('shows 12h format without times', () => {
|
||||
const ms = 13 * 60 * 60 * 1000;
|
||||
const options = {
|
||||
showSeconds: false,
|
||||
format: 'hh:mm a',
|
||||
};
|
||||
const time = formatTime(ms, options, () => '12');
|
||||
expect(time).toStrictEqual('01:00 PM');
|
||||
});
|
||||
|
||||
it('handles negative times', () => {
|
||||
const ms = 1 * 60 * 60 * 1000;
|
||||
const options = {
|
||||
showSeconds: false,
|
||||
format: 'hh:mm:ss',
|
||||
};
|
||||
const time = formatTime(ms * -1, options, () => '24');
|
||||
const time = formatTime(-ms, {format12: "hh:mm a", format24: "HH:mm" }, (_format12, format24) => format24);
|
||||
expect(time).toStrictEqual('-01:00');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,37 +1,4 @@
|
||||
import { formatFromMillis } from 'ontime-utils';
|
||||
|
||||
import { mth, mtm, mts } from './timeConstants';
|
||||
|
||||
export const timeFormat = 'HH:mm';
|
||||
export const timeFormatSeconds = 'HH:mm:ss';
|
||||
|
||||
export function secondsInMillis(millis: number | null) {
|
||||
if (!millis) {
|
||||
return 0;
|
||||
}
|
||||
return Math.floor((millis % mtm) / mts);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Converts milliseconds to seconds
|
||||
* @param {number | null} millis - time in seconds
|
||||
* @returns {number} Amount in seconds
|
||||
*/
|
||||
export const millisToSeconds = (millis: number | null): number => {
|
||||
if (millis === null) {
|
||||
return 0;
|
||||
}
|
||||
return millis < 0 ? Math.ceil(millis / mts) : Math.floor(millis / mts);
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Converts milliseconds to seconds
|
||||
* @param {number} millis - time in milliseconds
|
||||
* @returns {number} Amount in seconds
|
||||
*/
|
||||
export const millisToMinutes = (millis: number): number => {
|
||||
return millis < 0 ? Math.ceil(millis / mtm) : Math.floor(millis / mtm);
|
||||
};
|
||||
import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
|
||||
|
||||
/**
|
||||
* @description safe parse string to int
|
||||
@@ -88,7 +55,7 @@ function checkMatchers(value: string) {
|
||||
const secondsMatchValue = secondsMatch ? parse(secondsMatch[1]) : 0;
|
||||
|
||||
if (hoursMatchValue > 0 || minutesMatchValue > 0 || secondsMatchValue > 0) {
|
||||
return hoursMatchValue * mth + minutesMatchValue * mtm + secondsMatchValue * mts;
|
||||
return hoursMatchValue * MILLIS_PER_HOUR + minutesMatchValue * MILLIS_PER_MINUTE + secondsMatchValue * MILLIS_PER_SECOND;
|
||||
}
|
||||
return { hoursMatchValue };
|
||||
}
|
||||
@@ -105,13 +72,13 @@ function inferSeparators(value: string, isAM: boolean, isPM: boolean) {
|
||||
let addAM = 0;
|
||||
if (length === 1) {
|
||||
if (isPM || isAM) {
|
||||
inferredMillis = parse(value) * mth;
|
||||
inferredMillis = parse(value) * MILLIS_PER_HOUR;
|
||||
if (isAM) {
|
||||
// this ensures we dont add 12 hours in the end
|
||||
addAM = inferredMillis;
|
||||
}
|
||||
} else {
|
||||
inferredMillis = parse(value) * mtm;
|
||||
inferredMillis = parse(value) * MILLIS_PER_MINUTE;
|
||||
}
|
||||
} else if (length === 2) {
|
||||
if (isPM || isAM) {
|
||||
@@ -121,22 +88,22 @@ function inferSeparators(value: string, isAM: boolean, isPM: boolean) {
|
||||
addAM = 12;
|
||||
}
|
||||
} else {
|
||||
inferredMillis = parse(value) * mtm;
|
||||
inferredMillis = parse(value) * MILLIS_PER_MINUTE;
|
||||
}
|
||||
} else if (length === 3) {
|
||||
inferredMillis = parse(value[0]) * mth + parse(value.substring(1)) * mtm;
|
||||
inferredMillis = parse(value[0]) * MILLIS_PER_HOUR + parse(value.substring(1)) * MILLIS_PER_MINUTE;
|
||||
} else if (length === 4) {
|
||||
inferredMillis = parse(value.substring(0, 2)) * mth + parse(value.substring(2)) * mtm;
|
||||
inferredMillis = parse(value.substring(0, 2)) * MILLIS_PER_HOUR + parse(value.substring(2)) * MILLIS_PER_MINUTE;
|
||||
} else if (length === 5) {
|
||||
const hours = parse(value.substring(0, 2));
|
||||
const minutes = parse(value.substring(2, 4));
|
||||
const seconds = parse(value.substring(4));
|
||||
inferredMillis = hours * mth + minutes * mtm + seconds * mts;
|
||||
inferredMillis = hours * MILLIS_PER_HOUR + minutes * MILLIS_PER_MINUTE + seconds * MILLIS_PER_SECOND;
|
||||
} else if (length >= 6) {
|
||||
const hours = parse(value.substring(0, 2));
|
||||
const minutes = parse(value.substring(2, 4));
|
||||
const seconds = parse(value.substring(4));
|
||||
inferredMillis = hours * mth + minutes * mtm + seconds * mts;
|
||||
inferredMillis = hours * MILLIS_PER_HOUR + minutes * MILLIS_PER_MINUTE + seconds * MILLIS_PER_SECOND;
|
||||
}
|
||||
return { inferredMillis, addAM };
|
||||
}
|
||||
@@ -167,9 +134,9 @@ export const forgivingStringToMillis = (value: string): number => {
|
||||
|
||||
if (first != null && second != null && third != null) {
|
||||
// if string has three sections, treat as [hours] [minutes] [seconds]
|
||||
millis = parse(first) * mth;
|
||||
millis += parse(second) * mtm;
|
||||
millis += parse(third) * mts;
|
||||
millis = parse(first) * MILLIS_PER_HOUR;
|
||||
millis += parse(second) * MILLIS_PER_MINUTE;
|
||||
millis += parse(third) * MILLIS_PER_SECOND;
|
||||
} else if (first != null && second == null && third == null) {
|
||||
// we only have one section, infer separators
|
||||
const { inferredMillis, addAM } = inferSeparators(first, isAM, isPM);
|
||||
@@ -177,13 +144,13 @@ export const forgivingStringToMillis = (value: string): number => {
|
||||
hoursMatchValue = addAM;
|
||||
}
|
||||
if (first != null && second != null && third == null) {
|
||||
millis = parse(first) * mth;
|
||||
millis += parse(second) * mtm;
|
||||
millis = parse(first) * MILLIS_PER_HOUR;
|
||||
millis += parse(second) * MILLIS_PER_MINUTE;
|
||||
}
|
||||
|
||||
// Add 12 hours if it is PM
|
||||
if (isPM && hoursMatchValue < 12) {
|
||||
millis += 12 * mth;
|
||||
millis += 12 * MILLIS_PER_HOUR;
|
||||
}
|
||||
return millis;
|
||||
};
|
||||
@@ -196,9 +163,9 @@ export function millisToDelayString(millis: number | null): undefined | string |
|
||||
const isNegative = millis < 0;
|
||||
const absMillis = Math.abs(millis);
|
||||
|
||||
if (absMillis < mtm) {
|
||||
if (absMillis < MILLIS_PER_MINUTE) {
|
||||
return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 's')} sec`;
|
||||
} else if (absMillis < mth && absMillis % mtm === 0) {
|
||||
} else if (absMillis < MILLIS_PER_HOUR && absMillis % MILLIS_PER_MINUTE === 0) {
|
||||
return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'm')} min`;
|
||||
} else {
|
||||
return `${isNegative ? '-' : '+'}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Settings } from 'ontime-types';
|
||||
import { formatFromMillis, millisToString } from 'ontime-utils';
|
||||
import { MaybeNumber, Settings, TimeFormat } from 'ontime-types';
|
||||
import { formatFromMillis } from 'ontime-utils';
|
||||
|
||||
import { FORMAT_12, FORMAT_24 } from '../../viewerConfig';
|
||||
import { APP_SETTINGS } from '../api/apiConstants';
|
||||
import { ontimeQueryClient } from '../queryClient';
|
||||
|
||||
@@ -22,45 +23,75 @@ export const nowInMillis = () => {
|
||||
|
||||
/**
|
||||
* @description Resolves format from url and store
|
||||
* @return {string|undefined}
|
||||
* @return {string|null} A format string like "hh:mm:ss a" or null
|
||||
*/
|
||||
export const resolveTimeFormat = () => {
|
||||
function getFormatFromParams() {
|
||||
const params = new URL(document.location.href).searchParams;
|
||||
const urlOptions = params.get('format');
|
||||
const settings: Settings | undefined = ontimeQueryClient.getQueryData(APP_SETTINGS);
|
||||
return params.get('timeformat');
|
||||
}
|
||||
|
||||
return urlOptions || settings?.timeFormat;
|
||||
};
|
||||
/**
|
||||
* Gets the format options from the applicaton settings
|
||||
* @returns a string equivalent to the format, ie: hh:mm:ss a or HH:mm:ss
|
||||
*/
|
||||
export function getFormatFromSettings(): TimeFormat {
|
||||
const settings: Settings | undefined = ontimeQueryClient.getQueryData(APP_SETTINGS);
|
||||
return settings?.timeFormat ?? '24';
|
||||
}
|
||||
|
||||
export function getDefaultFormat(
|
||||
currentSettings?: TimeFormat,
|
||||
format12: string = FORMAT_12,
|
||||
format24: string = FORMAT_24,
|
||||
): string {
|
||||
if (currentSettings === '12') {
|
||||
return format12;
|
||||
}
|
||||
return format24;
|
||||
}
|
||||
|
||||
function resolveTimeFormat(fallback12: string, fallback24: string): string {
|
||||
// if the user has an option, we use that
|
||||
const formatFromParams = getFormatFromParams();
|
||||
if (formatFromParams) {
|
||||
return formatFromParams;
|
||||
}
|
||||
|
||||
// otherwise we use the view defined, with respect to the 12-24 hour settings
|
||||
const formatFromSettings = getFormatFromSettings();
|
||||
if (formatFromSettings === '12') {
|
||||
return fallback12;
|
||||
}
|
||||
|
||||
return fallback24;
|
||||
}
|
||||
|
||||
type FormatOptions = {
|
||||
showSeconds?: boolean;
|
||||
format?: string;
|
||||
format12: string;
|
||||
format24: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description utility function to format a date in 12 or 24 hour format
|
||||
* @param {number | null} milliseconds
|
||||
* @description viewer specific utility function to format a date in 12 or 24 hour format
|
||||
* @param {MaybeNumber} milliseconds
|
||||
* @param {object} [options]
|
||||
* @param {boolean} [options.showSeconds]
|
||||
* @param {string} [options.format]
|
||||
* @param {function} resolver
|
||||
* @param {string} [options.format.format12] format string if 12 hour time
|
||||
* @param {string} [options.format.format24] format string if 24 hour time
|
||||
* @param {Function} resolver DI for testing
|
||||
* @return {string}
|
||||
*/
|
||||
export const formatTime = (
|
||||
milliseconds: number | null,
|
||||
milliseconds: MaybeNumber,
|
||||
options?: FormatOptions,
|
||||
resolver = resolveTimeFormat,
|
||||
): string => {
|
||||
if (milliseconds === null) {
|
||||
return '...';
|
||||
}
|
||||
const timeFormat = resolver();
|
||||
const fallback = options?.showSeconds ? 'hh:mm:ss a' : 'hh:mm a';
|
||||
const { showSeconds = false, format: formatString = fallback } = options || {};
|
||||
const isNegative = (milliseconds ?? 0) < 0;
|
||||
const display =
|
||||
timeFormat === '12'
|
||||
? formatFromMillis(Math.abs(milliseconds), formatString)
|
||||
: millisToString(Math.abs(milliseconds), showSeconds);
|
||||
|
||||
const timeFormat = resolver(options?.format12 ?? FORMAT_12, options?.format24 ?? FORMAT_24);
|
||||
const display = formatFromMillis(Math.abs(milliseconds), timeFormat);
|
||||
|
||||
const isNegative = milliseconds < 0;
|
||||
return `${isNegative ? '-' : ''}${display}`;
|
||||
};
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
/**
|
||||
* millis to seconds
|
||||
* @type {number}
|
||||
*/
|
||||
export const mts = 1000;
|
||||
|
||||
/**
|
||||
* millis to minutes
|
||||
* @type {number}
|
||||
*/
|
||||
export const mtm = 1000 * 60;
|
||||
|
||||
/**
|
||||
* millis to hours
|
||||
* @type {number}
|
||||
*/
|
||||
export const mth = 1000 * 60 * 60;
|
||||
Reference in New Issue
Block a user