Skip to content

Commit 48329a3

Browse files
a-p-za-p-z
committed
make new date formatting optional
1 parent 8d15dc1 commit 48329a3

File tree

8 files changed

+77
-38
lines changed

8 files changed

+77
-38
lines changed

‎src/DatetimeCard.svelte‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,20 @@
2626
export let hass: IHass = undefined;
2727
2828
export function setConfig(config: IConfig): void {
29-
resetforward = config.reset_forward || false;
3029
entities = config.entities;
30+
flex_direction = config.flex_direction || "row";
31+
formatlabel = config.format_label || false;
3132
header = config.title !== undefined ? config.title : DEFAULT_TITLE;
33+
resetforward = config.reset_forward || false;
3234
showExpiredOnly = config.show_expired_only || false;
3335
shownames = config.show_names || false;
34-
flex_direction = config.flex_direction || "row";
3536
src = config.image !== undefined ? config.image : DEFAULT_SRC;
3637
}
3738
3839
$: entities = entities || getDefaultEntities(hass);
3940
4041
let flex_direction = "row";
42+
let formatlabel: boolean;
4143
let header: string;
4244
let resetforward: boolean;
4345
let showExpiredOnly: boolean;
@@ -66,7 +68,7 @@
6668

6769
<datetime-bar {entity} friendlyname="{entity.friendly_name}" {hass} {resetforward} {shownames} />
6870

69-
<datetime-label {entity} {resetforward} {hass} />
71+
<datetime-label {entity} {formatlabel} {hass} {resetforward}/>
7072
{/if}
7173
{/each}
7274
</div>

‎src/DatetimeCardEditor.svelte‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@
1010
export let hass: IHass = undefined;
1111
1212
export function setConfig(config: IConfig): void {
13-
draggableEntities = toDraggableEntities(config.entities);
14-
show_names = config.show_names || false;
1513
column = config.flex_direction?.includes("column");
14+
draggableEntities = toDraggableEntities(config.entities);
15+
format_label = config.format_label || false;
16+
image = config.image || "";
1617
reset_forward = config.reset_forward || false;
1718
reverse = config.flex_direction?.includes("reverse");
18-
image = config.image || "";
19-
title = config.title || "";
2019
show_expired_only = config.show_expired_only || false;
20+
show_names = config.show_names || false;
21+
title = config.title || "";
2122
}
2223
2324
$: autocompleteItems = Object.keys(hass?.states || {})
@@ -29,12 +30,13 @@
2930
const svelteDispatch = createEventDispatcher();
3031
3132
let column = false;
32-
let reset_forward = false;
33-
let reverse = false;
34-
let key = 0;
35-
let draggableEntities: DraggableEntity[] = [new DraggableEntity(newKey())];
3633
let dragDisabled = true;
34+
let draggableEntities: DraggableEntity[] = [new DraggableEntity(1)];
35+
let format_label = false;
3736
let image: string;
37+
let key = 1;
38+
let reset_forward = false;
39+
let reverse = false;
3840
let show_expired_only = false;
3941
let show_names: boolean;
4042
let title: string;
@@ -51,6 +53,7 @@
5153
const config = {
5254
entities,
5355
flex_direction,
56+
format_label,
5457
image,
5558
reset_forward,
5659
show_expired_only,
@@ -167,6 +170,11 @@
167170
dispatchConfigChanged();
168171
}
169172
173+
function updateFormatLabel(event: Event): void {
174+
format_label = (<HTMLInputElement>event.target).checked;
175+
dispatchConfigChanged();
176+
}
177+
170178
function updateResetForward(event: Event): void {
171179
reset_forward = (<HTMLInputElement>event.target).checked;
172180
dispatchConfigChanged();
@@ -211,6 +219,14 @@
211219
/>
212220
<label for="column-switch">Column</label>
213221

222+
<ha-switch
223+
id="format-label-switch"
224+
aria-label="Format label"
225+
checked={format_label}
226+
on:change={updateFormatLabel}
227+
/>
228+
<label for="format-label-switch">Format label</label>
229+
214230
<ha-switch
215231
id="reset-forward-switch"
216232
aria-label="Reset forward"
@@ -297,7 +313,7 @@
297313
>
298314
<ha-icon icon="mdi:delete"/>
299315
</ha-icon-button>
300-
{:else }
316+
{:else }
301317
<div></div>
302318
{/if}
303319
<div></div>
@@ -355,4 +371,11 @@
355371
display: flex;
356372
justify-content: flex-end;
357373
}
374+
375+
.switches {
376+
display: flex;
377+
flex-wrap: wrap;
378+
gap: 16px 6px;
379+
margin: 16px 0;
380+
}
358381
</style>

