[JS+Editor Module] Relative time

[pterhu]

Relative time

Version: v1.0
Creator: pterhu

Important

Unsupported cards:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select
• Separator

Change the entity's state to a relative time instead of timestamp. Optionally another entity can be selected.
You can also translate it into your own language in the editor, but the default language is english.

relative_time:
  translation:
    translate_second: másodperce
    translate_minute: perce
    translate_hour: órája
    translate_month: hónapja
    translate_year: éve
    translate_day: napja

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

relative_time:
  name: "Relative time"
  version: "v1.0"
  creator: "pterhu"

  supported:
    - button

  description: |
    Change the entity's state to a relative time instead of timestamp.

  code: |
    ${(() => {
        const mCfg = this.config.relative_time || {};

        const translations = {
          prefix: ((mCfg.translation && mCfg.translation.prefix) || "") + " ",
          second: (mCfg.translation && mCfg.translation.translate_second) || "",
          minute: (mCfg.translation && mCfg.translation.translate_minute) || "",
          hour: (mCfg.translation && mCfg.translation.translate_hour) || "",
          day: (mCfg.translation && mCfg.translation.translate_day) || "",
          month: (mCfg.translation && mCfg.translation.translate_month) || "",
          year: (mCfg.translation && mCfg.translation.translate_year) || "",
          plural: (mCfg.translation && mCfg.translation.plural_suffix) || "",
          suffix: (mCfg.translation && mCfg.translation.suffix) || "",
        }

        const translated = mCfg.translation && (mCfg.translation.translate_second || mCfg.translation.translate_minute ||
          mCfg.translation.translate_hour|| mCfg.translation.translate_day || mCfg.translation.translate_month || mCfg.translation.translate_year );

        function pluralize(unit, value) {
          const prefix = translations.prefix || "";
          const word = translations[unit] || unit;
          const plural = translations.plural || (translated ? "" : "s");
          const suffix = translations.suffix || (translated ? "" : " ago");
          const slice = word.slice(-1).toLowerCase() === plural.charAt(0).toLowerCase() ? 1 : 0;
          return value === 1 ? `${prefix}1 ${word} ${suffix}`.trim() : `${prefix}${value} ${word}${plural.slice(slice)} ${suffix}`.trim();
        }

        function timeSinceChange(datetimeStr) {

          const datetime = new Date(datetimeStr);
          const now = new Date();
          const secondsAgo = Math.floor((now - datetime) / 1000);

          if (secondsAgo < 0) return "in the future";

          if (secondsAgo < 60) {
            return pluralize("second", secondsAgo);
          } const minutesAgo = Math.floor(secondsAgo / 60);

          if (minutesAgo < 60) {
            return pluralize("minute", minutesAgo);
          }

          const hoursAgo = Math.floor(minutesAgo / 60);
          if (hoursAgo < 24) {
            return pluralize("hour", hoursAgo);
          }

          const daysAgo = Math.floor(hoursAgo / 24);
          if (daysAgo < 30) {
            return pluralize("day", daysAgo);
          }

          const monthsAgo = Math.floor(daysAgo / 30);
          if (monthsAgo < 12) {
            return pluralize("month", monthsAgo);
          }

          const yearsAgo = Math.floor(monthsAgo / 12);
          return pluralize("year", yearsAgo);
        }

        const state = (mCfg && mCfg.time_entity) ? hass.states[mCfg.time_entity] : hass.states[this.config.entity];
        card.querySelector('.bubble-state').innerText = timeSinceChange(state.state);
    })()}

  editor:
    - label: Time entity
      name: time_entity
      selector:
        entity:
          filter:
            device_class: timestamp
    - type: expandable
      title: Translation
      name: translation
      icon: mdi:translate-variant
      expanded: false
      schema:
        - label: Prefix
          name: prefix
          selector:
            text: {}
        - label: Translate second
          name: translate_second
          selector:
            text: {}
        - label: Translate minute
          name: translate_minute
          selector:
            text: {}
        - label: Translate hour
          name: translate_hour
          selector:
            text: {}
        - label: Translate day
          name: translate_day
          selector:
            text: {}
        - label: Translate month
          name: translate_month
          selector:
            text: {}
        - label: Translate year
          name: translate_year
          selector:
            text: {}
        - label: Plural suffix
          name: plural_suffix
          selector:
            text: {}
        - label: Suffix
          name: suffix
          selector:
            text: {}

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️