replace home-made relative time with HA's native ha-relative-time

readme.md

@@ -48,7 +48,6 @@ Card fully supports configuration through the UI
 | direction             | number           | optional  | Render departures only in said direction                                                                    |
 | hide_departed         | bool             | optional  | If set, will hide already departured vehicles.                                                              |
 | show_departed_offset  | bool             | optional  | If set, will show some departed vehicles, which departed less than the offset minutes ago.                  |
-| adjust_departure_time | bool             | optional  | Adjust departure time taking last update into account.                                                      |
 | show_time_always      | bool             | optional  | Always present time in HH:MM form. If not set, time will be presented as "in X minutes" or "X minutes ago". |
 | show_updated          | bool             | optional  | Render the 'last updated' text                                                                              |
 | language              | string           | optional  | The texts will be rendered in this language. Can be one of `sv-SE`, `en-EN`, `fr-FR`.                       |

src/DepartureCard/DepartureCard.config.ts

@@ -26,7 +26,6 @@ export interface DepartureCardConfig extends LovelaceCardConfig {
     max_departures: number
     hide_departed: boolean
     show_departed_offeset?: number
-    adjust_departure_time?: boolean
     show_time_always?: boolean
     show_updated?: boolean
 

src/DepartureCard/DepartureCard.ts

@@ -67,13 +67,13 @@ export class HASLDepartureCard extends LitElement implements LovelaceCard {
                         departedOffset: this.config?.show_departed_offeset,
                         lastUpdated: new Date(data.last_updated),
                         lastChanged: new Date(data.last_changed),
-                        adjustTime: this.config?.adjust_departure_time,
                         alwaysTime: this.config?.show_time_always,
                     }
 
                     const maxDepartures = this.config?.max_departures || attrs.departures.length
                     const departures = attrs.departures.slice(0, maxDepartures)
                     return html`<hasl4-departure-entity
+                        .hass=${this.hass}
                         .config=${config}
                         .departures=${departures}
                         @click=${this.clickHandler(entity)}

src/DepartureCard/DepartureEntity.config.ts

@@ -12,7 +12,6 @@ export type DepartureEntityConfig = {
     lastChanged: Date
     // Departure config
     alwaysTime: boolean
-    adjustTime: boolean
 }
 
 export type PartialEntityConfig = Partial<DepartureEntityConfig>
@@ -30,5 +29,4 @@ export const DEFAULT_CONFIG: DepartureEntityConfig  = {
     lastUpdated: new Date(),
     lastChanged: new Date(),
     alwaysTime: false,
-    adjustTime: false,
 }

src/DepartureCard/DepartureEntity.ts

@@ -1,3 +1,4 @@
+import type { HomeAssistant } from "custom-card-helpers";
 import { LitElement, html, nothing, css } from 'lit'
 import { property } from 'lit/decorators'
 import { Departure, TransportType } from '../models'
@@ -13,6 +14,9 @@ const diffMinutes = (from: Date, to: Date) => {
 export class HASLDepartureEntity extends LitElement {
     static styles = styles
 
+    @property({ attribute: false })
+    public hass?: HomeAssistant
+
     @property({ type: Object })
     config: DepartureEntityConfig = DEFAULT_CONFIG
 
@@ -23,6 +27,7 @@ export class HASLDepartureEntity extends LitElement {
         const c = {...DEFAULT_CONFIG, ...this.config}
         const _ = translateTo(c.lang)
 
+        const now = new Date()
         const departures = this.departures
             // filter direction
             ?.filter((d) => {
@@ -31,10 +36,9 @@ export class HASLDepartureEntity extends LitElement {
             })
             // filter by departure time
             .filter((d) => {
-            if (!c.hideDeparted) return true;
+            if (!c.hideDeparted) return true
 
-            const diffBase = c.adjustTime ? c.lastUpdated : new Date()
-            const diff = diffMinutes(new Date(d.expected), diffBase)
+            const diff = diffMinutes(new Date(d.expected), now)
             return diff + c.departedOffset >= 0
         }) || []
 
@@ -49,14 +53,11 @@ export class HASLDepartureEntity extends LitElement {
                     }
                 )
                 : (() => {
-                    const diffBase = c.adjustTime ? c.lastUpdated : new Date()
-                    if (diffBase.getTime() === 0) return "-"
-
-                    const diff = diffMinutes(expectedAt, diffBase)
+                    const diff = diffMinutes(expectedAt, now)
                     return diff === 0
                         ? _("now")
                         : (diff > 0)
-                            ?  `${diff.toString()} ${_("min")}`
+                            ?  html`<ha-relative-time .hass=${this.hass} .datetime=${expectedAt}></ha-relative-time>`
                             : _("departed")
                 })()
 

src/DepartureCardEditor.ts

@@ -104,13 +104,6 @@ export class HASLDepartureCardEditor extends LitElement implements LovelaceCardE
         <ha-formfield .label=${_(`editor_show_time_always`)}>
           <ha-switch .disabled=${disabled} .checked=${this._config?.show_time_always} @change=${this.checkboxHandler} .configValue=${`show_time_always`}/>
         </ha-formfield>
-        <ha-formfield .label=${_(`editor_adjust_departure_time`)}>
-          <ha-switch
-            .checked=${this._config?.adjust_departure_time}
-            .disabled=${disabled || this._config?.show_time_always}
-            .configValue=${`adjust_departure_time`}
-            @change=${this.checkboxHandler}/>
-        </ha-formfield>
         <ha-formfield .label=${_(`editor_show_updated`)}>
           <ha-switch .disabled=${disabled} .checked=${this._config?.show_updated} @change=${this.checkboxHandler} .configValue=${`show_updated`}/>
         </ha-formfield>

src/translations.ts

@@ -19,7 +19,6 @@ const defaultTranslation = {
     editor_hide_departed: 'Hide already departed',
     editor_show_departed_offeset: '... but show departed number of minutes ago',
     editor_show_time_always: 'Always show departure time in HH:MM form',
-    editor_adjust_departure_time: 'Adjust departure time to update time',
     editor_show_updated: `Show 'Last Updated'`,
     editor_direction: `Direction filter`,
     editor_direction_all: `All`,
@@ -51,7 +50,6 @@ export const translations: {[lang: string]: Translation} = {
         editor_hide_departed: 'Dölj redan avgångna',
         editor_show_departed_offeset: '... men visa avgångna för antal minuter sedan',
         editor_show_time_always: 'Visa alltid avgångstid i HH:MM-form',
-        editor_adjust_departure_time: 'Justera avgångstid till uppdateringstid',
         editor_show_updated: `Visa 'Senast uppdaterad'`,
         editor_direction: `Riktning filter`,
         editor_direction_all: `Alla`,
@@ -78,7 +76,6 @@ export const translations: {[lang: string]: Translation} = {
         editor_hide_departed: 'Masquer les départs passés',
         editor_show_departed_offeset: '... mais montrer les départs depuis le nombre de minutes',
         editor_show_time_always: 'Toujours afficher l\'heure de départ en HH:MM',
-        editor_adjust_departure_time: 'Ajuster l\'heure de départ à l\'heure de mise à jour',
         editor_show_updated: `Afficher 'Mis à jour'`,
         editor_direction: `Filtre de direction`,
         editor_direction_all: `Tous`,