diff --git a/src/components/common/SystemCommands.vue b/src/components/common/SystemCommands.vue index 14ef584d0e..b09d6eb98d 100644 --- a/src/components/common/SystemCommands.vue +++ b/src/components/common/SystemCommands.vue @@ -87,11 +87,10 @@ {{ service.name }} + >{{ $filters.prettyCase(service.name) }} - {{ service.active_state }} ({{ service.sub_state }}) + {{ $filters.prettyCase(`${service.active_state} (${service.sub_state})`) }} diff --git a/src/util/__tests__/string-formatters.spec.ts b/src/util/__tests__/string-formatters.spec.ts new file mode 100644 index 0000000000..68eb77bea9 --- /dev/null +++ b/src/util/__tests__/string-formatters.spec.ts @@ -0,0 +1,14 @@ +import stringFormatters from '../string-formatters' + +describe('prettyCase', () => { + const sf = stringFormatters() + + it.each([ + ['_ hello _ _world_ ', 'Hello World'], + ['raspberry pi 3b+', 'Raspberry Pi 3b+'], + ['Raspberry Pi 3B+', 'Raspberry Pi 3B+'], + ['active (running)', 'Active (Running)'], + ])('Expects pretty case of "%s" to be "%s"', (input, expected) => { + expect(sf.prettyCase(input)).toBe(expected) + }) +}) diff --git a/src/util/string-formatters.ts b/src/util/string-formatters.ts index 00a5ad48fa..fc7d631b53 100644 --- a/src/util/string-formatters.ts +++ b/src/util/string-formatters.ts @@ -11,10 +11,9 @@ const stringFormatters = () => { const instance = { prettyCase: (value: string) => { return value - .split(/[ _]/g) - .filter(x => x) - .map(upperFirst) - .join(' ') + .replace(/[_ ]+/g, ' ') + .trim() + .replace(/\w+/g, match => upperFirst(match)) }, getPixelsString: (value: number | string | undefined | null) => {