Fix timer entity display (#6849)

src/common/entity/timer_time_remaining.ts

@@ -1,7 +1,12 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import durationToSeconds from "../datetime/duration_to_seconds";
 
-export const timerTimeRemaining = (stateObj: HassEntity) => {
+export const timerTimeRemaining = (
+  stateObj: HassEntity
+): undefined | number => {
+  if (!stateObj.attributes.remaining) {
+    return undefined;
+  }
   let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
 
   if (stateObj.state === "active") {

src/dialogs/more-info/controls/more-info-timer.ts

@@ -26,15 +26,12 @@ class MoreInfoTimer extends LitElement {
     return html`
       <ha-attributes
         .stateObj=${this.stateObj}
-        .extraFilters=${"remaining"}
+        extra-filters="remaining"
       ></ha-attributes>
       <div class="actions">
         ${this.stateObj.state === "idle" || this.stateObj.state === "paused"
           ? html`
-              <mwc-button
+              <mwc-button .action=${"start"} @click=${this._handleActionClick}>
-                .action="${"start"}"
-                @click="${this._handleActionClick}"
-              >
                 ${this.hass!.localize("ui.card.timer.actions.start")}
               </mwc-button>
             `
@@ -42,7 +39,7 @@ class MoreInfoTimer extends LitElement {
         ${this.stateObj.state === "active"
           ? html`
               <mwc-button
-                .action="${"pause"}"
+                .action=${"pause"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.pause")}
@@ -52,13 +49,13 @@ class MoreInfoTimer extends LitElement {
         ${this.stateObj.state === "active" || this.stateObj.state === "paused"
           ? html`
               <mwc-button
-                .action="${"cancel"}"
+                .action=${"cancel"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.cancel")}
               </mwc-button>
               <mwc-button
-                .action="${"finish"}"
+                .action=${"finish"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.finish")}

src/panels/lovelace/entity-rows/hui-timer-entity-row.ts

@@ -2,9 +2,9 @@ import { HassEntity } from "home-assistant-js-websocket";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -125,7 +125,9 @@ class HuiTimerEntityRow extends LitElement {
     }
 
     if (stateObj.state === "idle" || this._timeRemaining === 0) {
-      return this.hass!.localize("state.timer." + stateObj.state);
+      return (
+        this.hass!.localize(`state.timer.${stateObj.state}`) || stateObj.state
+      );
     }
 
     let display = secondsToDuration(this._timeRemaining || 0);

src/state-summary/state-card-timer.js

@@ -23,7 +23,7 @@ class StateCardTimer extends PolymerElement {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <div class="state">[[_secondsToDuration(timeRemaining)]]</div>
+        <div class="state">[[_displayState(timeRemaining, stateObj)]]</div>
       </div>
     `;
   }
@@ -90,8 +90,10 @@ class StateCardTimer extends PolymerElement {
     this.timeRemaining = timerTimeRemaining(stateObj);
   }
 
-  _secondsToDuration(time) {
+  _displayState(time, stateObj) {
-    return secondsToDuration(time);
+    return time
+      ? secondsToDuration(time)
+      : this.hass.localize(`state.timer.${stateObj.state}`) || stateObj.state;
   }
 }
 customElements.define("state-card-timer", StateCardTimer);