‎src/__tests__/DatetimeCardEditor.svelte.spec.ts‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,11 @@ describe('DatetimeCardEditor.svelte', () => {
6969
config: {
7070
entities: [{ friendly_name: "", id: "", max: 0 }],
7171
flex_direction: "row",
72+
format_label: false,
7273
image: "",
7374
reset_forward: false,
74-
show_names: false,
7575
show_expired_only: false,
76+
show_names: false,
7677
title: "My Datetime Card",
7778
type: "custom:datetime-card",
7879
}
@@ -88,12 +89,13 @@ describe('DatetimeCardEditor.svelte', () => {
8889
config: {
8990
entities: [{ friendly_name: "", id: "", max: 0 }],
9091
flex_direction: "row",
92+
format_label: false,
9193
image: "/local/image.png",
9294
reset_forward: false,
93-
show_names: false,
9495
show_expired_only: false,
96+
show_names: false,
97+
title: "",
9598
type: "custom:datetime-card",
96-
title: ""
9799
}
98100
});
99101
});
@@ -107,12 +109,13 @@ describe('DatetimeCardEditor.svelte', () => {
107109
config: {
108110
entities: [{ friendly_name: "", id: "", max: 0 }],
109111
flex_direction: "row",
112+
format_label: false,
110113
image: "",
111114
reset_forward: false,
112-
show_names: true,
113115
show_expired_only: false,
116+
show_names: true,
117+
title: "",
114118
type: "custom:datetime-card",
115-
title: ""
116119
}
117120
});
118121
});
@@ -126,12 +129,13 @@ describe('DatetimeCardEditor.svelte', () => {
126129
config: {
127130
entities: [{ friendly_name: "", id: "", max: 0 }],
128131
flex_direction: "column",
132+
format_label: false,
129133
image: "",
130134
reset_forward: false,
131-
show_names: false,
132135
show_expired_only: false,
136+
show_names: false,
137+
title: "",
133138
type: "custom:datetime-card",
134-
title: ""
135139
}
136140
});
137141
});
@@ -145,12 +149,13 @@ describe('DatetimeCardEditor.svelte', () => {
145149
config: {
146150
entities: [{ friendly_name: "", id: "", max: 0 }],
147151
flex_direction: "row-reverse",
152+
format_label: false,
148153
image: "",
149154
reset_forward: false,
150-
show_names: false,
151155
show_expired_only: false,
156+
show_names: false,
157+
title: "",
152158
type: "custom:datetime-card",
153-
title: ""
154159
}
155160
});
156161
});
@@ -166,12 +171,13 @@ describe('DatetimeCardEditor.svelte', () => {
166171
config: {
167172
entities: [{ friendly_name: "", id: "", max: 0 }],
168173
flex_direction: "column-reverse",
174+
format_label: false,
169175
image: "",
170176
reset_forward: false,
171-
show_names: false,
172177
show_expired_only: false,
178+
show_names: false,
179+
title: "",
173180
type: "custom:datetime-card",
174-
title: ""
175181
}
176182
});
177183
});
@@ -258,10 +264,11 @@ describe('DatetimeCardEditor.svelte', () => {
258264
config: {
259265
entities: [{ id: "input_datetime.test", "max": 10 }, entity2],
260266
flex_direction: "row",
267+
format_label: false,
261268
image: "",
262269
reset_forward: false,
263-
show_names: false,
264270
show_expired_only: false,
271+
show_names: false,
265272
title: "",
266273
type: "custom:datetime-card",
267274
}
@@ -277,10 +284,11 @@ describe('DatetimeCardEditor.svelte', () => {
277284
config: {
278285
entities: [{ "id": "input_datetime.test_1", "max": 20 }, entity2],
279286
flex_direction: "row",
287+
format_label: false,
280288
image: "",
281289
reset_forward: false,
282-
show_names: false,
283290
show_expired_only: false,
291+
show_names: false,
284292
title: "",
285293
type: "custom:datetime-card",
286294
}
@@ -302,10 +310,11 @@ describe('DatetimeCardEditor.svelte', () => {
302310
config: {
303311
entities: [{ "id": "input_datetime.test_2", "max": 20, }],
304312
flex_direction: "row",
313+
format_label: false,
305314
image: "",
306315
reset_forward: false,
307-
show_names: false,
308316
show_expired_only: false,
317+
show_names: false,
309318
title: "",
310319
type: "custom:datetime-card",
311320
}
@@ -323,10 +332,11 @@ describe('DatetimeCardEditor.svelte', () => {
323332
config: {
324333
entities: [],
325334
flex_direction: "row",
335+
format_label: false,
326336
image: "",
327337
reset_forward: false,
328-
show_names: false,
329338
show_expired_only: false,
339+
show_names: false,
330340
title: "",
331341
type: "custom:datetime-card",
332342
}

‎src/__tests__/datetime/DatetimeBar.svelte.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,16 +211,17 @@ describe('DatetimeBar.svelte', () => {
211211
});
212212

213213
describe('when hass contains the entity and state > max', () => {
214-
const hass = { states: { input_datetime_test: { attributes: { friendly_name } } } };
215214
const entity = { id: "input_datetime_test", max: 10 };
215+
const hass = { states: { input_datetime_test: { attributes: { friendly_name } } } };
216+
const resetforward = false;
216217
const shownames = true;
217218

218219
let getByTestId: any;
219220

220221
beforeEach(() => {
221222
getStateMock.mockReturnValue(11);
222223
isExpiredMock.mockReturnValue(true);
223-
const result = render(DatetimeBar, { hass, entity, shownames });
224+
const result = render(DatetimeBar, { entity, hass, resetforward, shownames });
224225
getByTestId = result.getByTestId;
225226
});
226227

‎src/__tests__/datetime/DatetimeLabel.svelte.spec.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ const getStateMock = getState as jest.MockedFunction<typeof getState>
1010
const resetDateMock = resetDate as jest.MockedFunction<typeof resetDate>
1111

1212
describe('DatetimeLabel.svelte', () => {
13-
const resetforward = false;
1413
const entity = {};
15-
const hass = { localize: (key: string, params: any) => `${params["count"]} ${key}` };
14+
const formatlabel = false;
15+
const hass = {};
16+
const resetforward = false;
1617

1718
test("when hass and entity are undefined", () => {
1819
expect(render(DatetimeLabel)).toBeDefined();
@@ -21,7 +22,7 @@ describe('DatetimeLabel.svelte', () => {
2122
test("when state is 1", () => {
2223
getStateMock.mockReturnValue(1);
2324
formatDayStringMock.mockReturnValue("1 day")
24-
const { getByTestId } = render(DatetimeLabel, { entity, hass });
25+
const { getByTestId } = render(DatetimeLabel, { entity, formatlabel, hass });
2526
expect(getByTestId("days")).toHaveTextContent("1 day");
2627
});
2728

@@ -36,7 +37,7 @@ describe('DatetimeLabel.svelte', () => {
3637

3738
test("when hold state should be reset", async () => {
3839
const event = new CustomEvent("hold");
39-
const { getByTestId } = render(DatetimeLabel, { entity, hass, resetforward });
40+
const { getByTestId } = render(DatetimeLabel, { entity, formatlabel, hass, resetforward });
4041

4142
await fireEvent(getByTestId("days"), event);
4243

‎src/datetime/DatetimeLabel.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
import {hold} from "../actions/hold";
77
88
export let entity: IEntity = undefined;
9+
export let formatlabel: boolean;
910
export let hass: IHass = undefined;
1011
export let resetforward: boolean;
1112
12-
$: label = formatDayString(getState(hass, entity));
13+
$: label = formatDayString(getState(hass, entity), formatlabel);
1314
</script>
1415

1516
<div

‎src/datetime/datetime.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import type {IEntity, IHass} from "../types";
22
import {setDatetimeServiceFactory} from "../hass";
33

4-
function formatDayString(days: number): string {
4+
function formatDayString(days: number, formatLabel: boolean): string {
55
const sign = days >= 0 ? "" : "-";
66
const absoluteDays = Math.abs(days);
77

8-
if (absoluteDays < 30) {
8+
if (!formatLabel || absoluteDays < 30) {
99
const dayString = absoluteDays !== 1 ? 'days' : 'day';
1010
return `${sign}${absoluteDays} ${dayString}`;
1111
}

‎src/types.d.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ export interface IAutocompleteItem {
55
}
66

77
export interface IConfig {
8-
readonly type: "custom:datetime-card";
98
entities?: IEntity[];
109
flex_direction: "column" | "row" | "column-reverse" | "row-reverse";
10+
format_label?: boolean;
1111
image?: string;
12+
readonly type: "custom:datetime-card";
1213
reset_forward?: boolean;
13-
title?: string;
1414
show_expired_only?: boolean;
1515
show_names: boolean;
16+
title?: string;
1617
}
1718

1819
export interface IEntity {

0 commit comments

Comments
 (0)