Skip to content

Commit 73812ab

Browse files
pedrolamaspedrolamas
committed
refactor: more filters code split
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
1 parent 3e39d3f commit 73812ab

File tree

4 files changed

+154
-153
lines changed

4 files changed

+154
-153
lines changed

‎src/plugins/filters.ts‎

Lines changed: 8 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,17 @@
11
import type _Vue from 'vue'
22
import { isNavigationFailure, NavigationFailureType, type RawLocation } from 'vue-router'
3-
import { upperFirst } from 'lodash-es'
43
import type { ApiConfig } from '@/store/config/types'
54
import { TinyColor } from '@ctrl/tinycolor'
65
import { Globals, Waits } from '@/globals'
76
import i18n from '@/plugins/i18n'
87
import type { TranslateResult } from 'vue-i18n'
98
import store from '@/store'
109
import router from '@/router'
11-
import dateTimeFormatter from '@/util/date-time-formatter'
10+
import * as dateTimeFormatters from '@/util/date-time-formatters'
11+
import * as stringFormatters from '@/util/string-formatters'
1212
import consola from 'consola'
1313

1414
const Filters = {
15-
getNavigatorLocales: () => {
16-
return navigator.languages ?? [navigator.language]
17-
},
18-
19-
getAllLocales: (): Intl.LocalesArgument => {
20-
return [
21-
i18n.locale,
22-
...Filters.getNavigatorLocales()
23-
]
24-
},
25-
26-
prettyCase: (value: string) => {
27-
return value
28-
.split(/[ _]/g)
29-
.filter(x => x)
30-
.map(upperFirst)
31-
.join(' ')
32-
},
33-
34-
/**
35-
* Formats a number (in bytes) to a human readable file size.
36-
*/
37-
getReadableFileSizeString (fileSizeInBytes: number, fractionDigits = 1) {
38-
let i = -1
39-
const byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']
40-
if (fileSizeInBytes === 0) return `0${byteUnits[0]}`
41-
do {
42-
fileSizeInBytes = fileSizeInBytes / 1024
43-
i++
44-
} while (fileSizeInBytes > 1024)
45-
46-
return Math.max(fileSizeInBytes, 0.1).toFixed(fractionDigits) + byteUnits[i]
47-
},
48-
49-
/**
50-
* Formats a number (in bytes/sec) to a human readable data rate.
51-
*/
52-
getReadableDataRateString (dataRateInBytesPerSec: number, fractionDigits = 1) {
53-
let i = -1
54-
const byteUnits = [' kB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB']
55-
if (dataRateInBytesPerSec === 0) return `0${byteUnits[0]}`
56-
do {
57-
dataRateInBytesPerSec = dataRateInBytesPerSec / 1024
58-
i++
59-
} while (dataRateInBytesPerSec > 1024)
60-
61-
return Math.max(dataRateInBytesPerSec, 0.2).toFixed(fractionDigits) + byteUnits[i] + '/Sec'
62-
},
63-
64-
/**
65-
* Formats a number representing mm to human readable distance.
66-
*/
67-
getReadableLengthString (lengthInMm: number | undefined | null, showMicrons = false) {
68-
if (lengthInMm === undefined || lengthInMm === null) {
69-
return '-'
70-
}
71-
72-
if (lengthInMm >= 1000) return (lengthInMm / 1000).toFixed(2) + ' m'
73-
if (lengthInMm > 100) return (lengthInMm / 10).toFixed(1) + ' cm'
74-
if (lengthInMm < 0.1 && showMicrons) return (lengthInMm * 1000).toFixed(0) + ' μm'
75-
return lengthInMm.toFixed(1) + ' mm'
76-
},
77-
78-
/**
79-
* Formats a number representing g to human readable weight.
80-
*/
81-
getReadableWeightString (weightInG: number | undefined | null, fractionDigits = 2) {
82-
if (weightInG === undefined || weightInG === null) {
83-
return '-'
84-
}
85-
86-
if (weightInG >= 1000) return (weightInG / 1000).toFixed(fractionDigits) + ' kg'
87-
return weightInG.toFixed(fractionDigits) + ' g'
88-
},
89-
90-
/**
91-
* Formats a number (in Hz) to a human readable frequency.
92-
*/
93-
getReadableFrequencyString (frequencyInHz: number, fractionDigits = 0) {
94-
let i = 0
95-
const frequencyUnits = [' Hz', ' kHz', ' MHz', ' GHz', ' THz']
96-
while (frequencyInHz >= 1000) {
97-
frequencyInHz = frequencyInHz / 1000
98-
i++
99-
}
100-
return frequencyInHz.toFixed(fractionDigits) + frequencyUnits[i]
101-
},
102-
103-
/**
104-
* Formats a number (in ohms) to a human readable resistance.
105-
*/
106-
getReadableResistanceString (resistanceInOhms: number, fractionDigits = 1) {
107-
let i = 0
108-
const resistanceUnits = [' Ω', ' kΩ', ' MΩ', ' GΩ', ' TΩ']
109-
while (resistanceInOhms >= 1000) {
110-
resistanceInOhms = resistanceInOhms / 1000
111-
i++
112-
}
113-
return resistanceInOhms.toFixed(fractionDigits) + resistanceUnits[i]
114-
},
115-
116-
/**
117-
* Formats a number (in hPa) to human readable atmospheric pressure.
118-
*/
119-
getReadableAtmosphericPressureString (pressumeInHPa: number, fractionDigits = 1) {
120-
return pressumeInHPa.toFixed(fractionDigits) + ' hPa'
121-
},
122-
12315
/**
12416
* Determines API urls from a base url
12517
*/
@@ -181,11 +73,14 @@ const Filters = {
18173
return weight / density / (Math.PI * (diameter / 2) ** 2) * 1000
18274
},
18375

184-
...dateTimeFormatter(
185-
(): Intl.LocalesArgument => Filters.getAllLocales(),
76+
...stringFormatters,
77+
78+
...dateTimeFormatters,
79+
80+
...dateTimeFormatters.buildDateTimeFormatters(
18681
() => store.state.config.uiSettings.general.dateFormat,
18782
() => store.state.config.uiSettings.general.timeFormat
188-
)
83+
),
18984
}
19085

