Add option to set the date style (#140)

* add option to configure date style of event

* update readme

* add missing translations

README.md

@@ -75,6 +75,7 @@ All the options are available in the lovelace editor but you can use `yaml` if y
 | `drop_todayevents_from`         | time                                             | `10:00:00`     | From what time to hide all-day event (Format `hh:mm:ss`) |
 | `use_summary`         | boolean                                             | `false`     | Shows  the event summary instead of matched label |
 | `next_days`         | number                                              | 2           | How many times the card will look into the future to find the next event |
+| `day_style`            | `default` or `counter` | `default`   | Option of how the date of an event should be displayed. `default` shows the date in date format and `counter` shows the number of days remaining until the event.       |
 | `settings`          | [Settings](#settings)                               | Required    | Settings to detect the kind of trash and how to display |
 
 

rollup.config.mjs

@@ -15,7 +15,8 @@ const IGNORED_FILES = [
   '@material/mwc-menu/mwc-menu.js',
   '@material/mwc-menu/mwc-menu-surface.js',
   '@material/mwc-icon/mwc-icon.js',
-  'lovelace-mushroom/src/shared/badge-icon.ts'
+  'lovelace-mushroom/src/shared/badge-icon.ts',
+  'lovelace-mushroom/src/shared/form/mushroom-select.ts'
 ];
 
 // eslint-disable-next-line no-process-env
@@ -24,7 +25,7 @@ const dev = process.env.ROLLUP_WATCH;
 const serveOptions = {
   contentBase: [ './dist' ],
   host: '0.0.0.0',
-  port: 4_000,
+  port: 5_200,
   allowCrossOrigin: true,
   headers: {
     'Access-Control-Allow-Origin': '*'

src/cards/trash-card/trash-card-config.ts

@@ -3,9 +3,16 @@ import type { ItemSettings } from '../../utils/itemSettings';
 import { layoutStruct } from 'lovelace-mushroom/src/utils/layout';
 import type { LovelaceCardConfig } from 'lovelace-mushroom/src/ha';
 import { lovelaceCardConfigStruct } from 'lovelace-mushroom/src/shared/config/lovelace-card-config';
-import { assign, boolean, integer, object, optional, string } from 'superstruct';
+import { assign, boolean, integer, literal, object, optional, string, union } from 'superstruct';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const DAYSTYLES = [
+  'default',
+  'counter'
+] as const;
 
 type EntityWithOutIcon = Omit<EntitySharedConfig, 'icon'>;
+
 export type TrashCardConfig = LovelaceCardConfig &
 EntityWithOutIcon & {
   settings?: {
@@ -25,9 +32,13 @@ EntityWithOutIcon & {
   drop_todayevents_from?: string;
   // eslint-disable-next-line @typescript-eslint/naming-convention
   use_summary?: boolean;
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  day_style?: typeof DAYSTYLES[number];
 };
 
-export const entityCardConfigStruct = assign(
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment, @typescript-eslint/prefer-ts-expect-error
+const entityCardConfigStruct = assign(
   lovelaceCardConfigStruct,
   object({
     entity: optional(string()),
@@ -45,6 +56,8 @@ export const entityCardConfigStruct = assign(
     next_days: optional(integer()),
     // eslint-disable-next-line @typescript-eslint/naming-convention
     drop_todayevents_from: optional(string()),
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    day_style: optional(union([ literal(DAYSTYLES[0]), literal(DAYSTYLES[1]) ])),
 
     settings: optional(
       object({
@@ -90,3 +103,7 @@ export const entityCardConfigStruct = assign(
     )
   })
 );
+
+export {
+  entityCardConfigStruct
+};

src/cards/trash-card/trash-card-editor.ts

@@ -43,7 +43,8 @@ const OTHER_LABELS = new Set([
   'filter_events',
   'full_size',
   'drop_todayevents_from',
-  'use_summary'
+  'use_summary',
+  'day_style'
 ]);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -147,6 +148,8 @@ const SCHEMA: HaFormSchema[] = [
       { name: 'layout', selector: { mush_layout: {}}},
       { name: 'fill_container', selector: { boolean: {}}},
       { name: 'full_size', selector: { boolean: {}}},
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      { name: 'day_style', selector: { trashcard_datestyle: {}}},
       { name: 'filter_events', selector: { boolean: {}}},
       { name: 'drop_todayevents_from',
         default: {
@@ -195,6 +198,9 @@ export class TrashCardEditor extends LitElement implements LovelaceCardEditor {
       drop_todayevents_from: '10:00:00',
       // eslint-disable-next-line @typescript-eslint/naming-convention
       next_days: 2,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      day_style: 'default',
+
       ...config
     };
   }
@@ -240,6 +246,7 @@ export class TrashCardEditor extends LitElement implements LovelaceCardEditor {
                 .data=${this.config}
                 .schema=${SCHEMA}
                 .computeLabel=${this.computeLabel}
+                .compute
                 @value-changed=${this.valueChanged}
             ></ha-form>
         `;

src/cards/trash-card/trash-card.ts

@@ -40,7 +40,7 @@ export class TrashCard extends LitElement implements LovelaceCard {
     return document.createElement(TRASH_CARD_EDITOR_NAME) as LovelaceCardEditor;
   }
 
-  public static async getStubConfig (hass: HomeAssistant): Promise<TrashCardConfig> {
+  public static async getStubConfig (hass: HomeAssistant): Promise<Partial<TrashCardConfig>> {
     const entities = Object.keys(hass.states);
 
     return {
@@ -150,8 +150,8 @@ export class TrashCard extends LitElement implements LovelaceCard {
     return Boolean(item && item.type !== 'none');
   }
 
-  protected getDateString (): string {
-    if (!this.isValidItem(this.currentItem) || !this.hass) {
+  protected getDateString (item: ValidCalendarItem): string {
+    if (!this.hass) {
       return '';
     }
 
@@ -165,17 +165,17 @@ export class TrashCard extends LitElement implements LovelaceCard {
     const todayDay = getDayFromDate(today);
     const tomorrowDay = getDayFromDate(tomorrow);
 
-    const stateDay = getDayFromDate(this.currentItem.date.start);
+    const stateDay = getDayFromDate(item.date.start);
 
-    const startTime = !this.currentItem.isWholeDayEvent ?
-      this.currentItem.date.start.toLocaleTimeString(this.hass.language, {
+    const startTime = !item.isWholeDayEvent ?
+      item.date.start.toLocaleTimeString(this.hass.language, {
         hour: 'numeric',
         minute: 'numeric'
       }) :
       undefined;
 
-    const endTime = !this.currentItem.isWholeDayEvent ?
-      this.currentItem.date.end.toLocaleTimeString(this.hass.language, {
+    const endTime = !item.isWholeDayEvent ?
+      item.date.end.toLocaleTimeString(this.hass.language, {
         hour: 'numeric',
         minute: 'numeric'
       }) :
@@ -187,7 +187,15 @@ export class TrashCard extends LitElement implements LovelaceCard {
       return `${customLocalize(`${key}`).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '')}`;
     }
 
-    const day = this.currentItem.date.start.toLocaleDateString(this.hass.language, {
+    if (this.config?.day_style === 'counter') {
+      const oneDay = 24 * 60 * 60 * 1_000;
+
+      const daysLeft = Math.round(Math.abs((Date.now() - item.date.start.getTime()) / oneDay));
+
+      return `${customLocalize(`card.trash.daysleft${daysLeft > 1 ? '_more' : ''}${startTime ? '_from_till' : ''}`).replace('<DAYS>', `${daysLeft}`).replace('<START>', startTime ?? '').replace('<END>', endTime ?? '')}`;
+    }
+
+    const day = item.date.start.toLocaleDateString(this.hass.language, {
       weekday: 'long',
       year: 'numeric',
       month: 'long',
@@ -229,7 +237,7 @@ export class TrashCard extends LitElement implements LovelaceCard {
       backgroundStyle['background-color'] = `rgba(${rgbColor}, 0.5)`;
     }
 
-    const secondary = this.getDateString();
+    const secondary = this.getDateString(this.currentItem);
 
     /* eslint-disable @typescript-eslint/naming-convention */
     return html`

src/translations/de.json

@@ -6,6 +6,12 @@
                     "default": "Standard-Farbe"
                 }
             },
+            "day_style": {
+                "values": {
+                    "default": "Datum",
+                    "counter": "Tage bis"
+                }
+            },
             "layout_picker": {
                 "values": {
                     "default": "Standard-Layout",
@@ -23,7 +29,8 @@
                 "filter_events": "Ereignisse nach Mustern filtern",
                 "drop_todayevents_from": "Ab wieviel Uhr Ganztages Ereignis ausblenden",
                 "full_size": "Karte ohne Seitenrand",
-                "use_summary": "Ereignisse Bezeichnung anstelle des Lables verwenden"
+                "use_summary": "Ereignisse Bezeichnung anstelle des Lables verwenden",
+                "day_style": "Ereigniss Zeitpunkt anzeigen als"
             },
             "trash": {
                 "organic": {
@@ -65,7 +72,11 @@
             "day": "<DAY>",
             "today_from_till": "Heute\nvon <START> bis <END>",
             "tomorrow_from_till": "Morgen\nzwischen <START> und <END>",
-            "day_from_till": "<DAY>\nzwischen <START> und <END>"
+            "day_from_till": "<DAY>\nzwischen <START> und <END>",
+            "daysleft": "in <DAYS> Tag",
+            "daysleft_more": "in <DAYS> Tagen",
+            "daysleft_from_till": "in <DAYS> Tag\nvon <START> bis <END>",
+            "daysleft_more_from_till": "in <DAYS> Tagen\nvon <START> bis <END>"
         }
     }
 }

src/translations/en.json

@@ -12,6 +12,12 @@
                     "vertical": "Vertical layout",
                     "horizontal": "Horizontal layout"
                 }
+            },
+            "day_style": {
+                "values": {
+                    "default": "Date",
+                    "counter": "days to"
+                }
             }
         },
         "card": {
@@ -23,7 +29,8 @@
                 "filter_events": "Filter events by patterns",
                 "drop_todayevents_from": "From what time to hide all-day event",
                 "full_size": "Card without margin",
-                "use_summary": "Event summary instead of label"
+                "use_summary": "Event summary instead of label",
+                "day_style": "Show event time as"
             },
             "trash": {
                 "organic": {
@@ -65,7 +72,11 @@
             "day": "<DAY>",
             "today_from_till": "Today\nfrom <START> to <END>",
             "tomorrow_from_till": "Tomorrow\nbetween <START> and <END>",
-            "day_from_till": "<DAY>\nbetween <START> and <END>"
+            "day_from_till": "<DAY>\nbetween <START> and <END>",
+            "daysleft": "in <DAYS> day",
+            "daysleft_more": "in <DAYS> days",
+            "daysleft_from_till": "in <DAYS> day\nbetween <START> and <END>",
+            "daysleft_more_from_till": "in <DAYS> days\nbetween <START> and <END>"
         }
     }
 }

src/translations/fr.json

@@ -12,6 +12,12 @@
                     "vertical": "Disposition Verticale",
                     "horizontal": "Disposition Horizontale"
                 }
+            },
+            "day_style": {
+                "values": {
+                    "default": "Date",
+                    "compteur": "jours jusqu'à"
+                }
             }
         },
         "card": {
@@ -23,7 +29,8 @@
                 "filter_events": "Filtrer les événements par motifs",
                 "drop_todayevents_from": "A partir de quelle heure masquer l'événement de toute la journée ?",
                 "full_size": "Carte sans marge",
-                "use_summary": "Résumé de l'événement au lieu de l'étiquette"
+                "use_summary": "Résumé de l'événement au lieu de l'étiquette",
+                "day_style": "Afficher l'heure de l'événement en tant que"
             },
             "trash": {
                 "organic": {
@@ -60,12 +67,16 @@
     "card": {
         "not_found": "Entité introuvable",
         "trash": {
-            "today": "aujourd'hui",
-            "tomorrow": "demain",
+            "today": "Aujourd'hui",
+            "tomorrow": "Demain",
             "day": "<DAY>",
             "today_from_till": "Aujourd'hui\nentre <START> et <END>",
             "tomorrow_from_till": "Demain\nentre <START> et <END>",
-            "day_from_till": "<DAY>\nentre <START> et <END>"
+            "day_from_till": "<DAY>\nentre <START> et <END>",
+            "daysleft": "En <DAYS> jour",
+            "daysleft_more": "Dans <DAYS> jours",
+            "daysleft_from_till": "En <DAYS> jour\nentre <START> et <END>",
+            "daysleft_more_from_till": "Dans <DAYS> jours\nentre <START> et <END>"
         }
     }
 }

src/translations/sk.json

@@ -12,6 +12,12 @@
                     "vertical": "Vertikálne rozloženie",
                     "horizontal": "Horizontálne rozloženie"
                 }
+            },
+            "day_style": {
+                "values": {
+                    "default": "Dátum",
+                    "counter": "dni do"
+                }
             }
         },
         "card": {
@@ -23,7 +29,8 @@
                 "filter_events": "Filtrovanie udalostí podľa vzorov",
                 "drop_todayevents_from": "d akého času sa má skryť celodenná udalosť",
                 "full_size": "Karta bez marže",
-                "use_summary": "Zhrnutie udalosti namiesto označenia"
+                "use_summary": "Zhrnutie udalosti namiesto označenia",
+                "day_style": "Zobraziť čas udalosti ako"
             },
             "trash": {
                 "organic": {
@@ -65,7 +72,11 @@
             "day": "<DAY>",
             "today_from_till": "Dnes\nod <START> do <END>",
             "tomorrow_from_till": "Zajtra\nod <START> do <END>",
-            "day_from_till": "<DAY>\nmedzi <START> a <END>"
+            "day_from_till": "<DAY>\nmedzi <START> a <END>",
+            "daysleft": "za <DAYS> dní",
+            "daysleft_more": "za <DAYS> dní",
+            "daysleft_from_till": "za <DAYS> dní\nmedzi <START> a <END>",
+            "daysleft_more_from_till": "za <DAYS> dní\nmedzi <START> a <END>"
         }
     }
 }

src/trashcard.ts

@@ -1,4 +1,5 @@
 import { version } from '../package.json';
+import './utils/form/ha-selector-date-style';
 
 export { TrashCard } from './cards/trash-card/trash-card';