Unififying translation of dates

src/localize.ts

@@ -14,6 +14,7 @@ import * as sk from './translations/sk.json';
 import * as sl from './translations/sl.json';
 import * as sv from './translations/sv.json';
 
+import type { HTMLTemplateResult } from 'lit';
 import type { HomeAssistant, LocalizeFunc } from './utils/ha';
 
 const languages: Record<string, unknown> = {
@@ -48,8 +49,10 @@ const getTranslatedString = (key: string, lang: string): string | undefined => {
   }
 };
 
+const nonNullable = <T extends unknown | null | undefined> (value: T): value is NonNullable<T> => value !== undefined && value !== null;
+
 export default function setupCustomlocalize (hass?: HomeAssistant): LocalizeFunc {
-  return function (key: string) {
+  return function (key: string, values?: Record<string, string | number | HTMLTemplateResult | null | undefined>) {
     const lang = hass?.locale.language ?? DEFAULT_LANG;
 
     let translated = getTranslatedString(key, lang);
@@ -58,6 +61,15 @@ export default function setupCustomlocalize (hass?: HomeAssistant): LocalizeFunc
       translated = getTranslatedString(key, DEFAULT_LANG);
     }
 
+    if (values && translated) {
+      for (const [ translateKey, translateValue ] of Object.entries(values)) {
+        if (nonNullable(translateKey) && nonNullable(translateValue)) {
+          // eslint-disable-next-line @typescript-eslint/no-base-to-string
+          translated = translated.replace(`<${key}>`, translateValue.toString());
+        }
+      }
+    }
+
     return translated ?? key;
   };
 }

src/utils/getDateString.ts

@@ -4,22 +4,20 @@ import { daysTill } from './daysTill';
 import { DateTime } from 'luxon';
 
 import type { TrashCardConfig } from '../cards/trash-card/trash-card-config';
-import type { HomeAssistant } from './ha';
+import type { HomeAssistant, LocalizeFunc, LocalizeKeys } from './ha';
 import type { CalendarItem } from './calendarItem';
 
 const format = (date: Date, dateStyleFormat: string, language: string) =>
   DateTime.fromJSDate(date).setLocale(language).toFormat(dateStyleFormat);
 
-const getTimeString = (customLocalize, offset: string, day?: string, startTime?: string, endTime?: string, excludeTime?: boolean, short?: boolean) => {
-  if (offset === 'today' || offset === 'tomorrow') {
-    const key = `card.trash.${offset}${startTime && !excludeTime ? '_from_till' : ''}${startTime && !excludeTime && short ? '_short' : ''}`;
+const getTimeString = (customLocalize: LocalizeFunc, offset: 'day' | 'tomorrow' | 'today', day?: string, startTime?: string, endTime?: string, excludeTime?: boolean) => {
+  const translateKey: LocalizeKeys = `card.trash.${offset}${startTime && !excludeTime ? '_from_till' : ''}`;
 
-    return `${customLocalize(`${key}`).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '')}`;
-  }
-
-  const key = `card.trash.day${startTime && !excludeTime ? '_from_till' : ''}${startTime && !excludeTime && short ? '_short' : ''}`;
-
-  return customLocalize(`${key}`).replace('<DAY>', day).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '');
+  return customLocalize(translateKey, {
+    DAY: day,
+    START: startTime ?? '',
+    END: endTime ?? ''
+  });
 };
 
 const getDateString = (
@@ -60,20 +58,31 @@ const getDateString = (
     undefined;
 
   if (stateDay === todayDay || stateDay === tomorrowDay) {
-    return getTimeString(customLocalize, stateDay === todayDay ? 'today' : 'tomorrow', undefined, startTime, endTime, excludeTime, false);
+    return getTimeString(customLocalize, stateDay === todayDay ? 'today' : 'tomorrow', undefined, startTime, endTime, excludeTime);
   }
 
   if (dayStyle === 'counter') {
-    const daysToStart = daysTill(new Date(), item.date.start);
-
-    if (daysToStart > 0) {
-      const daysLeft = daysToStart;
-
-      return `${customLocalize(`card.trash.daysleft${daysLeft > 1 ? '_more' : ''}${startTime && !excludeTime ? '_from_till' : ''}`).replace('<DAYS>', `${daysLeft}`).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '')}`;
+    if (item.date.start.getTime() > Date.now()) {
+      const daysToStart = daysTill(new Date(), item.date.start);
+      const translateKey: LocalizeKeys = `card.trash.daysleft${daysToStart > 1 ? '_more' : ''}${startTime && !excludeTime ? '_from_till' : ''}`;
+
+      return customLocalize(
+        translateKey, {
+          DAYS: daysToStart,
+          START: startTime ?? '',
+          END: endTime ?? ''
+        }
+      );
     }
     const daysToEnd = daysTill(new Date(), item.date.end);
-
-    return `${customLocalize(`card.trash.daysleftend${daysToEnd > 1 ? '_more' : ''}${startTime && !excludeTime ? '_till' : ''}`).replace('<DAYS>', `${daysToEnd}`).replace('<END>', endTime ?? '')}`;
+    const translateKey: LocalizeKeys = `card.trash.daysleftend${daysToEnd > 1 ? '_more' : ''}${startTime && !excludeTime ? '_till' : ''}`;
+
+    return customLocalize(
+      translateKey, {
+        DAYS: daysToEnd,
+        END: endTime ?? ''
+      }
+    );
   }
 
   if (dayStyle === 'weekday') {
@@ -91,7 +100,7 @@ const getDateString = (
     }) :
     format(item.date.start, dayStyleFormat ?? 'dd.mm.YYYY', hass.language);
 
-  return getTimeString(customLocalize, 'day', day, startTime, endTime, excludeTime, false);
+  return getTimeString(customLocalize, 'day', day, startTime, endTime, excludeTime);
 };
 
 export {

src/utils/ha.ts

@@ -144,5 +144,6 @@ interface HomeAssistant {
 
 export type {
   HomeAssistant,
-  LocalizeFunc
+  LocalizeFunc,
+  LocalizeKeys
 };