19186
export const Rules = {

src/util/__tests__/date-time-formatter.spec.ts renamed to src/util/__tests__/date-time-formatters.spec.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import dateTimeFormatter from '../date-time-formatter'
1+
import { buildDateTimeFormatters } from '../date-time-formatters'
22
import { timeTravel } from '@/../tests/unit/utils'
33

4-
const createDateTimeFormatter = (dateFormatName: string = '', timeFormatName: string = '') => dateTimeFormatter(
5-
() => ['en'],
4+
const buildTestDateTimeFormatters = (dateFormatName: string = '', timeFormatName: string = '') => buildDateTimeFormatters(
65
() => dateFormatName,
76
() => timeFormatName
87
)
98

109
describe('formatCounterSeconds', () => {
11-
const dtf = createDateTimeFormatter()
10+
const dtf = buildTestDateTimeFormatters()
1211

1312
it('Formats counters as expected', () => {
1413
expect(dtf.formatCounterSeconds(10)).toBe('0m 10s')
@@ -38,7 +37,7 @@ describe('formatCounterSeconds', () => {
3837

3938
describe('formatDateTime', () => {
4039
it('Formats as human readable when in future', () => {
41-
const dtf = createDateTimeFormatter()
40+
const dtf = buildTestDateTimeFormatters()
4241

4342
const fiveMins = Date.now() + (5 * 60 * 1000)
4443

@@ -51,7 +50,7 @@ describe('formatDateTime', () => {
5150

5251
it('Formats as human readable when in past', () => {
5352
timeTravel('2022-11-19 14:32', () => {
54-
const dtf = createDateTimeFormatter()
53+
const dtf = buildTestDateTimeFormatters()
5554

5655
const fiveMins = Date.now() - (5 * 60 * 1000)
5756

@@ -69,7 +68,7 @@ describe('formatDateTime', () => {
6968

7069
it('Formats as ISO8601 correctly', () => {
7170
timeTravel('2022-11-19 14:32', () => {
72-
const dtf = createDateTimeFormatter('iso', 'iso')
71+
const dtf = buildTestDateTimeFormatters('iso', 'iso')
7372

7473
const now = Date.now()
7574

src/util/date-time-formatter.ts renamed to src/util/date-time-formatters.ts

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,55 @@
11
import { DateFormats, TimeFormats, type DateTimeFormat } from '@/globals'
2+
import i18n from '@/plugins/i18n'
23

3-
type GetLocalesFunction = () => Intl.LocalesArgument
44
type GetDefaultDateTimeFormatFunction = () => string
55

6-
const dateTimeFormatter = (getLocales: GetLocalesFunction, getDefaultDateFormat: GetDefaultDateTimeFormatFunction, getDefaultTimeFormat: GetDefaultDateTimeFormatFunction) => {
6+
export const getNavigatorLocales = () => {
7+
return navigator.languages ?? [navigator.language]
8+
}
9+
10+
export const getAllLocales = (): Intl.LocalesArgument => {
11+
return [
12+
i18n.locale,
13+
...getNavigatorLocales()
14+
]
15+
}
16+
17+
export const isToday = (value: number | string | Date) => {
18+
const date = new Date(value)
19+
const today = new Date()
20+
21+
return date.getDate() === today.getDate() &&
22+
date.getMonth() === today.getMonth() &&
23+
date.getFullYear() === today.getFullYear()
24+
}
25+
26+
export const isThisMonth = (value: number | string | Date) => {
27+
const date = new Date(value)
28+
const today = new Date()
29+
30+
return date.getMonth() === today.getMonth() &&
31+
date.getFullYear() === today.getFullYear()
32+
}
33+
34+
export const isThisYear = (value: number | string | Date) => {
35+
const date = new Date(value)
36+
const today = new Date()
37+
38+
return date.getFullYear() === today.getFullYear()
39+
}
40+
41+
export const buildDateTimeFormatters = (getDefaultDateFormat: GetDefaultDateTimeFormatFunction, getDefaultTimeFormat: GetDefaultDateTimeFormatFunction) => {
742
const instance = {
843
getDateFormat: (override?: string): DateTimeFormat => {
944
return {
10-
locales: getLocales(),
45+
locales: getAllLocales(),
1146
...DateFormats[override ?? getDefaultDateFormat()]
1247
}
1348
},
1449

1550
getTimeFormat: (override?: string): DateTimeFormat => {
1651
return {
17-
locales: getLocales(),
52+
locales: getAllLocales(),
1853
...TimeFormats[override ?? getDefaultTimeFormat()]
1954
}
2055
},
@@ -110,7 +145,7 @@ const dateTimeFormatter = (getLocales: GetLocalesFunction, getDefaultDateFormat:
110145
},
111146

112147
formatRelativeTime (value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) {
113-
const rtf = new Intl.RelativeTimeFormat(getLocales(), {
148+
const rtf = new Intl.RelativeTimeFormat(getAllLocales(), {
114149
numeric: 'auto',
115150
...options
116151
})
@@ -119,11 +154,11 @@ const dateTimeFormatter = (getLocales: GetLocalesFunction, getDefaultDateFormat:
119154
},
120155

121156
formatAbsoluteDateTime: (value: number | string | Date, options?: Intl.RelativeTimeFormatOptions) => {
122-
if (instance.isToday(value)) {
157+
if (isToday(value)) {
123158
return instance.formatTime(value, options)
124159
}
125160

126-
if (instance.isThisYear(value)) {
161+
if (isThisYear(value)) {
127162
return instance.formatDateTime(value, {
128163
year: undefined,
129164
...options
@@ -132,33 +167,7 @@ const dateTimeFormatter = (getLocales: GetLocalesFunction, getDefaultDateFormat:
132167

133168
return instance.formatDateTime(value, options)
134169
},
135-
136-
isToday: (value: number | string | Date) => {
137-
const date = new Date(value)
138-
const today = new Date()
139-
140-
return date.getDate() === today.getDate() &&
141-
date.getMonth() === today.getMonth() &&
142-
date.getFullYear() === today.getFullYear()
143-
},
144-
145-
isThisMonth: (value: number | string | Date) => {
146-
const date = new Date(value)
147-
const today = new Date()
148-
149-
return date.getMonth() === today.getMonth() &&
150-
date.getFullYear() === today.getFullYear()
151-
},
152-
153-
isThisYear: (value: number | string | Date) => {
154-
const date = new Date(value)
155-
const today = new Date()
156-
157-
return date.getFullYear() === today.getFullYear()
158-
},
159170
}
160171

161172
return instance
162173
}
163-
164-
export default dateTimeFormatter

0 commit comments

Comments
 (0)