Sub-button with time remaining

[szamfirov]

Hi there,

I'm wondering if there's a way to display a sub-button with a custom state which is coming from a timer. The tricky part is that I'd like to have only the remaining time displayed which is not an attribute of the timer - it needs to be calculated. Is it possible to do some basic calculation of time remaining before feeding it to .innerText?

The following example is just to illustrate my thought process. I'm interested in doing something like this:

  [[[
    if (hass.states['timer.my_timer'].state === "active") {
      var now = new Date();
      var finishes_at = new Date(hass.states['timer.my_timer'].attributes.finishes_at);
      var remaining = (finishes_at - now) / 1000;
      var remaining_hours = parseInt((remaining % 86400) / 3600);
      var remaining_minutes = parseInt((remaining % 3600) / 60);
      card.querySelector('.bubble-sub-button-1').innerText = "Running - " + remaining_hours + "h " + remaining_minutes + "mins";
    } else {
      card.querySelector('.bubble-sub-button-1').innerText = "Turned off";
    }
  ]]]

All of this would be quite useful when creating buttons for the washing machine and/or dryer for example.

Cheers!